Merge pull request #35 from christianhellsten/switch-talking-to

Implement model switching using @

Author: christianhellsten

.github/workflows/run-tests.yml

@@ -22,28 +22,33 @@ jobs:
     - name: Cache node modules
       uses: actions/cache@v2
       with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        path: ~/.yarn
+        key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
           ${{ runner.os }}-node-
 
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm install
-    - run: npm install parcel-bundler
-    - run: npx playwright install
+        cache: 'yarn'
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Install Playwright
+      run: yarn playwright install
+
     - name: Run tests
       run: |
-        nohup parcel index.html > server.log 2>&1 &
+        nohup yarn parcel index.html > server.log 2>&1 &
         # Run server in the background
-        # nohup npm run server > server.log 2>&1 &
+        # nohup yarn server > server.log 2>&1 &
         # Wait for the server to start
         sleep 10
         export GITHUB_ACTIONS=true
-        npm run test
-        npm run test:mobile
+        yarn test
+        yarn test:mobile
 
     - name: Upload server log
       if: failure()

.gitignore

@@ -1,7 +1,13 @@
 tmp
 
+parcel-bundle-reports/
+*.code-workspace
+
 .envrc
 
+dist/*.gz
+dist/*.br
+
 # Logs
 logs
 *.log

.parcelrc.disabled

@@ -0,0 +1,14 @@
+{
+  "extends": "@parcel/config-default",
+  "compressors": {
+    "*.{html,css,js,svg,map}": [
+      "...",
+      "@parcel/compressor-gzip",
+      "@parcel/compressor-brotli"
+    ]
+  },
+  "reporters": [
+    "...",
+    "parcel-reporter-bundle-analyzer"
+  ]
+}

README.md

@@ -10,7 +10,7 @@ A HTML UI for [Ollama](https://ollama.ai).
 
 - Minimal & responsive UI: mobile & desktop
 - Cross browser: support last 2 versions with more than > 0.5% global use
-- Zero dependencies: HTML, CSS, and JavaScript (less than 10 Kb gzipped)
+- Zero dependencies: HTML, CSS, and JavaScript (less than 20 Kb gzipped)
 - Simple installation: run in your browser, host on your own server
 
 ## Screenshots

css/ChatArea.scss

@@ -6,13 +6,7 @@
 
 }
 
-#chat-menu-button {
-  background-color: var(--secondary-bg-color);
-}
-
-#chat-model-info {
-  padding: 0.25rem 0.75rem;
-
+#chat-model {
   .chat-model-name {
     @extend %font-weight-bolder;
   }

css/ChatHistory.scss

@@ -1,10 +1,12 @@
 /* Chat history */
 #chat-history {
-  mask-image: linear-gradient(180deg, var(--white) 95%, transparent);
+  padding: 0.5rem;
+  padding-top: 1rem;
+  // border-bottom: 1px solid #ccc;
+  // mask-image: linear-gradient(180deg, var(--white) 98%, transparent);
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  padding: 0.5rem;
   max-width: 1024px;
   width: 100%; /* Full width of its parent */
   overflow-y: auto; /* Enable vertical scrolling */
@@ -26,7 +28,7 @@
 
 /* Styling for user messages */
 .user-chat-message {
-  @extend %font-weight-bolder;
+  //@extend %font-weight-bolder;
 
   .system-icon {
     display: none;

css/ChatList.scss

@@ -17,6 +17,7 @@
 
 .list-item.selected {
   background: var(--white);
+  border-radius: 0.25rem;
 
   @extend %box-shadow;
 

css/DropDownMenu.scss

@@ -3,12 +3,13 @@
 }
 
 .drop-down-menu-items {
-  background: var(--bg-color);
   position: absolute;
   top: 100%; /* Position below the button */
+  z-index: 1000;
   display: none; /* Hide initially */
   font-size: 0.75rem;
   white-space: nowrap;
+  background-color: var(--white);
 
   i[class^='icon-']::before {
     padding-right: 0.5rem;

css/Sidebar.scss

@@ -7,6 +7,10 @@
   max-width: 480px;
   overflow-y: auto;
 
+  #chat-list {
+    padding: 0.5rem;
+  }
+
   .buttons {
     width: 100%;
     display: flex;
@@ -21,5 +25,4 @@
 #sidebar.collapsed {
   min-width: 0;
   max-width: 0;
-  padding: 0;
 }

css/colors.scss

@@ -2,14 +2,18 @@
 
 // Light theme as default
 :root {
+  --yellow: #ffa700;
+  --blue: #0057e7;
+  --white: #fff;
+  --gray: #888;
   --primary-color: #393e46;
   --secondary-color: #222831;
   --secondary-color-lighten-20: #{color.adjust(#222831, $lightness:20%)};
   --secondary-color-lighten-40: #{color.adjust(#222831, $lightness:40%)};
   --tertiary-color: #eee;
   --error-color: #ef4040;
   --bg-color: #fafafa;
-  --secondary-bg-color: #f0f0f0;
+  --secondary-bg-color: #f0f0f045;
   --text-color: #333;
   --text-color-lighten-20: #{color.adjust(#eee, $lightness:20%)};
   --icon-color: var(--primary-color);
@@ -21,14 +25,18 @@
   --border-color: #{color.adjust(#393e46, $lightness:60%)};
   --border-hover-color: #{color.adjust(#393e46, $lightness:40%)};
   --border-focus-color: #{color.adjust(#393e46, $lightness:30%)};
-  --box-shadow-color: rgb(196 204 213 / 37%);
-  --box-shadow-modal-color: #444;
+  --box-shadow-color: rgb(196 204 213 / 17%);
+  --box-shadow-modal-color: rgb(196 204 213 / 27%);
   --modal-header-bg-color: var(--primary-color);
 }
 
 // Dark theme for users who prefer dark mode
 @media (prefers-color-scheme: dark) {
   :root {
+    --yellow: #ffa700;
+    --blue: #0057e7;
+    --white: #fff;
+    --gray: #888;
     --primary-color: #4f5b66;
     --secondary-color: #1c2025;
     --secondary-color-lighten-20: #{color.adjust(#1c2025, $lightness:20%)};