From 6d51f81082f84a875b125bbbfae5e8764ea51c99 Mon Sep 17 00:00:00 2001
From: corebonts <corebonts@gmail.com>
Date: Wed, 12 Mar 2025 21:30:24 +0100
Subject: [PATCH 1/4] Replace button icons with fontawsome basic SVGs

It gives a more consistent look.
---
 llamafile/server/www/gear.svg   |  5 +----
 llamafile/server/www/redo.svg   | 20 +-------------------
 llamafile/server/www/upload.svg |  5 +----
 3 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/llamafile/server/www/gear.svg b/llamafile/server/www/gear.svg
index a8bb4a1230..5d2f3977f7 100644
--- a/llamafile/server/www/gear.svg
+++ b/llamafile/server/www/gear.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
-  <path d="M12 8c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" fill="white"/>
-  <path d="M13.6 4.2l.4 2c.1.3.4.5.7.5.2 0 .4-.1.5-.2l1.7-1.1c.7.4 1.3.9 1.8 1.5l-.6 1.9c-.1.3 0 .6.2.8.2.1.3.2.5.2l2 .2c.1.8.1 1.6 0 2.4l-2 .2c-.3 0-.6.3-.7.6 0 .2 0 .4.1.6l.6 1.9c-.5.6-1.1 1.2-1.8 1.6l-1.7-1.1c-.3-.2-.6-.2-.9 0-.2.1-.3.3-.3.5l-.4 2c-.8.2-1.6.2-2.4 0l-.4-2c-.1-.3-.4-.5-.7-.5-.2 0-.4.1-.5.2l-1.7 1.1c-.7-.4-1.3-.9-1.8-1.5l.6-1.9c.1-.3 0-.6-.2-.8-.2-.1-.3-.2-.5-.2l-2-.2c-.1-.8-.1-1.6 0-2.4l2-.2c.3 0 .6-.3.7-.6 0-.2 0-.4-.1-.6l-.6-1.9c.5-.6 1.1-1.2 1.8-1.6l1.7 1.1c.3.2.6.2.9 0 .2-.1.3-.3.3-.5l.4-2c.8-.2 1.6-.2 2.4 0zM12 16c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4z" fill="white"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" fill="white"/></svg>
\ No newline at end of file
diff --git a/llamafile/server/www/redo.svg b/llamafile/server/www/redo.svg
index 6a8ada6338..c3038d5167 100644
--- a/llamafile/server/www/redo.svg
+++ b/llamafile/server/www/redo.svg
@@ -1,19 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <!-- Circular arrow path -->
-  <path 
-    d="M18.4 10.6C17.5 8.2 15 6.5 12 6.5c-4.1 0-7.5 3.4-7.5 7.5s3.4 7.5 7.5 7.5c2.3 0 4.4-1.1 5.8-2.8"
-    fill="none"
-    stroke="white"
-    stroke-width="2"
-    stroke-linecap="round"
-  />
-  <!-- Arrow head -->
-  <path 
-    d="M19.5 5.5v5h-5"
-    fill="none"
-    stroke="white"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z" fill="white"/></svg>
\ No newline at end of file
diff --git a/llamafile/server/www/upload.svg b/llamafile/server/www/upload.svg
index 1861bc2d9b..2c15d22029 100644
--- a/llamafile/server/www/upload.svg
+++ b/llamafile/server/www/upload.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M17 7v8.5c0 2.5-2 4.5-4.5 4.5S8 18 8 15.5V7.5C8 5.6 9.6 4 11.5 4S15 5.6 15 7v8c0 1.4-1.1 2.5-2.5 2.5S10 16.4 10 15V8h1v7c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V7c0-1.4-1.1-2.5-2.5-2.5S9 5.6 9 7v8.5c0 1.9 1.6 3.5 3.5 3.5s3.5-1.6 3.5-3.5V7h1z"
-        fill="white" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z" fill="white"/></svg>
\ No newline at end of file

From 50cd8f1eb71a00082ca8170a6a65098decbdfbe0 Mon Sep 17 00:00:00 2001
From: corebonts <corebonts@gmail.com>
Date: Wed, 12 Mar 2025 21:35:29 +0100
Subject: [PATCH 2/4] Add button icon for the menu-trigger

---
 llamafile/server/www/index.html | 2 +-
 llamafile/server/www/menu.svg   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 llamafile/server/www/menu.svg

diff --git a/llamafile/server/www/index.html b/llamafile/server/www/index.html
index 76c2e544cf..abd0a1f7e7 100644
--- a/llamafile/server/www/index.html
+++ b/llamafile/server/www/index.html
@@ -16,7 +16,7 @@ <h1>
       <span id="model">loading...</span>
     </h1>
     <div class="menu-dropdown">
-      <button class="menu-trigger">▼</button>
+      <button class="menu-trigger"><img src="menu.svg" alt="[menu]"></button>
       <div class="menu">
         <button class="menu-item" id="chat-mode-switch">Switch to Completions Mode</button>
       </div>
diff --git a/llamafile/server/www/menu.svg b/llamafile/server/www/menu.svg
new file mode 100644
index 0000000000..7059fa57b3
--- /dev/null
+++ b/llamafile/server/www/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z" fill="white"/></svg>
\ No newline at end of file

From 11dae281df64949372f702bd65c93b37b81fb5d9 Mon Sep 17 00:00:00 2001
From: corebonts <corebonts@gmail.com>
Date: Wed, 12 Mar 2025 21:36:37 +0100
Subject: [PATCH 3/4] Unify button look and rearrange buttons to make them more
 compact

---
 llamafile/server/www/chatbot.css | 110 +++++++++++--------------------
 llamafile/server/www/index.html  |  16 +++--
 2 files changed, 48 insertions(+), 78 deletions(-)

diff --git a/llamafile/server/www/chatbot.css b/llamafile/server/www/chatbot.css
index 7d74b2d114..618cf89e30 100644
--- a/llamafile/server/www/chatbot.css
+++ b/llamafile/server/www/chatbot.css
@@ -45,6 +45,7 @@ p {
 .chat-header h1 {
   font-size: 2rem;
   color: #212529;
+  word-break: break-word;
 }
 
 .chat-header img {
@@ -177,15 +178,47 @@ ul li:first-child {
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
-.send-button {
-  padding: 0.75rem 1.5rem;
-  background: #0d6efd;
+.chat-input-container button, .menu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: white;
   border: none;
   border-radius: 6px;
   cursor: pointer;
+  transition: color 0.2s;
+}
+
+.chat-input-button-container {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-end;
+  gap: 0.5em;
+}
+
+.chat-input-button-container button img, .menu-trigger img {
+  width: 24px;
+  height: 24px;
+}
+
+.chat-input-button-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.chat-input-button-row button, .menu-trigger {
+  padding: 0.5rem .5rem;
+  background: #9299a0;
+}
+
+.chat-input-button-row button:hover, .menu-trigger:hover {
+  background: #5c636a;
+}
+
+.send-button {
+  padding: 0.75rem 1.5rem;
+  background: #0d6efd;
   font-size: 1rem;
-  transition: background-color 0.2s;
 }
 
 .send-button:hover {
@@ -200,12 +233,7 @@ ul li:first-child {
 .stop-button {
   padding: 0.75rem 1.5rem;
   background: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
   font-size: 1rem;
-  transition: background-color 0.2s;
 }
 
 .stop-button:hover {
@@ -268,37 +296,6 @@ ul li:first-child {
   display: block;
 }
 
-.redo-button {
-  padding: 0.5rem .5rem;
-  background: #6c757d;
-  color: white;
-  padding: 8px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 20px;
-  transition: color 0.2s;
-}
-
-.redo-button:hover {
-  background: #5c636a;
-}
-
-.settings-button {
-  padding: 0.5rem .5rem;
-  background: #6c757d;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.2s;
-}
-
-.settings-button:hover {
-  background: #5c636a;
-}
-
 .settings-modal {
   position: fixed;
   top: 0;
@@ -486,24 +483,6 @@ ul li:first-child {
   background: #0b5ed7;
 }
 
-.upload-button {
-  padding: 0.5rem .5rem;
-  background: #6c757d;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.upload-button img {
-  vertical-align: middle;
-}
-
-.upload-button:hover {
-  background: #5c636a;
-}
-
 .mode-dropdown {
   display: none;
 }
@@ -527,20 +506,7 @@ ul li:first-child {
 .menu-dropdown {
   position: relative;
   display: inline-block;
-}
-
-.menu-trigger {
-  padding: 0.5rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 0.8rem;
-  color: #666;
-  transition: color 0.2s;
-}
-
-.menu-trigger:hover {
-  color: #000;
+  align-self: flex-start;
 }
 
 .menu {
diff --git a/llamafile/server/www/index.html b/llamafile/server/www/index.html
index abd0a1f7e7..45f2ac8ba2 100644
--- a/llamafile/server/www/index.html
+++ b/llamafile/server/www/index.html
@@ -34,12 +34,16 @@ <h1>
   </div>
   <div class="chat-input-container noprint">
     <textarea class="chat-input" id="chat-input" placeholder="Type your message..." rows="1" autocomplete="off"></textarea>
-    <button class="send-button" id="send-button">Send</button>
-    <button class="stop-button" id="stop-button" style="display:none">Stop</button>
-    <button class="settings-button" id="settings-button" title="Settings"><img src="gear.svg" alt="[settings]" width="30" height="30"></button>
-    <button class="redo-button" id="redo-button" title="Redo last message"><img src="redo.svg" alt="[redo]" width="30" height="30"></button>
-    <button class="upload-button" id="upload-button" title="Upload"><img src="upload.svg" alt="[upload]" width="30" height="30"></button>
-    <input type="file" id="file-upload" style="display: none">
+    <div class="chat-input-button-container">
+      <button class="send-button" id="send-button">Send</button>
+      <button class="stop-button" id="stop-button" style="display:none">Stop</button>
+      <div class="chat-input-button-row">
+        <button class="settings-button" id="settings-button" title="Settings"><img src="gear.svg" alt="[settings]"></button>
+        <button class="redo-button" id="redo-button" title="Redo last message"><img src="redo.svg" alt="[redo]"></button>
+        <button class="upload-button" id="upload-button" title="Upload"><img src="upload.svg" alt="[upload]"  ></button>
+        <input type="file" id="file-upload" style="display: none">
+      </div>
+    </div>
   </div>
 </div>
 

From 43d8f44748707a332f7ec61c600ee0166168a02f Mon Sep 17 00:00:00 2001
From: corebonts <corebonts@gmail.com>
Date: Thu, 13 Mar 2025 18:55:05 +0100
Subject: [PATCH 4/4] Apply styles from the chat mode to the completion mode
 also

- images
- button styles
- textarea style
---
 llamafile/server/www/chatbot.css | 44 +++++++++++++++-----------------
 llamafile/server/www/index.html  |  4 +--
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/llamafile/server/www/chatbot.css b/llamafile/server/www/chatbot.css
index 618cf89e30..36c04c7120 100644
--- a/llamafile/server/www/chatbot.css
+++ b/llamafile/server/www/chatbot.css
@@ -173,12 +173,15 @@ ul li:first-child {
   background-color: transparent;
 }
 
-.chat-input:focus {
+.chat-input:focus,
+#completions-input:focus {
   border-color: #86b7fe;
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
-.chat-input-container button, .menu-trigger {
+.chat-input-container button,
+.menu-trigger,
+.completions-content button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -196,7 +199,9 @@ ul li:first-child {
   gap: 0.5em;
 }
 
-.chat-input-button-container button img, .menu-trigger img {
+.chat-input-button-container button img,
+.menu-trigger img,
+.completions-controls img {
   width: 24px;
   height: 24px;
 }
@@ -206,26 +211,33 @@ ul li:first-child {
   gap: 0.5rem;
 }
 
-.chat-input-button-row button, .menu-trigger {
+.chat-input-button-row button,
+.menu-trigger,
+.completions-controls button {
   padding: 0.5rem .5rem;
   background: #9299a0;
 }
 
-.chat-input-button-row button:hover, .menu-trigger:hover {
+.chat-input-button-row button:hover,
+.menu-trigger:hover,
+.completions-controls button:hover {
   background: #5c636a;
 }
 
-.send-button {
+.send-button,
+button.complete-button {
   padding: 0.75rem 1.5rem;
   background: #0d6efd;
   font-size: 1rem;
 }
 
-.send-button:hover {
+.send-button:hover,
+button.complete-button:hover {
   background: #0b5ed7;
 }
 
-.send-button:disabled {
+.send-button:disabled,
+button.complete-button:disabled {
   background: #6c757d;
   cursor: not-allowed;
 }
@@ -461,6 +473,7 @@ ul li:first-child {
   font-size: 1rem;
   font-family: inherit;
   resize: none;
+  outline: none ;
 }
 
 .completions-controls {
@@ -468,21 +481,6 @@ ul li:first-child {
   gap: 0.5rem;
 }
 
-.complete-button {
-  padding: 0.75rem 1.5rem;
-  background: #0d6efd;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.2s;
-}
-
-.complete-button:hover {
-  background: #0b5ed7;
-}
-
 .mode-dropdown {
   display: none;
 }
diff --git a/llamafile/server/www/index.html b/llamafile/server/www/index.html
index 45f2ac8ba2..1694c3669f 100644
--- a/llamafile/server/www/index.html
+++ b/llamafile/server/www/index.html
@@ -54,7 +54,7 @@ <h1>
       <span id="model-completions">llamafile</span>
     </h1>
     <div class="menu-dropdown">
-      <button class="menu-trigger">▼</button>
+      <button class="menu-trigger"><img src="menu.svg" alt="[menu]"></button>
       <div class="menu">
         <button class="menu-item" id="completions-mode-switch">Switch to Chat Mode</button>
       </div>
@@ -65,7 +65,7 @@ <h1>
     <div class="completions-controls">
       <button class="complete-button" id="complete-button">Complete</button>
       <button class="stop-button" id="completions-stop-button" style="display:none">Stop</button>
-      <button class="settings-button" id="completions-settings-button" title="Settings">⚙️</button>
+      <button class="settings-button" id="completions-settings-button" title="Settings"><img src="gear.svg" alt="[settings]"></button>
     </div>
   </div>
 </div>