Update static/js/main.js

static/js/main.js

@@ -1,58 +1,67 @@
-// Variables
-var messages = document.querySelector('.message-list')
-var btn = document.querySelector('.btn')
-var input = document.querySelector('input')
-
-// Button/Enter Key
-btn.addEventListener('click', sendMessage)
-input.addEventListener('keyup', function(e){ if(e.keyCode == 13) sendMessage() })
-
-function loadHistory(){
-    fetch('/history')
-    .then(response => response.json())
-    .then(data => {
-        for(let i = 0; i < data.length; i++){
-           
-            if(data[i].FROM == 'User') {
-                writeLine('<span>User</span><br><br> ${data[i].content}','primary')
-            }
-            else {
-                writeLine('<span>oshinoko</span><br><br> ${data[i].content}','secondary')
-            }
-        }    
-        
-    })
-    .catch(error => console.error('Error:', error));
-}
-    
-
-
-loadHistory()
-// Messenger Functions
-function sendMessage(){
-    var msg = input.value;
-    writeLine(`<span>User</span><br><br> ${msg}`,'primary')
-
-    input.value = ''
-    fetch('/chat', {
-    method: 'POST',
-    headers: {
-        'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({'message': msg})
-         })
-   .then(response => response.json())
-   .then(data => console.log(data, 'secondary'))
-   .catch(error => console.error('Error:', error));
-
-}
-function addMessage(msg,typeMessage ='primary'){
-     writeLine(`<span>${msg.FROM}</span><br><br> ${msg.MESSAGE}`,typeMessage)
-}
-function writeLine(text,typeMessage){
-   var message = document.createElement('li')
-   message.classList.add('message-item', 'item-'+typeMessage)
-   message.innerHTML = 'Miguel says: ' + text
-   messages.appendChild(message)
-   messages.scrollTop = messages.scrollHeight;
-}
+// Lấy các phần tử DOM
+var messages = document.querySelector('.message-list');
+var btn = document.querySelector('.btn');
+var input = document.querySelector('input');
+
+// Thêm sự kiện cho nút Send và phím Enter
+btn.addEventListener('click', sendMessage);
+input.addEventListener('keyup', function(e) {
+    if (e.key === 'Enter') sendMessage();
+});
+
+// Tải lịch sử chat khi trang load
+function loadHistory() {
+    fetch('/history')
+    .then(response => response.json())
+    .then(data => {
+        for (let i = 0; i < data.length; i++) {
+            if (data[i].role === 'User') {
+                addMessage({ FROM: 'User', MESSAGE: data[i].content }, 'primary');
+            } else if (data[i].role === 'assistant') {
+                addMessage({ FROM: 'Oshi no Ko', MESSAGE: data[i].content }, 'secondary');
+            }
+        }
+    })
+    .catch(error => console.error('Error:', error));
+}
+
+loadHistory();
+
+// Hàm gửi tin nhắn
+function sendMessage() {
+    var msg = input.value.trim();
+    if (!msg) return; // Không gửi tin nhắn rỗng
+
+    // Hiển thị tin nhắn người dùng
+    addMessage({ FROM: 'User', MESSAGE: msg }, 'primary');
+
+    // Xóa input sau khi gửi
+    input.value = '';
+
+    // Gửi request đến server Flask
+    fetch('/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: msg })
+    })
+    .then(response => response.json())
+    .then(data => {
+        // Hiển thị phản hồi từ chatbot
+        addMessage({ FROM: 'Oshi no Ko', MESSAGE: data.MESSAGE }, 'secondary');
+    })
+    .catch(error => console.error('Error:', error));
+}
+
+// Hàm thêm tin nhắn vào giao diện
+function addMessage(msg, typeMessage = 'primary') {
+    writeLine(`<span>${msg.FROM}</span><br><br> ${msg.MESSAGE}`, typeMessage);
+}
+
+// Hàm tạo dòng tin nhắn
+function writeLine(text, typeMessage) {
+    var message = document.createElement('li');
+    message.classList.add('message-item', 'item-' + typeMessage);
+    message.innerHTML = text;
+    messages.appendChild(message);
+    messages.scrollTop = messages.scrollHeight; // Cuộn xuống cuối cùng
+}