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>