Wizzard
/
kuzco-cli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
gui/css/styles.css
View File

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

14
gui/renderer.js
View File

@ -30,6 +30,8 @@ document.addEventListener('DOMContentLoaded', () => {
displayMessage(userInput, 'user'); displayMessage(userInput, 'user');
const typingIndicator = displayTypingIndicator();
try { try {
const response = await window.electronAPI.sendPrompt(userInput); const response = await window.electronAPI.sendPrompt(userInput);
const assistantMessage = response.choices[0].message.content.trim(); const assistantMessage = response.choices[0].message.content.trim();
@ -38,6 +40,8 @@ document.addEventListener('DOMContentLoaded', () => {
console.error(`Error sending prompt: ${error.message}`); console.error(`Error sending prompt: ${error.message}`);
displayMessage(`Error: ${error.message}`, 'assistant'); displayMessage(`Error: ${error.message}`, 'assistant');
} finally { } finally {
typingIndicator.remove();
sendButton.disabled = false; sendButton.disabled = false;
promptInput.disabled = false; promptInput.disabled = false;
promptInput.focus(); promptInput.focus();
@ -47,3 +51,13 @@ document.addEventListener('DOMContentLoaded', () => {
console.error('chatForm or promptInput elements not found!'); 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;
}