Update templates/index.html
Browse files- templates/index.html +10 -23
templates/index.html
CHANGED
|
@@ -13,29 +13,17 @@
|
|
| 13 |
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
| 14 |
|
| 15 |
<style>
|
| 16 |
-
body {
|
| 17 |
-
background-color: #f8f9fa;
|
| 18 |
-
}
|
| 19 |
.chat-box {
|
| 20 |
-
height: 400px;
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
padding: 15px;
|
| 24 |
-
border-radius: 10px;
|
| 25 |
-
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
| 26 |
}
|
| 27 |
.message {
|
| 28 |
-
padding: 8px 12px;
|
| 29 |
-
border-radius: 8px;
|
| 30 |
-
margin-bottom: 10px;
|
| 31 |
-
}
|
| 32 |
-
.user-message {
|
| 33 |
-
background-color: #d1e7dd;
|
| 34 |
-
text-align: right;
|
| 35 |
-
}
|
| 36 |
-
.ai-message {
|
| 37 |
-
background-color: #e2e3e5;
|
| 38 |
}
|
|
|
|
|
|
|
| 39 |
</style>
|
| 40 |
</head>
|
| 41 |
<body>
|
|
@@ -69,11 +57,11 @@ function chatApp() {
|
|
| 69 |
|
| 70 |
let messageText = this.userMessage;
|
| 71 |
this.messages.push({ role: 'user', text: messageText });
|
| 72 |
-
this.userMessage = '';
|
| 73 |
-
|
| 74 |
let aiResponse = { role: 'ai', text: '' };
|
| 75 |
this.messages.push(aiResponse);
|
| 76 |
-
|
| 77 |
let response = await fetch('/chat', {
|
| 78 |
method: 'POST',
|
| 79 |
headers: { 'Content-Type': 'application/json' },
|
|
@@ -89,7 +77,6 @@ function chatApp() {
|
|
| 89 |
aiResponse.text += decoder.decode(value, { stream: true });
|
| 90 |
}
|
| 91 |
|
| 92 |
-
// Scroll to the latest message
|
| 93 |
this.$nextTick(() => {
|
| 94 |
let chatBox = document.getElementById('chatBox');
|
| 95 |
chatBox.scrollTop = chatBox.scrollHeight;
|
|
|
|
| 13 |
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
| 14 |
|
| 15 |
<style>
|
| 16 |
+
body { background-color: #f8f9fa; }
|
|
|
|
|
|
|
| 17 |
.chat-box {
|
| 18 |
+
height: 400px; overflow-y: auto;
|
| 19 |
+
background: white; padding: 15px;
|
| 20 |
+
border-radius: 10px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
|
|
| 21 |
}
|
| 22 |
.message {
|
| 23 |
+
padding: 8px 12px; border-radius: 8px; margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
}
|
| 25 |
+
.user-message { background-color: #d1e7dd; text-align: right; }
|
| 26 |
+
.ai-message { background-color: #e2e3e5; }
|
| 27 |
</style>
|
| 28 |
</head>
|
| 29 |
<body>
|
|
|
|
| 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' },
|
|
|
|
| 77 |
aiResponse.text += decoder.decode(value, { stream: true });
|
| 78 |
}
|
| 79 |
|
|
|
|
| 80 |
this.$nextTick(() => {
|
| 81 |
let chatBox = document.getElementById('chatBox');
|
| 82 |
chatBox.scrollTop = chatBox.scrollHeight;
|