UI tweaks (#53)

* logo

* add some icons

* size tweaks

* layout

src/lib/components/chat/ChatIntroduction.svelte

@@ -2,6 +2,8 @@
 	import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME } from '$env/static/public';
 
 	import Logo from '$lib/components/icons/Logo.svelte';
+	import CarbonArrowUpRight from '~icons/carbon/arrow-up-right';
+	import CarbonEarth from '~icons/carbon/earth';
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher<{ message: string }>();
@@ -11,7 +13,7 @@
 	<div class="lg:col-span-1">
 		<div>
 			<div class="text-2xl font-bold mb-3 flex items-center">
-				<Logo classNames="mr-2 text-yellow-400 text-3xl" />
+				<Logo classNames="mr-1 text-yellow-400 text-4xl" />
 				HuggingChat
 			</div>
 			<p class="text-lg text-gray-600 dark:text-gray-400">
@@ -26,20 +28,36 @@
 				<div class="font-semibold">{PUBLIC_MODEL_NAME}</div>
 			</div>
 			<div
-				class="flex items-center gap-4 px-3 py-2 bg-gray-100 rounded-xl text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
+				class="flex items-center gap-5 px-3 py-2 bg-gray-100 rounded-xl text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
 			>
-				<a href="https://huggingface.co/{PUBLIC_MODEL_NAME}" target="_blank" rel="noreferrer">
-					Model page
+				<a
+					href="https://huggingface.co/{PUBLIC_MODEL_NAME}"
+					target="_blank"
+					rel="noreferrer"
+					class="flex items-center hover:underline"
+				>
+					<CarbonArrowUpRight class="text-xs mr-1.5 text-gray-400" />
+					Model
+					<div class="max-sm:hidden">&nbsp;page</div>
 				</a>
 				<a
 					href="https://huggingface.co/datasets/OpenAssistant/oasst1"
 					target="_blank"
 					rel="noreferrer"
+					class="flex items-center hover:underline"
 				>
-					Dataset page
+					<CarbonArrowUpRight class="text-xs mr-1.5 text-gray-400" />
+					Dataset
+					<div class="max-sm:hidden">&nbsp;page</div>
 				</a>
-				<a href="https://open-assistant.io/" target="_blank" class="ml-auto" rel="noreferrer">
-					Open Assistant website
+				<a
+					href="https://open-assistant.io/"
+					target="_blank"
+					class="flex items-center hover:underline ml-auto"
+					rel="noreferrer"
+				>
+					<CarbonEarth class="text-xs mr-1.5 text-gray-400" />
+					Open Assistant Website
 				</a>
 			</div>
 		</div>

src/lib/components/chat/ChatWindow.svelte

@@ -2,7 +2,9 @@
 	import type { Message } from '$lib/types/Message';
 	import { createEventDispatcher } from 'svelte';
 
+	import CarbonAdd from '~icons/carbon/add';
 	import CarbonSendAltFilled from '~icons/carbon/send-alt-filled';
+	import CarbonTextAlignJustify from '~icons/carbon/text-align-justify';
 
 	import ChatMessages from './ChatMessages.svelte';
 	import ChatInput from './ChatInput.svelte';
@@ -19,9 +21,9 @@
 
 <div class="relative h-screen">
 	<nav class="sm:hidden flex items-center h-12 border-b px-4 justify-between dark:border-gray-800">
-		<button>[ ]</button>
+		<button><CarbonTextAlignJustify /></button>
 		<button>New Chat</button>
-		<button>+</button>
+		<button><CarbonAdd /></button>
 	</nav>
 	<ChatMessages {loading} {pending} {messages} on:message />
 	<div
@@ -33,7 +35,7 @@
 				dispatch('message', message);
 				message = '';
 			}}
-			class="w-full relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 focus-within:border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:focus-within:border-gray-500 transition-all"
+			class="w-full relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 focus-within:border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:focus-within:border-gray-500 "
 		>
 			<div class="w-full flex flex-1 border-none bg-transparent">
 				<ChatInput placeholder="Ask anything" bind:value={message} autofocus maxRows={10} />

src/lib/components/icons/Logo.svelte

@@ -3,14 +3,23 @@
 </script>
 
 <svg
-	xmlns="http://www.w3.org/2000/svg"
 	width="1em"
 	height="1em"
 	class={classNames}
-	viewBox="0 0 24 25"
+	viewBox="0 0 13 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
 >
 	<path
-		fill="currentColor"
-		d="M2.7 11.4c0-4.2 3.4-7.6 7.6-7.6h4a7 7 0 0 1 7 7v.6a7 7 0 0 1-7 7H5.6l-2.3 2.1c-.2.2-.5 0-.5-.2V11.4Z"
+		fill="#FFD21E"
+		d="M1.76 5.63a3.7 3.7 0 0 1 3.7-3.7h1.7a3.43 3.43 0 0 1 0 6.87H3.07L2.01 9.83a.14.14 0 0 1-.25-.1v-4.1Z"
+	/>
+	<path
+		fill="#32343D"
+		d="M7.37 4.8c.13.05.19.33.33.25a.54.54 0 0 0 .22-.73.54.54 0 0 0-.73-.22.54.54 0 0 0-.22.73c.06.13.27-.08.4-.03ZM4.83 4.8c-.14.05-.2.33-.33.25a.54.54 0 0 1-.23-.73A.54.54 0 0 1 5 4.1c.26.14.36.47.22.73-.06.13-.27-.08-.4-.03ZM6.12 7.4c1.06 0 1.4-.96 1.4-1.44 0-.49-.62.26-1.4.26-.77 0-1.4-.75-1.4-.26 0 .48.34 1.43 1.4 1.43Z"
+	/>
+	<path
+		fill="#FF323D"
+		d="M6.97 7.12c-.2.16-.49.27-.85.27-.34 0-.6-.1-.81-.24a.94.94 0 0 1 .57-.49c.04-.01.09.06.13.14.05.07.1.15.14.15.05 0 .1-.08.14-.15.05-.08.1-.15.14-.13a.93.93 0 0 1 .54.45Z"
 	/>
 </svg>

src/routes/+layout.svelte

@@ -92,34 +92,38 @@
 				New Chat
 			</a>
 		</div>
-		<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
+		<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-1">
 			{#each data.conversations as conv}
 				<a
 					data-sveltekit-noscroll
 					href="{base}/conversation/{conv.id}"
-					class="pl-3 pr-2 h-12 group rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1 {conv.id ===
+					class="pl-3 pr-2 h-12 group rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1.5 {conv.id ===
 					$page.params.id
 						? 'bg-gray-100 dark:bg-gray-700'
 						: ''}"
 				>
-					<div class="flex-1 truncate">{conv.title}</div>
+					<div class="flex-1 truncate">azeza aze a ea zeazeazazeae</div>
 
 					<button
 						type="button"
-						class="w-6 h-6 items-center justify-center hidden group-hover:flex hover:bg-gray-100"
+						class="w-5 h-5 items-center justify-center hidden group-hover:flex rounded"
 						title="Share conversation"
 						on:click|preventDefault={() => shareConversation(conv.id, conv.title)}
 					>
-						<CarbonExport class="text-gray-400 hover:text-gray-600" />
+						<CarbonExport
+							class="text-gray-400 hover:text-gray-500  dark:hover:text-gray-300 text-xs"
+						/>
 					</button>
 
 					<button
 						type="button"
-						class="w-6 h-6 items-center justify-center hidden group-hover:flex hover:bg-gray-100"
+						class="w-5 h-5 items-center justify-center hidden group-hover:flex rounded"
 						title="Delete conversation"
 						on:click|preventDefault={() => deleteConversation(conv.id)}
 					>
-						<CarbonTrashCan class="text-gray-400 hover:text-gray-600" />
+						<CarbonTrashCan
+							class="text-gray-400 hover:text-gray-500  dark:hover:text-gray-300 text-xs"
+						/>
 					</button>
 				</a>
 			{/each}