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

Implement model switching using @

.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%)};

css/icons.scss

@@ -16,7 +16,7 @@ svg {
 }
 
 .user-icon {
- margin: 0.25rem 0.75rem 0 0;
+ margin: 0rem 0.75rem 0 0;
  width: 2.5rem; /* Adjust the size as needed */
  height: 2.5rem; /* Should be equal to the width for a perfect circle */
  border-radius: 50%; /* This makes the shape a circle */
@@ -28,12 +28,14 @@ svg {
 
 .system-icon {
  color: var(--text-color);
- background-color: var(--tertiary-color);
+ background-color: var(--yellow);
+ @extend %font-weight-bolder;
 }
 
 .you-icon {
- background-color: var(--text-color);
  color: var(--bg-color);
+ background-color: var(--blue);
+ @extend %font-weight-bolder;
 }
 
 .icon-export::before {

css/placeholders.scss

@@ -4,14 +4,17 @@
 
 %font-weight-bold {
  font-variation-settings: 'wght' 400;
+ color: var(--blue);
 }
 
 %font-weight-bolder {
  font-variation-settings: 'wght' 600;
+ color: var(--blue);
 }
 
 %font-weight-boldest {
  font-variation-settings: 'wght' 900;
+ color: var(--blue);
 }
 
 %box-shadow {

css/utils.scss

@@ -7,8 +7,22 @@
  float: right;
 }
 
-.mt-1 {
- margin-top: 0.5rem;
+.text-small {
+ font-size: 0.85rem;
+}
+
+.text-light {
+ color: var(--gray);
+}
+
+@for $i from 1 through 10 {
+ .m-#{$i} {
+ margin: 0em * $i*0.25;
+ }
+
+ .p-#{$i} {
+ padding: $i*0.25rem;
+ }
 }
 
 .d-inline {