From 7f47718a693c7ef79424c2b8fe25f81d45dba85a Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 17 Nov 2023 13:17:30 -0800
Subject: [PATCH] feat: ui update

---
 src/lib/components/layout/Navbar.svelte | 164 +++++++++++++-----------
 src/lib/constants.ts                    |   2 +-
 src/routes/+page.svelte                 |  47 +------
 tailwind.config.js                      |   2 +-
 4 files changed, 92 insertions(+), 123 deletions(-)

diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 4315e5dac..4db018d3d 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -45,65 +45,41 @@
 </script>
 
 <div
-	class=" fixed top-0 flex flex-row justify-center dark:bg-stone-100/5 dark:text-gray-200 backdrop-blur-xl w-full z-30"
+	class=" fixed top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-full z-30"
 >
-	<div class="basis-full px-5">
+	<div class="basis-full">
 		<nav class="py-3" id="nav">
-			<div class="flex flex-row justify-between">
-				<div class="pl-2">
-					<button
-						class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
-						on:click={() => {
-							show = !show;
-						}}
+			<div class=" flex max-w-3xl mx-auto px-3">
+				<div class="flex w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
+					<div class="pr-2">
+						<button
+							class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
+							on:click={() => {
+								createNewChat();
+							}}
+						>
+							<div class=" m-auto self-center">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+									class="w-5 h-5"
+								>
+									<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"
+									/>
+								</svg>
+							</div>
+						</button>
+					</div>
+					<div
+						class=" flex-1 self-center font-medium overflow-hidden text-ellipsis whitespace-nowrap w-[80vw] pr-4"
 					>
-						<div class=" m-auto self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-5 h-5"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
-								/>
-							</svg>
-						</div>
-					</button>
-				</div>
-
-				<div class=" self-center">
-					{title != '' ? title.split(' ').slice(0, 6).join(' ') : 'Ollama Web UI'}
-				</div>
-
-				<div class="pr-2">
-					<button
-						class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
-						on:click={() => {
-							createNewChat();
-						}}
-					>
-						<div class=" m-auto self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-5 h-5"
-							>
-								<path
-									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>
-					</button>
+						{title != '' ? title : 'Ollama Web UI'}
+					</div>
 				</div>
 			</div>
 		</nav>
@@ -114,35 +90,44 @@
 	bind:this={navElement}
 	class="h-screen {show
 		? ''
-		: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-[#0a0a0a] text-gray-200 shadow-2xl text-sm
+		: '-translate-x-[260px]'} w-[260px] fixed top-0 left-0 z-40 transition bg-[#0a0a0a] text-gray-200 shadow-2xl text-sm
         "
 >
 	<div class="py-2.5 my-auto flex flex-col justify-between h-screen">
 		<div class="px-2.5 flex justify-center space-x-2">
 			<button
-				class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex"
+				class="flex-grow flex justify-between rounded-md px-3 py-1.5 my-2 hover:bg-gray-900 transition"
 				on:click={() => {
 					createNewChat();
 				}}
 			>
-				<div class="self-center mr-2">
+				<div class="flex self-center">
+					<div class="self-center mr-3.5">
+						<img src="/ollama.png" class=" w-5 invert-[100%] rounded-full" />
+					</div>
+
+					<div class=" self-center font-medium text-sm">New Chat</div>
+				</div>
+
+				<div class="self-center">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 20 20"
 						fill="currentColor"
-						class="w-5 h-5"
+						class="w-4 h-4"
 					>
 						<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"
+							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"
 						/>
 					</svg>
 				</div>
-
-				<div class=" self-center">New Chat</div>
 			</button>
 
-			<button
-				class=" cursor-pointer w-12 rounded-md border border-gray-600 flex"
+			<!-- <button
+				class=" cursor-pointer w-12 rounded-md flex"
 				on:click={() => {
 					show = !show;
 				}}
@@ -166,16 +151,16 @@
 						/>
 					</svg>
 				</div>
-			</button>
+			</button> -->
 		</div>
 
 		<div class="pl-2.5 my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
 			{#each _chats as chat, i}
 				<div class=" w-full pr-2 relative">
 					<button
-						class=" w-full flex justify-between rounded-md px-4 py-3 hover:bg-gray-800 {chat.id ===
+						class=" w-full flex justify-between rounded-md px-3 py-2 hover:bg-gray-900 {chat.id ===
 						selectedChatId
-							? 'bg-gray-800'
+							? 'bg-gray-900'
 							: ''} transition whitespace-nowrap text-ellipsis"
 						on:click={() => {
 							if (chat.id !== chatTitleEditIdx) {
@@ -205,8 +190,8 @@
 							</div>
 							<div
 								class=" text-left self-center overflow-hidden {chat.id === selectedChatId
-									? 'w-[150px]'
-									: 'w-[200px]'} "
+									? 'w-[120px]'
+									: 'w-[180px]'} "
 							>
 								{#if chatTitleEditIdx === chat.id}
 									<input bind:value={chatTitle} class=" bg-transparent w-full" />
@@ -218,7 +203,7 @@
 					</button>
 
 					{#if chat.id === selectedChatId}
-						<div class=" absolute right-[22px] top-[14px]">
+						<div class=" absolute right-[22px] top-[10px]">
 							{#if chatTitleEditIdx === chat.id}
 								<div class="flex self-center space-x-1.5">
 									<button
@@ -322,7 +307,7 @@
 				<div class="flex">
 					<input bind:this={importFileInputElement} bind:files={importFiles} type="file" hidden />
 					<button
-						class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition"
+						class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
 						on:click={() => {
 							importFileInputElement.click();
 							// importChatHistory();
@@ -347,7 +332,7 @@
 						<div class=" self-center">Import</div>
 					</button>
 					<button
-						class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition"
+						class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
 						on:click={() => {
 							exportChatHistory();
 						}}
@@ -372,7 +357,7 @@
 					</button>
 				</div>
 				<button
-					class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition"
+					class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
 					on:click={() => {
 						deleteChatHistory();
 					}}
@@ -396,7 +381,7 @@
 					<div class=" self-center">Clear conversations</div>
 				</button>
 				<button
-					class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition"
+					class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
 					on:click={() => {
 						openSettings();
 					}}
@@ -427,4 +412,33 @@
 			</div>
 		</div>
 	</div>
+
+	<div
+		class="fixed left-0 top-[50dvh] z-40 -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
+	>
+		<button
+			class=" group"
+			on:click={() => {
+				show = !show;
+			}}
+			><span class="" data-state="closed"
+				><div
+					class="flex h-[72px] w-8 items-center justify-center opacity-20 group-hover:opacity-100 transition"
+				>
+					<div class="flex h-6 w-6 flex-col items-center">
+						<div
+							class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {show
+								? 'group-hover:rotate-[15deg]'
+								: 'group-hover:rotate-[-15deg]'}"
+						/>
+						<div
+							class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {show
+								? 'group-hover:rotate-[-15deg]'
+								: 'group-hover:rotate-[15deg]'}"
+						/>
+					</div>
+				</div>
+			</span>
+		</button>
+	</div>
 </div>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 57f7cfe6f..48a9d2e5f 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -8,7 +8,7 @@ export const API_BASE_URL =
 			: `http://localhost:11434/api`
 		: PUBLIC_API_BASE_URL;
 
-export const WEB_UI_VERSION = 'v1.0.0-alpha.6';
+export const WEB_UI_VERSION = 'v1.0.0-alpha.8';
 
 // Source: https://kit.svelte.dev/docs/modules#$env-static-public
 // This feature, akin to $env/static/private, exclusively incorporates environment variables
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index de09e7af8..56be3a1f1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1093,52 +1093,7 @@
 
 		<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-3 md:px-0 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-800"
-							bind:value={selectedModel}
-							disabled={messages.length != 0}
-						>
-							<option class=" text-gray-700" value="" selected>Select a model</option>
-
-							{#each models as model}
-								{#if model.name === 'hr'}
-									<hr />
-								{:else}
-									<option value={model.name} class="text-gray-700 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="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
 					<div class="flex flex-col my-2">
 						{#each selectedModels as selectedModel, selectedModelIdx}
 							<div class="flex">
diff --git a/tailwind.config.js b/tailwind.config.js
index 1512ddac1..b97b22db0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,7 @@ export default {
 					500: '#8e8ea0',
 					600: '#565869',
 					700: '#40414f',
-					800: '#33353E',
+					800: '#343541',
 					900: '#202123',
 					950: '#050509'
 				}