Update scripts/chat.js

scripts/chat.js

@@ -1,43 +1,67 @@
 // scripts/chat.js
 
-const getElement = (id) => document.getElementById(id);
-
 async function sendMessage() {
-    const userInput = getElement('user-input');
-    const chatMessages = getElement('chat-messages');
+    const userInput = document.getElementById('user-input');
+    const chatMessages = document.getElementById('chat-messages');
 
     if (userInput.value.trim() === '') return;
 
-    // ... (keep the complete sendMessage logic from the previous response here)
-    // ... (This includes adding user message, creating AI bubble, and the fetch call)
-}
-
-function quickPrompt(prompt) {
-    getElement('user-input').value = prompt;
-    sendMessage();
-}
-
-function updateRecommendationsFromAI(aiResponse) {
-    // This is a placeholder. You can enhance this logic.
-    let filter = 'all';
-    if (aiResponse.includes('comedy')) filter = 'comedy';
-    else if (aiResponse.includes('thriller')) filter = 'thriller';
-    else if (aiResponse.includes('romance')) filter = 'romance';
-    
-    // In a truly modular system, this would emit an event that ui.js listens for.
-    // For simplicity, we'll call a function defined in the global scope (see app.js).
-    window.loadRecommendations(filter);
-}
-
-
-export function initChat() {
-    getElement('send-btn').addEventListener('click', sendMessage);
-    getElement('user-input').addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
-            sendMessage();
+    // ... (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);
+
+    const userMessageText = userInput.value;
+    userInput.value = '';
+
+    // --- Start Debugging ---
+    window.logToScreen('sendMessage triggered. Preparing to fetch...');
+
+    try {
+        const workerUrl = 'https://YOUR-WORKER-NAME.workers.dev'; // <-- Make sure this URL is correct!
+        window.logToScreen(`Fetching from: ${workerUrl}`);
+
+        const response = await fetch(workerUrl, {
+            method: 'POST',
+            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) ...
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let aiResponseText = '';
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value, { stream: true });
+            aiResponseText += chunk;
         }
-    });
+        window.logToScreen('Stream finished.');
 
-    // Make quickPrompt globally accessible for the inline HTML onclick attributes
-    window.quickPrompt = quickPrompt;
+        // 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) {
+        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);
+    }
+    // --- End Debugging ---
 }