handle error

src/lib/chat/triggerAiCall.ts

@@ -57,7 +57,7 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 	const errorMessages: string[] = [];
 
 	const results = await Promise.all(
-		newNodes.map(async (node, index) => {
+		newNodes.map(async (node) => {
 			const model = node?.data?.selectedModel as string;
 			if (!model) return null;
 			try {
@@ -136,8 +136,8 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 			} catch (error) {
 				const msg = error instanceof Error ? error.message : 'An unknown error occurred';
 				failedNodeIds.add(node.id);
-				failedModelIds.add(model);
-				errorMessages.push(`[${index + 1}] ${msg}`);
+				// failedModelIds.add(model);
+				errorMessages.push(msg);
 				return null;
 			} finally {
 				onLoadingChange(false);
@@ -155,12 +155,12 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 			{
 				...nodeData,
 				messages: newNodes.length === failedNodeIds.size ? messages.slice(0, -1) : messages,
-				prompt: newNodes.length === failedNodeIds.size ? prompt : '',
-				selectedModels: selectedModels.filter((m) => !failedModelIds.has(m))
+				prompt: newNodes.length === failedNodeIds.size ? prompt : ''
+				// selectedModels: selectedModels.filter((m) => !failedModelIds.has(m))
 			} as Record<string, unknown>,
 			{ replace: true }
 		);
-		onError(errorMessages.join('\n'));
+		errorMessages.forEach((msg) => onError(msg));
 	}
 
 	const validResults = results.filter(

src/lib/components/chat/User.svelte

@@ -45,7 +45,7 @@
 
 	let prompt = $state.raw<string>((nodeData.current?.data.prompt as string) ?? '');
 	let loading = $state.raw<boolean>(false);
-	let errorMessage = $state.raw<string>('');
+	let errorMessage = $state.raw<Set<string>>(new Set());
 
 	const randomSuggestions = SUGGESTIONS_PROMPT.sort(() => Math.random() - 0.5).slice(
 		0,
@@ -70,7 +70,7 @@
 			signinModalState.open = true;
 			return;
 		}
-		errorMessage = '';
+		errorMessage.clear();
 		const newNodes: Node[] = [];
 		const newEdges: Edge[] = [];
 		const newMessages = [...messages, { role: 'user', content: prompt }] as ChatMessage[];
@@ -125,7 +125,9 @@
 			updateNodes,
 			updateEdges,
 			onLoadingChange: (v) => (loading = v),
-			onError: (msg) => (errorMessage = msg)
+			onError: (msg) => {
+				errorMessage = new Set([...errorMessage, msg]);
+			}
 		});
 	}
 

src/lib/components/error/Error.svelte

@@ -10,7 +10,7 @@
 	let showAlert = $state(false);
 
 	$effect(() => {
-		if (error) {
+		if (error.size > 0) {
 			showAlert = true;
 			// const timer = setTimeout(() => (showAlert = false), 6_000);
 			// return () => clearTimeout(timer);
@@ -24,14 +24,14 @@
 	<div
 		class="mb-2.5"
 		transition:scale={{ duration: 250, easing: backOut, start: 1.02 }}
-		onoutroend={() => (error = '')}
+		onoutroend={() => (error = new Set())}
 	>
 		<div
 			class="relative inline-flex w-fit items-center gap-1.5 rounded-t-2xl bg-rose-500/10 pt-3 pr-5 pl-4 text-[11px] font-semibold text-rose-600 uppercase"
 		>
 			<button
 				class="flex size-3 -translate-y-[0.5px] cursor-pointer items-center justify-center rounded-full bg-rose-600 text-white hover:bg-rose-600/80"
-				onclick={() => (error = '')}
+				onclick={() => (error = new Set())}
 			>
 				<X class="size-2.5" />
 			</button>
@@ -44,34 +44,36 @@
 		<div
 			class="-translate-y-[3px] rounded-r-2xl rounded-b-xl bg-rose-500/10 px-4 py-3 text-xs whitespace-pre-line text-rose-500"
 		>
-			{error}
-			{#if error.includes('is not supported by any provider')}
-				<a
-					target="_blank"
-					href="https://huggingface.co/settings/inference-providers/settings"
-					class="mt-2 block"
-				>
-					<Button variant="outline" size="3xs">View supported providers</Button>
-				</a>
-			{:else if error.includes('exceeded your monthly included credits') || error.includes('reached the free monthly usage limit') || error.includes('Credit balance is depleted')}
-				<div class="mt-2 flex items-center gap-1">
-					<a target="_blank" href="https://huggingface.co/settings/billing">
-						<Button variant="outline" size="3xs">Upgrade your plan</Button>
+			{#each error as err (err)}
+				{err}
+				{#if err.includes('is not supported by any provider')}
+					<a
+						target="_blank"
+						href="https://huggingface.co/settings/inference-providers/settings"
+						class="mt-2 block"
+					>
+						<Button variant="outline" size="3xs">View supported providers</Button>
 					</a>
-					{#if (authState.user?.orgs?.length ?? 0) > 0}
-						<Button variant="outline" size="3xs" onclick={() => (billingModalState.open = true)}
-							>Update your billing information</Button
-						>
-					{/if}
-				</div>
-			{:else if error.includes('to call Inference Providers on behalf of org')}
-				<Button
-					variant="outline"
-					size="3xs"
-					onclick={() => (billingModalState.open = true)}
-					class="mt-2 block">Change billing option</Button
-				>
-			{/if}
+				{:else if err.includes('exceeded your monthly included credits') || err.includes('reached the free monthly usage limit') || err.includes('Credit balance is depleted')}
+					<div class="mt-2 flex items-center gap-1">
+						<a target="_blank" href="https://huggingface.co/settings/billing">
+							<Button variant="outline" size="3xs">Upgrade your plan</Button>
+						</a>
+						{#if (authState.user?.orgs?.length ?? 0) > 0}
+							<Button variant="outline" size="3xs" onclick={() => (billingModalState.open = true)}
+								>Update your billing information</Button
+							>
+						{/if}
+					</div>
+				{:else if err.includes('to call Inference Providers on behalf of org')}
+					<Button
+						variant="outline"
+						size="3xs"
+						onclick={() => (billingModalState.open = true)}
+						class="mt-2 block">Change billing option</Button
+					>
+				{/if}
+			{/each}
 		</div>
 	</div>
 {/if}