From 648d14cd23040c83e065ae60406aadcef6372216 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 7 Nov 2023 23:51:56 -0800
Subject: [PATCH] feat: model select ui update

---
 src/lib/components/chat/SettingsModal.svelte |   6 +-
 src/lib/components/layout/Navbar.svelte      |  24 ++--
 src/lib/constants.ts                         |   2 +
 src/routes/+page.svelte                      | 125 ++++++++++---------
 4 files changed, 85 insertions(+), 72 deletions(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index d286892b3..b47f3996e 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -2,7 +2,7 @@
 	import sha256 from 'js-sha256';
 	import Modal from '../common/Modal.svelte';
 
-	import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
+	import { WEB_UI_VERSION, API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
 	import toast from 'svelte-french-toast';
 
 	export let show = false;
@@ -757,7 +757,9 @@
 							<div>
 								<div class=" mb-2.5 text-sm font-medium">Ollama Web UI Version</div>
 								<div class="flex w-full">
-									<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">v1.0.0-alpha</div>
+									<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
+										{WEB_UI_VERSION}
+									</div>
 								</div>
 							</div>
 
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index afbc863dc..8b60eb114 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -60,14 +60,16 @@
 						<div class=" m-auto self-center">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
-								fill="currentColor"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
 								class="w-5 h-5"
 							>
 								<path
-									fill-rule="evenodd"
-									d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
-									clip-rule="evenodd"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
 								/>
 							</svg>
 						</div>
@@ -88,12 +90,16 @@
 						<div class=" m-auto self-center">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
-								fill="currentColor"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
 								class="w-5 h-5"
 							>
 								<path
-									d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
 								/>
 							</svg>
 						</div>
@@ -108,7 +114,7 @@
 	bind:this={navElement}
 	class="h-screen {show
 		? ''
-		: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-black text-gray-200 shadow-2xl text-sm
+		: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-gray-900 text-gray-200 shadow-2xl text-sm
         "
 >
 	<div class="py-2.5 my-auto flex flex-col justify-between h-screen">
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 5450a17a9..21c8fb764 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -8,6 +8,8 @@ export const API_BASE_URL =
 			: `http://localhost:11434/api`
 		: PUBLIC_API_BASE_URL;
 
+export const WEB_UI_VERSION = 'v1.0.0-alpha.1';
+
 // Source: https://kit.svelte.dev/docs/modules#$env-static-public
 // This feature, akin to $env/static/private, exclusively incorporates environment variables
 // that are prefixed with config.kit.env.publicPrefix (usually set to PUBLIC_).
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ea93b8df2..8d3ba171a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -795,66 +795,68 @@
 
 		<div class="min-h-screen w-full flex justify-center">
 			<div class=" py-2.5 flex flex-col justify-between w-full">
-				<div class="max-w-2xl mx-auto w-full px-2.5 mt-14">
+				<!-- <div class="max-w-2xl w-full px-2.5">
 					<div class="p-3 rounded-lg bg-gray-100 dark:bg-gray-900">
 						<div>
 							<label
 								for="models"
 								class="block mb-2 text-sm font-medium dark:text-gray-200 flex justify-between"
-							>
-								<div class="self-center">Model</div>
+							/>
 
-								<button
-									class=" self-center dark:hover:text-gray-300"
-									on:click={() => {
-										openSettings();
-									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
-										/>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-										/>
-									</svg>
-								</button>
-							</label>
-
-							<div>
-								<select
-									id="models"
-									class="outline-none border dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400"
-									bind:value={selectedModel}
-									disabled={messages.length != 0}
-								>
-									<option value="" selected>Select a model</option>
-
-									{#each models as model}
-										{#if model.name === 'hr'}
-											<hr />
-										{:else}
-											<option value={model.name}>{model.name}</option>
-										{/if}
-									{/each}
-								</select>
-								<div class="text-right mt-1.5 text-xs text-gray-500">
-									<button on:click={saveDefaultModel}> Set as default</button>
-								</div>
-							</div>
+							<div />
 						</div>
 					</div>
+				</div> -->
+
+				<div class="max-w-2xl mx-auto w-full mt-14">
+					<div class="flex justify-between my-2 text-sm">
+						<select
+							id="models"
+							class="outline-none bg-transparent text-lg font-semibold rounded-lg block w-full placeholder-gray-400"
+							bind:value={selectedModel}
+							disabled={messages.length != 0}
+						>
+							<option value="" selected>Select a model</option>
+
+							{#each models as model}
+								{#if model.name === 'hr'}
+									<hr />
+								{:else}
+									<option value={model.name} class=" text-lg">{model.name}</option>
+								{/if}
+							{/each}
+						</select>
+						<button
+							class=" self-center dark:hover:text-gray-300"
+							on:click={() => {
+								openSettings();
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
+								/>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+								/>
+							</svg>
+						</button>
+					</div>
+
+					<div class="text-left mt-1.5 text-xs text-gray-500">
+						<button on:click={saveDefaultModel}> Set as default</button>
+					</div>
 				</div>
 
 				<div class=" h-full mt-10 mb-48 w-full flex flex-col">
@@ -960,22 +962,23 @@
 
 																<div class=" flex justify-start space-x-1">
 																	<button
-																		class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-900 transition"
+																		class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
 																		on:click={() => {
 																			editMessage(messageIdx);
 																		}}
 																	>
 																		<svg
 																			xmlns="http://www.w3.org/2000/svg"
-																			viewBox="0 0 20 20"
-																			fill="currentColor"
+																			fill="none"
+																			viewBox="0 0 24 24"
+																			stroke-width="1.5"
+																			stroke="currentColor"
 																			class="w-4 h-4"
 																		>
 																			<path
-																				d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
-																			/>
-																			<path
-																				d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
+																				stroke-linecap="round"
+																				stroke-linejoin="round"
+																				d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
 																			/>
 																		</svg>
 																	</button>
@@ -1105,13 +1108,13 @@
 							<Suggestions {submitPrompt} />
 						{/if}
 						<form
-							class=" flex shadow-sm relative w-full"
+							class=" flex relative w-full"
 							on:submit|preventDefault={() => {
 								submitPrompt(prompt);
 							}}
 						>
 							<textarea
-								class="rounded-xl dark:bg-gray-700 dark:text-gray-100 outline-none shadow border dark:border-gray-700 w-full py-3 px-5 pr-12 resize-none"
+								class="rounded-xl dark:bg-gray-700 dark:text-gray-100 outline-none border dark:border-gray-700 w-full py-3 px-5 pr-12 resize-none"
 								placeholder="Send a message"
 								bind:value={prompt}
 								on:keypress={(e) => {