// scripts/chat.js 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(); }); } } async function sendMessage() { const userInput = document.getElementById('user-input'); 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 = `

${userMessageText}

`; chatMessages.appendChild(userBubble); userInput.value = ''; chatMessages.scrollTop = chatMessages.scrollHeight; // 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 = '
'; 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, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: userMessageText }), }); if (!response.ok) throw new Error(`Network response was not ok. Status: ${response.status}`); // 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) { aiBubble.innerHTML = `

Error: Could not connect to the AI assistant. ${error.message}

`; } }