From 16c1d680cbdd364c94e31f9080999e9585e8036d Mon Sep 17 00:00:00 2001
From: Wizzard <rich@bandaholics.cash>
Date: Sat, 9 Mar 2024 03:20:24 -0500
Subject: [PATCH] Typing indicator for GUI

---
 gui/css/styles.css | 19 +++++++++++++++++++
 gui/renderer.js    | 16 +++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/gui/css/styles.css b/gui/css/styles.css
index dc75856..e14976f 100644
--- a/gui/css/styles.css
+++ b/gui/css/styles.css
@@ -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;
+  }
diff --git a/gui/renderer.js b/gui/renderer.js
index 2c72dac..a1a1b28 100644
--- a/gui/renderer.js
+++ b/gui/renderer.js
@@ -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!');
     }
-});
\ No newline at end of file
+});
+
+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;
+}
\ No newline at end of file