From f28a05d7392e812bc0272f431a662d5eb68953b0 Mon Sep 17 00:00:00 2001
From: Alessandro <155005371+3clyp50@users.noreply.github.com>
Date: Wed, 23 Oct 2024 00:18:59 +0200
Subject: [PATCH 1/5] Improved UI/UX in WebUI

- Collapsible pref section :+1:
- Monospace font
- UX focus on user feedback and accessibility
- Mobile and input section QoL
- Other minor refinements
---
 webui/index.css  | 334 +++++++++++++++++++++++++++++++++++++++--------
 webui/index.html | 115 +++++++++-------
 2 files changed, 348 insertions(+), 101 deletions(-)

diff --git a/webui/index.css b/webui/index.css
index 503cd8ef2..800709652 100644
--- a/webui/index.css
+++ b/webui/index.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 
 :root {
   /* Dark mode */
@@ -10,7 +10,7 @@
   --color-message-bg-dark: #2d2d2d;
   --color-message-text-dark: #e0e0e0;
   --color-panel-dark: #1e1e1e;
-  --color-border-dark: #444;
+  --color-border-dark: #444444a8;
   --color-input-dark: #222;
   --color-input-focus-dark: #1b1b1b;
 
@@ -23,7 +23,7 @@
   --color-message-bg-light: #ffffff;
   --color-message-text-light: #333333;
   --color-panel-light: #ffffff;
-  --color-border-light: #e0e0e0;
+  --color-border-light: #e0e0e0c7;
   --color-input-light: #f1f1f1;
   --color-input-focus-light: #ebeced;
 
@@ -62,9 +62,18 @@ html {
   background-color: var(--color-background);
   color: var(--color-text);
   font-family: "Rubik", Arial, Helvetica, sans-serif;
+  width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
+  position: fixed;
+}
+
+body {
+  overscroll-behavior: none;
+  -webkit-overscroll-behavior: none;
+
 }
 
 body,
@@ -86,6 +95,7 @@ body,
 .panel {
   height: 100%;
   overflow: auto;
+  scroll-behavior: smooth;
 }
 
 /* Left Panel */
@@ -95,13 +105,13 @@ body,
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  flex-shrink: 0;
   justify-content: space-between;
-  padding: var(--spacing-md);
   transition: all var(--transition-speed) ease-in-out;
   width: 250px;
+  min-width: 250px;
   color: var(--color-text);
   box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3);
+  user-select: none;
 }
 
 #left-panel.hidden {
@@ -109,23 +119,39 @@ body,
 }
 
 .left-panel-top {
-  margin-top: 2.5rem;
-  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  margin-top: 3.5rem;
+  padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
 }
 
-/* Apply the custom scrollbar style */
 .left-panel-top::-webkit-scrollbar {
   width: 0px;
 }
 
+#status-section,
+.config-section:not(#chats-section) {
+  flex-shrink: 0;
+}
+
+.left-panel-bottom {
+  position: relative;
+  flex-shrink: 0;
+}
+
 .toggle-sidebar-button {
+  height: 2.6rem;
+  width: 2.6rem;
   background-color: var(--color-secondary);
   border: none;
   border-radius: var(--spacing-xs);
   color: var(--color-text);
   cursor: pointer;
   left: var(--spacing-md);
-  padding: var(--spacing-sm) 0.75rem;
+  padding: 0.47rem 0.56rem;
   position: absolute;
   top: var(--spacing-md);
   transition: all var(--transition-speed) ease-in-out;
@@ -141,16 +167,98 @@ body,
 }
 
 #sidebar-hamburger-svg {
-  height: 24px;
-  width: 24px;
+  transition: all var(--transition-speed) ease;
+}
+
+.toggle-sidebar-button:active #sidebar-hamburger-svg {
+  transform: scaleY(0.8);
 }
 
 .switch-label {
   margin-right: 0.5rem;
 }
+
+/* Chats container */
+.chats-list-container {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  /* Mask */
+  mask-image: linear-gradient(
+    to bottom,
+    black calc(100% - 20px),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    black calc(100% - 20px),
+    transparent 100%
+  );
+  /* Add padding to account for fade */
+  padding-bottom: 20px;
+}
+
+/* Chats scrollbar */
+.chats-list-container::-webkit-scrollbar {
+  width: 0px;
+}
+
+#chats-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
+/* Preferences */
+.pref-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--font-size-normal);
+  margin: 0.28rem 0 0.6rem 0;
+}
+
+/* Arrow icon */
+.arrow-icon {
+  flex-shrink: 0;
+  transition: transform var(--transition-speed) ease-in-out;
+  margin-left: 0.5rem;
+  width: 16px;
+  height: 16px;
+  transform: rotate(90deg);
+}
+
+.arrow-icon.rotated {
+  transform: rotate(-90deg);
+}
+
+.pref-section {
+  font-size: var(--font-size-small);
+  padding: 0.6rem var(--spacing-md) 0.05rem var(--spacing-md);
+}
+
+/* Collapse transition */
+.pref-section [x-cloak] {
+  display: none;
+}
+
+/* Version */
+.version-info {
+  line-height: 0.8rem;
+  position: relative;
+  margin: 0 var(--spacing-md) 1rem var(--spacing-md);
+  padding-top: 10px;
+  border-top: 1px solid var(--color-border);
+}
+
 /* Right Panel */
 #right-panel {
   display: flex;
+  width: 100%;
   flex-direction: column;
   flex-grow: 1;
   transition: margin-left var(--transition-speed) ease-in-out;
@@ -162,10 +270,13 @@ body,
 
 #time-date {
   color: var(--color-text);
+  position: fixed;
+  right: 0;
   font-size: var(--font-size-normal);
   text-align: right;
   line-height: 1.2;
   margin-right: var(--spacing-md);
+  margin-top: var(--spacing-md);
 }
 
 #user-date {
@@ -174,12 +285,16 @@ body,
 }
 
 /* Typography */
-h2,
-h3 {
+h2 {
   color: var(--color-primary);
   margin-bottom: var(--spacing-sm);
   margin-top: var(--spacing-lg);
 }
+h3 {
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
 h4 {
   margin-top: auto;
   margin-bottom: auto;
@@ -191,17 +306,26 @@ h4 {
   font-size: 0.7rem;
 }
 
+pre {
+  font-family: 'Roboto Mono', monospace;
+  font-optical-sizing: auto;
+  font-size: 0.75rem;
+}
+
 /* Chat History */
 #chat-history {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   overflow-y: auto;
+  scroll-behavior: smooth;
   overflow-x: hidden;
-  padding: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-md) 0;
+  transition: all 0.3s ease;  
 }
+
 #chat-history > *:first-child {
-  margin-top: 5em;
+  margin-top: 4.4em;
 }
 
 /* Apply the custom scrollbar style here */
@@ -234,10 +358,9 @@ h4 {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  position: sticky;
-  margin-left: var(--spacing-md);
+  position: fixed;
+  margin-left: 4.6rem;
   margin-top: var(--spacing-md);
-  margin-bottom: -80px;
   transition: margin-left var(--transition-speed) ease-in-out;
   z-index: 1001;
 }
@@ -250,7 +373,7 @@ h4 {
 #logo-container img {
   border-radius: var(--spacing-xs);
   width: auto;
-  height: 3rem;
+  height: 2.6rem;
   filter: none;
   transition: filter 0.3s ease;
 }
@@ -288,7 +411,7 @@ h4 {
 }
 
 #right-panel.expanded #logo-container {
-  margin-left: 5.5rem;
+  margin-left: 4.6rem;
 }
 
 /* Message Styles */
@@ -419,6 +542,7 @@ h4 {
 .msg-kvps th,
 .msg-kvps td {
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  align-content:baseline;
   padding: 0.25rem;
   text-align: left;
 }
@@ -444,35 +568,67 @@ h4 {
 .message-action:hover {
   opacity: 1;
 }
-
 /* Input Section */
 #input-section {
+  position: relative;
   background-color: var(--color-panel);
   display: flex;
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
   align-items: center;
   flex-shrink: 0;
 }
 
 #chat-input {
   background-color: var(--color-input);
-  border: none;
-  border-radius: var(--border-radius);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
   color: var(--color-text);
   flex-grow: 1;
-  font-size: 0.7rem;
-  max-height: 9rem;
-  min-height: 20px;
+  font-family: 'Roboto Mono', monospace;
+  font-optical-sizing: auto;
+  font-size: 0.875rem;
+  max-height: 7rem;
+  min-height: 1.9rem;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  overflow-y: auto;
+  scroll-behavior: smooth;
   resize: none;
-  padding: var(--spacing-sm) var(--spacing-md);
-  transition: all var(--transition-speed) ease-in-out;
-  overflow: hidden;
+  /* scrollbar padding */
+  background-clip: border-box;
+  border: 6px solid transparent;
+  transition: all 0.3s ease;
+}
+
+#chat-input::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+#chat-input::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 4px 0;
+  border-radius: 6px;
+}
+
+#chat-input::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.5);
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+}
+
+#chat-input::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
 }
 
 #chat-input:focus {
+  outline: 0.05rem solid rgba(155, 155, 155, 0.3);
+  font-size: 0.955rem;
   background-color: var(--color-input-focus);
-  font-size: 0.8rem;
-  outline: none;
+}
+
+#chat-input::placeholder {
+  color: var(--color-text-muted);
+  opacity: 0.7;
 }
 
 /* Config Section */
@@ -488,12 +644,16 @@ h4 {
 
 .config-list li {
   align-items: center;
-  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
   display: flex;
   justify-content: space-between;
   padding: 0.35rem 0;
 }
 
+.config-list> *:first-child {
+  border-top: 0px;
+}
+
 .config-button {
   border: none;
   border-radius: var(--spacing-xs);
@@ -507,7 +667,7 @@ h4 {
   padding: var(--spacing-sm) 0.75rem;
   text-wrap: nowrap;
   background-color: var(--color-secondary);
-  width: 48%;
+  width: 49%;
 }
 
 .config-button:hover {
@@ -537,15 +697,6 @@ h4 {
   color: rgba(253, 253, 253, 0.35);
 }
 
-.pref-section {
-  font-size: var(--font-size-small);
-}
-
-.pref-section > ul {
-  margin-bottom: 15px;
-  margin-top: 0;
-}
-
 /* Toggle Switch */
 .switch {
   display: inline-block;
@@ -593,6 +744,11 @@ input:checked + .slider:before {
   transform: translateX(1.05rem);
 }
 
+#chat-buttons-wrapper {
+  line-height: 0.5rem;
+  display: flex;
+}
+
 /* Chat List Button */
 .chat-list-button {
   color: inherit;
@@ -610,12 +766,13 @@ input:checked + .slider:before {
   color: var(--color-background);
   cursor: pointer;
   font-size: var(--font-size-normal);
-  height: 3.125rem;
+  height: 2.525rem;
   margin-left: var(--spacing-sm);
   transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
-  width: 3.125rem;
+  width: 2.525rem;
   flex-shrink: 0;
-  min-width: 3.125rem;
+  flex-grow: 0;
+  min-width: 2.525rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -785,7 +942,8 @@ input:checked + .slider:before {
 
 /* Utility Classes */
 .kvps-key {
-  font-weight: bold;
+  font-weight: 500;
+  font-size: var(--font-size-small);
 }
 
 .kvps-val {
@@ -793,7 +951,7 @@ input:checked + .slider:before {
 }
 
 .kvps-val {
-  margin: var(--spacing-sm) 0;
+  margin: 0.75rem 0 0.5rem 0.5rem;
 }
 
 .msg-json {
@@ -848,14 +1006,80 @@ input:checked + .slider:before {
 }
 
 @media (max-width: 768px) {
-  #left-panel.expanded #chat-input {
-    display: none;
-    overflow: hidden;
-    flex-shrink: 0;
+  #left-panel {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 250px !important; /* Force width */
+    min-width: 250px;
+    z-index: 1000;
+    transition: all var(--transition-speed) ease-in-out;
   }
 
-  #left-panel.expanded #time-date {
-    flex-shrink: 0;
-    text-wrap: nowrap;
+  #left-panel.hidden {
+    margin-left: -250px;
+  }
+
+  .toggle-sidebar-button {
+    position: fixed;
+    left: var(--spacing-md);
+    z-index: 1001;
+  }
+
+  #logo-container {
+    margin-left: 4.6rem;
+    transition: all 0.3s ease;
+  }
+  
+  #right-panel.expanded #logo-container {
+    margin-left: 4.6rem;
+  }
+
+  #chat-buttons-wrapper {
+  display: inline;
+  }
+
+  #chat-input {
+    min-height: 4.2rem;
   }
 }
+
+@media (min-width: 768px) {
+  #chat-buttons-wrapper {
+  flex-wrap: no-wrap;
+  }
+}
+  
+@media (max-height: 600px) {
+  #chats-section {
+  min-height: 100%;
+  }
+
+  .left-panel-top {
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  }
+
+    /* consistent font sizing */
+  html {
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@media screen and (orientation: landscape) {
+
+  /* lock font size during rotation */
+  html {
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+  }
+}
\ No newline at end of file
diff --git a/webui/index.html b/webui/index.html
index 3e0727d52..50128d5ee 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title>Agent Zero</title>
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="toast.css">
@@ -14,6 +14,8 @@
             if (window[name]) window[name](...args)
         }
     </script>
+    
+    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script type="module" src="index.js"></script>
     <script type="text/javascript" src="settings.js"></script>
@@ -24,16 +26,23 @@
     <div class="container">
         <div class="icons-section" id="hide-button" x-data="{ connected: true }">
             <!--Sidebar-->
+            <!-- Sidebar Toggle Button -->
             <button id="toggle-sidebar" class="toggle-sidebar-button" aria-label="Toggle Sidebar" aria-expanded="false">
                 <span aria-hidden="true">
-                    <svg id="sidebar-hamburger-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                        viewBox="0 0 24 24" fill="CurrentColor">
-                        <path
-                            d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
+                    <!-- Hamburger Icon -->
+                    <svg id="sidebar-hamburger-svg" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="CurrentColor">
+                    <path d="M3 13h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V7H3v2z"></path>
                     </svg>
                 </span>
             </button>
+            
+        <div id="logo-container">
+                <a href="https://github.com/frdel/agent-zero" target="_blank" rel="noopener noreferrer">
+                    <img src="splash.jpg" alt="a0" width="22" height="22">
+                </a>
+            </div>
         </div>
+        
         <div id="left-panel" class="panel">
             <div class="left-panel-top">
                 <!--Sidebar upper elements-->
@@ -45,34 +54,46 @@
 
                 <div class="config-section" x-data="{ showQuickActions: true }">
                     <h3>Quick Actions</h3>
-                    <button class="config-button" id="resetChat" @click="resetChat()">Reset chat</button>
+                    <button class="config-button" id="resetChat" @click="resetChat()">Reset Chat</button>
                     <button class="config-button" id="newChat" @click="newChat()">New Chat</button>
                     <button class="config-button" id="loadChats" @click="loadChats()">Load Chat</button>
                     <button class="config-button" id="loadChat" @click="saveChat()">Save Chat</button>
                     <button class="config-button" id="settings"
                         @click="settingsModalProxy.openModal()">Settings</button>
                 </div>
-
+                <!-- Chats List -->
                 <div class="config-section" id="chats-section" x-data="{ contexts: [], selected: '' }"
-                    x-show="contexts.length > 0">
-                    <h3>Chats</h3>
+                x-show="contexts.length > 0">
+                <h3>Chats</h3>
+                <div class="chats-list-container">
                     <ul class="config-list">
                         <template x-for="context in contexts">
                             <li>
-                                <span :class="{'chat-list-button': true, 'font-bold': context.id === selected}"
-                                    @click="selected = context.id; selectChat(context.id)">
-                                    Chat #<span x-text="context.no"></span>
-                                </span>
-                                <button class="edit-button" @click="killChat(context.id)">X</button>
+                            <span :class="{'chat-list-button': true, 'font-bold': context.id === selected}"
+                                @click="selected = context.id; selectChat(context.id)">
+                                Chat #<span x-text="context.no"></span>
+                            </span>
+                            <button class="edit-button" @click="killChat(context.id)">X</button>
                             </li>
                         </template>
                     </ul>
                 </div>
             </div>
-            <!--Preferences-->
-            <div class="pref-section">
-                <h3>Preferences</h3>
-                <ul class="config-list">
+            </div>
+                   <!--Sidebar lower elements-->
+                <div class="left-panel-bottom">
+            <!-- Preferences -->
+            <div class="pref-section" x-data="{ prefOpen: true }">
+                <span><h3 class="pref-header" @click="prefOpen = !prefOpen">
+                    Preferences
+                    <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" 
+                        fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" 
+                        :class="{'rotated': !prefOpen}">
+                        <path d="M8 4l8 8-8 8"/>
+                    </svg>
+                </h3>
+                <ul class="config-list" x-show="prefOpen" x-collapse x-transition>
+                    <!-- Preferences Items -->
                     <li x-data="{ autoScroll: true }">
                         <span>Autoscroll</span>
                         <label class="switch">
@@ -83,7 +104,7 @@
                     </li>
                     <li x-data="{ darkMode: localStorage.getItem('darkMode') != 'false' }"
                         x-init="$watch('darkMode', val => toggleDarkMode(val))">
-                        <div class="switch-label">Dark mode</div>
+                        <span class="switch-label">Dark mode</span>
                         <label class="switch">
                             <input type="checkbox" x-model="darkMode">
                             <span class="slider"></span>
@@ -112,19 +133,18 @@
                             <span class="slider"></span>
                         </label>
                     </li>
-
-                </ul>
-                <span id="a0version">Agent Zero 0.7<br>built on 2024-10-6</span>
+                    </ul>
+                </span>
+            </div>
+            <!-- Version Info -->
+            <div class="version-info">
+                <span id="a0version">Agent Zero 0.7.1<br>built on 2024-10-16</span>
             </div>
         </div>
+    </div>
         <div id="right-panel" class="panel">
-            <div id="logo-container">
-                <a href="https://github.com/frdel/agent-zero" target="_blank" rel="noopener noreferrer">
-                    <img src="splash.jpg" alt="a0" width="48" height="48">
-                </a>
-                <div id="time-date"></div>
-            </div>
             <!--Chat-->
+            <div id="time-date"></div>
             <div id="chat-history">
             </div>
             <div id="toast" class="toast">
@@ -133,27 +153,30 @@
                 <button class="toast__close">Close</button>
             </div>
             <div id="progress-bar-box">
-                <h4 id="progress-bar-h"><span id="progress-bar-i">|></span><span id="progress-bar"></span></h4>
+            <h4 id="progress-bar-h"><span id="progress-bar-i">|></span><span id="progress-bar"></span></h4>
             </div>
             <div id="input-section" x-data="{ paused: false }">
                 <textarea id="chat-input" placeholder="Type your message here..." rows="1"></textarea>
-                <button class="chat-button" id="send-button" aria-label="Send message">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-                        <path d="M25 20 L75 50 L25 80" fill="none" stroke="currentColor" stroke-width="15" />
-                    </svg>
-                </button>
-                <button class="chat-button pause-button" id="pause-button" @click="pauseAgent(true)" x-show="!paused"
-                    aria-label="Pause agent">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
-                    </svg>
-                </button>
-                <button class="chat-button pause-button" id="unpause-button" @click="pauseAgent(false)" x-show="paused"
-                    aria-label="Resume agent">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M8 5v14l11-7z" />
-                    </svg>
-                </button>
+
+                <div id="chat-buttons-wrapper">
+                    <button class="chat-button" id="send-button" aria-label="Send message">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                        <path d="M25 20 L75 50 L25 80" fill="none" stroke="currentColor" stroke-width="15"></path>
+                        </svg>
+                    </button>
+                    <br>
+                    <button class="chat-button pause-button" id="pause-button" @click="pauseAgent(true)" x-show="!paused" aria-label="Pause agent">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
+                        </svg>
+                    </button>
+                    <button class="chat-button pause-button" id="unpause-button" @click="pauseAgent(false)" x-show="paused" aria-label="Resume agent" style="display: none;">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z"></path>
+                        </svg>
+                    </button>
+    
+                </div>
             </div>
         </div>
     </div>

From 1a0ceebcaf7a21085b6ca4ddba2873bbf0b205fe Mon Sep 17 00:00:00 2001
From: Alessandro <155005371+3clyp50@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:18:06 +0100
Subject: [PATCH 2/5] Modal styling WIP

---
 webui/index.html   | 22 +++++------
 webui/settings.css | 91 ++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 50128d5ee..673fcd02a 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -14,7 +14,7 @@
             if (window[name]) window[name](...args)
         }
     </script>
-    
+
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script type="module" src="index.js"></script>
@@ -40,13 +40,13 @@
                 <a href="https://github.com/frdel/agent-zero" target="_blank" rel="noopener noreferrer">
                     <img src="splash.jpg" alt="a0" width="22" height="22">
                 </a>
-            </div>
         </div>
+    </div>
         
-        <div id="left-panel" class="panel">
-            <div class="left-panel-top">
-                <!--Sidebar upper elements-->
-                <div class="config-section" id="status-section" x-data="{ connected: true }">
+    <div id="left-panel" class="panel">
+        <!--Sidebar upper elements-->
+        <div class="left-panel-top">                
+            <div class="config-section" id="status-section" x-data="{ connected: true }">
                     <h3>Status</h3>
                     <h4 class="connected" x-show="connected">&#10004; Connected</h4>
                     <h4 class="disconnected" x-show="!connected">&#10008; Disconnected</h4>
@@ -79,9 +79,9 @@
                     </ul>
                 </div>
             </div>
-            </div>
-                   <!--Sidebar lower elements-->
-                <div class="left-panel-bottom">
+        </div>
+        <!--Sidebar lower elements-->
+        <div class="left-panel-bottom">
             <!-- Preferences -->
             <div class="pref-section" x-data="{ prefOpen: true }">
                 <span><h3 class="pref-header" @click="prefOpen = !prefOpen">
@@ -180,7 +180,6 @@
             </div>
         </div>
     </div>
-
     <div id="settingsModal" x-data="settingsModalProxy">
         <h1 x-text="settings.title"></h1>
         <template x-teleport="body">
@@ -279,17 +278,18 @@
                     </div>
 
                     <div class="modal-footer">
+                        <div id="buttons-container">
                         <template x-for="button in settings.buttons" :key="button.id">
                             <button :class="button.classes" @click="handleButton(button.id)"
                                 x-text="button.title"></button>
                         </template>
+                        </div>
                     </div>
                 </div>
             </div>
         </template>
     </div>
 
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/webui/settings.css b/webui/settings.css
index edfa23ce7..22802e5e6 100644
--- a/webui/settings.css
+++ b/webui/settings.css
@@ -8,6 +8,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 1001;
 }
 
 .modal-container {
@@ -30,6 +31,30 @@
     padding: 2rem;
     overflow-y: auto;
     flex-grow: 1;
+    background-clip: border-box;
+    border: 6px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.modal-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.modal-content::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 4px 0;
+  border-radius: 6px;
+}
+
+.modal-content::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.5);
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+}
+
+.modal-content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
 }
 
 .modal-footer {
@@ -97,6 +122,7 @@ input[type="text"] {
     padding: 0.5rem;
     border: 1px solid #ddd;
     border-radius: 0.25rem;
+    font-family: Rubik;
 }
 
 textarea {
@@ -106,8 +132,13 @@ textarea {
     border: 1px solid #ddd;
     border-radius: 0.25rem;
     margin-top: 1rem;
-    font-family: inherit;
-    resize: vertical;
+    font-family: Roboto Mono;
+    scroll-behavior: smooth;
+    resize: none;
+      /*-/* scrollbar padding */
+      background-clip: border-box;
+      border: 6px solid transparent;
+      transition: all 0.3s ease;
 }
 
 .toggle {
@@ -165,12 +196,18 @@ input[type="range"] {
     text-align: right;
 }
 
+#buttons-container {
+        display: flex;
+        gap: 0.875rem;
+    }
+
 .btn {
-    padding: 0.5rem 1rem;
+    padding: 0.7rem 1.5rem;
     border-radius: 0.25rem;
     cursor: pointer;
     border: none;
     font-size: 0.875rem;
+    font-family: Rubik;
 }
 
 .btn-ok {
@@ -202,6 +239,7 @@ select {
     background-color: white;
     font-size: inherit;
     cursor: pointer;
+    font-family: Rubik;
 }
 
 select:disabled {
@@ -228,4 +266,51 @@ nav ul li a {
 
 nav ul li a:hover {
     text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+    .modal-header {
+        padding: 1.5rem 2rem;
+        border-bottom: 1px solid #eee;
+    }
+    
+    .modal-content {
+        padding: 1rem;
+        overflow-y: auto;
+        flex-grow: 1;
+    }
+    
+    .modal-footer {
+        padding: 1.5rem;
+    }
+
+    #buttons-container {
+        display: flex;
+        gap: 1rem;
+        margin: 0 auto;
+    }
+    
+    .section {
+        margin-bottom: 2rem;
+        padding: 1rem;
+        border: 1px solid #eee;
+        border-radius: 0.5rem;
+    }
+
+    .field-control {
+     width: 100%;   
+    }
+    .field-description {
+     padding-bottom: var(--spacing-xs);
+    }
+    .field {
+    padding-top: var(--spacing-xs);
+    padding-bottom: var(--spacing-xs);
+    display: block;
+    align-items: center;
+    }
+    .select {
+        margin-top: 100px !important;
+        padding-bottom: 1rem;
+    }
 }
\ No newline at end of file

From e6ac772a2ed6ed76fa843a6edc31218c54e955eb Mon Sep 17 00:00:00 2001
From: Alessandro <real.eclypso@gmail.com>
Date: Mon, 4 Nov 2024 20:58:55 +0100
Subject: [PATCH 3/5] Mobile and UX update

---
 webui/index.css    |  7 +++++--
 webui/settings.css | 41 ++++++++++++++++++++++-------------------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/webui/index.css b/webui/index.css
index 800709652..b2d2c998a 100644
--- a/webui/index.css
+++ b/webui/index.css
@@ -588,12 +588,13 @@ pre {
   font-optical-sizing: auto;
   font-size: 0.875rem;
   max-height: 7rem;
-  min-height: 1.9rem;
+  min-height: 1.5rem;
   padding: var(--spacing-xs) var(--spacing-sm);
   overflow-y: auto;
   scroll-behavior: smooth;
   resize: none;
-  /* scrollbar padding */
+  align-content: space-around;
+  /* scrollbar padding */  
   background-clip: border-box;
   border: 6px solid transparent;
   transition: all 0.3s ease;
@@ -1042,6 +1043,8 @@ input:checked + .slider:before {
 
   #chat-input {
     min-height: 4.2rem;
+    padding-top: 0.7rem;
+    align-content:baseline;
   }
 }
 
diff --git a/webui/settings.css b/webui/settings.css
index 22802e5e6..201d03f7a 100644
--- a/webui/settings.css
+++ b/webui/settings.css
@@ -8,7 +8,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1001;
+    z-index: 2001;
 }
 
 .modal-container {
@@ -28,7 +28,7 @@
 }
 
 .modal-content {
-    padding: 2rem;
+    padding: 1.5rem;
     overflow-y: auto;
     flex-grow: 1;
     background-clip: border-box;
@@ -59,7 +59,7 @@
 
 .modal-footer {
     padding: 1.5rem 2rem;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--color-border);
     display: flex;
     justify-content: flex-end;
     gap: 1rem;
@@ -69,7 +69,7 @@
 .section {
     margin-bottom: 2rem;
     padding: 1rem;
-    border: 1px solid #eee;
+    border: 1px solid var(--color-border);
     border-radius: 0.5rem;
 }
 
@@ -85,10 +85,9 @@
 }
 
 .field {
-    margin-bottom: 1.5rem;
     display: grid;
-    grid-template-columns: 200px 1fr;
-    gap: 1rem;
+    margin-block-start: 1rem;
+    grid-template-columns: 250px 1fr;
     align-items: center;
 }
 
@@ -109,12 +108,13 @@
     color: #666;
     font-size: 0.875rem;
     margin-top: 0.25rem;
+    margin-bottom: 0.5rem;
 }
 
 .field-control {
+    width: 100%;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
 }
 
 input[type="text"] {
@@ -131,7 +131,6 @@ textarea {
     padding: 0.5rem;
     border: 1px solid #ddd;
     border-radius: 0.25rem;
-    margin-top: 1rem;
     font-family: Roboto Mono;
     scroll-behavior: smooth;
     resize: none;
@@ -211,15 +210,23 @@ input[type="range"] {
 }
 
 .btn-ok {
-    background: #2196F3;
+    background: #3270e2;
     color: white;
 }
 
+.btn-ok:hover{
+    background: #274170;
+}
+
 .btn-cancel {
     background: #ddd;
     color: #333;
 }
 
+.btn-cancel:hover {
+    background: #222
+}
+
 .btn-field {
     background: #2196F3;
     color: white;
@@ -270,8 +277,8 @@ nav ul li a:hover {
 
 @media (max-width: 768px) {
     .modal-header {
-        padding: 1.5rem 2rem;
-        border-bottom: 1px solid #eee;
+        padding: 0.7rem 2rem;
+        border-bottom: 1px solid var(--color-border);
     }
     
     .modal-content {
@@ -291,9 +298,9 @@ nav ul li a:hover {
     }
     
     .section {
-        margin-bottom: 2rem;
+        margin-bottom: 1.5rem;
         padding: 1rem;
-        border: 1px solid #eee;
+        border: 1px solid var(--color-border);
         border-radius: 0.5rem;
     }
 
@@ -301,7 +308,7 @@ nav ul li a:hover {
      width: 100%;   
     }
     .field-description {
-     padding-bottom: var(--spacing-xs);
+     padding-bottom: var(--spacing-sm);
     }
     .field {
     padding-top: var(--spacing-xs);
@@ -309,8 +316,4 @@ nav ul li a:hover {
     display: block;
     align-items: center;
     }
-    .select {
-        margin-top: 100px !important;
-        padding-bottom: 1rem;
-    }
 }
\ No newline at end of file

From 6ff3df03de70db53dff11001cf8b78c7806ad698 Mon Sep 17 00:00:00 2001
From: Alessandro <real.eclypso@gmail.com>
Date: Mon, 4 Nov 2024 21:06:48 +0100
Subject: [PATCH 4/5] toast!

---
 webui/toast.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webui/toast.css b/webui/toast.css
index dde8d00dd..86334eb25 100644
--- a/webui/toast.css
+++ b/webui/toast.css
@@ -27,6 +27,7 @@
   }
   
   .toast__message {
+    margin-left: var(--spacing-xs);
     margin-right: 16px;
     flex-grow: 1;
   }

From 61b5b8389a8af536c0444b4a659be9d04c1cff06 Mon Sep 17 00:00:00 2001
From: Alessandro <155005371+3clyp50@users.noreply.github.com>
Date: Mon, 4 Nov 2024 22:26:07 +0100
Subject: [PATCH 5/5] other things + Embedding Model selection

---
 initialize.py              |  2 +-
 models.py                  | 15 +++++++++++
 python/helpers/settings.py | 55 +++++++++++++++++++++++++++++++-------
 webui/settings.css         | 29 +++++++++++++++++---
 4 files changed, 87 insertions(+), 14 deletions(-)

diff --git a/initialize.py b/initialize.py
index 9c7103f00..ad7a1b016 100644
--- a/initialize.py
+++ b/initialize.py
@@ -33,7 +33,7 @@ def initialize():
         chat_model = chat_llm,
         utility_model = utility_llm,
         embeddings_model = embedding_llm,
-        prompts_subdir = "dianoia-xl",
+        prompts_subdir = "",
         # memory_subdir = "",
         knowledge_subdirs = ["default","custom"],
         auto_memory_count = 0,
diff --git a/models.py b/models.py
index 8f773f94e..e521f6689 100644
--- a/models.py
+++ b/models.py
@@ -44,6 +44,13 @@ class ModelProvider(Enum):
     OPENROUTER = "OpenRouter"
     SAMBANOVA = "Sambanova"
 
+class EmbeddingProvider(Enum):
+    OPENAI = "OpenAI" # default
+    HUGGINGFACE = "HuggingFace"
+    OLLAMA = "Ollama"
+    LMSTUDIO = "LM Studio"
+    OPENROUTER = "OpenRouter"
+    AZURE = "OpenAI Azure"
 
 # Utility function to get API keys from environment variables
 def get_api_key(service):
@@ -53,10 +60,18 @@ def get_api_key(service):
 
 
 def get_model(type: ModelType, provider: ModelProvider, name: str, **kwargs):
+    if type == ModelType.EMBEDDING:
+        # call function for embedding models
+        return get_embedding_model(provider, name, **kwargs)
+    # for other model types
     fnc_name = f"get_{provider.name.lower()}_{type.name.lower()}"  # function name of model getter
     model = globals()[fnc_name](name, **kwargs)  # call function by name
     return model
 
+def get_embedding_model(provider: EmbeddingProvider, name: str, **kwargs):
+    fnc_name = f"get_{provider.name.lower()}_embedding"  # function name for embedding models
+    model = globals()[fnc_name](name, **kwargs)  # call function by name
+    return model
 
 # Ollama models
 def get_ollama_chat(
diff --git a/python/helpers/settings.py b/python/helpers/settings.py
index 045575573..688e68dc8 100644
--- a/python/helpers/settings.py
+++ b/python/helpers/settings.py
@@ -3,7 +3,7 @@ import os
 import re
 from typing import Any, Optional, TypedDict
 from . import files
-from models import get_model, ModelProvider, ModelType
+from models import get_model, get_embedding_model, ModelProvider, EmbeddingProvider, ModelType
 from langchain_core.language_models.chat_models import BaseChatModel
 from langchain_core.embeddings import Embeddings
 
@@ -32,7 +32,6 @@ _settings: Settings | None = None
 
 
 def convert_out(settings: Settings) -> dict[str, Any]:
-
     # main model section
     chat_model_fields = []
     chat_model_fields.append(
@@ -78,13 +77,13 @@ def convert_out(settings: Settings) -> dict[str, Any]:
         }
     )
 
-    chat_model_seciton = {
+    chat_model_section = {
         "title": "Chat Model",
         "description": "Selection and settings for main chat model used by Agent Zero",
         "fields": chat_model_fields,
     }
 
-    # main model section
+    # utility model section
     util_model_fields = []
     util_model_fields.append(
         {
@@ -129,13 +128,51 @@ def convert_out(settings: Settings) -> dict[str, Any]:
         }
     )
 
-    util_model_seciton = {
-        "title": "Utility model",
+    util_model_section = {
+        "title": "Utility Model",
         "description": "Smaller, cheaper, faster model for handling utility tasks like organizing memory, preparing prompts, summarizing.",
         "fields": util_model_fields,
     }
 
-    result = {"sections": [chat_model_seciton, util_model_seciton]}
+    # embedding model section
+    embed_model_fields = []
+    embed_model_fields.append(
+        {
+            "id": "embed_model_provider",
+            "title": "Embedding model provider",
+            "description": "Select provider for embedding model used by the framework",
+            "type": "select",
+            "value": settings["embed_model_provider"],
+            "options": [{"value": p.name, "label": p.value} for p in EmbeddingProvider],
+        }
+    )
+    embed_model_fields.append(
+        {
+            "id": "embed_model_name",
+            "title": "Embedding model name",
+            "description": "Exact name of model from selected provider",
+            "type": "input",
+            "value": settings["embed_model_name"],
+        }
+    )
+
+    embed_model_fields.append(
+        {
+            "id": "embed_model_kwargs",
+            "title": "Embedding model additional parameters",
+            "description": "Any other parameters supported by the model. Format is KEY=VALUE on individual lines, just like .env file.",
+            "type": "textarea",
+            "value": _dict_to_env(settings["embed_model_kwargs"]),
+        }
+    )
+
+    embed_model_section = {
+        "title": "Embedding Model",
+        "description": "Settings for the embedding model used by Agent Zero.",
+        "fields": embed_model_fields,
+    }
+
+    result = {"sections": [chat_model_section, util_model_section, embed_model_section]}
     return result
 
 def convert_in(settings: dict[str, Any]) -> Settings:
@@ -200,7 +237,7 @@ def get_embedding_model() -> Embeddings:
     settings = get_settings()
     return get_model(
         type=ModelType.EMBEDDING,
-        provider=ModelProvider[settings["embed_model_provider"]],
+        provider=EmbeddingProvider[settings["embed_model_provider"]],
         name=settings["embed_model_name"],
         **settings["embed_model_kwargs"],
     )
@@ -228,7 +265,7 @@ def _get_default_settings() -> Settings:
         util_model_name="gpt-4o-mini",
         util_model_temperature=0,
         util_model_kwargs={},
-        embed_model_provider=ModelProvider.OPENAI.name,
+        embed_model_provider=EmbeddingProvider.OPENAI.name,
         embed_model_name="text-embedding-3-small",
         embed_model_kwargs={},
     )
diff --git a/webui/settings.css b/webui/settings.css
index 201d03f7a..23faae7ff 100644
--- a/webui/settings.css
+++ b/webui/settings.css
@@ -1,3 +1,11 @@
+* {
+    transition: all var(--transition-speed) ease-in-out;
+}
+
+select {
+  transition: none;
+}
+
 .modal-overlay {
     position: fixed;
     top: 0;
@@ -23,8 +31,8 @@
 }
 
 .modal-header {
-    padding: 1.5rem 2rem;
-    border-bottom: 1px solid #eee;
+    padding: 0.875rem 2rem;
+    border-bottom: 1px solid var(--color-border);
 }
 
 .modal-content {
@@ -34,6 +42,8 @@
     background-clip: border-box;
     border: 6px solid transparent;
     transition: all 0.3s ease;
+    margin-bottom: 0;
+    padding-bottom: 0;
 }
 
 .modal-content::-webkit-scrollbar {
@@ -212,19 +222,29 @@ input[type="range"] {
 .btn-ok {
     background: #3270e2;
     color: white;
+    transition: background 0.3s ease-in-out;
 }
 
 .btn-ok:hover{
-    background: #274170;
+    background: #3265c0;
+}
+
+.btn-ok:active{
+    background: #345693;
 }
 
 .btn-cancel {
     background: #ddd;
     color: #333;
+    transition: background 0.3s ease-in-out;
 }
 
 .btn-cancel:hover {
-    background: #222
+    background: #a6a6a6
+}
+
+.btn-cancel:active {
+    background: #808080
 }
 
 .btn-field {
@@ -247,6 +267,7 @@ select {
     font-size: inherit;
     cursor: pointer;
     font-family: Rubik;
+    outline: none;
 }
 
 select:disabled {