Add stop button

gui/css/styles.css

@@ -38,6 +38,25 @@ body {
     background-color: #6c757d;
     cursor: not-allowed;
 }
+#stopButton {
+    padding: 10px 20px;
+    font-size: 1rem;
+    color: white;
+    background-color: #c0392b;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+#stopButton:hover {
+    background-color: #a93226;
+}
+
+#stopButton:disabled {
+    background-color: #6c757d;
+    cursor: not-allowed;
+}
 .message {
     font-size: 0.9em;
     padding: 10px 15px;

gui/index.html

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

gui/kuzco-gui.js

@@ -76,3 +76,7 @@ ipcMain.handle('send-prompt', async (event, { prompt, model }) => {
     console.log("Received model in main process:", model);
     return await kuzcoCore.sendPrompt(prompt, model);
 });
+
+ipcMain.on('abort-prompt', () => {
+    kuzcoCore.abortFetch();
+});

gui/kuzcoCore.js

@@ -14,6 +14,8 @@ class KuzcoCore {
     constructor() {
         this.configPath = path.join(os.homedir(), '.kuzco-cli', 'config.json');
         this.API_KEY = this.loadApiKey();
+        this.controller = new AbortController();
+        this.isAborted = false;
     }
 
     loadApiKey() {
@@ -36,12 +38,17 @@ class KuzcoCore {
         return fs.existsSync(this.configPath) && this.API_KEY !== '';
     }
 
+    abortFetch() {
+        this.isAborted = true;
+        this.controller.abort();
+    }
+
     async sendPrompt(prompt, model) {
         console.log("Model received in sendPrompt:", model)
-        const controller = new AbortController();
-        const signal = controller.signal;
+        this.controller = new AbortController();
+        const signal = this.controller.signal;
 
-        const timeoutId = setTimeout(() => controller.abort(), 25000);
+        const timeoutId = setTimeout(() => this.controller.abort(), 25000);
 
         try {
             const response = await fetch('https://relay.kuzco.xyz/v1/chat/completions', {
@@ -65,15 +72,19 @@ class KuzcoCore {
             }
 
             return await response.json();
+
         } catch (error) {
             clearTimeout(timeoutId);
-            if (error.name === 'AbortError') {
-                console.error('Request was aborted due to timeout.');
-                return { error: 'Request timed out. Please try again.' };
-            } else {
-                console.error(`An error occurred: ${error.message}`);
-                return { error: error.message };
-            }
+            const errorMessage = this.isAborted
+                ? 'Request aborted by the user. Please try again.'
+                : 'Request timed out. Please try again.';
+
+            this.isAborted = false;
+            this.controller = new AbortController();
+
+            return error.name === 'AbortError'
+                ? { error: errorMessage }
+                : { error: error.message };
         }
     }
 }

gui/preload.js

@@ -3,4 +3,5 @@ const { contextBridge, ipcRenderer } = require('electron');
 contextBridge.exposeInMainWorld('electronAPI', {
     sendPrompt: (prompt, model) => ipcRenderer.invoke('send-prompt', { prompt, model }),
     onApiKeySaved: (callback) => ipcRenderer.on('api-key-saved', callback),
+    abortPrompt: () => ipcRenderer.send('abort-prompt')
 });

gui/renderer.js

@@ -19,6 +19,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const promptInput = document.getElementById('promptInput');
     const modelSelect = document.getElementById('modelSelect');
     const sendButton = document.getElementById('sendButton');
+    const stopButton = document.getElementById('stopButton');
     const modelSelectionContainer = document.getElementById('modelSelectionContainer');
 
     if (chatForm && promptInput && modelSelect) {
@@ -32,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
             sendButton.disabled = true;
             promptInput.disabled = true;
+            stopButton.disabled = false;
 
             displayMessage(userInput, 'user');
 
@@ -49,10 +51,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 displayMessage(`Error: ${error.message}`, 'assistant');
             } finally {
                 typingIndicator.remove();
-
                 sendButton.disabled = false;
                 promptInput.disabled = false;
                 promptInput.focus();
+                stopButton.disabled = true;
             }
         });
     } else {
@@ -60,6 +62,11 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 });
 
+document.getElementById('stopButton').addEventListener('click', () => {
+    window.electronAPI.abortPrompt();
+    document.getElementById('stopButton').disabled = true;
+});
+
 function displayTypingIndicator() {
     const chatHistory = document.getElementById('chatHistory');
     const typingIndicator = document.createElement('div');