Create dropdown box to select which model to use in the GUI on startup

gui/css/styles.css

@@ -72,6 +72,37 @@ body {
     background-color: #2980b9;
     color: #ecf0f1;
 }
+#modelSelectionContainer {
+    margin-bottom: 20px;
+    color: #ecf0f1;
+}
+
+#modelSelect {
+    padding: 10px;
+    border: 1px solid #34495e;
+    border-radius: 5px;
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    font-family: Arial, sans-serif;
+    cursor: pointer;
+}
+
+#modelSelect:focus {
+    outline: none;
+    border-color: #2980b9;
+}
+
+label {
+    color: #ecf0f1;
+    margin-right: 10px;
+}
+#modelSelectionContainer {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: 10px;
+    margin-bottom: 10px;
+}
 @keyframes ellipsis {
     0%, 20% {
       content: '';

gui/index.html

@@ -10,6 +10,13 @@
         <header>
             <h1>Welcome to Kuzco Chat</h1>
         </header>
+        <div id="modelSelectionContainer">
+            <label for="modelSelect">Choose AI Model:</label>
+            <select id="modelSelect">
+              <option value="mistral">Mistral</option>
+              <option value="llama2">Llama2</option>
+            </select>
+        </div>
         <main id="chatHistory" class="chat-history">
         </main>
         <footer>

gui/kuzco-gui.js

@@ -72,6 +72,7 @@ app.on('window-all-closed', () => {
 
 const kuzcoCore = new KuzcoCore();
 
-ipcMain.handle('send-prompt', async (event, prompt) => {
-    return await kuzcoCore.sendPrompt(prompt);
-});
+ipcMain.handle('send-prompt', async (event, { prompt, model }) => {
+    console.log("Received model in main process:", model);
+    return await kuzcoCore.sendPrompt(prompt, model);
+});

gui/kuzcoCore.js

@@ -36,7 +36,8 @@ class KuzcoCore {
         return fs.existsSync(this.configPath) && this.API_KEY !== '';
     }
 
-    async sendPrompt(prompt) {
+    async sendPrompt(prompt, model) {
+        console.log("Model received in sendPrompt:", model)
         try {
             const response = await fetch('https://relay.kuzco.xyz/v1/chat/completions', {
                 method: 'POST',
@@ -46,7 +47,7 @@ class KuzcoCore {
                 },
                 body: JSON.stringify({
                     messages: [{ role: 'user', 'content': prompt + '\n' }],
-                    model: 'mistral',
+                    model: model,
                     stream: false,
                 }),
             });

gui/preload.js

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

gui/renderer.js

@@ -17,13 +17,18 @@ function displayMessage(message, sender) {
 document.addEventListener('DOMContentLoaded', () => {
     const chatForm = document.getElementById('chatForm');
     const promptInput = document.getElementById('promptInput');
+    const modelSelect = document.getElementById('modelSelect');
     const sendButton = document.getElementById('sendButton');
+    const modelSelectionContainer = document.getElementById('modelSelectionContainer');
 
-    if (chatForm && promptInput) {
+    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;
@@ -33,7 +38,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const typingIndicator = displayTypingIndicator();
 
             try {
-                const response = await window.electronAPI.sendPrompt(userInput);
+                const response = await window.electronAPI.sendPrompt(userInput, selectedModel);
                 const assistantMessage = response.choices[0].message.content.trim();
                 displayMessage(assistantMessage, 'assistant');
             } catch (error) {