From 43bc1eb28d558e9ed162ad8b0297d2743eac7033 Mon Sep 17 00:00:00 2001
From: Justine Tunney <jtunney@mozilla.com>
Date: Fri, 13 Dec 2024 00:02:21 -0800
Subject: [PATCH] Improve buttons in web ui

---
 llamafile/server/www/chatbot.css   | 22 ++++++++++++++--------
 llamafile/server/www/gear.svg      |  4 ++++
 llamafile/server/www/index.html    |  8 ++++----
 llamafile/server/www/paperclip.svg |  4 ++++
 llamafile/server/www/redo.svg      | 19 +++++++++++++++++++
 5 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 llamafile/server/www/gear.svg
 create mode 100644 llamafile/server/www/paperclip.svg
 create mode 100644 llamafile/server/www/redo.svg

diff --git a/llamafile/server/www/chatbot.css b/llamafile/server/www/chatbot.css
index 3ff371431e..9f50fea2fe 100644
--- a/llamafile/server/www/chatbot.css
+++ b/llamafile/server/www/chatbot.css
@@ -267,21 +267,23 @@ ul li:first-child {
 }
 
 .redo-button {
+  padding: 0.5rem .5rem;
+  background: #6c757d;
+  color: white;
   padding: 8px;
-  background: transparent;
   border: none;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 20px;
-  color: #666;
   transition: color 0.2s;
 }
 
 .redo-button:hover {
-  color: #000;
+  background: #5c636a;
 }
 
 .settings-button {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem .5rem;
   background: #6c757d;
   color: white;
   border: none;
@@ -483,17 +485,21 @@ ul li:first-child {
 }
 
 .upload-button {
-  padding-left: .5rem;
-  background: transparent;
+  padding: 0.5rem .5rem;
+  background: #6c757d;
+  color: white;
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  font-size: 1rem;
   transition: color 0.2s;
 }
 
+.upload-button img {
+  vertical-align: middle;
+}
+
 .upload-button:hover {
-  color: #0d6efd;
+  background: #5c636a;
 }
 
 .mode-dropdown {
diff --git a/llamafile/server/www/gear.svg b/llamafile/server/www/gear.svg
new file mode 100644
index 0000000000..a8bb4a1230
--- /dev/null
+++ b/llamafile/server/www/gear.svg
@@ -0,0 +1,4 @@
+<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>
diff --git a/llamafile/server/www/index.html b/llamafile/server/www/index.html
index e338b352c5..728fe1b351 100644
--- a/llamafile/server/www/index.html
+++ b/llamafile/server/www/index.html
@@ -31,10 +31,10 @@ <h1>
     <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">⚙️</button>
-    <button class="upload-button" id="upload-button">📎</button>
-    <button class="redo-button" id="redo-button" title="Redo last message">↺</button>
-    <input type="file" id="file-upload" accept="image/*,text/*" style="display: none">
+    <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="paperclip.svg" alt="[upload]" width="30" height="30"></button>
+    <input type="file" id="file-upload" style="display: none">
   </div>
 </div>
 
diff --git a/llamafile/server/www/paperclip.svg b/llamafile/server/www/paperclip.svg
new file mode 100644
index 0000000000..1861bc2d9b
--- /dev/null
+++ b/llamafile/server/www/paperclip.svg
@@ -0,0 +1,4 @@
+<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>
diff --git a/llamafile/server/www/redo.svg b/llamafile/server/www/redo.svg
new file mode 100644
index 0000000000..6a8ada6338
--- /dev/null
+++ b/llamafile/server/www/redo.svg
@@ -0,0 +1,19 @@
+<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>