Instantly display placeholder when click on send using wasm

views/layouts/main.html

@@ -17,6 +17,18 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
 
     <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
+
+    <script src="wasm_exec.js"></script>
+    <script>
+        const go = new Go();
+        const wasmModule = WebAssembly.instantiateStreaming(fetch('jade.wasm'),
+            go.importObject);
+
+        WebAssembly.instantiateStreaming(fetch('jade.wasm'),
+            go.importObject).then((result) => {
+                go.run(result.instance);
+            });
+    </script>
 </head>
 
 <body hx-ext="sse" sse-connect="/sse">
@@ -145,6 +157,44 @@
         }
     </script>
 
+    <script>
+        // Wait for a message-bot to appear in the chat and if so, delete the placeholder
+        // Select the node that will be observed for mutations
+        const targetNode = document.body;
+
+        // Options for the observer (which mutations to observe)
+        const config = { childList: true, subtree: true };
+
+        // Callback function to execute when mutations are observed
+        const callback = function (mutationsList, observer) {
+            for (let mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    for (let node of mutation.addedNodes) {
+                        if (node.nodeType === 1 && node.classList.contains('message-bot') && !node.classList.contains('message-placeholder')) {
+                            // A new element with the class "message-bot" has been added
+                            // Remove the placeholder
+                            const botPlaceholder = document.querySelector('.message-bot.message-placeholder');
+                            if (botPlaceholder) {
+                                botPlaceholder.remove();
+                            }
+                            const userPlaceholder = document.querySelector('.message-user.message-placeholder');
+                            if (userPlaceholder) {
+                                userPlaceholder.remove();
+                            }
+                        }
+                    }
+                }
+            }
+        };
+
+        // Create an observer instance linked to the callback function
+        const observer = new MutationObserver(callback);
+
+        // Start observing the target node for configured mutations
+        observer.observe(targetNode, config);
+
+    </script>
+
 </body>
 
 </html>

views/partials/chat-input.html

@@ -12,18 +12,6 @@
             <hx hx-get="/loadUsageKPI" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
             <hx hx-get="/loadConversationSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
             <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
-            <!--button {% if not IsLogin or not HaveKey %}style="display: none;" {%endif%}
-                    class="button is-small to-reduce-opacity" onclick="clearTextArea()" id="clear-button"
-                    hx-post="/clearChat" hx-swap="outerHTML" hx-target="#chat-container" title="Clear chat">
-                    <span class="icon">
-                        <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="/generatePlaceholder"
                 hx-swap="beforeend" hx-target="#chat-messages" id="chat-input-send-btn" class="chat-input"
                 hx-include="[name='message']" hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}"
@@ -95,6 +83,10 @@
     }
 
     function onClickSendButton() {
+        // TODO: Add the message placeholder using WASM
+        messagesPlaceholderHTML = generateMessagePlaceholder(textarea.value);
+        document.getElementById('chat-messages').insertAdjacentHTML('beforeend', messagesPlaceholderHTML);
+
         setTimeout(function () {
             textarea.value = '';
             toggleSendButton();

views/partials/popover-conversation.html

@@ -71,6 +71,7 @@
             </div>
         </div>
     </div>
+
     <script>
         function findSelectedConversationID() {
             return document.getElementsByClassName('icon-conv selected')[0].getAttribute('data-id');