Wait for AI response before letting user send another message in GUI

gui/css/styles.css

@@ -18,6 +18,24 @@ body {
     border: 1px solid #34495e;
     border-radius: 5px;
 }
+#sendButton {
+    padding: 10px 20px;
+    font-size: 1rem;
+    color: white;
+    background-color: #007BFF;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+#sendButton:hover {
+    background-color: #0056b3;
+}
+
+#sendButton:disabled {
+    background-color: #6c757d;
+    cursor: not-allowed;
+}
 .message {
     font-size: 0.9em;
     padding: 5px 10px;

gui/index.html

@@ -15,7 +15,7 @@
         <footer>
             <form id="chatForm" class="chat-form">
                 <input id="promptInput" type="text" placeholder="Enter your prompt" autofocus>
-                <button type="submit" id="sendPrompt">Send</button>
+                <button id="sendButton" onclick="sendPrompt()">Send</button>
             </form>
         </footer>
     </div>

gui/renderer.js

@@ -17,6 +17,7 @@ function displayMessage(message, sender) {
 document.addEventListener('DOMContentLoaded', () => {
     const chatForm = document.getElementById('chatForm');
     const promptInput = document.getElementById('promptInput');
+    const sendButton = document.getElementById('sendButton');
 
     if (chatForm && promptInput) {
         chatForm.addEventListener('submit', async (event) => {
@@ -24,6 +25,9 @@ document.addEventListener('DOMContentLoaded', () => {
             const userInput = promptInput.value;
             promptInput.value = '';
 
+            sendButton.disabled = true;
+            promptInput.disabled = true;
+
             displayMessage(userInput, 'user');
 
             try {
@@ -33,9 +37,13 @@ document.addEventListener('DOMContentLoaded', () => {
             } catch (error) {
                 console.error(`Error sending prompt: ${error.message}`);
                 displayMessage(`Error: ${error.message}`, 'assistant');
+            } finally {
+                sendButton.disabled = false;
+                promptInput.disabled = false;
+                promptInput.focus();
             }
         });
     } else {
         console.error('chatForm or promptInput elements not found!');
     }
-});
+});