fix

src/lib/components/chat/Assistant.svelte

@@ -17,6 +17,8 @@
 	import Message from './Message.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
 	import { formatUsageCost } from '$lib';
+	import { modelsState } from '$lib/state/models.svelte';
+	import { PROVIDER_SELECTION_MODES } from '$lib/consts';
 
 	let { id }: NodeProps = $props();
 
@@ -25,7 +27,9 @@
 	const { update: updateNodes } = useNodes();
 	const { update: updateEdges } = useEdges();
 
-	let selectedModel = $derived((nodeData.current?.data.selectedModel as ChatModel) ?? null);
+	let selectedModel = $derived<string | null>(
+		(nodeData.current?.data.selectedModel as string) ?? null
+	);
 	let messages = $derived((nodeData.current?.data.messages as ChatMessage[]) ?? []);
 	let loading = $derived((nodeData.current?.data.loading as boolean) ?? false);
 	let usage = $derived((nodeData.current?.data.usage as TokenUsage) ?? null);
@@ -122,11 +126,11 @@
 						class="group relative inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-md border bg-background px-3 text-sm font-normal! text-gray-600 has-[>svg]:px-2.5 dark:border-input dark:bg-input/30 dark:text-gray-400"
 					>
 						<img
-							src={`https://huggingface.co/api/avatars/${selectedModel.owned_by}`}
-							alt={selectedModel.id}
+							src={`https://huggingface.co/api/avatars/${selectedModel?.split('/')[0]}`}
+							alt={selectedModel?.split('/')[0]}
 							class="size-3.5 rounded-full"
 						/>
-						{selectedModel.id.split('/').pop() ?? selectedModel.id}
+						{selectedModel?.split('/').pop() ?? selectedModel}
 					</div>
 				</div>
 			</header>
@@ -141,14 +145,15 @@
 			{/if}
 		</div>
 		{#if usage && !loading && message}
-			{@const provider = selectedModel.provider ?? 'auto'}
+			{@const modelSettings = modelsState.models.find((m) => m.id === selectedModel)}
+			{@const provider = modelSettings?.provider ?? 'auto'}
 			<div class="mt-3 flex items-center justify-between gap-2 border-t border-border pt-3">
 				<p class="text-xs text-muted-foreground">
 					{usage.total_tokens} tokens
-					{#if formatUsageCost(selectedModel.providers.find((p) => p.provider === provider)?.pricing, usage)}
+					{#if formatUsageCost(modelSettings?.providers.find((p) => p.provider === provider)?.pricing, usage)}
 						<span class="mx-0.5">&middot;</span>
 						{formatUsageCost(
-							selectedModel.providers.find((p) => p.provider === provider)?.pricing,
+							modelSettings?.providers.find((p) => p.provider === provider)?.pricing,
 							usage
 						)}
 					{/if}
@@ -160,8 +165,13 @@
 					<span class="inline-flex items-center gap-0.5">
 						Using
 						<span class="inline-flex items-center gap-1 rounded-full bg-muted py-0.5 pr-2 pl-1">
-							{#if provider === 'auto'}
-								<Star class="size-3.5 fill-yellow-500 text-yellow-500" />
+							{#if PROVIDER_SELECTION_MODES.find((m) => m.value === provider)}
+								{@const mode = PROVIDER_SELECTION_MODES.find((m) => m.value === provider)!}
+								<span
+									class="inline-flex size-4 items-center justify-center rounded-full {mode.class}"
+								>
+									<mode.icon class="size-2.5 {mode.iconClass}" />
+								</span>
 							{:else}
 								<img
 									src={`https://huggingface.co/api/avatars/${provider}`}