add loading icon + pending state when assistant message is pending (#48)

* add loading icon + pending state when assistant message is pending

* remove dead code

Co-authored-by: Eliott C. <coyotte508@gmail.com>

* add loading to messages if a token takes a while to come

* add dom utils

---------

Co-authored-by: Eliott C. <coyotte508@gmail.com>

src/lib/components/chat/ChatMessage.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
 	import { marked } from 'marked';
 	import type { Message } from '$lib/types/Message';
+	import { afterUpdate } from 'svelte';
+	import { deepestChild } from '$lib/utils/dom';
 
 	import CodeBlock from '../CodeBlock.svelte';
+	import IconLoading from '../icons/IconLoading.svelte';
 
 	function sanitizeMd(md: string) {
 		return md.replaceAll('<', '&lt;');
 	}
 
 	export let message: Message;
-	let el: HTMLElement;
+	export let loading: boolean = false;
+
+	let contentEl: HTMLElement;
+	let loadingEl: any;
+	let pendingTimeout: NodeJS.Timeout;
 
 	const options: marked.MarkedOptions = {
 		...marked.getDefaults(),
@@ -17,6 +24,23 @@
 	};
 
 	$: tokens = marked.lexer(sanitizeMd(message.content));
+
+	afterUpdate(() => {
+		loadingEl?.$destroy();
+		clearTimeout(pendingTimeout);
+
+		// Add loading animation to the last message if update takes more than 600ms
+		if (loading) {
+			pendingTimeout = setTimeout(() => {
+				if (contentEl) {
+					loadingEl = new IconLoading({
+						target: deepestChild(contentEl),
+						props: { classNames: 'loading inline ml-2' }
+					});
+				}
+			}, 600);
+		}
+	});
 </script>
 
 {#if message.from === 'assistant'}
@@ -27,16 +51,23 @@
 			class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
 		/>
 		<div
-			class="prose dark:prose-invert :prose-pre:bg-gray-100 dark:prose-pre:bg-gray-950 relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800 text-gray-600 dark:text-gray-300"
-			bind:this={el}
+			class="relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800 text-gray-600 dark:text-gray-300 min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[100px]"
 		>
-			{#each tokens as token}
-				{#if token.type === 'code'}
-					<CodeBlock lang={token.lang} code={token.text} />
-				{:else}
-					{@html marked.parser([token], options)}
-				{/if}
-			{/each}
+			{#if !message.content}
+				<IconLoading classNames="absolute inset-0 m-auto" />
+			{/if}
+			<div
+				class="prose dark:prose-invert :prose-pre:bg-gray-100 dark:prose-pre:bg-gray-950"
+				bind:this={contentEl}
+			>
+				{#each tokens as token}
+					{#if token.type === 'code'}
+						<CodeBlock lang={token.lang} code={token.text} />
+					{:else}
+						{@html marked.parser([token], options)}
+					{/if}
+				{/each}
+			</div>
 		</div>
 	</div>
 {/if}

src/lib/components/chat/ChatMessages.svelte

@@ -6,17 +6,22 @@
 	import ChatMessage from './ChatMessage.svelte';
 
 	export let messages: Message[];
+	export let loading: boolean;
+	export let pending: boolean;
 
 	let chatContainer: HTMLElement;
 </script>
 
 <div class="overflow-y-auto h-full" use:snapScrollToBottom={messages} bind:this={chatContainer}>
 	<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}
-			<ChatMessage {message} />
+		{#each messages as message, i}
+			<ChatMessage loading={loading && i === messages.length - 1} {message} />
 		{:else}
 			<ChatIntroduction on:message />
 		{/each}
+		{#if pending}
+			<ChatMessage message={{ from: 'assistant', content: '' }} />
+		{/if}
 		<div class="h-32 flex-none" />
 	</div>
 	<ScrollToBottomBtn class="bottom-10 right-12" scrollNode={chatContainer} />

src/lib/components/chat/ChatWindow.svelte

@@ -8,7 +8,9 @@
 	import ChatInput from './ChatInput.svelte';
 
 	export let messages: Message[] = [];
-	export let disabled: boolean;
+	export let disabled: boolean = false;
+	export let loading: boolean = false;
+	export let pending: boolean = false;
 
 	let message: string;
 
@@ -21,28 +23,23 @@
 		<button>New Chat</button>
 		<button>+</button>
 	</nav>
-	<ChatMessages {messages} on:message />
+	<ChatMessages {loading} {pending} {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"
 	>
 		<form
 			on:submit|preventDefault={() => {
+				if (loading) return;
 				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"
 		>
 			<div class="w-full flex flex-1 border-none bg-transparent">
-				<ChatInput
-					placeholder="Ask anything"
-					bind:value={message}
-					{disabled}
-					autofocus
-					maxRows={10}
-				/>
+				<ChatInput placeholder="Ask anything" bind:value={message} autofocus maxRows={10} />
 				<button
 					class="p-1 px-[0.7rem] group self-end my-1 h-[2.4rem] rounded-lg hover:bg-gray-100 enabled:dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent disabled:opacity-60 dark:disabled:opacity-40 flex-shrink-0 transition-all mx-1"
-					disabled={!message || disabled}
+					disabled={!message || loading || disabled}
 					type="submit"
 				>
 					<CarbonSendAltFilled

src/lib/components/icons/IconLoading.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	export let classNames: string = '';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="40px"
+	height="25px"
+	viewBox="0 0 60 40"
+	preserveAspectRatio="xMidYMid"
+	class={classNames}
+>
+	{#each Array(3) as _, index}
+		<g transform={`translate(${20 * index + 10} 20)`}>
+			{index}
+			<circle cx="0" cy="0" r="6" fill="currentColor">
+				<animateTransform
+					attributeName="transform"
+					type="scale"
+					begin={`${-0.375 + 0.15 * index}s`}
+					calcMode="spline"
+					keySplines="0.3 0 0.7 1;0.3 0 0.7 1"
+					values="0.5;1;0.5"
+					keyTimes="0;0.5;1"
+					dur="1s"
+					repeatCount="indefinite"
+				/>
+			</circle>
+		</g>
+	{/each}
+</svg>

src/lib/utils/dom.ts

@@ -0,0 +1,7 @@
+export function deepestChild(el: HTMLElement) {
+	let newEl = el;
+	while (newEl.hasChildNodes()) {
+		newEl = newEl.lastElementChild as HTMLElement;
+	}
+	return newEl;
+}

src/routes/+page.svelte

@@ -34,4 +34,4 @@
 	}
 </script>
 
-<ChatWindow on:message={(ev) => createConversation(ev.detail)} disabled={loading} />
+<ChatWindow on:message={(ev) => createConversation(ev.detail)} {loading} />

src/routes/conversation/[id]/+page.svelte

@@ -14,6 +14,7 @@
 	const hf = new HfInference();
 
 	let loading = false;
+	let pending = false;
 
 	async function getTextGenerationStream(inputs: string) {
 		const response = hf.endpoint($page.url.href).textGenerationStream(
@@ -39,6 +40,8 @@
 		);
 
 		for await (const data of response) {
+			pending = false;
+
 			if (!data) break;
 
 			if (!data.token.special) {
@@ -60,6 +63,7 @@
 
 		try {
 			loading = true;
+			pending = true;
 
 			messages = [...messages, { from: 'user', content: message }];
 
@@ -84,4 +88,4 @@
 	});
 </script>
 
-<ChatWindow disabled={loading} {messages} on:message={(message) => writeMessage(message.detail)} />
+<ChatWindow {loading} {pending} {messages} on:message={(message) => writeMessage(message.detail)} />