Extract API code

.gitignore

@@ -1,3 +1,5 @@
+tmp
+
 # Logs
 logs
 *.log

README.md

@@ -8,9 +8,9 @@ A HTML UI for Ollama.
 
 ## Goals
 
-- Zero dependencies: vanilla HTML, CSS, and Javascript
-- Simple installation: download and open in browser
 - Minimal & responsive UI: mobile & desktop
+- Zero dependencies: vanilla HTML, CSS, and Javascript
+- Simple installation
 
 ## Features
 
@@ -22,6 +22,7 @@ A HTML UI for Ollama.
 - Edit chat
 - Delete chat
 - Download chat
+- Scroll to top/bottom
 - Copy chat to clipboard
 
 **Chats**
@@ -32,8 +33,10 @@ A HTML UI for Ollama.
 
 **Settings**
 
-- View settings
-- Update settings
+- URL
+- Model
+- System prompt
+- Model parameters
 
 ## Screenshots
 
@@ -56,7 +59,7 @@ A HTML UI for Ollama.
 First, install and start [Olama](https://ollama.ai/).
 
 ```bash
-$ ollama run mistral
+$ ollama run dolphin-phi
 ```
 
 Next, clone this repository:
@@ -97,7 +100,7 @@ Tests are written using `Playwright` and `node:test`.
 The the tests can be run from the command line using this command:
 
 ```bash
-$ ollama run mistral
+$ ollama run dolphin-phi
 $ node test
 ```
 
@@ -116,6 +119,7 @@ $ node test
 
 ## Done
 
+- [x] Model parameters
 - [x] System prompt
 - [x] Copy message to clipboard
 - [x] Select model in settings (global)

css/ChatArea.scss

@@ -6,6 +6,7 @@
 }
 
 #chat-title {
+  @extend h1;
   padding-left: 0.5rem;
   @extend .font-weight-boldest;
   text-overflow: ellipsis;

css/ChatMenu.scss

@@ -13,6 +13,11 @@
     padding: 0.5rem;
 }
 
+
+.hamburger-menu:hover {
+    @extend .box-shadow;
+}
+
 .hamburger-menu .bar {
     width: 1.5rem;
     height: 2px;

css/Sidebar.scss

@@ -1,5 +1,6 @@
 /* Sidebar styling */
 #sidebar {
+  @extend .box-shadow;
   min-width: 200px;
   max-width: 480px;
   //flex: 0 0 250px; /* fixed width */

css/Tabs.scss

@@ -11,8 +11,12 @@
   outline: none;
 }
 
+.active-tab-button {
+  @extend .box-shadow;
+}
+
 .tab-content {
   display: none;
-  padding: 20px;
-  border-top: 1px solid #ccc;
+  //padding: 20px;
+  //border-top: 1px solid #ccc;
 }

css/UINotification.scss

@@ -9,7 +9,7 @@
   padding: 1rem;
   margin: 1rem;
   @extend .box-shadow;
-  border-radius: 1rem;
+  border-radius: $border-radius;
 
   .button {
     border-radius: 2px;
@@ -21,3 +21,7 @@
 .notification-message {
   color: $white;
 }
+
+.notification-error {
+  background: $error-color;
+}

css/button.scss

@@ -12,13 +12,16 @@ button {
   cursor: pointer;
   i {
     color: $button-primary-color;
+    width: 1rem; // Center the icon
+    display: inline-block;
   }
 }
 
 button:hover,
 button.selected {
   color: $button-primary-color;
   background-color: $light-color;
+    @extend .box-shadow;
 }
 
 .button-small {

css/form.scss

@@ -3,22 +3,29 @@ label {
     margin-bottom: .5rem;
 }
 
-input {
+input, textarea {
     width: 100%;
     padding: 0.5rem 0.75rem;
     display: inline-block;
     border: 1px solid $border-color;
 }
 
+input.error,
+textarea.error {
+    border: 1px solid $error-color !important;
+}
+
 input:focus,
+textarea:focus,
 [contenteditable]:focus {
     border: 1px solid $border-color;
     border-color: lighten($secondary-color, 40%);
-    outline: none;
+    outline: none !important;
     @extend .box-shadow;
 }
 
-input:hover {
+input:hover,
+textarea:hover {
     border: 1px solid lighten($secondary-color, 20%);
 }
 
@@ -32,4 +39,5 @@ label {
 
 textarea {
     padding: 0.5rem;
+    resize: none;
 }

css/grid.scss

@@ -19,3 +19,7 @@
 .flex-align-end {
   align-self: flex-end;
 }
+
+.justify-left {
+  justify-content: left;
+}

css/icons.scss

@@ -64,9 +64,7 @@ i[class^="icon-"] {
 }
 
 .icon-menu:before {
-  content: '\22EF'; /* Unicode character for the chevron down icon followed by a non-breaking space */
-  font-size: 14px; /* Adjust the size of the icon */
-  font-weight: 900;
+  content: '\22EF'; /* Unicode character for three dots */
 }
 
 .icon-user:before {
@@ -84,3 +82,41 @@ i[class^="icon-"] {
 .icon-speech2:before {
   content: "\1F5E8"; /* Unicode for 🗨️ */
 }
+
+.icon-scroll-to-top:before {
+  content: "\21A5";
+}
+
+.icon-scroll-to-end:before {
+  content: "\21A7";
+}
+
+.icon-gpt {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iaWNvbi1tZCI+PGNpcmNsZSBjeD0iNi43NSIgY3k9IjYuNzUiIHI9IjMuMjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjE3LjI1IiBjeT0iNi43NSIgcj0iMy4yNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNi43NSIgY3k9IjE3LjI1IiByPSIzLjI1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIxNy4yNSIgY3k9IjE3LjI1IiByPSIzLjI1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIj48L2NpcmNsZT48L3N2Zz4=");
+}
+
+.icon-models {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iaWNvbi1tZCI+CiAgPHJlY3QgeD0iNC4yNSIgeT0iNC4yNSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiI+PC9yZWN0PgogIDxyZWN0IHg9IjE0Ljc1IiB5PSI0LjI1IiB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIj48L3JlY3Q+CiAgPHJlY3QgeD0iNC4yNSIgeT0iMTQuNzUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPjwvcmVjdD4KICA8cmVjdCB4PSIxNC43NSIgeT0iMTQuNzUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPjwvcmVjdD4KPC9zdmc+Cg==");
+}
+
+.icon-chats {
+  display: inline-block;
+  //background-image: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgNTAgMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPCEtLSBSb3VuZGVkIFJlY3RhbmdsZSBmb3IgdGhlIEJ1YmJsZSAtLT4KICA8cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iNDgiIGhlaWdodD0iMjAiIHJ4PSIxMCIgcnk9IjEwIiBzdHJva2U9ImJsYWNrIiBmaWxsPSJ0cmFuc3BhcmVudCIgc3Ryb2tlLXdpZHRoPSIyIi8+CgogIDwhLS0gVGFpbCBvZiB0aGUgU3BlZWNoIEJ1YmJsZSAtLT4KICA8cGF0aCBkPSJNIDIwLDIxIEwgMjUsMjUgTCAzMCwyMSBaIiBmaWxsPSJ0cmFuc3BhcmVudCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=');
+  background-image: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY2xhc3M9Imljb24tbWQiPgogIDxwb2x5Z29uIHBvaW50cz0iNC4yNSw0LjI1IDkuMjUsNC4yNSA2Ljc1LDkuMjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiPjwvcG9seWdvbj4KICA8cG9seWdvbiBwb2ludHM9IjE0Ljc1LDQuMjUgMTkuNzUsNC4yNSAxNy4yNSw5LjI1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIj48L3BvbHlnb24+CiAgPHBvbHlnb24gcG9pbnRzPSI0LjI1LDE0Ljc1IDkuMjUsMTQuNzUgNi43NSwxOS43NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSI+PC9wb2x5Z29uPgogIDxwb2x5Z29uIHBvaW50cz0iMTQuNzUsMTQuNzUgMTkuNzUsMTQuNzUgMTcuMjUsMTkuNzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiPjwvcG9seWdvbj4KPC9zdmc+Cg==");
+  width: 24px; /* Adjust as needed */
+  height: 24px; /* Adjust as needed */
+}
+
+.icon-hamburger {
+  background-image: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDwhLS0gVG9wIFN0cmlwZSAtLT4KICA8cmVjdCB4PSI0IiB5PSI2IiB3aWR0aD0iMTYiIGhlaWdodD0iMiIgZmlsbD0iYmxhY2siPjwvcmVjdD4KCiAgPCEtLSBNaWRkbGUgU3RyaXBlIC0tPgogIDxyZWN0IHg9IjQiIHk9IjExIiB3aWR0aD0iMTYiIGhlaWdodD0iMiIgZmlsbD0iYmxhY2siPjwvcmVjdD4KCiAgPCEtLSBCb3R0b20gU3RyaXBlIC0tPgogIDxyZWN0IHg9IjQiIHk9IjE2IiB3aWR0aD0iMTYiIGhlaWdodD0iMiIgZmlsbD0iYmxhY2siPjwvcmVjdD4KPC9zdmc+Cg==');
+  width: 24px; /* Adjust as needed */
+  height: 24px; /* Adjust as needed */
+  background-size: contain;
+  background-repeat: no-repeat;
+}

css/list.scss

@@ -6,7 +6,8 @@ ul {
   width: 100%;
 
   li {
-    @extend .row;
+    display: flex; /* Use flexbox layout */
+    justify-content: left;
     padding: 0.5rem 0.75rem;
     cursor: pointer;
     width: 100%;
@@ -32,13 +33,13 @@ ul {
 
   li.selected {
     @extend .font-weight-boldest;
-    color: $button-primary-color;
-    background-color: $light-color;
-    @extend .box-shadow;
+    //color: $button-primary-color;
+    //background-color: $light-color;
+    //@extend .box-shadow;
   }
 
   li.selected:before {
-    //content: "\203A\00a0"; // \00a0 is a non-breaking space
+    content: "\203A\00a0"; // \00a0 is a non-breaking space
   }
 
   li.hover {

css/modal.scss

@@ -7,6 +7,7 @@
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5); /* semi-transparent background */
     z-index: 1000; /* ensures modal is on top */
+    overflow: scroll;
 }
 
 .modal-header {
@@ -16,7 +17,7 @@
     border-bottom: 1px solid $border-color;
 
     .button {
-        border-radius: 2px;
+        border-radius: $border-radius;
         padding: .5rem;
         line-height: 0.5rem;
     }
@@ -33,8 +34,8 @@
     min-width: 320px;
     max-width: 50vw;
     margin: auto; /* Center the modal */
-    border-radius: 2px;
-    overflow: hidden; /* Ensures the border-radius applies to children */
+    // border-radius: 2px;
+    // overflow: hidden; /* Ensures the border-radius applies to children */
     box-shadow: 0 0 15px #444;
 }
 

css/spinner.scss

@@ -0,0 +1,13 @@
+.spinner {
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid $primary-color;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

css/style.scss

@@ -29,18 +29,3 @@ a {
 .text-right {
   text-align: right;
 }
-
-/* Spinner */
-.spinner {
-  border: 2px solid #f3f3f3;
-  border-top: 2px solid $primary-color;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}

css/theme.scss

@@ -8,8 +8,10 @@
 @import 'list';
 @import 'button';
 @import 'utils';
+@import 'spinner';
 @import 'style';
 // Components
+@import 'Tabs';
 @import 'ChatApp';
 @import 'ChatMenu';
 @import 'ChatHistory';

css/utils.scss

@@ -10,3 +10,11 @@
 .mt-1 {
   margin-top: 0.5rem;
 }
+
+.d-inline {
+  display: inline-block;
+}
+
+.d-block {
+  display: block;
+}

css/variables.scss

@@ -3,7 +3,9 @@ $secondary-color: #222831;
 $tertiary-color: #EEEEEE;
 
 $white: #fff;
+$red: #EF4040;
 
+$error-color: $red;
 $text-color: $tertiary-color;
 $bg-color: $tertiary-color;
 
@@ -14,7 +16,7 @@ $button-primary-bgcolor: #EEEEEE;
 $button-secondary-color: lighten($primary-color, 2);
 $button-secondary-bgcolor: #EEEEEE;
 
-$border-radius: 0px;
+$border-radius: 2px;
 $border-color: $primary-color;
 $border: $border-radius $border-color;