fix: can manually (or opt-in to automatically) check for updates

Dockerfile

@@ -2,7 +2,7 @@ FROM node:20-alpine
 
 WORKDIR /app
 
-ENV ADAPTER='docker-node'
+ENV PUBLIC_ADAPTER='docker-node'
 
 COPY . .
 

README.md

@@ -20,27 +20,9 @@ A minimal web-UI for talking to [Ollama](https://github.com/jmorganca/ollama/) s
 - ⚡️ [Live demo](https://hollama.fernando.is)
   - _No sign-up required_
 - 🖥️ Download for [macOS, Windows & Linux](https://github.com/fmaclen/hollama/releases)
-- 🐳 [Self-hosting](#self-host-docker) with Docker
+- 🐳 [Self-hosting](SELF_HOSTING.md) with Docker
 - 🐞 [Contribute](CONTRIBUTING.md)
 
 | ![session](tests/docs.test.ts-snapshots/session.png)         | ![settings](tests/docs.test.ts-snapshots/settings.png)   |
 | ------------------------------------------------------------ | -------------------------------------------------------- |
 | ![session-new](tests/docs.test.ts-snapshots/session-new.png) | ![knowledge](tests/docs.test.ts-snapshots/knowledge.png) |
-
-### Self-host (Docker)
-
-To host your own Hollama server, [install Docker](https://www.docker.com/products/docker-desktop/) and run the command below in your favorite terminal:
-
-```shell
-docker run --rm -d -p 4173:4173 ghcr.io/fmaclen/hollama:latest
-```
-
-Then visit [http://localhost:4173](http://localhost:4173).
-
-#### Connecting to an Ollama server
-
-If you are using the publicly hosted version or your Docker server is on a separate device than the Ollama server you'll have to set the domain in `OLLAMA_ORIGINS`. [Learn more in Ollama's docs](https://github.com/ollama/ollama/blob/main/docs/faq.md#how-do-i-configure-ollama-server).
-
-```bash
-OLLAMA_ORIGINS=https://hollama.fernando.is ollama serve
-```

SELF_HOSTING.md

@@ -0,0 +1,43 @@
+# Self-hosting (with Docker)
+
+- [Getting started](#getting-started)
+- [Updating to the latest version](#updating-to-the-latest-version)
+- [Connecting to an Ollama server hosted elsewhere](#connecting-to-an-ollama-server-hosted-elsewhere)
+
+## Getting started
+
+To host your own Hollama server, [install Docker](https://www.docker.com/products/docker-desktop/) and run the command below in your favorite terminal:
+
+```shell
+docker run --rm -d -p 4173:4173 --name hollama ghcr.io/fmaclen/hollama:latest
+```
+
+Then visit [http://localhost:4173](http://localhost:4173)
+
+## Updating to the latest version
+
+To update, first stop the container:
+
+```shell
+docker stop hollama
+```
+
+Then pull the latest version:
+
+```shell
+docker pull ghcr.io/fmaclen/hollama:latest
+```
+
+Finally, start the container again:
+
+```shell
+docker run --rm -d -p 4173:4173 --name hollama ghcr.io/fmaclen/hollama:latest
+```
+
+## Connecting to an Ollama server hosted elsewhere
+
+If you are using the publicly hosted version or your Docker server is on a separate device than the Ollama server you'll have to set the domain in `OLLAMA_ORIGINS`. [Learn more in Ollama's docs](https://github.com/ollama/ollama/blob/main/docs/faq.md#how-do-i-configure-ollama-server).
+
+```bash
+OLLAMA_ORIGINS=https://hollama.fernando.is ollama serve
+```

package.json

@@ -14,7 +14,7 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"electron": "electron .",
-		"electron:build": "cross-env ADAPTER=electron-node vite build && electron-builder"
+		"electron:build": "cross-env PUBLIC_ADAPTER=electron-node vite build && electron-builder"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.43.0",
@@ -49,6 +49,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.9",
+		"semver": "^7.6.3",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"svelte-i18next": "^2.2.2",

src/app.pcss

@@ -4,7 +4,7 @@
 
 @layer base {
 	:root {
-		--color-primary: 14 100% 65%;
+		--color-primary: 14 80% 60%;
 
 		--color-shade-0: 0 0% 100%;
 		--color-shade-1: 0 0% 96%;
@@ -29,7 +29,7 @@
 	}
 
 	[data-color-theme='dark'] {
-		--color-primary: 14 100% 65%;
+		--color-primary: 14 80% 60%;
 
 		--color-shade-0: 0 0% 10%;
 		--color-shade-1: 0 0% 14%;
@@ -53,7 +53,3 @@
 		--color-positive-muted: 120 100% 10%;
 	}
 }
-
-a:not(.button)[target='_blank']:after {
-	content: ' ↗';
-}

src/lib/components/Badge.svelte

@@ -17,8 +17,6 @@
 
 <style lang="postcss">
 	.badge {
-		@apply inline-flex select-none items-center rounded-md px-2.5 py-0.5 font-mono text-xs;
-
 		&--default {
 			@apply border border-shade-3 text-muted;
 		}

src/lib/components/Button.svelte

@@ -54,7 +54,11 @@
 		}
 
 		&--link {
-			@apply text-link rounded-none;
+			@apply text-link inline rounded-none px-1;
+		}
+
+		&--link[target='_blank']:after {
+			content: ' ↗';
 		}
 
 		&--icon {

src/lib/components/FieldHelp.svelte

@@ -0,0 +1,9 @@
+<div class="field-help">
+	<slot />
+</div>
+
+<style lang="postcss">
+	.field-help {
+		@apply my-2 flex flex-col gap-y-1 px-0.5 text-muted;
+	}
+</style>

src/lib/components/FieldSelectModel.svelte

@@ -5,14 +5,14 @@
 
 	export let disabled: boolean = false;
 
-	let value: string = $settingsStore?.ollamaModel || '';
-	$: if ($settingsStore) $settingsStore.ollamaModel = value;
+	let value: string = $settingsStore.ollamaModel || '';
+	$: $settingsStore.ollamaModel = value;
 </script>
 
 <FieldSelect
 	label={$i18n.t('settingsPage.availableModels')}
 	name="model"
-	options={$settingsStore?.ollamaModels.map((m) => ({ value: m.name, option: m.name }))}
-	disabled={disabled || !$settingsStore?.ollamaModels.length}
+	options={$settingsStore.ollamaModels.map((m) => ({ value: m.name, option: m.name }))}
+	disabled={disabled || !$settingsStore.ollamaModels.length}
 	bind:value
 />

src/lib/components/FieldTextEditor.svelte

@@ -16,7 +16,7 @@
 	let editorValue: string;
 
 	// Re-render text editor when theme changes
-	$: if (container && $settingsStore?.userTheme) renderTextEditor();
+	$: if (container) renderTextEditor();
 
 	// REF https://thememirror.net/create
 	const hollamaThemeLight = createTheme({
@@ -75,7 +75,7 @@
 				updateValue,
 				EditorView.lineWrapping,
 				Prec.highest(overrideModEnterKeymap),
-				$settingsStore?.userTheme === 'dark' ? hollamaThemeDark : hollamaThemeLight
+				$settingsStore.userTheme === 'dark' ? hollamaThemeDark : hollamaThemeLight
 			],
 			parent: container
 		});

src/lib/components/P.svelte

@@ -0,0 +1,13 @@
+<p class="p">
+	<slot />
+</p>
+
+<style lang="postcss">
+	.p {
+		@apply text-sm;
+
+		:global(strong) {
+			@apply font-medium leading-none;
+		}
+	}
+</style>

src/lib/github.ts

@@ -0,0 +1,2 @@
+export const GITHUB_RELEASES_API = 'https://api.github.com/repos/fmaclen/hollama/releases';
+export const GITHUB_RELEASES_URL = 'https://github.com/fmaclen/hollama/releases';

src/lib/i18n.ts

@@ -24,7 +24,19 @@ i18next.init({
 				success: 'Success',
 				error: 'Error',
 				pullingModel: 'Pulling model',
+				pullModelPlaceholder: 'Model tag (e.g. llama3.1)',
 				modelWasDownloaded: '{{model}} was downloaded',
+				automatcallyCheckForUpdates: 'Automatically check for updates',
+				checkNow: 'Check now',
+				checkingForUpdates: 'Checking for updates...',
+				couldntCheckForUpdates: "Couldn't check for updates automatically",
+				isCurrentVersionLatest: 'You are on the latest version',
+				isLatestVersion: 'A newer version is available',
+				refreshToUpdate: 'Refresh to update',
+				howToUpdateDocker: 'How to update Docker container?',
+				goToDownloads: 'Go to downloads',
+				goToReleases: 'Go to releases',
+				releaseHistory: 'Release history',
 				sessionsPage: {
 					new: 'New session',
 					empty: 'No sessions',
@@ -54,24 +66,22 @@ i18next.init({
 					server: 'Server',
 					availableModels: 'Available models',
 					pullModel: 'Pull model',
-					pullModelPlaceholder: 'Model tag (e.g. llama3.1)',
 					downloadModel: 'Download model',
 					disconnected: 'disconnected',
 					connected: 'connected',
 					dangerZone: 'Danger zone',
 					deleteAllSessions: 'Delete all sessions',
 					deleteAllKnowledge: 'Delete all knowledge',
-					deleteServerSettings: 'Delete server settings',
+					deleteAllSettings: 'Delete all settings',
 					version: 'Version',
 					allowConnections: 'Change your server settings to allow connections from',
-					seeDocs: 'see docs',
+					seeDocs: 'See docs',
 					checkBrowserExtensions: 'Also check no browser extensions are blocking the connection',
 					tryingToConnectNotLocalhost:
-						'If you want to connect to an Ollama server that is not available on <code class="code">localhost</code> or <code class="code">127.0.0.1</code> you will need to',
-					createTunnel: 'create a tunnel',
-					or: 'or',
-					allowMixedContent: 'allow mixed content',
-					browseModels: 'Browse the list of available models in',
+						'If you want to connect to an Ollama server that is not available on <code class="badge">localhost</code> or <code class="badge">127.0.0.1</code> try',
+					creatingTunnel: 'Creating a tunnel',
+					allowMixedContent: 'Allow mixed content',
+					browseModels: 'Browse the list of available models',
 					ollamaLibrary: "Ollama's library"
 				},
 				dialogs: {
@@ -81,9 +91,9 @@ i18next.init({
 				},
 				errors: {
 					genericError: 'Sorry, something went wrong.\n```\n${{error}}\n```',
-					somethingWentWrong: 'Sorry, something went wrong.',
-					notFound: 'The page you are looking for does not exist.',
-					internalServerError: 'There was an internal server error. Please try again later.',
+					somethingWentWrong: 'Sorry, something went wrong',
+					notFound: 'The page you are looking for does not exist',
+					internalServerError: 'There was an internal server error, please try again later',
 					cantConnectToOllamaServer: "Can't connect to Ollama server",
 					couldntConnectToOllamaServer: "Couldn't connect to Ollama server",
 					ollamaConnectionError: "Couldn't connect to Ollama. Is the [server running](/settings)?"

src/lib/store.ts

@@ -1,28 +1,30 @@
-import { browser } from '$app/environment';
+import type { ModelResponse } from 'ollama/browser';
+import { browser, version } from '$app/environment';
 import { writable } from 'svelte/store';
 import type { Session } from '$lib/sessions';
-import type { OllamaModel } from './ollama';
 import type { Knowledge } from './knowledge';
+import { env } from '$env/dynamic/public';
+import type { HollamaMetadata } from '../routes/api/metadata/+server';
 
-function createLocalStorageStore<T>(key: string, initialValue: T | null = null) {
-	const localStorageValue: string | null = browser ? window.localStorage.getItem(key) : null;
-	let value: T | null = initialValue;
-	const store = writable<T | null>(initialValue);
+function createLocalStorageStore<T>(key: string, defaultValue: T) {
+	const initialValue: T = browser
+		? JSON.parse(localStorage.getItem(key) || 'null') || defaultValue
+		: defaultValue;
 
-	// Read existing value from localStorage
-	if (localStorageValue) {
-		value = JSON.parse(localStorageValue);
-		store.set(value);
-	}
+	const store = writable<T>(initialValue);
 
-	// Write value to localStorage
-	store.subscribe((newValue) => {
+	store.subscribe((value) => {
 		if (browser) {
-			window.localStorage.setItem(key, JSON.stringify(newValue));
+			localStorage.setItem(key, JSON.stringify(value));
 		}
 	});
 
-	return store;
+	return {
+		...store,
+		reset: () => {
+			store.set(defaultValue);
+		}
+	};
 }
 
 export function sortStore<T extends { updatedAt?: string }>(store: T[]) {
@@ -39,20 +41,41 @@ export function deleteStoreItem<T extends { id: string }>(store: T[], id: string
 }
 
 export const LOCAL_STORAGE_PREFIX = 'hollama';
+export enum StorageKey {
+	HollamaSettings = `${LOCAL_STORAGE_PREFIX}-settings`,
+	HollamaSessions = `${LOCAL_STORAGE_PREFIX}-sessions`,
+	HollamaKnowledge = `${LOCAL_STORAGE_PREFIX}-knowledge`
+}
 
 export interface Settings {
 	ollamaServer: string | null;
 	ollamaModel: string | null;
-	ollamaModels: OllamaModel[];
-	userTheme?: 'light' | 'dark';
+	ollamaModels: ModelResponse[];
+	ollamaServerStatus: 'connected' | 'disconnected';
+	lastUpdateCheck: number | null;
+	autoCheckForUpdates: boolean;
+	userTheme: 'light' | 'dark';
+	hollamaMetadata: HollamaMetadata;
 }
 
-export enum StorageKey {
-	HollamaSettings = `${LOCAL_STORAGE_PREFIX}-settings`,
-	HollamaSessions = `${LOCAL_STORAGE_PREFIX}-sessions`,
-	HollamaKnowledge = `${LOCAL_STORAGE_PREFIX}-knowledge`
-}
+const defaultSettings: Settings = {
+	ollamaServer: 'http://localhost:11434',
+	ollamaModel: null,
+	ollamaModels: [],
+	ollamaServerStatus: 'disconnected',
+	lastUpdateCheck: null,
+	autoCheckForUpdates: false,
+	userTheme: 'light',
+	hollamaMetadata: {
+		currentVersion: version,
+		isDesktop: env.PUBLIC_ADAPTER === 'electron-node',
+		isDocker: env.PUBLIC_ADAPTER === 'docker-node'
+	}
+};
 
-export const settingsStore = createLocalStorageStore<Settings>(StorageKey.HollamaSettings);
-export const sessionsStore = createLocalStorageStore<Session[]>(StorageKey.HollamaSessions);
-export const knowledgeStore = createLocalStorageStore<Knowledge[]>(StorageKey.HollamaKnowledge);
+export const settingsStore = createLocalStorageStore<Settings>(
+	StorageKey.HollamaSettings,
+	defaultSettings
+);
+export const sessionsStore = createLocalStorageStore<Session[]>(StorageKey.HollamaSessions, []);
+export const knowledgeStore = createLocalStorageStore<Knowledge[]>(StorageKey.HollamaKnowledge, []);