document.addEventListener('DOMContentLoaded', function() {
const chatbotIcon = document.getElementById('chatbot-icon');
const chatbotPopup = document.getElementById('chatbot-popup');
const chatHistory = document.getElementById('chat-history');
const chatInput = document.getElementById('chat-input');
let isOpen = false;
// Thêm avatar cho chatbot
const chatbotAvatar = document.createElement('img');
chatbotAvatar.src = 'https://nhanongso.com/wp-content/uploads/2025/03/belua.png';
chatbotAvatar.style.width = '50px';
chatbotAvatar.style.height = '50px';
chatbotAvatar.style.borderRadius = '50%';
chatbotAvatar.style.position = 'absolute';
chatbotAvatar.style.top = '-30px';
chatbotAvatar.style.left = '10px';
chatbotPopup.appendChild(chatbotAvatar);
chatbotIcon.addEventListener('click', function() {
isOpen = !isOpen;
chatbotPopup.style.display = isOpen ? 'block' : 'none';
if (isOpen) {
// Chào khách khi mở khung chat
chatHistory.innerHTML = `Xin chào, mình có thể giúp gì cho bạn?
`;
// Gợi ý 2 câu hỏi
const question1 = document.createElement('button');
question1.textContent = 'Cách bón phân cân đối và hiệu quả cho cây trồng?';
question1.className = 'suggested-question';
question1.addEventListener('click', function() {
chatHistory.innerHTML += `Bạn: ${question1.textContent}
`;
callDeepSeekAPI(question1.textContent);
});
chatHistory.appendChild(question1);
const question2 = document.createElement('button');
question2.textContent = 'Cách áp dụng mô hình nông nghiệp hữu cơ?';
question2.className = 'suggested-question';
question2.addEventListener('click', function() {
chatHistory.innerHTML += `Bạn: ${question2.textContent}
`;
callDeepSeekAPI(question2.textContent);
});
chatHistory.appendChild(question2);
}
});
const sendButton = document.getElementById('send-button');
sendButton.addEventListener('click', function() {
const message = chatInput.value;
if (message.trim() !== '') {
chatHistory.innerHTML += `Bạn: ${message}
`;
chatInput.value = '';
callDeepSeekAPI(message);
}
});
chatInput.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
sendButton.click(); // Kích hoạt sự kiện click của nút gửi
}
});
function callDeepSeekAPI(message) {
const apiKey = 'sk-4489ff7ea5d040ef898f44b18e5654a7'; // API Key của bạn
const apiUrl = 'https://api.deepseek.com/v1/chat/completions'; // Endpoint của DeepSeek
// Hiển thị hoạt ảnh loading
const loadingIndicator = document.createElement('div');
loadingIndicator.innerHTML = ''; // Thêm class CSS
chatHistory.appendChild(loadingIndicator);
chatHistory.scrollTop = chatHistory.scrollHeight;
fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: "deepseek-chat",
messages: [{ role: "user", content: message }],
stream: true
})
})
.then(response => {
// Ẩn hoạt ảnh loading khi nhận phản hồi
loadingIndicator.style.display = 'none';
const reader = response.body.getReader();
const decoder = new TextDecoder();
let chatbotResponseDiv = null; // Biến lưu trữ khung chat
function read() {
reader.read().then(({ done, value }) => {
if (done) {
console.log('Stream hoàn tất');
return;
}
const chunk = decoder.decode(value);
const lines = chunk.split('data: ');
lines.forEach(line => {
if (line.trim() === '[DONE]') {
chatbotResponseDiv = null; // Reset khung chat khi kết thúc
return;
}
if (line.trim() !== '') {
try {
const jsonData = JSON.parse(line);
if (jsonData.choices && jsonData.choices[0].delta && jsonData.choices[0].delta.content) {
let content = jsonData.choices[0].delta.content;
content = content.replace(/\n/g, '
');
if (!chatbotResponseDiv) { // Tạo khung chat nếu chưa tồn tại
chatbotResponseDiv = document.createElement('div');
chatbotResponseDiv.className = 'chatbot-response';
const chatbotAvatar = document.createElement('img');
chatbotAvatar.src = 'https://nhanongso.com/wp-content/uploads/2025/03/belua.png';
chatbotAvatar.className = 'chatbot-avatar';
const chatbotMessage = document.createElement('p');
chatbotMessage.className = 'chatbot-message';
chatbotResponseDiv.appendChild(chatbotAvatar);
chatbotResponseDiv.appendChild(chatbotMessage);
chatHistory.appendChild(chatbotResponseDiv);
}
chatbotResponseDiv.querySelector('.chatbot-message').innerHTML += content; // Thêm nội dung vào khung chat
chatHistory.scrollTop = chatHistory.scrollHeight;
}
} catch (error) {
console.error('Lỗi phân tích JSON:', error);
}
}
});
read();
}).catch(error => {
console.error('Lỗi stream:', error);
const chatbotResponse = document.createElement('div');
chatbotResponse.className = 'chatbot-response';
chatbotResponse.innerHTML = `Bé Lúa: Lỗi stream.
`;
chatHistory.appendChild(chatbotResponse);
});
}
read();
})
.catch(error => {
// Ẩn hoạt ảnh loading khi có lỗi
loadingIndicator.style.display = 'none';
console.error('Lỗi DeepSeek API:', error);
const chatbotResponse = document.createElement('div');
chatbotResponse.className = 'chatbot-response';
chatbotResponse.innerHTML = `Bé Lúa: Lỗi kết nối.
`;
chatHistory.appendChild(chatbotResponse);
});
}
});
Chuyển đến nội dung
