Add screenshots of mobile device

README.md

@@ -10,6 +10,7 @@ A HTML UI for Ollama.
 
 - Zero dependencies: vanilla HTML, CSS, and Javascript
 - Simple installation: download and open in browser
+- Minimal & responsive UI: mobile & desktop
 
 ## Features
 
@@ -27,10 +28,18 @@ A HTML UI for Ollama.
 
 ## Screenshots
 
-![Main screen](/screenshots/chat.png)
+**Desktop**
+
+![Chat](/screenshots/chat.png)
+![Chat (fullscreen)](/screenshots/chat-collapsed.png)
 ![Settings screen](/screenshots/settings.png)
 ![Search](/screenshots/search.png)
 
+**Mobile**
+
+![Chat](/screenshots/chat-mobile.png)
+![Chat (fullscreen)](/screenshots/chat-collapsed-mobile.png)
+
 ## Installing
 
 First, install and start [Olama](https://ollama.ai/).

js/App.test.js

@@ -33,6 +33,12 @@ class AppTest {
     this.sidebar = this.page.locator('#sidebar')
   }
 
+  async mobileDevice () {
+    const width = 375
+    const height = 667
+    await this.page.setViewportSize({ width, height })
+  }
+
   async showSettings () {
     await this.page.click('#settings-button')
     await expect(this.page.locator('#settings-dialog')).toBeVisible()
@@ -168,7 +174,7 @@ test.describe('Application tests', () => {
 
   test('Search chats', async () => {
     // Create chats for each country
-    for (const name of ['Finland', 'Sweden', 'Canada', 'Norway', 'Denmark']) {
+    for (const name of ['History of Finland', 'History of Sweden', 'History of Canada', 'History of Norway', 'History of Denmark']) {
       await app.newChat(name)
     }
 
@@ -200,7 +206,7 @@ test.describe('Application tests', () => {
 
   test('Collapse sidebar', async () => {
     // Create chats for each country
-    for (const name of ['Finland', 'Sweden', 'Norway', 'Denmark']) {
+    for (const name of ['History of Finland', 'History of Sweden', 'History of Norway', 'History of Denmark']) {
       await app.newChat(name)
     }
     // Collapse sidebar
@@ -212,12 +218,22 @@ test.describe('Application tests', () => {
   })
 
   if (GITHUB_ACTIONS === false) {
-    console.log('AAAAAAAAAAAAAA')
     test('Send message', async () => {
       await app.updateSettings(url, model)
-      await app.editChatTitle('What is 10+10?')
-      await app.sendMessage('What is 10+10?')
+      // Create chat
+      await app.editChatTitle('What is Mistral?')
+      await app.sendMessage('What is Mistral?')
       await app.screenshot('screenshots/chat.png')
+      // Collapse
+      await app.page.click('#hamburger-menu')
+      await app.screenshot('screenshots/chat-collapsed.png')
+      await app.page.click('#hamburger-menu')
+      // Mobile device
+      app.mobileDevice()
+      await app.screenshot('screenshots/chat-mobile.png')
+      // Collapse
+      await app.page.click('#hamburger-menu')
+      await app.screenshot('screenshots/chat-collapsed-mobile.png')
     })
 
     test('Show settings', async () => {
@@ -232,7 +248,7 @@ test.describe('Application tests', () => {
 
   test('Send message (server down)', async () => {
     await app.page.fill('#message-input', 'Server is down')
-    await app.page.fill('#message-input', 'What is 10+10?')
+    await app.page.fill('#message-input', 'What is Mistral?')
     await app.page.click('#send-button')
     await app.page.waitForTimeout(500) // Small delay to allow UI to update
     await app.screenshot('screenshots/chat-error.png')