Better input

views/partials/conversationsPopover.html

@@ -0,0 +1,27 @@
+<div class="dropdown is-hoverable is-up">
+    <div class="dropdown-trigger">
+        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
+            <span>Conversations</span>
+        </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
+        <div class="dropdown-content">
+            <div class="dropdown-item">
+                {% for conversation in Conversations %}
+                <div class="content">
+                    <h5 class="subtitle is-5">{{ CompanyInfo.Name }}</h5>
+                    {% for ModelInfo in CompanyInfo.ModelInfos %}
+                    <div class="field">
+                        <label class="checkbox">
+                            <input {%if ModelInfo.ID in CheckedModels %}checked{% endif %} type="checkbox"
+                                name="model-check-{{ ModelInfo.ID }}" value="{{ ModelInfo.ID }}" />
+                            {{ ModelInfo.Name }}
+                        </label>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>

views/partials/message-bot.html

@@ -5,7 +5,7 @@
                 {% for message in Messages %}
                 <div class='row is-full mt-1 is-vcentered'>
                     <a href="#" hx-get="/messageContent?id={{ message.Id }}" class="is-clickable"
-                        hx-target="#content-text-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
+                        hx-target="#content-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
                         <figure class=" image is-48x48 mr-2" style="flex-shrink: 0;">
                             <img src="icons/{{ message.Icon }}.png" alt="User Image" if {% if message.Hidden %}
                                 style="filter: grayscale(100%);" {% endif %}>
@@ -29,12 +29,14 @@
                 {% for message in Messages %}
                 {% if not message.Hidden %}
                 <!-- Name of the model as title -->
-                <div class="message-content">
+                <div class="message-content" id="content-{{ ConversationAreaId }}">
                     <div class="message-header">
-                        <p>Hello World</p>
+                        <p>
+                            {{ message.Name }}
+                        </p>
                     </div>
                     <div class="message-body">
-                        <ct class="content" id="content-text-{{ ConversationAreaId }}">
+                        <ct class="content" style="overflow-x: auto;">
                             {{ message.Content | safe }}
                         </ct>
                     </div>
@@ -74,11 +76,6 @@
                 }
             });
             rowElement.parentNode.insertBefore(rowElement, rowElement.parentNode.firstChild);
-        } else {
-            imgElement.style.filter = 'grayscale(100%)';
-            allImages.forEach(function (img) {
-                img.style.filter = 'grayscale(100%)';
-            });
         }
     }
 </script>

views/partials/modelsPopover.html

@@ -1,6 +1,6 @@
 <div class="dropdown is-hoverable is-up">
     <div class="dropdown-trigger">
-        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
+        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
             <span>Models</span>
         </button>
     </div>

views/partials/navbar.html

@@ -1,18 +1,14 @@
 <nav class="navbar is-primary">
     <div class="navbar-brand">
-        <a class="navbar-item" href="https://www.bouvai.com">
-            <img src="/icons/bouvai.png">
+        <a class="navbar-item" href="/">
+            <svg width="640" height="160" viewBox="0 0 640 180" fill="none">
+                <text x="50%" y="50%" dy=".35em" text-anchor="middle">
+                    JADE
+                </text>
+            </svg>
         </a>
     </div>
     <div class="navbar-menu">
-        <div class="navbar-start">
-            <a class="navbar-item" href="/">
-                Home
-            </a>
-            <a class="navbar-item" href="/chat">
-                Chat
-            </a>
-        </div>
         <div class="navbar-end">
             <img id="spinner" class="htmx-indicator" src="/puff.svg" />
         </div>