Merge pull request #27 from christianhellsten/design-update-2

Add buttons for marking quality of response: flag, good, bad
christianhellsten · Jan 20, 2024 · 1b42abf · 1b42abf
2 parents 3d12165 + b3ecc32
commit 1b42abf
Show file tree

Hide file tree

Showing 37 changed files with 430 additions and 494 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 tmp
 
+.envrc
+
 # Logs
 logs
 *.log

diff --git a/Caddyfile b/Caddyfile
@@ -1,5 +1,27 @@
 :80
 
-root * dist/
+# Enable the static file server
 file_server
-try_files {path} /index.html
+
+# Add compression
+encode zstd gzip
+
+# Reverse proxy configuration for the API
+reverse_proxy /api/* {
+    to http://localhost:11434
+
+    # basicauth /* {
+    #     apitoken $2a$14$sI1j0RbhzKHMZ4cHU8otHOkB3Dgl9egF2D.CXB6C0/Qk5dtaMHS/u
+    # }
+    # Remove Origin
+    # header_up -Origin
+    # Add a new Origin header
+    # header_up Origin http://127.0.0.1
+}
+
+root * dist/
+
+log {
+    output stdout
+    format json
+}
diff --git a/README.md b/README.md
@@ -126,17 +126,18 @@ $ parcel build index.html
 <details>
   <summary>Tasks</summary>
 
+  - [ ] Personas / Characters / Custom GPTs
   - [ ] Ollama authentication
   - [ ] Edit message / response
   - [ ] Clear chat
   - [ ] CSP
   - [ ] Speech recognition
   - [ ] Image upload / multi-modal
   - [ ] Markdown support
-  - [ ] Vote up / down
 
   ## Done
 
+  - [x] Mark message as good, bad, flagged
   - [x] Export chat messages to JSON
   - [x] Keyboard shortcuts
   - [x] Dark & light theme

diff --git a/css/ChatList.scss b/css/ChatList.scss
@@ -9,6 +9,10 @@
       transparent
     ); // Fade out title instead of ellipsis
   }
+
+  .button {
+    padding: 0.25rem 0.75rem;
+  }
 }
 
 .list-item.selected {

diff --git a/css/DropDownMenu.scss b/css/DropDownMenu.scss
@@ -7,6 +7,12 @@
   position: absolute;
   top: 100%; /* Position below the button */
   display: none; /* Hide initially */
+  font-size: 0.75rem;
+  white-space: nowrap;
+
+  i[class^='icon-']::before {
+    padding-right: 0.5rem;
+  }
 
   @extend %box-shadow;
 

diff --git a/css/button.scss b/css/button.scss
@@ -1,18 +1,28 @@
 button {
   background-color: var(--button-secondary-bgcolor);
   z-index: 1;
-  padding: 0.75rem 1rem;
   border: none;
   cursor: pointer;
+}
+
+.button {
+  padding: 0.75rem 1rem;
 
   i {
-    width: 1rem; // Center the icon
     display: inline-block;
   }
+
+  i[class^='icon-'].selected {
+    filter: grayscale(0%); // Make icons normal
+  }
+}
+
+.button-sm {
+  padding: 0.25rem;
 }
 
-button:hover,
-button.selected {
+.button:hover,
+.button.selected {
   @extend %box-shadow-hover;
 }
 

diff --git a/css/icons.scss b/css/icons.scss
@@ -6,6 +6,7 @@ i[class^='icon-'] {
   color: var(--icon-color);
   font-size: 0.75rem;
   vertical-align: middle;
+  filter: grayscale(100%); // Make icons grayscale
 }
 
 svg {
@@ -14,6 +15,22 @@ svg {
   vertical-align: middle;
 }
 
+.icon-export::before {
+  content: "\1F5E8 \2B07";  /* Speech Bubble and Downward Arrow */
+}
+
+.icon-flag::before {  /* Triangular Flag on Post */
+  content: "\26A0";
+}
+
+.icon-bad::before {
+  content: "\1F44E";
+}
+
+.icon-good::before {
+  content: "\1F44D";
+}
+
 .icon-close::before {
   content: '\00D7';
 }
@@ -59,10 +76,14 @@ svg {
   content: '\1F4E9';
 }
 
-.icon-delete::before {
+.icon-delete-alt::before {
   content: '\274C';
 }
 
+.icon-delete::before {
+  content: '\2716';
+}
+
 .icon-abort::before {
   content: '\00D7';
   color: var(--red);

diff --git a/css/modal.scss b/css/modal.scss
@@ -19,7 +19,8 @@
   border-bottom: 1px solid var(--border-color);
 
   .button {
-    background-color: var(--light-text-color);
+    color: var(--text-color);
+    background-color: var(--bg-color);
     padding: 0.35rem;
     line-height: 0.5rem;
     border-radius: 0.1rem;

diff --git a/css/reset.scss b/css/reset.scss
@@ -140,5 +140,5 @@ html * {
 }
 
 html {
-  font-size: 16px; /* Standard font size for body, use rem to modify font-size */
+  font-size: 14px; /* Standard font size for body, use rem to modify font-size */
 }
diff --git a/dist/index.html b/dist/index.html
@@ -15,7 +15,7 @@
   <body>
     <div id="chat-app">
       <header id="chat-header" class="row">
-        <button id="hamburger-menu" class="hamburger-menu button" title="Hide sidebar">
+        <button id="hamburger-menu" class="hamburger-menu button" title="Collapse or expand the sidebar">
           <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <rect x="4" y="6" width="16" height="2" fill="black"></rect>
             <rect x="4" y="11" width="16" height="2" fill="black"></rect>
@@ -40,19 +40,19 @@
             <button id="new-chat-button" class="button" title="New chat">
               <i class="icon-new"></i>
             </button>
-            <div id="chats-menu" class="drop-down-menu col">
+            <div id="chats-menu" class="drop-down-menu drop-down-menu-right col">
               <button id="chats-menu-button" class="button" title="Chats menu">
                 <i class="icon-menu"></i>
               </button>
               <div class="drop-down-menu-items hidden">
-                <button id="search-button" class="button" title="Search chats">
-                  <i class="icon-search"></i>
+                <button id="search-button" class="button row" title="Search chats">
+                  <i class="icon-search">Search chats</i>
                 </button>
-                <button id="export-button" class="button" title="Export all data">
-                  <i class="icon-download"></i>
+                <button id="export-button" class="button row" title="Export all data">
+                  <i class="icon-download">Download chats</i>
                 </button>
-                <button id="clear-button" class="button" title="Delete all chats">
-                  <i class="icon-clear"></i>
+                <button id="clear-button" class="button row" title="Delete all chats">
+                  <i class="icon-clear">Delete chats</i>
                 </button>
               </div>
             </div>
@@ -73,26 +73,29 @@
             </button>
             <div class="drop-down-menu-items hidden">
               <button id="edit-chat-button" class="button row" title="Edit chat title">
-                <i class="icon-edit"></i>
+                <i class="icon-edit">Edit title</i>
               </button>
               <button class="button copy-button row" title="Copy chat to clipboard" data-target="chat-history">
-                <i class="icon-copy"></i>
+                <i class="icon-copy">Copy chat</i>
               </button>
               <button id="delete-chat-button" class="button row" title="Delete chat">
-                <i class="icon-delete"></i>
+                <i class="icon-delete">Delete chat</i>
               </button>
               <button data-target="chat-history" class="button download-button row" title="Download chat">
-                <i class="icon-download"></i>
+                <i class="icon-download">Download chat</i>
+              </button>
+              <button id="export-chat-button" class="button row" title="Export chat to JSON">
+                <i class="icon-export">Export chat</i>
               </button>
               <button id="chat-settings-button" class="button" title="Chat settings">
-                <i class="icon-settings"></i>
+                <i class="icon-settings">Chat settings</i>
               </button>
             </div>
           </div>
-          <button id="scroll-to-top-button" class="row">
+          <button id="scroll-to-top-button" class="row button">
             <i class="icon-scroll-to-top"></i>
           </button>
-          <button id="scroll-to-end-button" class="row">
+          <button id="scroll-to-end-button" class="row button">
             <i class="icon-scroll-to-end"></i>
           </button>
         </aside>
@@ -169,25 +172,31 @@ <h2 class="col grw chat-title">Chat settings</h2>
     <template id="chat-message-template">
       <div class="chat-message">
         <span class="chat-message-text"></span>
-        <div id="chat-message-menu" class="drop-down-menu col hoverable">
-          <button id="chats-menu-button" class="button" title="Chats menu">
-            <i class="icon-menu"></i>
-          </button>
-          <div class="drop-down-menu-items hidden">
-            <button class="delete-chat-message-button button" title="Delete chat message">
+        <div class="col hoverable">
+          <button class="delete-chat-message-button button-sm" title="Delete chat message">
               <i class="icon-delete"></i>
-            </button>
-          </div>
-        </div>
+          </button>
+          <button class="copy-chat-message-button button-sm" title="Copy chat message to clipboard">
+              <i class="icon-copy copy-button"></i>
+          </button>
+          <button class="good-chat-message-button copy-button button-sm" title="Good chat message">
+              <i class="icon-good"></i>
+          </button>
+          <button class="bad-chat-message-button button-sm" title="Bad chat message">
+              <i class="icon-bad"></i>
+          </button>
+          <button class="flag-chat-message-button button-sm" title="Flag chat message">
+              <i class="icon-flag"></i>
+          </button>
       </div>
-    </template>
+    </div></template>
     <!-- Chat list item template -->
     <template id="chat-list-item-template">
       <li class="chat-list-item list-item row">
         <span class="chat-title col grw"></span>
         <!--<button class="list-item-edit" title="Edit chat">...</button>-->
-        <button class="list-item-delete" title="Delete chat">
-          <i class="icon-close"></i>
+        <button class="list-item-delete button" title="Delete chat">
+          <i class="icon-delete"></i>
         </button>
       </li>
     </template>