Update GUI styles.css & increase prompt timeout in GUI & CLI

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.

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}`);

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: '';

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', {