Barely working per request response

views/chat.html

@@ -18,8 +18,13 @@
                         <i class="fa-solid fa-broom"></i>
                     </span>
                 </button>
+                <button type="submit" class="button is-small" hx-get="/test" hx-swap="beforeend">
+                    <span class="icon">
+                        <i class="fa-solid fa-vials"></i>
+                    </span>
+                </button>
                 <button disabled type="submit" class="send-button button is-primary is-small"
-                    hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
+                    hx-get="/generateMultipleMessages" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
                     id="chat-input-send-btn" class="chat-input" hx-include="[name='message'], [name^='model-check-']"
                     onclick="clearTextArea()">
                     <span class="icon">

views/layouts/main.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="dark" lang="en">
 
 <head>
     <meta charset="utf-8">
@@ -11,11 +11,12 @@
 
     <link rel="stylesheet" href="/animations.css">
     <link rel="stylesheet" href="/style.css">
-</head>
 
-<body>
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/sse.js"></script>
+</head>
+
+<body hx-ext="sse" sse-connect="/sse">
 
     {{embed}}
 

views/partials/message-bot.html

@@ -1,24 +1,33 @@
 <div class="message-bot mt-3">
     <div class="columns is-mobile">
         <div class="column is-narrow" id="icon-column">
+            <!-- Left column with the icon -->
+            {% if IsPlaceholder %}
+
+            <figure class="image is-48x48" style="flex-shrink: 0;" id="selectedIcon-{{ ConversationAreaId }}"
+                sse-swap="swapIcon-{{ ConversationAreaId }}">
+                <img src="icons/bouvai2.png" alt="User Image">
+            </figure>
+
+            {% else %}
+
             {% for message in Messages %}
             {% if not message.Hidden %}
-            <figure class="image is-48x48" style="flex-shrink: 0;">
-                <img id="selectedIcon-{{ ConversationAreaId }}" src="icons/{{ message.Icon }}.png" alt="User Image">
+            <figure class="image is-48x48" style="flex-shrink: 0;" id="selectedIcon-{{ ConversationAreaId }}"
+                sse-swap="swapIcon-{{ ConversationAreaId }}">
+                <img src="icons/{{ message.Icon }}.png" alt="User Image">
             </figure>
             {% endif %}
             {% endfor %}
-            {% if IsPlaceholder %}
-            <figure class="image is-48x48" style="flex-shrink: 0;">
-                <img src="icons/bouvai2.png" alt="User Image">
-            </figure>
+
             {% endif %}
         </div>
 
         <div class="column" id="content-column">
             {% if not IsPlaceholder %}
             <div class="is-flex is-align-items-start">
-                <div class="message-content" id="content-{{ ConversationAreaId }}">
+                <div class="message-content" id="content-{{ ConversationAreaId }}"
+                    sse-swap="swapContent-{{ ConversationAreaId }}">
                     {% for message in Messages %}
                     {% if not message.Hidden %}
                     <div class="message-header">
@@ -55,21 +64,34 @@
                 </button>
                 {% endfor %}
                 {% endif %}
+            </div>
 
-                {% elif IsPlaceholder %}
-                <hx hx-get="/generateMultipleMessages" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner"
-                    hx-target="#chat-container">
-                </hx>
-
-                <div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
+            {% elif IsPlaceholder %}
+            <div class="is-flex is-align-items-start">
+                <div class="message-content" id="content-{{ ConversationAreaId }}"
+                    sse-swap="swapContent-{{ ConversationAreaId }}">
                     <div class="message-body">
                         <div class="content">
-                            <img id="spinner" class="htmx-indicator" src="/puff.svg" />
+                            <img src="/puff.svg" />
                         </div>
                     </div>
                 </div>
-                {% endif %}
             </div>
+
+            <div class="is-flex is-justify-content mt-2">
+                {% for selectedModel in selectedModels %}
+                <button disable class="button is-small is-primary message-button is-outlined mr-1"
+                    sse-swap="swapSelectionBtn-{{ selectedModel.ID }}" hx-swap="outerHTML">
+                    <span class="icon is-small">
+                        <!--img src="icons/{{ selectedModel.Icon }}.png" alt="{{ selectedModel.Name }}"
+                            style="max-height: 100%; max-width: 100%;"-->
+                        <img src="/puff.svg" />
+                    </span>
+                </button>
+                {% endfor %}
+            </div>
+            {% endif %}
         </div>
     </div>
+</div>
 </div>

views/partials/model-selection-btn.html

@@ -0,0 +1,7 @@
+<button class="button is-small is-primary message-button is-outlined mr-1" hx-get="/messageContent?id={{ message.Id }}"
+    hx-target="#content-{{ ConversationAreaId }}" onclick="updateIcon('{{ message.Icon }}', '{{ ConversationAreaId }}')"
+    title="{{ message.Name }}">
+    <span class="icon is-small">
+        <img src="icons/{{ message.Icon }}.png" alt="{{ message.Name }}" style="max-height: 100%; max-width: 100%;">
+    </span>
+</button>