Merge pull request #20 from christianhellsten/download-chats

Add "export chats" feature
christianhellsten · Jan 7, 2024 · f54a852 · f54a852
2 parents 9ff8ce2 + 1650847
commit f54a852
Show file tree

Hide file tree

Showing 43 changed files with 417 additions and 1,282 deletions.
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
@@ -1,6 +1,12 @@
 name: Run Tests
 
-on: [push, pull_request]
+on:
+  push:
+    branches-ignore:
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
   build:
@@ -12,14 +18,24 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
+
+    - name: Cache node modules
+      uses: actions/cache@v2
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        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
-    - run: |
+    - name: Run tests
+      run: |
         nohup parcel index.html > server.log 2>&1 &
         # Run server in the background
         # nohup npm run server > server.log 2>&1 &
@@ -28,3 +44,10 @@ jobs:
         export GITHUB_ACTIONS=true
         npm run test
         npm run test:mobile
+
+    - name: Upload server log
+      if: failure()
+      uses: actions/upload-artifact@v2
+      with:
+        name: server-log
+        path: server.log
diff --git a/README.md b/README.md
@@ -125,19 +125,24 @@ $ parcel build index.html
 
 <details>
   <summary>Tasks</summary>
+
   - [ ] Edit message / response
   - [ ] Clear chat
   - [ ] CSP
   - [ ] Speech recognition
   - [ ] Image upload / multi-modal
   - [ ] Markdown support
-  - [ ] Keyboard shortcuts
-  - [ ] Dark & light theme
   - [ ] Vote up / down
-  - [ ] Export chat messages to JSON
 
   ## Done
 
+  - [x] Export chat messages to JSON
+  - [x] Keyboard shortcuts
+  - [x] Dark & light theme
+  - [x] Export chat messages to JSON
+  - [x] Keyboard shortcuts
+  - [x] Keyboard shortcuts
+  - [x] Dark & light theme
   - [x] Delete message / response
   - [x] Ollama chat API / chat memory
   - [x] IndexedDB persistence
@@ -157,11 +162,13 @@ $ parcel build index.html
   - [x] Abort response
   - [x] Send message
   - [x] UI tests: https://nodejs.org/api/test.html
+
   </summary>
 </details>
 
 <details>
   <summary>Features</summary>
+
     - https://ollama.ai support
 
     **Chat**
@@ -178,18 +185,21 @@ $ parcel build index.html
     - Search chats
     - Clear chats
     - Chat history
+    - Export chats
 
     **Settings**
 
     - URL
     - Model
     - System prompt
     - Model parameters
+
   </summary>
 </details>
 
 <details>
   <summary>Licensing</summary>
+
 This project is available under two licensing options:
 
 1. **Open Source License (MIT)**:
@@ -205,5 +215,6 @@ This project is available under two licensing options:
    - To inquire about our commercial licensing options, pricing, and terms, please contact us at [christian@aktagon.com](mailto:christian@aktagon.com) to discuss your specific requirements.
 
 We value and support both our open source community and commercial users. By providing dual licensing options, we aim to make this project accessible to a wide range of users while offering customized solutions for commercial projects.
+
   </summary>
 </details>
diff --git a/css/ChatForm.scss b/css/ChatForm.scss
@@ -2,6 +2,7 @@
   flex: 0 0 60px; /* fixed height */
   display: flex;
   align-items: center;
+
   // NOTE: Should match #chat-header border-bottom
   border-top: 1px solid #cccccc5e;
 

diff --git a/css/ChatHeader.scss b/css/ChatHeader.scss
@@ -1,8 +1,11 @@
 #chat-header {
   // NOTE: Should match #chat-form border-top
-  border-bottom: 1px solid #cccccc;
+  border-bottom: 1px solid #ccc;
+
   @extend %box-shadow;
+
   z-index: 4;
+
   .button {
     height: 100%;
   }

diff --git a/css/ChatHistory.scss b/css/ChatHistory.scss
@@ -22,10 +22,6 @@
     top: 0;
     right: 0;
   }
-
-  .button {
-    //padding: 0.25rem;
-  }
 }
 
 /* Styling for user messages */
@@ -35,8 +31,5 @@
 
 /* Styling for system messages */
 .assistant-chat-message {
-  .chat-message-text {
-    // color: var(--text-color-lighten-20);
-  }
   margin-bottom: 0.5rem;
 }
diff --git a/css/ChatList.scss b/css/ChatList.scss
@@ -1,18 +1,26 @@
 .chat-list-item {
   z-index: 2;
+
   .chat-title {
     // text-overflow: ellipsis;
-    mask-image: linear-gradient(90deg, var(--white) 95%, transparent); // Fade out title instead of ellipsis
+    mask-image: linear-gradient(
+      90deg,
+      var(--white) 95%,
+      transparent
+    ); // Fade out title instead of ellipsis
   }
 }
 
 .list-item.selected {
   background: var(--white);
+
   @extend %box-shadow;
+
   z-index: 2;
 }
 
 .list-item.hover {
   @extend %box-shadow-hover;
+
   z-index: 3;
 }
diff --git a/css/ChatTitle.scss b/css/ChatTitle.scss
@@ -1,5 +1,6 @@
 #chat-title {
   @extend %font-weight-boldest;
+
   padding: 0.5rem 0.25rem;
   font-size: 1.2rem;
   text-overflow: ellipsis;

diff --git a/css/CopyButton.scss b/css/CopyButton.scss
diff --git a/css/Sidebar.scss b/css/Sidebar.scss
@@ -5,26 +5,18 @@ aside {
 /* Sidebar styling */
 #sidebar {
   @extend %box-shadow;
+
   // NOTE: This should be the same as chat-header border-bottom
   border-right: 1px solid #cccccc5e;
-
   min-width: 200px;
   max-width: 480px;
-
-  //flex: 0 0 250px; /* fixed width */
-
-  //background-color: #E3F2FD;
-  //border-right: 1px solid #cfcfcf;
   overflow-y: auto;
 
   .buttons {
     width: 100%;
     display: flex;
     flex-grow: 1;
   }
-
-  // TODO: Animations
-  // transition: display 0.4s;
 }
 
 #search-input {
@@ -34,7 +26,5 @@ aside {
 #sidebar.collapsed {
   max-width: 0;
   display: none;
-
-  //flex: 0 0 0px; /* Collapsed state with zero width */
   padding: 0;
 }
diff --git a/css/Tabs.scss b/css/Tabs.scss
@@ -17,7 +17,4 @@
 
 .tab-content {
   display: none;
-
-  //padding: 20px;
-  //border-top: 1px solid #ccc;
 }
diff --git a/css/UINotification.scss b/css/UINotification.scss
@@ -3,13 +3,14 @@
   top: 0;
   left: 0;
   color: var(--bg-color);
-  background-color: var(--text-color);
   width: calc(100vw - 2rem);
   z-index: 30000;
   background-color: var(--bg-color);
   padding: 1rem;
   margin: 1rem;
+
   @extend %box-shadow-modal;
+
   border-radius: var(--border-radius);
 
   .button {
@@ -19,9 +20,6 @@
   }
 }
 
-.notification-message {
-}
-
 .notification-error {
   background: var(--error-color);
 }
diff --git a/css/button.scss b/css/button.scss
@@ -1,12 +1,8 @@
 button {
   background-color: var(--button-secondary-bgcolor);
   z-index: 1;
-}
-
-button {
   padding: 0.75rem 1rem;
   border: none;
-  // border-radius: var(--border-radius);
   cursor: pointer;
 
   i {
@@ -18,10 +14,6 @@ button {
 button:hover,
 button.selected {
   @extend %box-shadow-hover;
-  //color: var(--button-primary-color);
-  //background-color: var(--light-color);
-
-  // @extend %box-shadow;
 }
 
 .button-small {
@@ -36,14 +28,6 @@ button.selected {
 .button-primary {
   @extend %font-weight-boldest;
   @extend %box-shadow;
-
-  //color: var(--button-primary-color);
-  //background-color: var(--button-primary-bgcolor);
-}
-
-.button-primary:hover {
-  //color: var(--button-primary-color);
-  //background-color: var(--light-color);
 }
 
 .buttons {
@@ -58,4 +42,3 @@ button.selected {
 .button-large {
   padding: 0 2rem;
 }
-
diff --git a/css/colors.scss b/css/colors.scss
@@ -1,24 +1,26 @@
+@use 'sass:color';
+
 // Light theme as default
 :root {
-  --primary-color: #393E46;
+  --primary-color: #393e46;
   --secondary-color: #222831;
-  --secondary-color-lighten-20: #{lighten(#222831, 20%)};
-  --secondary-color-lighten-40: #{lighten(#222831, 40%)};
-  --tertiary-color: #EEE;
-  --error-color: #EF4040;
-  --bg-color: #FAFAFA;
+  --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;
   --text-color: #333;
-  --text-color-lighten-20: #{lighten(#eee, 20%)};
+  --text-color-lighten-20: #{color.adjust(#eee, $lightness:20%)};
   --icon-color: var(--primary-color);
-  --light-text-color: #FFFFFF;
+  --light-text-color: #fff;
   --button-primary-color: var(--primary-color);
-  --button-primary-bgcolor: #FFFFFF;
+  --button-primary-bgcolor: #fff;
   --button-secondary-color: var(--text-color);
   --button-secondary-bgcolor: $bg-color;
-  --border-color: #{lighten(#393e46, 60%)};
-  --border-hover-color: #{lighten(#393e46, 40%)};
-  --border-focus-color: #{lighten(#393e46, 30%)};
-  --box-shadow-color: rgba(196, 204, 213, 0.7490196078);
+  --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 / 74.9%);
   --box-shadow-modal-color: #444;
   --modal-header-bg-color: var(--primary-color);
 }
@@ -28,23 +30,23 @@
   :root {
     --primary-color: #4f5b66;
     --secondary-color: #1c2025;
-    --secondary-color-lighten-20: #{lighten(#1c2025, 20%)};
-    --secondary-color-lighten-40: #{lighten(#1c2025, 40%)};
+    --secondary-color-lighten-20: #{color.adjust(#1c2025, $lightness:20%)};
+    --secondary-color-lighten-40: #{color.adjust(#1c2025, $lightness:40%)};
     --tertiary-color: #d1d1d1;
     --error-color: #ff6b6b;
     --bg-color: #121212;
-    --text-color: #FAFAFA;
-    --text-color-lighten-20: #{lighten(#FAFAFA, 20%)};
+    --text-color: #fafafa;
+    --text-color-lighten-20: #{color.adjust(#fafafa, $lightness:20%)};
     --icon-color: var(--text-color);
-    --light-text-color: #FFFFFF;
-    --button-primary-color: #ffffff;
+    --light-text-color: #fff;
+    --button-primary-color: #fff;
     --button-primary-bgcolor: var(--primary-color);
     --button-secondary-color: var(--text-color);
     --button-secondary-bgcolor: var(--bg-color);
-    --border-color: #{lighten(#4f5b66, 30%)};
-    --border-hover-color: #{lighten(#4f5b66, 50%)};
-    --border-focus-color: #{lighten(#4f5b66, 60%)};
-    --box-shadow-color: rgba(40, 48, 57, 0.7490196078);
+    --border-color: #{color.adjust(#4f5b66, $lightness:30%)};
+    --border-hover-color: #{color.adjust(#4f5b66, $lightness:50%)};
+    --border-focus-color: #{color.adjust(#4f5b66, $lightness:60%)};
+    --box-shadow-color: rgb(40 48 57 / 74.9%);
     --box-shadow-modal-color: #444;
     --modal-header-bg-color: var(--bg-color);
   }