wip new modal model settings

src/lib/components/chat/User.svelte

@@ -198,7 +198,7 @@
 							<img
 								src={`https://huggingface.co/api/avatars/${model.owned_by}`}
 								alt={model.id}
-								class="size-3.5 rounded-full"
+								class="size-3.5 rounded"
 							/>
 							{model.id.split('/').pop() ?? model.id}
 							{#if !lastMessage || model.isError || selectedModels.length > MAX_MODELS_PER_NODE}

src/lib/components/model/SettingsModel.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { DollarSign, Star, X, Zap } from '@lucide/svelte';
+	import { ExternalLink, Plus, Save, X } from '@lucide/svelte';
 
-	import * as Popover from '$lib/components/ui/popover/index.js';
 	import type { ChatModel } from '$lib/helpers/types';
 	import { formatPricingPerToken } from '$lib/index.js';
 	import { Button } from '$lib/components/ui/button';
 	import { Slider } from '$lib/components/ui/slider';
 	import Input from '$lib/components/ui/input/input.svelte';
 	import * as Select from '$lib/components/ui/select/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { PROVIDER_SELECTION_MODES } from '$lib/consts';
+	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import Switch from '$lib/components/ui/switch/switch.svelte';
+	import { fade } from 'svelte/transition';
 
 	let {
 		model,
@@ -37,159 +41,241 @@
 	);
 </script>
 
-<Popover.Root
+<Dialog.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">
-			<header class="px-5 pt-4">
-				<h4 class="text-sm leading-none font-medium text-muted-foreground">Generation Settings</h4>
-			</header>
-			<main class="grid gap-5 px-5 py-0">
-				<div class="space-y-1">
-					<div class="flex items-center justify-between">
-						<h4 class="text-sm leading-none font-medium">Temperature</h4>
-						<div class="flex items-center gap-1">
-							{#if temperature === undefined}
-								<Button variant="outline-blue" size="2xs" onclick={() => (temperature = 0.5)}
-									>Set</Button
-								>
+	<Dialog.Trigger>{@render children?.()}</Dialog.Trigger>
+	<Dialog.Content class="max-w-md! gap-0! p-0!">
+		<Dialog.Header class="mb-0 gap-1! rounded-none border-b p-5">
+			<Dialog.Title>Model Settings</Dialog.Title>
+			<Dialog.Description>Manage your model settings.</Dialog.Description>
+		</Dialog.Header>
+		{#if model}
+			<div class="mb-4 flex items-center justify-between gap-3 bg-accent p-3">
+				<div class="flex items-center justify-start gap-3">
+					<img
+						src={`https://huggingface.co/api/avatars/${model.owned_by}`}
+						alt={model.owned_by}
+						class="size-8 rounded-md"
+					/>
+					<div>
+						<p class="text-sm font-medium">{model.id.split('/').pop() ?? model.id}</p>
+						<p class="text-xs text-muted-foreground">by {model.owned_by}</p>
+					</div>
+				</div>
+				<a href={`https://huggingface.co/${model.id}`} target="_blank">
+					<Button variant="outline" size="icon-xs">
+						<ExternalLink class="size-4" />
+					</Button>
+				</a>
+			</div>
+		{/if}
+		<main class="mt-0 space-y-5 px-3 pb-5">
+			<div class="rounded-lg border border-border p-3.5">
+				<h4 class="text-sm leading-none font-medium">Inference provider</h4>
+				<p class="mt-0.5 text-xs text-muted-foreground">
+					Choose which Inference Provider to use with this model
+				</p>
+				<Select.Root type="single" bind:value={provider}>
+					<Select.Trigger class="mt-3 flex w-full items-center justify-between gap-2 capitalize">
+						<div class="flex items-center gap-2">
+							{#if PROVIDER_SELECTION_MODES.find((m) => m.value === provider)}
+								{@const mode = PROVIDER_SELECTION_MODES.find((m) => m.value === provider)!}
+								<div class="flex size-5 items-center justify-center rounded {mode.class}">
+									<mode.icon class="size-3 {mode.iconClass}" />
+								</div>
+								<p>
+									{mode.label}
+									{#if mode.description}
+										<span class="text-xs text-muted-foreground lowercase italic"
+											>({mode.description})</span
+										>
+									{/if}
+								</p>
 							{:else}
-								<Input
-									type="number"
-									min={0}
-									max={2}
-									step={0.1}
-									bind:value={temperature}
-									class="h-7! w-24!"
+								<img
+									src={`https://huggingface.co/api/avatars/${provider}`}
+									alt={provider}
+									class="size-4 rounded"
 								/>
-								<Button variant="outline" size="icon-xs" onclick={() => (temperature = undefined)}>
-									<X class="size-3.5" />
-								</Button>
+								{provider}
 							{/if}
 						</div>
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Group>
+							<Select.GroupHeading>Selection mode</Select.GroupHeading>
+							{#each PROVIDER_SELECTION_MODES as mode}
+								<Select.Item value={mode.value}>
+									<div class="flex size-5 items-center justify-center rounded {mode.class}">
+										<mode.icon class="size-3 {mode.iconClass}" />
+									</div>
+									<p>
+										{mode.label}
+										{#if mode.description}
+											<span class="text-xs text-muted-foreground lowercase italic"
+												>({mode.description})</span
+											>
+										{/if}
+									</p>
+								</Select.Item>
+							{/each}
+						</Select.Group>
+						<Select.Separator />
+						<Select.Group>
+							<Select.GroupHeading>Specific provider</Select.GroupHeading>
+							{#each model.providers as provider}
+								<Select.Item value={provider.provider}>
+									<div class="flex items-center gap-2 capitalize">
+										<img
+											src={`https://huggingface.co/api/avatars/${provider.provider}`}
+											alt={provider.provider}
+											class="size-4 rounded"
+										/>
+										{provider.provider}
+									</div>
+									{#if formatPricingPerToken(provider.pricing)}
+										<span class="text-xs text-muted-foreground">
+											{formatPricingPerToken(provider.pricing)}
+										</span>
+									{/if}
+								</Select.Item>
+							{/each}
+						</Select.Group>
+					</Select.Content>
+				</Select.Root>
+			</div>
+			<div class="grid gap-3 rounded-lg border border-border p-3.5">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between gap-2">
+						<div>
+							<h4 class="text-sm leading-none font-medium">Temperature</h4>
+							<p class="mt-0.5 text-xs text-muted-foreground">
+								Tunes the creativity vs. predictability trade-off.
+							</p>
+						</div>
+						<Switch
+							checked={temperature !== undefined}
+							onCheckedChange={(value) => {
+								if (value) {
+									temperature = 0.5;
+								} else {
+									temperature = undefined;
+								}
+							}}
+						/>
 					</div>
 					{#if temperature !== undefined}
-						<Slider
-							type="single"
-							bind:value={temperature}
-							min={0}
-							max={2}
-							step={0.01}
-							class="mt-2"
-						/>
+						<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
+							<Slider
+								type="single"
+								bind:value={temperature}
+								min={0}
+								max={2}
+								step={0.01}
+								class="mt-2"
+							/>
+							<Input
+								type="number"
+								min={0}
+								max={2}
+								step={0.1}
+								bind:value={temperature}
+								class="h-7! w-24!"
+							/>
+						</div>
 					{/if}
 				</div>
-
-				<div class="space-y-1">
-					<div class="flex items-center justify-between">
-						<h4 class="text-sm leading-none font-medium">Max Tokens</h4>
-						<div class="flex items-center gap-1">
-							{#if max_tokens === undefined}
-								<Button
-									variant="outline-blue"
-									size="2xs"
-									onclick={() => (max_tokens = (maxContentLength ?? 32_000) / 2)}>Set</Button
-								>
-							{:else}
-								<Input
-									type="number"
-									min={0}
-									max={maxContentLength}
-									step={256}
-									placeholder="—"
-									class="h-7! w-24!"
-									bind:value={max_tokens}
-								/>
-								<Button variant="outline" size="icon-xs" onclick={() => (max_tokens = undefined)}>
-									<X class="size-3.5" />
-								</Button>
-							{/if}
+				<Separator />
+				<div class="space-y-2">
+					<div class="flex items-center justify-between gap-2">
+						<div>
+							<h4 class="text-sm leading-none font-medium">Max Tokens</h4>
+							<p class="mt-0.5 text-xs text-muted-foreground">
+								Sets the absolute limit for generated content length.
+							</p>
 						</div>
+						<Switch
+							checked={max_tokens !== undefined}
+							onCheckedChange={(value) => {
+								if (value) {
+									max_tokens = (maxContentLength ?? 32_000) / 2;
+								} else {
+									max_tokens = undefined;
+								}
+							}}
+						/>
 					</div>
 					{#if max_tokens !== undefined}
-						<Slider
-							type="single"
-							bind:value={max_tokens}
-							min={0}
-							max={maxContentLength}
-							step={256}
-							class="mt-2"
-						/>
+						<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
+							<Slider
+								type="single"
+								bind:value={max_tokens}
+								min={0}
+								max={maxContentLength ?? 32_000}
+								step={256}
+								class="mt-2"
+							/>
+							<Input
+								type="number"
+								min={0}
+								max={maxContentLength ?? 32_000}
+								step={256}
+								bind:value={max_tokens}
+								class="h-7! w-24!"
+							/>
+						</div>
 					{/if}
 				</div>
-
-				<div class="space-y-1">
-					<div class="flex items-center justify-between">
-						<h4 class="text-sm leading-none font-medium">Top-P</h4>
-						<div class="flex items-center gap-1">
-							{#if top_p === undefined}
-								<Button variant="outline-blue" size="2xs" onclick={() => (top_p = 0.7)}>Set</Button>
-							{:else}
-								<Input
-									type="number"
-									min={0}
-									max={1}
-									step={0.01}
-									bind:value={top_p}
-									class="h-7! w-24!"
-								/>
-								<Button variant="outline" size="icon-xs" onclick={() => (top_p = undefined)}>
-									<X class="size-3.5" />
-								</Button>
-							{/if}
+				<Separator />
+				<div class="space-y-2">
+					<div class="flex items-center justify-between gap-2">
+						<div>
+							<h4 class="text-sm leading-none font-medium">Top-P</h4>
+							<p class="mt-0.5 text-xs text-muted-foreground">
+								Dynamically filters token selection by probability mass.
+							</p>
 						</div>
+						<Switch
+							checked={top_p !== undefined}
+							onCheckedChange={(value) => {
+								if (value) {
+									top_p = 0.5;
+								} else {
+									top_p = undefined;
+								}
+							}}
+						/>
 					</div>
 					{#if top_p !== undefined}
-						<Slider type="single" bind:value={top_p} min={0} max={1} step={0.01} class="mt-2" />
+						<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
+							<Slider type="single" bind:value={top_p} min={0} max={2} step={0.01} class="mt-2" />
+							<Input
+								type="number"
+								min={0}
+								max={2}
+								step={0.1}
+								bind:value={top_p}
+								class="h-7! w-24!"
+							/>
+						</div>
 					{/if}
 				</div>
-			</main>
-			<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 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">
-							{#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}
-						</div>
-					</Select.Trigger>
-					<Select.Content>
-						<Select.Item value="auto"
-							><Star class="size-4 fill-yellow-500 text-yellow-500" /> Auto</Select.Item
-						>
-						{#each model.providers as provider}
-							<Select.Item value={provider.provider}>
-								<div class="flex items-center gap-2">
-									<img
-										src={`https://huggingface.co/api/avatars/${provider.provider}`}
-										alt={provider.provider}
-										class="size-4"
-									/>
-									{provider.provider}
-								</div>
-								{#if formatPricingPerToken(provider.pricing)}
-									<span class="text-xs text-muted-foreground"
-										>{formatPricingPerToken(provider.pricing)}</span
-									>
-								{/if}
-							</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</main>
-		</div>
-	</Popover.Content>
-</Popover.Root>
+			</div>
+			<!-- <header class="border-t border-border">
+					<h4 class="text-sm leading-none font-medium text-muted-foreground">Provider</h4>
+				</header> -->
+			<!-- <main class="w-full">
+					
+				</main> -->
+			<div class="flex items-center justify-end gap-3 px-3">
+				<Button variant="outline">Reset</Button>
+				<Button class="flex-1">
+					<Save />
+					Save settings
+				</Button>
+			</div>
+		</main>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/components/ui/button/button.svelte

@@ -28,8 +28,8 @@
 				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
 				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
 				xs: 'h-7 gap-1 rounded-md px-2.5 has-[>svg]:px-2 text-xs!',
-				'2xs': 'h-6 gap-1 rounded-md px-2.5 has-[>svg]:px-2 text-xs!',
-				'3xs': 'h-5 gap-1 rounded-md px-2.5 has-[>svg]:px-2 text-[10px]!',
+				'2xs': 'h-6 gap-1 rounded-md px-2 has-[>svg]:px-2 text-xs!',
+				'3xs': 'h-5 gap-1 rounded-md px-2 has-[>svg]:px-2 text-[10px]!',
 				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
 				icon: 'size-9',
 				'icon-sm': 'size-8',

src/lib/components/ui/dialog/dialog-content.svelte

@@ -35,7 +35,7 @@
 		{@render children?.()}
 		{#if showCloseButton}
 			<DialogPrimitive.Close
-				class="absolute end-5 top-5 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
+				class="absolute end-5 top-5 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
 			>
 				<XIcon />
 				<span class="sr-only">Close</span>

src/lib/components/ui/select/select-trigger.svelte

@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		"flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}

src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};

src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		'peer inline-flex h-[1.15rem] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			'pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-white dark:data-[state=unchecked]:bg-foreground'
+		)}
+	/>
+</SwitchPrimitive.Root>

src/lib/consts.ts

@@ -1,3 +1,5 @@
+import { CircleDollarSign, CircleGauge, WandSparkles } from '@lucide/svelte';
+
 export const SUGGESTIONS_PROMPT = [
 	'Roast my code skills',
 	'Why do LLMs hallucinate?',
@@ -30,3 +32,30 @@ export const SUGGESTIONS_PROMPT = [
 	'Teach me a fun fact',
 	'What came first: egg or chicken?'
 ];
+
+export const PROVIDER_SELECTION_MODES = [
+	{
+		value: 'auto',
+		label: 'Auto',
+		description: 'your HF preference order',
+		class: 'bg-yellow-500/10',
+		iconClass: 'text-yellow-500',
+		icon: WandSparkles
+	},
+	{
+		value: 'fastest',
+		label: 'Fastest',
+		description: 'highest throughput',
+		class: 'bg-emerald-500/10',
+		iconClass: 'text-emerald-500',
+		icon: CircleGauge
+	},
+	{
+		value: 'cheapest',
+		label: 'Cheapest',
+		description: 'lowest cost',
+		class: 'bg-blue-500/10',
+		iconClass: 'text-blue-500',
+		icon: CircleDollarSign
+	}
+];

src/lib/state/models.svelte.ts

@@ -33,6 +33,7 @@ export async function fetchModels() {
 		if (!response.ok) throw new Error(response.statusText);
 
 		const { data: models } = (await response.json()) as { data: ChatModel[] };
+		console.log('models', models);
 		modelsState.models = models;
 	} catch (e) {
 		modelsState.error = e instanceof Error ? e.message : 'Failed to fetch models';