privateuserh commited on
Commit
2f8c388
·
verified ·
1 Parent(s): dd5fe74

Update scripts/chat.js

Browse files
Files changed (1) hide show
  1. scripts/chat.js +26 -11
scripts/chat.js CHANGED
@@ -1,4 +1,12 @@
1
- // scripts/chat.js
 
 
 
 
 
 
 
 
2
 
3
  export function initChat() {
4
  const sendBtn = document.getElementById('send-btn');
@@ -11,54 +19,61 @@ export function initChat() {
11
  }
12
  }
13
 
14
- // In scripts/chat.js
15
-
16
  async function sendMessage() {
17
  const userInput = document.getElementById('user-input');
18
  const chatMessages = document.getElementById('chat-messages');
19
  const userMessageText = userInput.value.trim();
20
  if (userMessageText === '') return;
21
 
22
- // Create and add the user's message bubble
23
  const userBubble = document.createElement('div');
24
  userBubble.className = 'chat-bubble user-bubble p-4 fade-in';
25
  userBubble.innerHTML = `<p>${userMessageText}</p>`;
26
  chatMessages.appendChild(userBubble);
 
 
 
 
27
  userInput.value = '';
28
  chatMessages.scrollTop = chatMessages.scrollHeight;
29
 
30
- // Create the AI's response bubble
31
  const aiBubble = document.createElement('div');
32
  aiBubble.className = 'chat-bubble ai-bubble p-4 fade-in';
33
  aiBubble.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>';
34
  chatMessages.appendChild(aiBubble);
35
  chatMessages.scrollTop = chatMessages.scrollHeight;
36
 
37
- // --- THIS IS THE CRUCIAL UPDATE ---
38
- // This now points to your new worker's chat endpoint.
39
  const workerUrl = 'https://streamai-backend-v2.smplushypermedia.workers.dev/api/chat';
40
 
41
  try {
42
  const response = await fetch(workerUrl, {
43
  method: 'POST',
44
  headers: { 'Content-Type': 'application/json' },
45
- body: JSON.stringify({ prompt: userMessageText }),
 
46
  });
47
  if (!response.ok) throw new Error(`Network response was not ok. Status: ${response.status}`);
48
 
49
- // Handle the streaming response from Gemini
50
  const reader = response.body.getReader();
51
  const decoder = new TextDecoder();
52
  aiBubble.innerHTML = ''; // Clear the typing indicator
53
  const aiParagraph = document.createElement('p');
54
  aiBubble.appendChild(aiParagraph);
55
-
 
56
  while (true) {
57
  const { done, value } = await reader.read();
58
  if (done) break;
59
- aiParagraph.textContent += decoder.decode(value, { stream: true });
 
 
60
  chatMessages.scrollTop = chatMessages.scrollHeight;
61
  }
 
 
 
 
62
  } catch (error) {
63
  aiBubble.innerHTML = `<p class="text-red-400">Error: Could not connect to the AI assistant. ${error.message}</p>`;
64
  }
 
1
+ // scripts/chat.js -- Final version with conversation history
2
+
3
+ // This array will store the entire conversation history.
4
+ let conversationHistory = [
5
+ {
6
+ role: 'system',
7
+ content: 'You are a friendly and helpful streaming assistant for an app called StreamAI. A user is asking a question. Keep your responses concise and focused on recommending movies, TV shows, or streaming content.'
8
+ }
9
+ ];
10
 
11
  export function initChat() {
12
  const sendBtn = document.getElementById('send-btn');
 
19
  }
20
  }
21
 
 
 
22
  async function sendMessage() {
23
  const userInput = document.getElementById('user-input');
24
  const chatMessages = document.getElementById('chat-messages');
25
  const userMessageText = userInput.value.trim();
26
  if (userMessageText === '') return;
27
 
28
+ // Add user message to the UI
29
  const userBubble = document.createElement('div');
30
  userBubble.className = 'chat-bubble user-bubble p-4 fade-in';
31
  userBubble.innerHTML = `<p>${userMessageText}</p>`;
32
  chatMessages.appendChild(userBubble);
33
+
34
+ // Add user message to our history array
35
+ conversationHistory.push({ role: 'user', content: userMessageText });
36
+
37
  userInput.value = '';
38
  chatMessages.scrollTop = chatMessages.scrollHeight;
39
 
40
+ // Add a placeholder for the AI's response
41
  const aiBubble = document.createElement('div');
42
  aiBubble.className = 'chat-bubble ai-bubble p-4 fade-in';
43
  aiBubble.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>';
44
  chatMessages.appendChild(aiBubble);
45
  chatMessages.scrollTop = chatMessages.scrollHeight;
46
 
 
 
47
  const workerUrl = 'https://streamai-backend-v2.smplushypermedia.workers.dev/api/chat';
48
 
49
  try {
50
  const response = await fetch(workerUrl, {
51
  method: 'POST',
52
  headers: { 'Content-Type': 'application/json' },
53
+ // Send the ENTIRE conversation history to the worker
54
+ body: JSON.stringify({ messages: conversationHistory }),
55
  });
56
  if (!response.ok) throw new Error(`Network response was not ok. Status: ${response.status}`);
57
 
 
58
  const reader = response.body.getReader();
59
  const decoder = new TextDecoder();
60
  aiBubble.innerHTML = ''; // Clear the typing indicator
61
  const aiParagraph = document.createElement('p');
62
  aiBubble.appendChild(aiParagraph);
63
+
64
+ let aiResponseText = "";
65
  while (true) {
66
  const { done, value } = await reader.read();
67
  if (done) break;
68
+ const chunk = decoder.decode(value, { stream: true });
69
+ aiResponseText += chunk;
70
+ aiParagraph.textContent = aiResponseText; // Update the UI as the stream comes in
71
  chatMessages.scrollTop = chatMessages.scrollHeight;
72
  }
73
+
74
+ // Add the final, complete AI response to our history
75
+ conversationHistory.push({ role: 'model', content: aiResponseText });
76
+
77
  } catch (error) {
78
  aiBubble.innerHTML = `<p class="text-red-400">Error: Could not connect to the AI assistant. ${error.message}</p>`;
79
  }