refac: styling

src/lib/components/chat/MessageInput/Suggestions.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Bolt from '$lib/components/icons/Bolt.svelte';
+
 	export let submitPrompt: Function;
 	export let suggestionPrompts = [];
 
@@ -12,20 +14,27 @@
 	// 	: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
 </script>
 
+{#if prompts.length > 0}
+	<div class="mb-2 flex gap-1 text-sm font-medium items-center text-gray-400 dark:text-gray-600">
+		<Bolt />
+		Suggested
+	</div>
+{/if}
+
 <div class="w-full">
 	<div class="relative w-full flex gap-2 snap-x overflow-x-auto tabs">
 		{#each prompts as prompt, promptIdx}
 			<div class="shrink-0">
 				<button
-					class="flex flex-1 shrink-0 w-64 justify-between h-full px-5 py-3 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 rounded-2xl transition group"
+					class="flex flex-col flex-1 shrink-0 w-64 justify-between h-36 p-5 px-6 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 rounded-3xl transition group"
 					on:click={() => {
 						submitPrompt(prompt.content);
 					}}
 				>
-					<div class="flex flex-col text-left self-center">
+					<div class="flex flex-col text-left">
 						{#if prompt.title && prompt.title[0] !== ''}
-							<div class="text-sm font-medium dark:text-gray-300">{prompt.title[0]}</div>
-							<div class="text-sm text-gray-500 font-normal line-clamp-1">{prompt.title[1]}</div>
+							<div class="  font-medium dark:text-gray-300">{prompt.title[0]}</div>
+							<div class="text-sm text-gray-600 font-normal line-clamp-2">{prompt.title[1]}</div>
 						{:else}
 							<div class=" self-center text-sm font-medium dark:text-gray-300 line-clamp-2">
 								{prompt.content}
@@ -33,21 +42,25 @@
 						{/if}
 					</div>
 
-					<div
-						class="self-center p-1 rounded-lg text-gray-50 group-hover:text-gray-800 dark:text-gray-850 dark:group-hover:text-gray-100 transition"
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
+					<div class="w-full flex justify-between">
+						<div class="text-xs text-gray-400 dark:text-gray-600 self-center">Prompt</div>
+
+						<div
+							class="self-end p-1 rounded-lg text-gray-300 group-hover:text-gray-800 dark:text-gray-700 dark:group-hover:text-gray-100 transition"
 						>
-							<path
-								fill-rule="evenodd"
-								d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="size-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
 					</div>
 				</button>
 			</div>

src/lib/components/chat/Messages/Placeholder.svelte

@@ -25,9 +25,9 @@
 </script>
 
 {#if models.length > 0}
-	<div class="m-auto w-full max-w-3xl px-8 pb-24">
-		<!-- <div class="flex justify-start">
-			<div class="flex -space-x-4 mb-0.5">
+	<div class="m-auto w-full max-w-3xl px-8 pb-32">
+		<div class="flex justify-start">
+			<div class="flex -space-x-4 mb-1">
 				{#each models as model, modelIdx}
 					<button
 						on:click={() => {
@@ -54,7 +54,8 @@
 					</button>
 				{/each}
 			</div>
-		</div> -->
+		</div>
+
 		<div
 			class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
 		>
@@ -84,10 +85,6 @@
 		</div>
 
 		<div class=" w-full">
-			<div class="mb-2 flex gap-1 text-sm font-medium items-center dark:text-gray-600">
-				<Bolt />
-				Suggested
-			</div>
 			<Suggestions {suggestionPrompts} {submitPrompt} />
 		</div>
 	</div>