Restructure GUI folder & modify styles.css

gui/js/kuzcoCore.js

@@ -0,0 +1,92 @@
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const fetch = require('node-fetch');
+
+async function fetchData(url, options = {}) {
+    const { default: fetch } = await import('node-fetch');
+    const response = await fetch(url, options);
+    return response;
+}
+
+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() {
+        try {
+            if (fs.existsSync(this.configPath)) {
+                const configFile = fs.readFileSync(this.configPath);
+                const config = JSON.parse(configFile);
+                return config.API_KEY;
+            } else {
+                console.log('API Key config file does not exist. Please set up your API Key.');
+                return '';
+            }
+        } catch (error) {
+            console.error(`An error occurred while reading the API key: ${error.message}`);
+            return '';
+        }
+    }
+
+    apiKeyExists() {
+        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)
+        this.controller = new AbortController();
+        const signal = this.controller.signal;
+
+        const timeoutId = setTimeout(() => this.controller.abort(), 25000);
+
+        try {
+            const response = await fetch('https://relay.kuzco.xyz/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${this.API_KEY}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    messages: [{ role: 'user', 'content': prompt + '\n' }],
+                    model: model,
+                    stream: false,
+                }),
+                signal: signal,
+            });
+
+            clearTimeout(timeoutId);
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            return await response.json();
+
+        } catch (error) {
+            clearTimeout(timeoutId);
+            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 };
+        }
+    }
+}
+
+module.exports = KuzcoCore;

gui/js/preload.js

@@ -0,0 +1,7 @@
+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/js/renderer.js

@@ -0,0 +1,78 @@
+function displayMessage(message, sender) {
+    const chatHistory = document.getElementById('chatHistory');
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message');
+
+    if (sender === 'user') {
+        messageDiv.classList.add('userMessage');
+    } else if (sender === 'assistant') {
+        messageDiv.classList.add('assistantMessage');
+    }
+
+    messageDiv.textContent = message;
+    chatHistory.appendChild(messageDiv);
+    chatHistory.scrollTop = chatHistory.scrollHeight;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const chatForm = document.getElementById('chatForm');
+    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) {
+        chatForm.addEventListener('submit', async (event) => {
+            event.preventDefault();
+
+            const userInput = promptInput.value;
+            const selectedModel = modelSelect.value;
+            promptInput.value = '';
+            modelSelectionContainer.style.display = 'none';
+
+            sendButton.disabled = true;
+            promptInput.disabled = true;
+            stopButton.disabled = false;
+
+            displayMessage(userInput, 'user');
+
+            const typingIndicator = displayTypingIndicator();
+
+            try {
+                const response = await window.electronAPI.sendPrompt(userInput, selectedModel);
+                if (response.error) {
+                    throw new Error(response.error);
+                }
+                const assistantMessage = response.choices[0].message.content.trim();
+                displayMessage(assistantMessage, 'assistant');
+            } catch (error) {
+                console.error(`Error sending prompt: ${error.message}`);
+                displayMessage(`Error: ${error.message}`, 'assistant');
+            } finally {
+                typingIndicator.remove();
+                sendButton.disabled = false;
+                promptInput.disabled = false;
+                promptInput.focus();
+                stopButton.disabled = true;
+            }
+        });
+    } else {
+        console.error('chatForm or promptInput elements not found!');
+    }
+});
+
+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');
+    typingIndicator.classList.add('message', 'assistantMessage', 'ellipsis');
+    typingIndicator.textContent = 'Processing';
+    chatHistory.appendChild(typingIndicator);
+    chatHistory.scrollTop = chatHistory.scrollHeight;
+    return typingIndicator;
+}