SSE to WebSocket

I needed to ping pong the content of the message because it was too long
for a SSE event. I swaped to websocket instead

views/chat.html

@@ -1,7 +1,7 @@
 <div class="chat-container mt-5"
      style="padding-bottom: 155px"
      hx-indicator="#textarea-control"
-     hx-ext="sse">
+     hx-ext="ws">
   <hx hx-get="/loadChat" hx-trigger="load once" hx-swap="outerHTML"></hx>
   <hx hx-get="/loadChatInput" hx-trigger="load once" hx-swap="outerHTML" id="textarea-control"></hx>
 </div>

views/layouts/main.html

@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="dependencies/russo.css">
     <link rel="stylesheet" href="/style.css">
     <script src="dependencies/htmx.js"></script>
-    <script src="dependencies/sse.js"></script>
+    <script src="dependencies/ws.js"></script>
     <script src="dependencies/sortable.js"></script>
     <script src="dependencies/pricing-table.js"></script>
 

views/partials/message-bot.html

@@ -5,9 +5,7 @@
         <!-- Left column with the icon -->
         {% if IsPlaceholder %}
 
-          <figure class="image is-48x48 message-icon"
-                  style="flex-shrink: 0"
-                  sse-swap="swapIcon-{{ ConversationAreaId }}">
+          <figure class="image is-48x48 message-icon" style="flex-shrink: 0">
             <img src="icons/bouvai2.png"
                  alt="User Image"
                  id="selectedIcon-{{ ConversationAreaId }}">
@@ -83,8 +81,7 @@
           <div class="message-content"
                id="content-{{ ConversationAreaId }}"
                style="width: 100%;
-                      overflow-y: hidden"
-               sse-swap="swapContent-{{ ConversationAreaId }}">
+                      overflow-y: hidden">
             <hx hx-trigger="load" hx-get="/generateMultipleMessages" id="generate-multiple-messages"></hx>
             <div class='message-header'>
               <p>Waiting...</p>
@@ -109,9 +106,7 @@
           {% for selectedLLM in SelectedLLMs %}
             <button disable
                     class="button is-small is-primary message-button is-outlined mr-1"
-                    sse-swap="swapSelectionBtn-{{ selectedLLM.ID.String() }}"
-                    hx-swap="outerHTML"
-                    hx-target="this">
+                    id="selection-btn-{{ selectedLLM.ID.String() }}-{{ ConversationAreaId }}">
               <span class="icon is-small">
                 <!--img src="icons/{{ selectedLLM.Company }}.png" alt="{{ selectedLLM.Name }}"
                             style="max-height: 100%; max-width: 100%;"-->

views/partials/model-selection-btn.html

@@ -1,4 +1,5 @@
 <button class="button is-small is-primary message-button is-outlined mr-1"
+        id="selection-btn-{{ message.LLMID }}-{{ ConversationAreaId }}"
         hx-get="/messageContent?id={{ message.Id }}"
         hx-target="#content-{{ ConversationAreaId }}"
         onclick="updateIcon('{{ message.Icon }}', '{{ ConversationAreaId }}')"

views/partials/popover-settings.html

@@ -145,7 +145,7 @@
                         type="button"
                         class="button is-small {% if not AnyExists %}is-danger{% endif %}">
                   <span class="icon is-small">
-                    <i class="fa-solid fa-chevron-down"></i>
+                    <i id="toggle-keys-icon" class="fa-solid fa-chevron-down"></i>
                   </span>
                 </button>
               </p>
@@ -223,7 +223,7 @@
         // Do not take the id="save-field"
         var fields = document.querySelectorAll("#api-keys-form .field.has-addons");
         var saveButton = document.getElementById('save-keys-button');
-        var toggleIcon = this.querySelector('i');
+        var toggleIcon = document.getElementById('toggle-keys-icon');
 
         fields.forEach(function (field) {
             if (field.id == "save-field") return;

views/partials/welcome-chat.html

@@ -28,7 +28,7 @@
 
 <p>For example, a response from GPT-4 Omni can be used by Claude Haiku.</p>
 
-<a class="button is-primary mt-2 mb-2" href="/signin">Login</a>
+<a class="button is-primary mt-2 mb-2" href="/signin">Try JADE now for free!</a>
 
 <br />
 <br />