Update scripts/chat.js

scripts/chat.js

@@ -2,17 +2,38 @@
 
 export function initChat() {
     const sendBtn = document.getElementById('send-btn');
-    if (sendBtn) {
+    const userInput = document.getElementById('user-input');
+    if (sendBtn && userInput) {
         sendBtn.addEventListener('click', sendMessage);
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
     }
 }
 
 async function sendMessage() {
     const userInput = document.getElementById('user-input');
-    const userMessageText = userInput.value;
+    const chatMessages = document.getElementById('chat-messages');
+    const userMessageText = userInput.value.trim();
+    if (userMessageText === '') return;
+
+    // 1. Add styled user bubble
+    const userBubble = document.createElement('div');
+    userBubble.className = 'chat-bubble user-bubble p-4 fade-in';
+    userBubble.innerHTML = `<p>${userMessageText}</p>`;
+    chatMessages.appendChild(userBubble);
+    userInput.value = '';
+    chatMessages.scrollTop = chatMessages.scrollHeight;
 
-    // IMPORTANT: Replace this with your actual Cloudflare Worker URL
-    const workerUrl = 'https://stream-ai-backend.smplushypermedia.workers.dev/';
+    // 2. Add styled AI bubble with a typing indicator
+    const aiBubble = document.createElement('div');
+    aiBubble.className = 'chat-bubble ai-bubble p-4 fade-in';
+    aiBubble.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>';
+    chatMessages.appendChild(aiBubble);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+
+    // 3. Fetch the real response
+    const workerUrl = 'https://YOUR-WORKER-NAME.workers.dev'; // <-- Make sure your URL is here
 
     try {
         const response = await fetch(workerUrl, {
@@ -20,19 +41,22 @@ async function sendMessage() {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ prompt: userMessageText }),
         });
+        if (!response.ok) throw new Error(`Network response was not ok. Status: ${response.status}`);
 
-        if (!response.ok) {
-            throw new Error(`Network response was not ok. Status: ${response.status}`);
-        }
-        
-        const aiResponseText = await response.text();
-        const chatMessages = document.getElementById('chat-messages');
-        const aiBubble = document.createElement('div');
-        aiBubble.className = 'chat-bubble ai-bubble';
-        aiBubble.innerHTML = `<p>${aiResponseText}</p>`;
-        chatMessages.appendChild(aiBubble);
+        // 4. Handle streaming response
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        aiBubble.innerHTML = ''; // Clear the typing indicator
+        const aiParagraph = document.createElement('p');
+        aiBubble.appendChild(aiParagraph);
 
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            aiParagraph.textContent += decoder.decode(value, { stream: true });
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
     } catch (error) {
-        alert(`AI FETCH FAILED: ${error.message}`);
+        aiBubble.innerHTML = `<p class="text-red-400">Error: Could not connect to the AI assistant. ${error.message}</p>`;
     }
 }