From d2470b2dd6600eb6057754b029a6251eb046dbcd Mon Sep 17 00:00:00 2001
From: Wizzard <rich@bandaholics.cash>
Date: Sat, 9 Mar 2024 13:53:26 -0500
Subject: [PATCH] Update GUI styles.css & increase prompt timeout in GUI & CLI

---
 README.md          | 10 +++++-----
 cli/kuzco-cli.js   |  2 +-
 gui/css/styles.css | 38 ++++++++++++++++++++++++++++++++++++--
 gui/kuzcoCore.js   |  2 +-
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 67b4f00..890e3a6 100644
--- a/README.md
+++ b/README.md
@@ -57,14 +57,14 @@ electron19 kuzco-gui.js
 
 Follow the on-screen prompts to send your AI prompts to the network.
 
+## Prebuilt Binaries
+
+You can download prebuilt versions of this application from the [GitHub Actions page](https://github.com/CODJointOps/kuzco-cli/actions).
+
 ## Contributing
 
 Your contributions are welcome!
 
 ## License
 
-Kuzco CLI is released under the MIT license. Feel free to use, modify, and distribute it as you see fit.
-
-## Prebuilt Binaries
-
-You can download prebuilt versions of this application from the [GitHub Actions page](https://github.com/CODJointOps/kuzco-cli/actions).
+Kuzco CLI is released under the MIT license. Feel free to use, modify, and distribute it as you see fit.
\ No newline at end of file
diff --git a/cli/kuzco-cli.js b/cli/kuzco-cli.js
index 49a867d..0017aff 100644
--- a/cli/kuzco-cli.js
+++ b/cli/kuzco-cli.js
@@ -91,7 +91,7 @@ async function main() {
                     messages: messages,
                     model: model
                 })
-            }, 15000);;
+            }, 25000);;
 
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
diff --git a/gui/css/styles.css b/gui/css/styles.css
index 691a8b1..b0b185c 100644
--- a/gui/css/styles.css
+++ b/gui/css/styles.css
@@ -8,6 +8,8 @@ body {
     margin: 0;
     padding: 20px;
     box-sizing: border-box;
+    scrollbar-width: thin;
+    scrollbar-color: #34495e #2c3e50;
 }
 #chatHistory {
     height: 300px;
@@ -38,7 +40,7 @@ body {
 }
 .message {
     font-size: 0.9em;
-    padding: 5px 10px;
+    padding: 10px 15px;
     margin-bottom: 15px;
     padding: 10px;
     background-color: #34495e;
@@ -64,6 +66,20 @@ body {
     color: inherit;
     background-color: #2c3e50;
 }
+#promptInput:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #007BFF;
+}
+header {
+    margin-bottom: 20px;
+}
+header h1 {
+    font-size: 1.5rem;
+    text-align: center;
+    padding: 0.5em;
+    background: #2980b9;
+    border-radius: 5px;
+}
 #sendPrompt {
     padding: 10px 20px;
     border: none;
@@ -76,7 +92,9 @@ body {
     margin-bottom: 20px;
     color: #ecf0f1;
 }
-
+#chatHistory, #promptInput, #modelSelect {
+    border: 2px solid #34495e;
+}
 #modelSelect {
     padding: 10px;
     border: 1px solid #34495e;
@@ -103,6 +121,22 @@ label {
     gap: 10px;
     margin-bottom: 10px;
 }
+
+::-webkit-scrollbar {
+    width: 12px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #2c3e50;
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #34495e;
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #2980b9;
+  }
+
 @keyframes ellipsis {
     0%, 20% {
       content: '';
diff --git a/gui/kuzcoCore.js b/gui/kuzcoCore.js
index 8490768..1c4a18d 100644
--- a/gui/kuzcoCore.js
+++ b/gui/kuzcoCore.js
@@ -41,7 +41,7 @@ class KuzcoCore {
         const controller = new AbortController();
         const signal = controller.signal;
 
-        const timeoutId = setTimeout(() => controller.abort(), 15000);
+        const timeoutId = setTimeout(() => controller.abort(), 25000);
 
         try {
             const response = await fetch('https://relay.kuzco.xyz/v1/chat/completions', {