Update scripts/chat.js

scripts/chat.js

@@ -1,67 +1,112 @@
-// scripts/chat.js
+// --- Helper function for quick prompts ---
+function quickPrompt(prompt) {
+    const userInput = document.getElementById('user-input');
+    if (userInput) {
+        userInput.value = prompt;
+        sendMessage();
+    } else {
+        window.logToScreen('ERROR: User input field not found for quickPrompt.');
+    }
+}
 
+// --- Main function to send messages to the AI ---
 async function sendMessage() {
     const userInput = document.getElementById('user-input');
     const chatMessages = document.getElementById('chat-messages');
 
-    if (userInput.value.trim() === '') return;
-
-    // ... (rest of the code to add user message to chat) ...
-    const userMessage = document.createElement('div');
-    userMessage.className = 'chat-bubble user-bubble p-4 w-3/4 ml-auto mb-4 fade-in';
-    userMessage.innerHTML = `<p>${userInput.value}</p>`;
-    chatMessages.appendChild(userMessage);
+    if (!userInput || !chatMessages) {
+        window.logToScreen('ERROR: Cannot find chat UI elements.');
+        return;
+    }
+    
+    const userMessageText = userInput.value.trim();
+    if (userMessageText === '') return;
 
-    const userMessageText = userInput.value;
+    // 1. Add user's message to the chat window
+    const userBubble = document.createElement('div');
+    userBubble.className = 'chat-bubble user-bubble p-4 w-3/4 ml-auto mb-4 fade-in';
+    userBubble.innerHTML = `<p>${userMessageText}</p>`;
+    chatMessages.appendChild(userBubble);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
     userInput.value = '';
 
-    // --- Start Debugging ---
+    // 2. Prepare the AI's response bubble (will be filled in as the stream arrives)
+    const aiBubble = document.createElement('div');
+    aiBubble.className = 'chat-bubble ai-bubble p-4 w-3/4 fade-in';
+    const aiParagraph = document.createElement('p');
+    aiBubble.appendChild(aiParagraph);
+    chatMessages.appendChild(aiBubble);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+
+
+    // 3. Start the fetch process and log everything
     window.logToScreen('sendMessage triggered. Preparing to fetch...');
 
     try {
-        const workerUrl = 'https://YOUR-WORKER-NAME.workers.dev'; // <-- Make sure this URL is correct!
+        // IMPORTANT: Replace this with your actual Cloudflare Worker URL
+        const workerUrl = 'https://stream-ai-backend.your-username.workers.dev'; 
         window.logToScreen(`Fetching from: ${workerUrl}`);
 
         const response = await fetch(workerUrl, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            headers: {
+                'Content-Type': 'application/json',
+            },
             body: JSON.stringify({ prompt: userMessageText }),
         });
 
         window.logToScreen(`Fetch response received. Status: ${response.status} ${response.statusText}`);
 
         if (!response.ok) {
-            window.logToScreen('Response was not OK. See status above.');
             const errorText = await response.text();
             window.logToScreen(`Error response body: ${errorText}`);
             throw new Error(`Network response was not ok: ${response.statusText}`);
         }
         
-        // ... (rest of the code to handle the streaming response) ...
+        // 4. Handle the streaming response
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
-        let aiResponseText = '';
+        window.logToScreen('Stream starting...');
+
         while (true) {
             const { done, value } = await reader.read();
-            if (done) break;
+            if (done) {
+                window.logToScreen('Stream finished.');
+                break;
+            }
             const chunk = decoder.decode(value, { stream: true });
-            aiResponseText += chunk;
+            aiParagraph.textContent += chunk; // Append chunk to the AI's paragraph
+            chatMessages.scrollTop = chatMessages.scrollHeight; // Keep scrolling
         }
-        window.logToScreen('Stream finished.');
-
-        // Add final AI response to chat
-        const aiMessage = document.createElement('div');
-        aiMessage.className = 'chat-bubble ai-bubble p-4 w-3/4 fade-in';
-        aiMessage.innerHTML = `<p>${aiResponseText}</p>`;
-        chatMessages.appendChild(aiMessage);
         
     } catch (error) {
+        // Log the error and display a message in the UI
         window.logToScreen(`FETCH FAILED: ${error.message}`);
-        // Display a user-friendly error in the chat
-        const errorMessage = document.createElement('div');
-        errorMessage.className = 'chat-bubble ai-bubble p-4 w-3/4 fade-in';
-        errorMessage.innerHTML = `<p class="text-red-500">Sorry, an error occurred. Check the debug console for details.</p>`;
-        chatMessages.appendChild(errorMessage);
+        aiParagraph.textContent = "Sorry, an error occurred. Check the debug console for details.";
+        aiParagraph.style.color = 'red';
+    }
+}
+
+
+// --- Initialization function for the chat module ---
+export function initChat() {
+    const sendBtn = document.getElementById('send-btn');
+    const userInput = document.getElementById('user-input');
+
+    if (sendBtn && userInput) {
+        sendBtn.addEventListener('click', sendMessage);
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+
+        // Make quickPrompt globally accessible for the inline HTML onclick attributes
+        window.quickPrompt = quickPrompt;
+    } else {
+        // Use the logger in case the elements don't exist
+        if (window.logToScreen) {
+            window.logToScreen("ERROR: Could not find 'send-btn' or 'user-input' to initialize chat.");
+        }
     }
-    // --- End Debugging ---
 }