show what provider has been used

src/lib/chat/triggerAiCall.ts

@@ -89,6 +89,8 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 				}
 				if (!response.body) throw new Error('No response body');
 
+				const inferenceProvider = response.headers.get('x-inference-provider');
+
 				let content = '';
 				let reasoning = '';
 				let usage: TokenUsage | null = null;
@@ -124,7 +126,8 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 								timestamp: end - start,
 								loading: false,
 								messages,
-								usage
+								usage,
+								inferenceProvider
 							} as Record<string, unknown>,
 							{ replace: true }
 						);

src/lib/components/chat/Assistant.svelte

@@ -18,9 +18,8 @@
 	import { Button } from '$lib/components/ui/button';
 	import Message from './Message.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
-	import { formatUsageCost } from '$lib';
+	import { formatUsageCost, getProviderName } from '$lib';
 	import { modelsState } from '$lib/state/models.svelte';
-	import { PROVIDER_SELECTION_MODES } from '$lib/consts';
 	import ListModels from '$lib/components/model/ListModels.svelte';
 
 	let { id }: NodeProps = $props();
@@ -46,6 +45,9 @@
 				} as unknown as ChatMessage)
 			: null
 	);
+	let inferenceProvider = $derived(
+		getProviderName((nodeData.current?.data.inferenceProvider as string) ?? null)
+	);
 	let containerRef: HTMLDivElement | null = $state(null);
 	let articleRef: HTMLElement | null = $state(null);
 	let selectedText = $state<string | null>(null);
@@ -155,7 +157,7 @@
 			{/if}
 			{#if message}
 				<div bind:this={containerRef}>
-					<Message {message} />
+					<Message {message} nodeId={id} />
 				</div>
 			{/if}
 		</div>
@@ -180,21 +182,12 @@
 					<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_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}`}
-									alt={provider}
-									class="size-4 rounded-full"
-								/>
-							{/if}
-							{provider}
+							<img
+								src={`https://huggingface.co/api/avatars/${inferenceProvider}`}
+								alt={inferenceProvider}
+								class="size-4 rounded-full"
+							/>
+							{inferenceProvider}
 						</span>
 						provider
 					</span>

src/lib/index.ts

@@ -28,7 +28,8 @@ export function formatUsageCost(pricing: ChatModelProvider['pricing'], usage: To
 
 export function getProviderName(provider: string) {
 	const providersMap = {
-		together: 'togethercomputer'
+		together: 'togethercomputer',
+		sambanova: 'sambanovasystems'
 	};
 	return providersMap[provider as keyof typeof providersMap] ?? provider;
 }

src/routes/api/+server.ts

@@ -21,31 +21,43 @@ export async function POST({ request }: RequestEvent) {
 
 	const client = new InferenceClient(token);
 
-	const stream = client.chatCompletionStream(
-		{
-			model: model + (provider !== 'auto' ? `:${provider}` : ''),
-			...(options ?? {}),
-			messages: [
-				{
-					role: 'system',
-					content:
-						"You are a helpful assistant. You are very helpful and friendly. Use markdown to format your responses, but don't include array start and end markers."
-				},
-				...(messages ?? [])
-			]
-		},
-		{
-			...(billingTo === 'personal' ? {} : { billTo: billingTo })
-		}
-	);
+	let resolvedProvider: string | null = null;
+	const interceptFetch: typeof fetch = async (...args) => {
+		const response = await fetch(...args);
+		resolvedProvider = response.headers.get('x-inference-provider');
+		return response;
+	};
+
+	try {
+		const stream = client.chatCompletionStream(
+			{
+				model: model + (provider !== 'auto' ? `:${provider}` : ''),
+				...(options ?? {}),
+				messages: [
+					{
+						role: 'system',
+						content:
+							"You are a helpful assistant. You are very helpful and friendly. Use markdown to format your responses, but don't include array start and end markers."
+					},
+					...(messages ?? [])
+				]
+			},
+			{
+				...(billingTo === 'personal' ? {} : { billTo: billingTo }),
+				fetch: interceptFetch
+			}
+		);
 
-	const readable = new ReadableStream({
-		async start(controller) {
-			const encoder = new TextEncoder();
-			let lastUsage: Record<string, unknown> | null = null;
-			let reasoning: string | null = '';
-			try {
-				for await (const chunk of stream) {
+		const firstResult = await stream.next();
+
+		const readable = new ReadableStream({
+			async start(controller) {
+				const encoder = new TextEncoder();
+				let lastUsage: Record<string, unknown> | null = null;
+				let reasoning: string | null = '';
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				const processChunk = (chunk: any) => {
 					const content = chunk.choices?.[0]?.delta?.content ?? '';
 					const reasoningContent = chunk.choices?.[0]?.delta?.reasoning_content ?? '';
 					if (chunk.usage) {
@@ -70,24 +82,40 @@ export async function POST({ request }: RequestEvent) {
 						}
 						controller.enqueue(encoder.encode(content));
 					}
+				};
+
+				try {
+					if (!firstResult.done && firstResult.value) {
+						processChunk(firstResult.value);
+					}
+					for await (const chunk of stream) {
+						processChunk(chunk);
+					}
+					if (lastUsage) {
+						controller.enqueue(encoder.encode(`\n\n__USAGE__${JSON.stringify(lastUsage)}`));
+					}
+				} catch (err) {
+					const message = err instanceof Error ? err.message : 'An unknown error occurred';
+					controller.enqueue(encoder.encode(`\n\n__ERROR__${message}`));
+				} finally {
+					controller.close();
 				}
-				if (lastUsage) {
-					controller.enqueue(encoder.encode(`\n\n__USAGE__${JSON.stringify(lastUsage)}`));
-				}
-			} catch (err) {
-				const message = err instanceof Error ? err.message : 'An unknown error occurred';
-				controller.enqueue(encoder.encode(`\n\n__ERROR__${message}`));
-			} finally {
-				controller.close();
 			}
-		}
-	});
+		});
 
-	return new Response(readable, {
-		headers: {
+		const responseHeaders: Record<string, string> = {
 			'Content-Type': 'text/plain; charset=utf-8',
 			'Cache-Control': 'no-cache',
 			Connection: 'keep-alive'
+		};
+		if (resolvedProvider) {
+			responseHeaders['x-inference-provider'] = resolvedProvider;
 		}
-	});
+		return new Response(readable, { headers: responseHeaders });
+	} catch (error) {
+		return json(
+			{ error: error instanceof Error ? error.message : 'An unknown error occurred' },
+			{ status: 500 }
+		);
+	}
 }