Update templates/index.html
Browse files- templates/index.html +14 -11
templates/index.html
CHANGED
@@ -54,33 +54,36 @@ function chatApp() {
|
|
54 |
|
55 |
async sendMessage() {
|
56 |
if (!this.userMessage.trim()) return;
|
57 |
-
|
58 |
let messageText = this.userMessage;
|
59 |
this.messages.push({ role: 'user', text: messageText });
|
60 |
this.userMessage = '';
|
61 |
-
|
62 |
let aiResponse = { role: 'ai', text: '' };
|
63 |
this.messages.push(aiResponse);
|
64 |
-
|
65 |
let response = await fetch('/chat', {
|
66 |
method: 'POST',
|
67 |
headers: { 'Content-Type': 'application/json' },
|
68 |
body: JSON.stringify({ message: messageText })
|
69 |
});
|
70 |
-
|
71 |
const reader = response.body.getReader();
|
72 |
const decoder = new TextDecoder();
|
73 |
-
|
74 |
while (true) {
|
75 |
const { done, value } = await reader.read();
|
76 |
if (done) break;
|
77 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
78 |
}
|
79 |
-
|
80 |
-
this.$nextTick(() => {
|
81 |
-
let chatBox = document.getElementById('chatBox');
|
82 |
-
chatBox.scrollTop = chatBox.scrollHeight;
|
83 |
-
});
|
84 |
}
|
85 |
};
|
86 |
}
|
|
|
54 |
|
55 |
async sendMessage() {
|
56 |
if (!this.userMessage.trim()) return;
|
57 |
+
|
58 |
let messageText = this.userMessage;
|
59 |
this.messages.push({ role: 'user', text: messageText });
|
60 |
this.userMessage = '';
|
61 |
+
|
62 |
let aiResponse = { role: 'ai', text: '' };
|
63 |
this.messages.push(aiResponse);
|
64 |
+
|
65 |
let response = await fetch('/chat', {
|
66 |
method: 'POST',
|
67 |
headers: { 'Content-Type': 'application/json' },
|
68 |
body: JSON.stringify({ message: messageText })
|
69 |
});
|
70 |
+
|
71 |
const reader = response.body.getReader();
|
72 |
const decoder = new TextDecoder();
|
73 |
+
|
74 |
while (true) {
|
75 |
const { done, value } = await reader.read();
|
76 |
if (done) break;
|
77 |
+
|
78 |
+
let token = decoder.decode(value, { stream: true });
|
79 |
+
aiResponse.text += token;
|
80 |
+
|
81 |
+
// Trigger reactivity update
|
82 |
+
this.$nextTick(() => {
|
83 |
+
let chatBox = document.getElementById('chatBox');
|
84 |
+
chatBox.scrollTop = chatBox.scrollHeight;
|
85 |
+
});
|
86 |
}
|
|
|
|
|
|
|
|
|
|
|
87 |
}
|
88 |
};
|
89 |
}
|