set provider in response

src/lib/components/chat/Assistant.svelte

@@ -1,20 +1,9 @@
 <script lang="ts">
-	import {
-		Handle,
-		useEdges,
-		useNodes,
-		useNodesData,
-		Position,
-		type NodeProps,
-		type Edge,
-		type Node,
-		useSvelteFlow
-	} from '@xyflow/svelte';
+	import { Handle, useNodesData, Position, type NodeProps } from '@xyflow/svelte';
+	import { Star } from '@lucide/svelte';
 
 	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
 	import { Button } from '$lib/components/ui/button';
-	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
-	import { onMount } from 'svelte';
 	import Message from './Message.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
 
@@ -23,7 +12,7 @@
 	// svelte-ignore state_referenced_locally
 	const nodeData = useNodesData(id);
 
-	let selectedModels = $derived((nodeData.current?.data.selectedModels as ChatModel[]) ?? []);
+	let selectedModel = $derived((nodeData.current?.data.selectedModel as ChatModel) ?? null);
 	let loading = $derived((nodeData.current?.data.loading as boolean) ?? false);
 	let message = $derived(
 		nodeData.current?.data.content
@@ -40,12 +29,14 @@
 	<div class="nodrag">
 		<header class="mb-3 flex items-center justify-between">
 			<div class="flex flex-wrap items-center gap-1">
-				{#each selectedModels as model}
-					<Button variant="outline" size="sm" class="group relative font-normal! shadow-none!">
-						<img src={model.avatarUrl} alt={model.modelName} class="size-3.5 rounded-full" />
-						{model.modelName}
-					</Button>
-				{/each}
+				<Button variant="outline" size="sm" class="group relative font-normal! shadow-none!">
+					<img
+						src={selectedModel.avatarUrl}
+						alt={selectedModel.modelName}
+						class="size-3.5 rounded-full"
+					/>
+					{selectedModel.modelName}
+				</Button>
 			</div>
 		</header>
 
@@ -56,7 +47,7 @@
 			</div>
 		{/if}
 		{#if message}
-			<Message {message} />
+			<Message {message} provider={selectedModel.provider} />
 		{/if}
 	</div>
 </article>

src/lib/components/chat/Message.svelte

@@ -11,8 +11,9 @@
 	import ListItem from './markdown/ListItem.svelte';
 	import Link from './markdown/Link.svelte';
 	import Hr from './markdown/Hr.svelte';
+	import { Star } from '@lucide/svelte';
 
-	let { message }: { message: ChatMessage } = $props();
+	let { message, provider }: { message: ChatMessage; provider?: string } = $props();
 
 	const renderers = {
 		paragraph: Paragraph,
@@ -35,9 +36,22 @@
 	{:else}
 		<SvelteMarkdown source={message.content} renderers={renderers as any} />
 		{#if message.timestamp}
-			<p class="text-xs text-muted-foreground/70">
-				- Generated in
-				{message.timestamp / 1000}s
+			<p class="flex items-center gap-1 text-xs text-muted-foreground/70">
+				Generated in
+				{message.timestamp / 1000}s using
+				<span class="flex items-center gap-1 rounded bg-muted py-0.5 pr-1 pl-0.5">
+					{#if provider === 'auto'}
+						<Star class="size-4 fill-yellow-500 text-yellow-500" />
+					{:else}
+						<img
+							src={`https://huggingface.co/api/avatars/${provider}`}
+							alt={provider}
+							class="size-4"
+						/>
+					{/if}
+					{provider}
+				</span>
+				provider
 			</p>
 		{/if}
 	{/if}

src/lib/components/chat/User.svelte

@@ -80,7 +80,7 @@
 				},
 				data: {
 					role: 'assistant',
-					selectedModels: [m],
+					selectedModel: m,
 					content: '',
 					loading: true
 				}
@@ -106,10 +106,7 @@
 
 	async function handleTriggerAiCall(newNodes: Node[]) {
 		newNodes.forEach(async (node) => {
-			const model =
-				(node?.data?.selectedModels as ChatModel[])?.length > 0
-					? (node?.data?.selectedModels as ChatModel[])[0]
-					: null;
+			const model = node?.data?.selectedModel as ChatModel;
 			if (!model) return;
 			try {
 				const start = Date.now();
@@ -148,7 +145,7 @@
 							data: {
 								role: 'user',
 								messages: [...messages, { role: 'assistant', content }],
-								selectedModels: [model]
+								selectedModel: model
 							}
 						};
 						const newEdge: Edge = {

src/lib/components/model/SettingsModel.svelte

@@ -45,7 +45,10 @@
 	});
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root
+	bind:open
+	onOpenChange={(value) => !value && onSave({ ...model, temperature, max_tokens, top_p, provider })}
+>
 	<Popover.Trigger>{@render children?.()}</Popover.Trigger>
 	<Popover.Content class="w-80 rounded-2xl p-0">
 		<div class="grid gap-4">
@@ -149,7 +152,7 @@
 			<header class="border-t border-border px-5 pt-4">
 				<h4 class="text-sm leading-none font-medium text-muted-foreground">Provider</h4>
 			</header>
-			<main class="w-full px-5">
+			<main class="w-full px-5 pb-5">
 				<Select.Root type="single" bind:value={provider}>
 					<Select.Trigger class="flex w-full items-center justify-between gap-2 capitalize">
 						<div class="flex items-center gap-2">
@@ -184,16 +187,6 @@
 					</Select.Content>
 				</Select.Root>
 			</main>
-			<footer class="flex justify-end border-t border-border px-5 pt-3 pb-3">
-				<Button
-					variant="default"
-					size="xs"
-					onclick={() => {
-						onSave({ ...model, temperature, max_tokens, top_p, provider });
-						open = false;
-					}}>Save Settings</Button
-				>
-			</footer>
 		</div>
 	</Popover.Content>
 </Popover.Root>