chat intro

src/lib/chat/ChatBox.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let message;
+</script>
+
+{#if message.from === 'bot'}
+	<div class="flex items-start justify-start gap-4 leading-relaxed">
+		<img
+			alt=""
+			src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
+			class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
+		/>
+		<div
+			class="group relative rounded-2xl px-5 py-3.5 border border-gray-100  bg-gradient-to-br from-gray-50"
+		>
+			{message.content}
+		</div>
+	</div>
+{/if}
+{#if message.from === 'user'}
+	<div class="flex items-start justify-start gap-4">
+		<div class="mt-5 w-3 h-3 flex-none rounded-full" />
+		<div class="rounded-2xl px-5 py-3.5 text-gray-500">
+			{message.content}
+		</div>
+	</div>
+{/if}

src/lib/chat/ChatIntroduction.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let title: string = '';
+</script>
+
+<div class="grid grid-cols-3 gap-3 my-auto">
+	<div class="col-span-3 text-center mb-10">
+		<h1 class="text-3xl font-bold mb-1.5">{title}</h1>
+		<p class="text-lg text-gray-500">Lorem ipsum dolor sit.</p>
+	</div>
+	<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Create</div>
+	<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Discover</div>
+	<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Overcome</div>
+	<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Create</div>
+	<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Discover</div>
+	<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Overcome</div>
+</div>

src/routes/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { fetchEventSource } from '@microsoft/fetch-event-source';
+	import ChatBox from '$lib/chat/Chatbox.svelte';
+	import ChatIntroduction from '$lib/chat/ChatIntroduction.svelte';
 	const ENDPOINT = 'https://joi-20b.ngrok.io/generate_stream';
 
 	type Message =
@@ -12,28 +14,9 @@
 				content: string;
 		  };
 
-	let messages: Message[] = [
-		{
-			from: 'user',
-			content: 'hello bot'
-		},
-		{
-			from: 'bot',
-			content: " Hello! I'm a conversational chatbot. What can I help you with today?<|endoftext|>"
-		},
-		{
-			from: 'user',
-			content: 'how are you?'
-		},
-		{
-			from: 'bot',
-			content: " I'm fine, thank you for asking. How are you?<|endoftext|>"
-		}
-	];
+	let messages: Message[] = [];
 	let message = '';
 
-	$: console.log(messages);
-
 	function onWrite() {
 		messages = [...messages, { from: 'user', content: message }];
 		message = '';
@@ -79,47 +62,30 @@
 </script>
 
 <div class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd">
-	<nav class="max-md:hidden  grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gray-50">
+	<nav
+		class="max-md:hidden  grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50"
+	>
 		<div class="flex-none sticky top-0 relative p-3 flex flex-col">
 			<button class="border px-12 py-2.5 rounded-lg border shadow bg-white">New Chat</button>
 		</div>
 		<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
 			{#each Array(5) as _}
-				<a href="" class="truncate py-3 px-3 rounded-lg flex-none text-gray-400 hover:bg-gray-100">
+				<a href="/" class="truncate py-3 px-3 rounded-lg flex-none text-gray-400 hover:bg-gray-100">
 					Amet consectetur adipisicing elit. Eos dolorum nihil alias.
 				</a>
 			{/each}
 		</div>
 		<div class="flex flex-col p-3 gap-2">
-			<a href="" class="truncate  py-3 px-3 rounded-lg mt-auto"> Appearance </a>
-			<a href="" class="truncate  py-3 px-3 rounded-lg"> Settings </a>
+			<a href="/" class="truncate py-3 px-3 rounded-lg mt-auto"> Appearance </a>
+			<a href="/" class="truncate py-3 px-3 rounded-lg"> Settings </a>
 		</div>
 	</nav>
 	<div class="overflow-y-auto">
-		<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
-			{#each messages as { from, content }}
-				{#if from === 'bot'}
-					<div class="flex items-start justify-start gap-4 leading-relaxed">
-						<img
-							alt=""
-							src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
-							class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
-						/>
-						<div
-							class="group relative rounded-2xl px-5 py-3.5 border border-gray-100  bg-gradient-to-br from-gray-50"
-						>
-							{content}
-						</div>
-					</div>
-				{/if}
-				{#if from === 'user'}
-					<div class="flex items-start justify-start gap-4">
-						<div class="mt-5 w-3 h-3 flex-none rounded-full" />
-						<div class="rounded-2xl px-5 py-3.5 text-gray-500">
-							{content}
-						</div>
-					</div>
-				{/if}
+		<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
+			{#each messages as message}
+				<ChatBox {message} />
+			{:else}
+				<ChatIntroduction title="Joi 20B Instruct" />
 			{/each}
 			<div class="h-32" />
 		</div>