File size: 1,951 Bytes
95a56c0 de3c2ee 95a56c0 de3c2ee 95a56c0 de3c2ee 95a56c0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
const sendBtn = document.getElementById('send-btn');
const userInput = document.getElementById('user-input');
const apiKeyInput = document.getElementById('api-key-input');
const chatBox = document.getElementById('chat-box');
sendBtn.addEventListener('click', () => {
const message = userInput.value.trim();
const apiKey = apiKeyInput.value.trim();
console.log("message: ", message)
console.log("apiKey: ", apiKey)
if (message && apiKey) {
// Display user's message immediately
const userMessageDiv = document.createElement('div');
userMessageDiv.className = 'user-message';
userMessageDiv.innerText = message;
chatBox.appendChild(userMessageDiv);
scrollToBottom();
// Call FastAPI backend to get response
console.log("type: ", typeof message, typeof apiKey)
fetch('/chat/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({user_input: message, api_key: apiKey})
})
.then(response => {
console.log("response: ", response)
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log("reply: ", data.response)
// Display chatbot's response
const botMessageDiv = document.createElement('div');
botMessageDiv.className = 'bot-message';
botMessageDiv.innerText = data.response;
chatBox.appendChild(botMessageDiv);
scrollToBottom();
})
.catch(error => {
console.log('There was a problem with the fetch operation:', error.message);
});
userInput.value = ''; // Clear the input field
}
});
function scrollToBottom() {
chatBox.scrollTop = chatBox.scrollHeight;
}
|