From c2dcb6c4bf86ce142d30bc5dcbce5085a9ad73d3 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Sat, 23 Nov 2024 07:30:25 -0500
Subject: [PATCH] more html for the new utility belt

u are batman now.

	modified:   templates/base.html
	modified:   templates/chat.html
---
 templates/base.html |  4 ++++
 templates/chat.html | 38 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/templates/base.html b/templates/base.html
index ec1373c..b33bae1 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -240,6 +240,10 @@
         background-color: #555; /* Darken on hover */
     }
 
+    .utility-belt {
+        padding: 10px;
+    }
+
     /* Media query for mobile devices */
     @media (max-width: 768px) {
         .main-container {
diff --git a/templates/chat.html b/templates/chat.html
index 3698d75..59ddbab 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -13,12 +13,48 @@
         </form>
     </div>
 
-    <div>
+    <div class="utility-belt">
         <div class="download-links">
             History
             <a href="/download_chat_history?room_name={{ room_name }}" download="{{ room_name }}.json">JSON</a> or
             <a href="/download_chat_history_md?room_name={{ room_name }}" download="{{ room_name }}.md">Markdown</a>
         </div>
+        <br>
+        <div>
+            <label for="model-select">Model</label>
+            <select id="model-select">
+                <option value="None">None</option>
+                <option value="gemini-flash">gemini-flash</option>
+                <option value="gemini-flash-8b">gemini-flash-8b</option>
+                <option value="gemini-pro">gemini-pro</option>
+                <option value="grok-beta">grok-beta</option>
+                <option value="vllm/hermes-llama-3">vllm/hermes-llama-3</option>
+                <option value="gpt-4">gpt-4</option>
+                <option value="gpt-4o-2024-08-06">gpt-4o-2024-08-06</option>
+                <option value="gpt-mini">gpt-mini</option>
+                <option value="gpt-o1-mini">gpt-o1-mini</option>
+                <option value="claude-haiku">claude-haiku</option>
+                <option value="claude-sonnet">claude-sonnet</option>
+                <option value="claude-opus">claude-opus</option>
+            </select>
+        </div>
+        <div>
+            <label for="voice-select">Voice</label>
+            <select id="voice-select">
+                <option value="onyx">Onyx</option>
+                <option value="alloy">Alloy</option>
+                <option value="echo">Echo</option>
+                <option value="fable">Fable</option>
+                <option value="nova">Nova</option>
+                <option value="shimmer">Shimmer</option>
+            </select>
+        </div>
+        <div>
+            <h3>Active Users</h3>
+            <ul id="active-users">
+                <!-- Active users will be dynamically populated here -->
+            </ul>
+        </div>
     </div>
 
 <script>