Typing indicator for GUI

This commit is contained in:
Wizzard 2024-03-09 03:20:24 -05:00
parent 0ab585943f
commit 16c1d680cb
2 changed files with 34 additions and 1 deletions

View File

@ -72,3 +72,22 @@ body {
background-color: #2980b9;
color: #ecf0f1;
}
@keyframes ellipsis {
0%, 20% {
content: '';
}
40% {
content: '.';
}
60% {
content: '..';
}
80%, 100% {
content: '...';
}
}
.ellipsis::after {
content: '';
animation: ellipsis 2s infinite;
}

View File

@ -30,6 +30,8 @@ document.addEventListener('DOMContentLoaded', () => {
displayMessage(userInput, 'user');
const typingIndicator = displayTypingIndicator();
try {
const response = await window.electronAPI.sendPrompt(userInput);
const assistantMessage = response.choices[0].message.content.trim();
@ -38,6 +40,8 @@ document.addEventListener('DOMContentLoaded', () => {
console.error(`Error sending prompt: ${error.message}`);
displayMessage(`Error: ${error.message}`, 'assistant');
} finally {
typingIndicator.remove();
sendButton.disabled = false;
promptInput.disabled = false;
promptInput.focus();
@ -46,4 +50,14 @@ document.addEventListener('DOMContentLoaded', () => {
} else {
console.error('chatForm or promptInput elements not found!');
}
});
});
function displayTypingIndicator() {
const chatHistory = document.getElementById('chatHistory');
const typingIndicator = document.createElement('div');
typingIndicator.classList.add('message', 'assistantMessage', 'ellipsis');
typingIndicator.textContent = 'Processing';
chatHistory.appendChild(typingIndicator);
chatHistory.scrollTop = chatHistory.scrollHeight;
return typingIndicator;
}