thumbnail update

Author: gary149

src/routes/assistant/[assistantId]/thumbnail.png/ChatThumbnail.svelte

@@ -8,39 +8,32 @@
 	export let createdByName: string | undefined;
 	export let avatarUrl: string | undefined;
 
-	const imgUrl = `${href}${base}/${PUBLIC_APP_ASSETS}/icon.svg`;
+	const imgUrl = `${href}${base}/${PUBLIC_APP_ASSETS}/logo.svg`;
 </script>
 
-<div class="flex h-full w-full flex-col items-center justify-center bg-gray-900 p-2">
-	<div class="flex w-full flex-row items-center justify-center bg-gray-900 p-2 text-white">
+<div class="flex h-full w-full flex-col items-center justify-center bg-black p-2">
+	<div class="flex w-full max-w-[540px] items-start justify-center text-white">
 		{#if avatarUrl}
-			<img class="h-32 w-32 rounded-full" src={avatarUrl} alt="avatar" />
-		{:else}
-			<div
-				class="flex h-32 w-32 items-center justify-center rounded-full bg-gray-300 text-4xl font-bold uppercase text-gray-500"
-			>
-				{name[0]}
-			</div>
+			<img class="h-64 w-64 rounded-full" src={avatarUrl} alt="avatar" />
 		{/if}
 		<div class="ml-10 flex flex-col items-start">
-			<h1 class=" text-2xl font-thin">
-				<img class=" mr-2 h-8 w-8" src={imgUrl} alt="app logo" />
-				Chat with
-			</h1>
-			<span class="-mt-5 max-w-[65vw] text-3xl font-black">
-				{name}
-			</span>
-			{#if createdByName}
-				<h3 class="mt-2 font-medium text-gray-400">
-					Created by
-					<span class="ml-1 underline">{createdByName}</span>
-				</h3>
-			{/if}
+			<p class="mb-2 mt-0 text-3xl font-normal text-gray-400">
+				<img class="mr-1.5 h-8 w-8" src={imgUrl} alt="app logo" />
+				AI assistant
+			</p>
+			<h1 class="m-0 {name.length < 38 ? 'text-5xl' : ''} text-balance font-black">{name}</h1>
+			<p class="mb-8 text-pretty text-2xl">
+				{description.slice(0, 160)}
+				{#if description.length > 160}...{/if}
+			</p>
+			<div class="rounded-full bg-[#FFA800] px-8 py-3 text-3xl font-semibold text-black">
+				Start chatting
+			</div>
 		</div>
 	</div>
-	<h2 class="max-w-[90vw] items-center text-center font-medium text-gray-400">
-		{description.slice(0, 200)}
-		{#if description.length > 200}...{/if}
-		<!-- line clamping doesnt work with satori hence this character based approach -->
-	</h2>
+	{#if createdByName}
+		<p class="absolute bottom-4 right-8 text-2xl text-gray-400">
+			An AI assistant created by {createdByName}
+		</p>
+	{/if}
 </div>