✨ Make chat intro buttons work (#38)

.env

@@ -8,7 +8,7 @@ HF_TOKEN=#your huggingface token here
 PUBLIC_MODEL_ENDPOINT=https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-1-pythia-12b
 PUBLIC_MODEL_NAME=OpenAssistant/oasst-sft-1-pythia-12b
 PUBLIC_MODEL_TAGLINE=This is the first iteration English supervised-fine-tuning (SFT) model of the <a class="underline" href="https://github.com/LAION-AI/Open-Assistant">Open-Assistant</a> project. It is based on a Pythia 12B that was fine-tuned on ~22k human demonstrations of assistant conversations collected through the <a class="underline" href="https://open-assistant.io/">https://open-assistant.io/</a> human feedback web app before March 7, 2023.
-PUBLIC_DISABLE_INTRO_TILES=true
+PUBLIC_DISABLE_INTRO_TILES=false
 PUBLIC_USER_MESSAGE_TOKEN=<|prompter|>
 PUBLIC_ASSISTANT_MESSAGE_TOKEN=<|assistant|>
 PUBLIC_SEP_TOKEN=<|endoftext|>

src/lib/components/chat/ChatIntroduction.svelte

@@ -2,6 +2,9 @@
 	import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME } from '$env/static/public';
 
 	import Logo from '$lib/components/icons/Logo.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{ message: string }>();
 </script>
 
 <div class="grid lg:grid-cols-3 gap-8 my-auto">
@@ -26,34 +29,56 @@
 				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"
 			>
 				<!-- need to change link to a public model before launch -->
-				<a href="https://huggingface.co/OpenAssistant/llama_30b_oasst_latcyr_1000" target="_blank"
-					>Model page</a
-				>
-				<a href="https://huggingface.co/datasets/OpenAssistant/oasst1" target="_blank"
-					>Dataset page</a
+				<a
+					href="https://huggingface.co/OpenAssistant/llama_30b_oasst_latcyr_1000"
+					target="_blank"
+					rel="noreferrer"
 				>
-				<a href="https://open-assistant.io/" target="_blank" class="ml-auto"
-					>Open Assistant website</a
+					Model page
+				</a>
+				<a
+					href="https://huggingface.co/datasets/OpenAssistant/oasst1"
+					target="_blank"
+					rel="noreferrer"
 				>
+					Dataset page
+				</a>
+				<a href="https://open-assistant.io/" target="_blank" class="ml-auto" rel="noreferrer">
+					Open Assistant website
+				</a>
 			</div>
 		</div>
 	</div>
-	{#if PUBLIC_DISABLE_INTRO_TILES}
+	{#if PUBLIC_DISABLE_INTRO_TILES !== 'true'}
 		<div class="lg:col-span-3 lg:mt-12">
 			<p class="mb-3 text-gray-600 dark:text-gray-300">Examples</p>
 			<div class="grid lg:grid-cols-3 gap-3 lg:gap-5">
 				<button
+					type="button"
 					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
-					>"Write an email from bullet list"</button
+					on:click={() =>
+						dispatch(
+							'message',
+							'Write an email from bullet list: \n\n- Buy milk\n- Buy eggs\n- Buy bread'
+						)}
 				>
+					"Write an email from bullet list"
+				</button>
 				<button
+					type="button"
 					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
-					>"Code a snake game"</button
+					on:click={() =>
+						dispatch('message', 'Code a snake game in python, the snake should be red')}
 				>
+					"Code a snake game"
+				</button>
 				<button
+					type="button"
 					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
-					>"Assist in a task"</button
+					on:click={() => dispatch('message', 'How do I make a lemon cheesecake?')}
 				>
+					"Assist in a task"
+				</button>
 			</div>
 		</div>
 	{/if}

src/lib/components/chat/ChatMessages.svelte

@@ -15,7 +15,7 @@
 		{#each messages as message}
 			<ChatMessage {message} />
 		{:else}
-			<ChatIntroduction />
+			<ChatIntroduction on:message />
 		{/each}
 		<div class="h-32 flex-none" />
 	</div>

src/lib/components/chat/ChatWindow.svelte

@@ -21,7 +21,7 @@
 		<button>New Chat</button>
 		<button>+</button>
 	</nav>
-	<ChatMessages {messages} />
+	<ChatMessages {messages} on:message />
 	<div
 		class="flex max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
 	>