add createdAt property to chat items and implement error handling for…

… loading state
nwaughachukwuma · Dec 5, 2024 · c7d7710 · c7d7710
1 parent 5f2db7a
commit c7d7710
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 7 deletions.
diff --git a/app/src/lib/components/ChatListItem.svelte b/app/src/lib/components/ChatListItem.svelte
@@ -1,11 +1,19 @@
+<script context="module">
+	const TWO_MINUTES_MS = 120000;
+</script>
+
 <script lang="ts">
-	import { UserIcon, BotIcon } from 'lucide-svelte';
+	import { UserIcon, BotIcon, RotateCw } from 'lucide-svelte';
 	import cs from 'clsx';
 	import { parse } from 'marked';
+	import { Button } from './ui/button';
 
 	export let type: 'user' | 'assistant';
 	export let content: string;
 	export let loading = false;
+	export let createdAt: number | undefined = undefined;
+
+	$: likelyErrored = loading && (!createdAt || Date.now() - createdAt > TWO_MINUTES_MS);
 </script>
 
 <div
@@ -28,7 +36,12 @@
 	</div>
 
 	<div class="max-w-full justify-center break-words text-gray-200 flex flex-col text-base">
-		{#if loading}
+		{#if likelyErrored}
+			<span>
+				Failed to generate response.
+				<span class="text-red-300">Likely errored</span>
+			</span>
+		{:else if loading}
 			<slot name="loading">
 				<span class="animate-pulse">Generating response...</span>
 			</slot>
@@ -41,3 +54,13 @@
 		{/if}
 	</div>
 </div>
+
+{#if likelyErrored}
+	<Button
+		variant="ghost"
+		class="w-fit bg-gray-800 flex gap-x-2 text-gray-400 items-center hover:bg-gray-700 transition-all px-4 py-0.5"
+	>
+		<span>Regenerate</span>
+		<RotateCw class="inline w-4" />
+	</Button>
+{/if}
diff --git a/app/src/lib/components/ExampleCard.svelte b/app/src/lib/components/ExampleCard.svelte
@@ -12,7 +12,7 @@
 
 	async function handleClick() {
 		startSession(category);
-		addChatItem({ id: uuid(), content, role: 'user', loading: false });
+		addChatItem({ id: uuid(), content, role: 'user', loading: false, createdAt: Date.now() });
 		return goto(href, { invalidateAll: true, replaceState: true });
 	}
 </script>

diff --git a/app/src/lib/stores/sessionContext.svelte.ts b/app/src/lib/stores/sessionContext.svelte.ts
@@ -15,6 +15,7 @@ export type ChatItem = {
 	content: string;
 	role: 'user' | 'assistant';
 	loading?: boolean;
+	createdAt?: number;
 };
 
 export type Session = {

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
@@ -25,7 +25,7 @@
 		startSession(category);
 		
 		const content = `${selectContent}\nCategory: ${category} `;
-		addChatItem({ id: uuid(), content, role: 'user', loading: false });
+		addChatItem({ id: uuid(), content, role: 'user', loading: false, createdAt: Date.now() });
 
 		const href = `/chat/${sessionId}?category=${category}&chat`;
 		return goto(href, { invalidateAll: true, replaceState: true });

diff --git a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
@@ -48,7 +48,8 @@
 			id: uuid(),
 			content: searchTerm,
 			role: 'user',
-			loading: false
+			loading: false,
+			createdAt: Date.now()
 		};
 		addChatItem(chatItem);
 		searchTerm = '';
@@ -57,7 +58,13 @@
 	}
 
 	async function chatRequest(uItem: ChatItem) {
-		const aItem = addChatItem({ id: uuid(), content: '', role: 'assistant', loading: true });
+		const aItem = addChatItem({
+			id: uuid(),
+			content: '',
+			role: 'assistant',
+			loading: true,
+			createdAt: Date.now()
+		});
 
 		return fetch(`${env.API_BASE_URL}/chat/${sessionId}`, {
 			method: 'POST',
@@ -92,7 +99,12 @@
 		<div class="flex flex-col gap-y-3 h-full">
 			{#each sessionChats as item (item.id)}
 				{@const finalResponse = isfinalResponse(item)}
-				<ChatListItem type={item.role} content={item.content} loading={item.loading} />
+				<ChatListItem
+					type={item.role}
+					content={item.content}
+					loading={item.loading}
+					createdAt={item.createdAt}
+				/>
 
 				{#if finalResponse}
 					<ChatListActionItems