Add download chat

Author: christianhellsten

README.md

@@ -1,6 +1,6 @@
 # ollama-html-ui
 
-![cover](/screenshots/main.png)
+![cover](/screenshots/chat.png)
 
 ![Contributions Welcome](https://img.shields.io/badge/Contributions-welcome-blue.svg)
 
@@ -17,6 +17,8 @@ A HTML UI for Ollama.
 - New chat
 - Edit chat
 - Delete chat
+- Download chat
+- Copy chat
 - Search chats
 - Clear chats
 - View settings
@@ -25,7 +27,7 @@ A HTML UI for Ollama.
 
 ## Screenshots
 
-![Main screen](/screenshots/main.png)
+![Main screen](/screenshots/chat.png)
 ![Settings screen](/screenshots/settings.png)
 ![Search](/screenshots/search.png)
 

css/ChatHistory.scss

@@ -15,6 +15,11 @@
   padding: 0.5rem;
   border-radius: 2px;
   border: 1px solid #BBDEFB; /* Light blue border (100) */
+
+  .button {
+    margin-top: 1rem;
+    display: block;
+  }
 }
 
 /* Styling for user messages */
@@ -33,4 +38,3 @@
   //border: 1px solid #FFE0B2; /* Light orange border (100) */
   border-radius: 2px;
 }
-

css/CopyButton.scss

@@ -0,0 +1,10 @@
+.copy-button {
+    font-family: Arial, sans-serif; /* Ensures the Unicode character displays correctly */
+    font-size: 16px; /* Adjust as needed */
+    padding: 10px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}

css/button.scss

@@ -18,6 +18,14 @@ button {
   background-color: #cfcfcf;
 }
 
+.button-small {
+  padding: 0.25rem 1.0rem;
+}
+
+.button-mini {
+  padding: 0.15rem 0.25rem;
+}
+
 /* Primary button */
 .button-primary {
   background-color: #0052cc;

css/icons.scss

@@ -7,6 +7,16 @@ i[class^="icon-"] {
   font-size: 12px;
 }
 
+.icon-download:before {
+  content: '\21E9\00a0'; /* Unicode character for the download icon followed by a non-breaking space */
+}
+
+.icon-copy:before {
+  content: '\2398\00a0'; /* Unicode character for the copy icon followed by a non-breaking space */
+  font-size: 20px; /* Adjust the size of the icon */
+  vertical-align: middle;
+}
+
 .icon-selected:before {
   content: "\203A";
 }

index.html

@@ -22,13 +22,16 @@
             </div>
             <!-- Chat menu -->
             <h2 id="chat-title" class="col grw" contenteditable required title="Edit chat title">New chat</h2>
-            <div class="col">
-                <button id="edit-chat-button" class="button">
-                  <i class="icon-edit"></i>
-                </button>
-                <button id="delete-chat-button" class="button">
-                  <i class="icon-delete"></i>
-                </button>
+            <div class="buttons">
+            <button id="edit-chat-button" class="button col" title="Edit chat">
+              <i class="icon-edit"></i>
+            </button>
+            <button id="delete-chat-button" class="button col" title="Delete chat">
+              <i class="icon-delete"></i>
+            </button>
+            <button data-target="chat-history" class="button download-button col" title="Download chat">
+              <i class="icon-download"></i>
+            </button>
             </div>
         </header>
         <div id="chat-area">
@@ -108,6 +111,15 @@ <h4>Available models</h4>
         -->
       </li>
     </template>
+    <!-- Chat message template -->
+    <template id="chat-message-template">
+        <div class="message">
+            <span class="message-text"></span>
+            <!--
+            <button class="copy-button button button-mini"><i class="icon-copy"></i></button>
+            -->
+        </div>
+    </template>
     <script type="module" src="/js/script.js"></script>
 </body>
 </html>

js/App.js

@@ -2,6 +2,8 @@ import { Event } from './Event.js'
 import { Chats } from './models/Chats.js'
 import { LocalStorage } from './models/LocalStorage.js'
 import { Sidebar } from './Sidebar.js'
+import { CopyButton } from './CopyButton.js'
+import { DownloadButton } from './DownloadButton.js'
 import { ChatArea } from './ChatArea.js'
 
 // Configuration and DOM elements
@@ -10,6 +12,8 @@ const storage = new LocalStorage()
 export class App {
   static run () {
     const app = new App()
+    this.downloadButton = new DownloadButton()
+    this.copyButton = new CopyButton()
     return app
   }
 
@@ -124,13 +128,26 @@ Chat:  ${this.chats.getCurrentChat()?.id}
   }
 
   createMessageDiv = (text, sender) => {
-    const div = document.createElement('div')
-    div.classList.add('message', `${sender}-message`)
-    div.textContent = text
-    div.initialResponse = true
-    this.chatHistory.appendChild(div)
+    // Get the template and its content
+    const template = document.getElementById('chat-message-template')
+    const messageClone = template.content.cloneNode(true)
+
+    // Find the div and span elements within the cloned template
+    const messageDiv = messageClone.querySelector('div')
+    const textSpan = messageClone.querySelector('.message-text')
+
+    // Set the class for sender and text content
+    messageDiv.classList.add(`${sender}-message`)
+    textSpan.textContent = text
+
+    // Set initialResponse property
+    messageDiv.initialResponse = true
+
+    // Append to chatHistory and adjust scroll
+    this.chatHistory.appendChild(messageDiv)
     this.chatHistory.scrollTop = this.chatHistory.scrollHeight
-    return div
+
+    return messageDiv
   }
 
   getSpinner = () => {

js/App.test.js

@@ -53,6 +53,13 @@ class AppTest {
     await this.page.locator('#button-save-settings').click()
   }
 
+  async sendMessage (message) {
+    await this.page.fill('#message-input', message)
+    await this.page.click('#send-button')
+    await expect(this.page.locator('#abort-button')).toBeVisible()
+    await this.page.waitForSelector('#send-button', { timeout: 60000 })
+  }
+
   async newChat (title) {
     await this.page.click('#new-chat-button')
     const newTitle = /Untitled/
@@ -145,7 +152,6 @@ test.describe('Application tests', () => {
     await app.selectChat('Happy Hamster')
     await app.selectChat('Super Hamster')
     await app.selectChat('Smart Hamster')
-    await app.screenshot('screenshots/main.png')
   })
 
   test('Edit chat title', async () => {
@@ -155,16 +161,16 @@ test.describe('Application tests', () => {
 
   test('Show settings', async () => {
     await app.showSettings()
+    await app.screenshot('screenshots/settings.png')
   })
 
   test('Update settings', async () => {
     await app.updateSettings(url, model)
-    await app.screenshot('screenshots/settings.png')
   })
 
   test('Search chats', async () => {
     // Create chats for each country
-    for (const name of ['Finland', 'Sweden', 'Norway', 'Denmark']) {
+    for (const name of ['Finland', 'Sweden', 'Canada', 'Norway', 'Denmark']) {
       await app.newChat(name)
     }
 
@@ -183,7 +189,7 @@ test.describe('Application tests', () => {
 
     // Search for 'Sweden', and verify its visibility
     await app.page.fill('#search-input', '')
-    await app.page.type('#search-input', 'Sweden')
+    await app.page.type('#search-input', 'w')
     await app.page.waitForTimeout(500) // Small delay to allow UI to update
     await app.screenshot('screenshots/search.png')
     // Check if 'Sweden' is visible
@@ -210,10 +216,7 @@ test.describe('Application tests', () => {
   test('Send message', async () => {
     await app.updateSettings(url, model)
     await app.editChatTitle('What is 10+10?')
-    await app.page.fill('#message-input', 'What is 10+10?')
-    await app.page.click('#send-button')
-    await expect(app.page.locator('#abort-button')).toBeVisible()
-    await app.page.waitForSelector('#send-button', { timeout: 60000 })
+    await app.sendMessage('What is 10+10?')
     await app.screenshot('screenshots/chat.png')
   })
 
@@ -226,4 +229,29 @@ test.describe('Application tests', () => {
     await expect(app.page.locator('#abort-button')).not.toBeVisible()
     await expect(app.page.locator('#send-button')).toBeVisible()
   })
+
+  /*
+  TODO:
+  test('Download chat', async () => {
+    await app.updateSettings(url, model)
+    await app.sendMessage('What is 10+10?')
+
+    // Set up a listener for the download event
+    const [ download ] = await Promise.all([
+      // It's important to set up the listener before triggering the download
+      app.page.waitForEvent('download'),
+      // Trigger the download here
+      app.page.click('.download-button')
+    ])
+
+    // Wait for the download to complete
+    const path = await download.path()
+
+    // Verify the download (e.g., check file name, size, etc.)
+    console.log(`Downloaded file: ${path}`)
+
+    // Optional: Check the download's filename
+    console.log(`Downloaded filename: ${download.suggestedFilename()}`)
+  })
+  */
 })

js/CopyButton.js

@@ -0,0 +1,34 @@
+export class CopyButton {
+  static run () {
+    const btn = new CopyButton()
+    return btn
+  }
+
+  constructor () {
+    document.addEventListener('click', function (event) {
+      // Check if the clicked element has the class 'copy-button'
+      if (event.target.classList.contains('copy-button')) {
+        // Get the index from the data-target attribute
+        const targetIndex = this.getAttribute('data-target')
+
+        // Select the corresponding text element
+        const textToCopy = document.querySelectorAll('.copyText')[targetIndex].innerText
+
+        // Create a temporary textarea element
+        const textarea = document.createElement('textarea')
+        textarea.value = textToCopy
+        document.body.appendChild(textarea)
+
+        // Select the text and copy it
+        textarea.select()
+        document.execCommand('copy')
+
+        // Remove the temporary textarea
+        document.body.removeChild(textarea)
+
+        // Optional: Display a message or change the button text/content
+        alert('Text copied to clipboard')
+      }
+    })
+  }
+}

js/DownloadButton.js

@@ -0,0 +1,40 @@
+export class DownloadButton {
+  constructor () {
+    document.addEventListener('click', (event) => {
+      // Check if the clicked element has the class 'copy-button'
+      if (event.target.classList.contains('download-button')) {
+        // Get the index from the data-target attribute
+        const targetId = event.target.getAttribute('data-target')
+        this.downloadElementContent(targetId, 'chat.html')
+      }
+    })
+  }
+
+  downloadElementContent (elementId, filename) {
+    // Get the element
+    const element = document.getElementById(elementId)
+    if (!element) {
+      console.error('Element not found')
+      return
+    }
+
+    // Get the contents of the element
+    const content = element.innerText
+
+    // Create a Blob with the content
+    const blob = new Blob([content], { type: 'text/html' })
+
+    // Create an anchor element and set the href to the blob
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = filename
+
+    // Append the anchor to the document, trigger a click, and then remove it
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+
+    // Revoke the blob URL
+    URL.revokeObjectURL(a.href)
+  }
+}