Merge pull request #63 from ollama-webui/dev

feat: settings updated & gravatar support

package-lock.json

@@ -13,6 +13,7 @@
 				"highlight.js": "^11.9.0",
 				"http-server": "^14.1.1",
 				"idb": "^7.1.1",
+				"js-sha256": "^0.10.1",
 				"katex": "^0.16.9",
 				"marked": "^9.1.0",
 				"svelte-french-toast": "^1.2.0",
@@ -2527,6 +2528,11 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/js-sha256": {
+			"version": "0.10.1",
+			"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.10.1.tgz",
+			"integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
+		},
 		"node_modules/js-yaml": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -5910,6 +5916,11 @@
 			"integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
 			"dev": true
 		},
+		"js-sha256": {
+			"version": "0.10.1",
+			"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.10.1.tgz",
+			"integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
+		},
 		"js-yaml": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",

package.json

@@ -44,6 +44,7 @@
 		"highlight.js": "^11.9.0",
 		"http-server": "^14.1.1",
 		"idb": "^7.1.1",
+		"js-sha256": "^0.10.1",
 		"katex": "^0.16.9",
 		"marked": "^9.1.0",
 		"svelte-french-toast": "^1.2.0",

src/lib/components/chat/SettingsModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import sha256 from 'js-sha256';
 	import Modal from '../common/Modal.svelte';
 
 	import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
@@ -12,7 +13,6 @@
 
 	// General
 	let API_BASE_URL = BUILD_TIME_API_BASE_URL;
-	let OPENAI_API_KEY = '';
 	let system = '';
 
 	// Models
@@ -28,6 +28,23 @@
 	let top_k = 40;
 	let top_p = 0.9;
 
+	// Addons
+	let gravatarEmail = '';
+	let OPENAI_API_KEY = '';
+
+	function getGravatarURL(email) {
+		// Trim leading and trailing whitespace from
+		// an email address and force all characters
+		// to lower case
+		const address = String(email).trim().toLowerCase();
+
+		// Create a SHA256 hash of the final string
+		const hash = sha256(address);
+
+		// Grab the actual image URL
+		return `https://www.gravatar.com/avatar/${hash}`;
+	}
+
 	const splitStream = (splitOn) => {
 		let buffer = '';
 		return new TransformStream({
@@ -166,7 +183,6 @@
 		console.log(settings);
 
 		API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL;
-		OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
 		system = settings.system ?? '';
 
 		seed = settings.seed ?? 0;
@@ -174,6 +190,9 @@
 		repeat_penalty = settings.repeat_penalty ?? 1.1;
 		top_k = settings.top_k ?? 40;
 		top_p = settings.top_p ?? 0.9;
+
+		OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
+		gravatarEmail = settings.gravatarEmail ?? '';
 	}
 </script>
 
@@ -203,10 +222,10 @@
 
 		<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
 			<div
-				class="flex flex-row space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 text-gray-200 text-xs text-left mb-3 md:mb-0"
+				class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 text-gray-200 text-xs text-left mb-3 md:mb-0"
 			>
 				<button
-					class="px-2.5 py-2.5 rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 					'general'
 						? 'bg-gray-700'
 						: 'hover:bg-gray-800'}"
@@ -232,7 +251,31 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					'advanced'
+						? 'bg-gray-700'
+						: 'hover:bg-gray-800'}"
+					on:click={() => {
+						selectedTab = 'advanced';
+					}}
+				>
+					<div class=" self-center mr-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"
+							/>
+						</svg>
+					</div>
+					<div class=" self-center">Advanced</div>
+				</button>
+
+				<button
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 					'models'
 						? 'bg-gray-700'
 						: 'hover:bg-gray-800'}"
@@ -258,12 +301,12 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-					'advanced'
+					'addons'
 						? 'bg-gray-700'
 						: 'hover:bg-gray-800'}"
 					on:click={() => {
-						selectedTab = 'advanced';
+						selectedTab = 'addons';
 					}}
 				>
 					<div class=" self-center mr-2">
@@ -278,7 +321,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Advanced</div>
+					<div class=" self-center">Add-ons</div>
 				</button>
 			</div>
 			<div class="flex-1 md:min-h-[300px]">
@@ -328,27 +371,6 @@
 
 						<hr class=" border-gray-700" />
 
-						<div>
-							<div class=" mb-2.5 text-sm font-medium">
-								OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span>
-							</div>
-							<div class="flex w-full">
-								<div class="flex-1">
-									<input
-										class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
-										placeholder="Enter OpenAI API Key"
-										bind:value={OPENAI_API_KEY}
-										autocomplete="off"
-									/>
-								</div>
-							</div>
-							<div class="mt-2 text-xs text-gray-500">
-								Adds optional support for 'gpt-*' models available.
-							</div>
-						</div>
-
-						<hr class=" border-gray-700" />
-
 						<div>
 							<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
 							<textarea
@@ -364,7 +386,6 @@
 								on:click={() => {
 									saveSettings({
 										API_BASE_URL: API_BASE_URL === '' ? BUILD_TIME_API_BASE_URL : API_BASE_URL,
-										OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined,
 										system: system !== '' ? system : undefined
 									});
 									show = false;
@@ -579,6 +600,73 @@
 							</button>
 						</div>
 					</div>
+				{:else if selectedTab === 'addons'}
+					<form
+						class="flex flex-col h-full justify-between space-y-3 text-sm"
+						on:submit|preventDefault={() => {
+							saveSettings({
+								gravatarEmail: gravatarEmail !== '' ? gravatarEmail : undefined,
+								gravatarUrl: gravatarEmail !== '' ? getGravatarURL(gravatarEmail) : undefined,
+								OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined
+							});
+							show = false;
+						}}
+					>
+						<div class=" space-y-3">
+							<div>
+								<div class=" mb-2.5 text-sm font-medium">
+									Gravatar Email <span class=" text-gray-400 text-sm">(optional)</span>
+								</div>
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
+											placeholder="Enter Your Email"
+											bind:value={gravatarEmail}
+											autocomplete="off"
+											type="email"
+										/>
+									</div>
+								</div>
+								<div class="mt-2 text-xs text-gray-500">
+									Changes user profile image to match your <a
+										class=" text-gray-300 font-medium"
+										href="https://gravatar.com/"
+										target="_blank">Gravatar.</a
+									>
+								</div>
+							</div>
+
+							<hr class=" border-gray-700" />
+							<div>
+								<div class=" mb-2.5 text-sm font-medium">
+									OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span>
+								</div>
+								<div class="flex w-full">
+									<div class="flex-1">
+										<input
+											class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
+											placeholder="Enter OpenAI API Key"
+											bind:value={OPENAI_API_KEY}
+											autocomplete="off"
+										/>
+									</div>
+								</div>
+								<div class="mt-2 text-xs text-gray-500">
+									Adds optional support for 'gpt-*' models available.
+								</div>
+							</div>
+						</div>
+
+						<div class="flex justify-end pt-3 text-sm font-medium">
+							<button
+								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 transition rounded"
+								type="submit"
+							>
+								Save
+							</button>
+						</div>
+					</form>
 				{/if}
 			</div>
 		</div>
@@ -593,6 +681,15 @@
 		margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
 	}
 
+	.tabs::-webkit-scrollbar {
+		display: none; /* for Chrome, Safari and Opera */
+	}
+
+	.tabs {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
 	input[type='number'] {
 		-moz-appearance: textfield; /* Firefox */
 	}

src/routes/+page.svelte

@@ -871,7 +871,11 @@
 									<div class="space-x-7 flex w-full">
 										<div class="">
 											<img
-												src="/{message.role == 'user' ? 'user' : 'favicon'}.png"
+												src="{message.role == 'user'
+													? settings.gravatarUrl
+														? settings.gravatarUrl
+														: '/user'
+													: '/favicon'}.png"
 												class=" max-w-[32px] object-cover rounded"
 											/>
 										</div>
@@ -1124,8 +1128,8 @@
 										e.preventDefault();
 									}
 									if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
-										submitPrompt(prompt);
 										e.target.style.height = '';
+										submitPrompt(prompt);
 									}
 								}}
 								rows="1"