From 437831aea5092defaf91e7923b53256c3845706a Mon Sep 17 00:00:00 2001
From: Wizzard <rich@bandaholics.cash>
Date: Sat, 9 Mar 2024 05:43:40 -0500
Subject: [PATCH] Create dropdown box to select which model to use in the GUI
 on startup

---
 gui/css/styles.css | 31 +++++++++++++++++++++++++++++++
 gui/index.html     |  7 +++++++
 gui/kuzco-gui.js   |  7 ++++---
 gui/kuzcoCore.js   |  5 +++--
 gui/preload.js     |  4 ++--
 gui/renderer.js    |  9 +++++++--
 6 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/gui/css/styles.css b/gui/css/styles.css
index e14976f..691a8b1 100644
--- a/gui/css/styles.css
+++ b/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: '';
diff --git a/gui/index.html b/gui/index.html
index 27a4941..bb5534f 100644
--- a/gui/index.html
+++ b/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>
diff --git a/gui/kuzco-gui.js b/gui/kuzco-gui.js
index 8498e56..cf1e342 100644
--- a/gui/kuzco-gui.js
+++ b/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);
+});
\ No newline at end of file
diff --git a/gui/kuzcoCore.js b/gui/kuzcoCore.js
index b998aee..21dd01e 100644
--- a/gui/kuzcoCore.js
+++ b/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,
                 }),
             });
diff --git a/gui/preload.js b/gui/preload.js
index 047a9d4..8435c4f 100644
--- a/gui/preload.js
+++ b/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),
-});
+});
\ No newline at end of file
diff --git a/gui/renderer.js b/gui/renderer.js
index a1a1b28..04c62c6 100644
--- a/gui/renderer.js
+++ b/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) {