From 1b35af1c62260de731ea7ec4c9b6a786fe0a1b27 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 7 Nov 2023 22:46:11 -0800
Subject: [PATCH] feat: ui update

---
 src/lib/components/layout/Navbar.svelte |   2 +-
 src/routes/+page.svelte                 | 164 +++++++++++-------------
 2 files changed, 78 insertions(+), 88 deletions(-)

diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 9d3014c7..afbc863d 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -108,7 +108,7 @@
 	bind:this={navElement}
 	class="h-screen {show
 		? ''
-		: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-gray-900 text-gray-200 shadow-2xl text-sm
+		: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-black 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/routes/+page.svelte b/src/routes/+page.svelte
index 65eb2dd7..97b2cfde 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -883,7 +883,7 @@
 														? settings.gravatarUrl
 														: '/user'
 													: '/favicon'}.png"
-												class=" max-w-[32px] object-cover rounded"
+												class=" max-w-[32px] object-cover rounded-full"
 											/>
 										</div>
 
@@ -956,7 +956,29 @@
 													{@html marked(message.content.replace('\\\\', '\\\\\\'))}
 
 													{#if message.done}
-														<div class=" flex justify-end space-x-1 text-gray-400">
+														<div class=" flex justify-start space-x-1">
+															<button
+																class="p-1 rounded dark:hover:bg-gray-800 transition"
+																on:click={() => {
+																	copyToClipboard(message.content);
+																}}
+															>
+																<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="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+																	/>
+																</svg>
+															</button>
+
 															<button
 																class="p-1 rounded dark:hover:bg-gray-800 {message.rating === 1
 																	? ' bg-gray-200 dark:bg-gray-800'
@@ -1001,6 +1023,28 @@
 																	/></svg
 																>
 															</button>
+
+															{#if messageIdx + 1 === messages.length}
+																<button
+																	class="p-1 rounded dark:hover:bg-gray-800 transition"
+																	on:click={regenerateResponse}
+																>
+																	<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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+																		/>
+																	</svg>
+																</button>
+															{/if}
 														</div>
 													{/if}
 												{/if}
@@ -1033,28 +1077,6 @@
 													</svg>
 												</button>
 											{/if}
-										{:else if message.done}
-											<button
-												class="p-1 rounded dark:hover:bg-gray-700 transition"
-												on:click={() => {
-													copyToClipboard(message.content);
-												}}
-											>
-												<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="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
-													/>
-												</svg>
-											</button>
 										{/if}
 									</div>
 								</div>
@@ -1067,61 +1089,11 @@
 			<div class="fixed bottom-0 w-full">
 				<!-- <hr class=" mb-3 border-gray-600" /> -->
 
-				<div class=" bg-gradient-to-t from-gray-100 dark:from-gray-900 pt-5">
+				<div class=" bg-gradient-to-t from-white/90 dark:from-gray-900 pt-5">
 					<div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0">
 						{#if messages.length == 0 && suggestions !== 'false'}
 							<Suggestions {submitPrompt} />
 						{/if}
-
-						{#if messages.length != 0 && messages.at(-1).role == 'assistant'}
-							{#if messages.at(-1).done == true}
-								<div class=" flex justify-end mb-2.5">
-									<button
-										class=" flex px-4 py-2.5 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
-										on:click={regenerateResponse}
-									>
-										<div class=" self-center mr-1">
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													fill-rule="evenodd"
-													d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
-													clip-rule="evenodd"
-												/>
-											</svg>
-										</div>
-										<div class=" self-center text-sm font-medium">Regenerate</div>
-									</button>
-								</div>
-							{:else}
-								<div class=" flex justify-end mb-2.5">
-									<button
-										class=" flex px-4 py-2.5 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
-										on:click={stopResponse}
-									>
-										<div class=" self-center mr-1">
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													fill-rule="evenodd"
-													d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm5-2.25A.75.75 0 017.75 7h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-4.5z"
-													clip-rule="evenodd"
-												/>
-											</svg>
-										</div>
-										<div class=" self-center text-sm font-medium">Stop generating</div>
-									</button>
-								</div>
-							{/if}
-						{/if}
 						<form
 							class=" flex shadow-sm relative w-full"
 							on:submit|preventDefault={() => {
@@ -1148,35 +1120,53 @@
 								}}
 							/>
 							<div class=" absolute right-0 bottom-0">
-								<div class="pr-3 pb-2">
+								<div class="pr-3 pb-[9px]">
 									{#if messages.length == 0 || messages.at(-1).done == true}
 										<button
 											class="{prompt !== ''
-												? 'bg-emerald-600 text-gray-100 hover:bg-emerald-700 '
-												: 'text-gray-200 dark:text-gray-600 disabled'} transition rounded p-2"
+												? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
+												: 'text-white bg-gray-100 dark:text-gray-400 dark:bg-gray-600 disabled'} transition rounded-lg p-1.5"
 											type="submit"
 											disabled={prompt === ''}
 										>
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 16 16"
-												fill="none"
-												class="w-4 h-4"
-												><path
-													d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
-													fill="currentColor"
-												/></svg
+												viewBox="0 0 20 20"
+												fill="currentColor"
+												class="w-5 h-5"
 											>
+												<path
+													fill-rule="evenodd"
+													d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
+													clip-rule="evenodd"
+												/>
+											</svg>
 										</button>
 									{:else}
-										<div class="loading mb-1.5 mr-1 font-semibold text-lg">...</div>
+										<button
+											class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-lg p-1.5"
+											on:click={stopResponse}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 24 24"
+												fill="currentColor"
+												class="w-5 h-5"
+											>
+												<path
+													fill-rule="evenodd"
+													d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm6-2.438c0-.724.588-1.312 1.313-1.312h4.874c.725 0 1.313.588 1.313 1.313v4.874c0 .725-.588 1.313-1.313 1.313H9.564a1.312 1.312 0 01-1.313-1.313V9.564z"
+													clip-rule="evenodd"
+												/>
+											</svg>
+										</button>
 									{/if}
 								</div>
 							</div>
 						</form>
 
 						<div class="mt-2.5 text-xs text-gray-500 text-center">
-							LLMs may produce inaccurate information about people, places, or facts.
+							LLMs can make mistakes. Verify important information.
 						</div>
 					</div>
 				</div>