allow user to regenerate errored ai responses

app/src/lib/components/ChatListItem.svelte

@@ -7,12 +7,15 @@
 	import cs from 'clsx';
 	import { parse } from 'marked';
 	import { Button } from './ui/button';
+	import { createEventDispatcher } from 'svelte';
 
 	export let type: 'user' | 'assistant';
 	export let content: string;
 	export let loading = false;
 	export let createdAt: number | undefined = undefined;
 
+	const dispatch = createEventDispatcher<{ regenerate: void }>();
+
 	$: likelyErrored = loading && (!createdAt || Date.now() - createdAt > TWO_MINUTES_MS);
 </script>
 
@@ -59,6 +62,7 @@
 	<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"
+		on:click={() => dispatch('regenerate')}
 	>
 		<span>Regenerate</span>
 		<RotateCw class="inline w-4" />

app/src/lib/stores/sessionContext.svelte.ts

@@ -75,6 +75,17 @@ export function setSessionContext(sessionId: string) {
 				return session;
 			});
 		},
+		removeChatItem: (chatId: string) => {
+			session$.update((session) => {
+				if (!session) return session;
+
+				const chats = session.chats.filter((i) => i.id !== chatId);
+				session.chats = chats;
+				return session;
+			});
+
+			return session$;
+		},
 		updateChatContent: (chatId: string, chunk: string) => {
 			session$.update((session) => {
 				if (!session) return session;

app/src/routes/chat/[sessionId=sessionId]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import ChatContainer from '@/components/ChatContainer.svelte';
 	import { getSessionContext, type ChatItem } from '@/stores/sessionContext.svelte.js';
 	import ChatListItem from '@/components/ChatListItem.svelte';
@@ -13,7 +13,8 @@
 
 	export let data;
 
-	const { session$, addChatItem, updateChatContent, sessionId$ } = getSessionContext();
+	const { session$, addChatItem, updateChatContent, sessionId$, removeChatItem } =
+		getSessionContext();
 
 	let searchTerm = '';
 	let loading = false;
@@ -27,8 +28,7 @@
 
 	async function handleFirstEntry() {
 		if (!$session$ || $session$.chats.length > 1) return;
-		loading = true;
-		await chatRequest($session$.chats[0]).finally(() => (loading = false));
+		return chatRequest($session$.chats[0]);
 	}
 
 	const scrollChatContent = debounce(500, () => {
@@ -40,8 +40,8 @@
 	});
 
 	async function handleSearch() {
-		if (loading || !searchTerm) return;
-		loading = true;
+		if (!searchTerm) return;
+
 		scrollChatContent();
 
 		const chatItem: ChatItem = {
@@ -53,11 +53,13 @@
 		};
 		addChatItem(chatItem);
 		searchTerm = '';
-
-		return chatRequest(chatItem).finally(() => (loading = false));
+		return chatRequest(chatItem);
 	}
 
 	async function chatRequest(uItem: ChatItem) {
+		if (loading) return;
+		loading = true;
+
 		const aItem = addChatItem({
 			id: uuid(),
 			content: '',
@@ -70,7 +72,9 @@
 			method: 'POST',
 			body: JSON.stringify({ chatItem: uItem, contentCategory: category }),
 			headers: { 'Content-Type': 'application/json' }
-		}).then((res) => handleStreamingResponse(res, aItem.id));
+		})
+			.then((res) => handleStreamingResponse(res, aItem.id))
+			.finally(() => (loading = false));
 	}
 
 	async function handleStreamingResponse(res: Response, id: string) {
@@ -86,6 +90,19 @@
 	$: sessionChats = $session$?.chats || [];
 
 	onMount(() => (mounted = true));
+
+	async function onregenerate() {
+		const chats = $session$?.chats;
+		if (!chats || chats.length === 1) return;
+
+		const curChatItem = chats[chats.length - 1];
+		const prevChatItem = chats[chats.length - 2];
+		removeChatItem(curChatItem.id);
+
+		await tick();
+
+		return chatRequest(prevChatItem);
+	}
 </script>
 
 <ChatContainer bind:searchTerm on:click={handleSearch} on:keypress={handleSearch}>
@@ -104,6 +121,7 @@
 					content={item.content}
 					loading={item.loading}
 					createdAt={item.createdAt}
+					on:regenerate={onregenerate}
 				/>
 
 				{#if finalResponse}