webui: introduce OpenAI-compatible model selector in JSON payload (#16562)

* webui: introduce OpenAI-compatible model selector in JSON payload * webui: restore OpenAI-Compatible model source of truth and unify metadata capture This change re-establishes a single, reliable source of truth for the active model: fully aligned with the OpenAI-Compat API behavior It introduces a unified metadata flow that captures the model field from both streaming and non-streaming responses, wiring a new onModel callback through ChatService The model name is now resolved directly from the API payload rather than relying on server /props or UI assumptions ChatStore records and persists the resolved model for each assistant message during streaming, ensuring consistency across the UI and database Type definitions for API and settings were also extended to include model metadata and the onModel callback, completing the alignment with OpenAI-Compat semantics * webui: address review feedback from allozaur * webui: move model selector into ChatForm (idea by @allozaur) * webui: make model selector more subtle and integrated into ChatForm * webui: replaced the Flowbite selector with a native Svelte dropdown * webui: add developer setting to toggle the chat model selector * webui: address review feedback from allozaur Normalized streamed model names during chat updates by trimming input and removing directory components before saving or persisting them, so the conversation UI shows only the filename Forced model names within the chat form selector dropdown to render as a single-line, truncated entry with a tooltip revealing the full name * webui: toggle displayed model source for legacy vs OpenAI-Compat modes When the selector is disabled, it falls back to the active server model name from /props When the model selector is enabled, the displayed model comes from the message metadata (the one explicitly selected and sent in the request) * Update tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions.svelte Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * Update tools/server/webui/src/lib/constants/localstorage-keys.ts Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * Update tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormModelSelector.svelte Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * Update tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * Update tools/server/webui/src/lib/services/chat.ts Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * Update tools/server/webui/src/lib/services/chat.ts Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * webui: refactor model selector and persistence helpers - Replace inline portal and event listeners with proper Svelte bindings - Introduce 'persisted' store helper for localStorage sync without runes - Extract 'normalizeModelName' utils + Vitest coverage - Simplify ChatFormModelSelector structure and cleanup logic Replaced the persisted store helper's use of '$state/$effect' runes with a plain TS implementation to prevent orphaned effect runtime errors outside component context Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * webui: document normalizeModelName usage with inline examples * Update tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormModelSelector.svelte Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * Update tools/server/webui/src/lib/stores/models.svelte.ts Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * Update tools/server/webui/src/lib/stores/models.svelte.ts Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * webui: extract ModelOption type into dedicated models.d.ts Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * webui: refine ChatMessageAssistant displayedModel source logic * webui: stabilize dropdown, simplify model extraction, and init assistant model field * chore: update webui static build * Update tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * chore: npm format, update webui static build * webui: align sidebar trigger position, remove z-index glitch * chore: update webui build output --------- Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com>
2025-10-22 16:58:23 +02:00
parent 19a5a3edfd
commit 9b9201f65a
22 changed files with 957 additions and 69 deletions
@@ -3,6 +3,8 @@
 	import { Button } from '$lib/components/ui/button';
 	import ChatFormActionFileAttachments from './ChatFormActionFileAttachments.svelte';
 	import ChatFormActionRecord from './ChatFormActionRecord.svelte';
+	import ChatFormModelSelector from './ChatFormModelSelector.svelte';
+	import { config } from '$lib/stores/settings.svelte';
 	import type { FileTypeCategory } from '$lib/enums/files';

 	interface Props {
@@ -26,32 +28,36 @@
 		onMicClick,
 		onStop
 	}: Props = $props();
+
+	let currentConfig = $derived(config());
 </script>

-<div class="flex items-center justify-between gap-1 {className}">
-	<ChatFormActionFileAttachments {disabled} {onFileUpload} />
+<div class="flex w-full items-center gap-2 {className}">
+	<ChatFormActionFileAttachments class="mr-auto" {disabled} {onFileUpload} />

-	<div class="flex gap-2">
-		{#if isLoading}
-			<Button
-				type="button"
-				onclick={onStop}
-				class="h-8 w-8 bg-transparent p-0 hover:bg-destructive/20"
-			>
-				<span class="sr-only">Stop</span>
-				<Square class="h-8 w-8 fill-destructive stroke-destructive" />
-			</Button>
-		{:else}
-			<ChatFormActionRecord {disabled} {isLoading} {isRecording} {onMicClick} />
+	{#if currentConfig.modelSelectorEnabled}
+		<ChatFormModelSelector class="shrink-0" />
+	{/if}

-			<Button
-				type="submit"
-				disabled={!canSend || disabled || isLoading}
-				class="h-8 w-8 rounded-full p-0"
-			>
-				<span class="sr-only">Send</span>
-				<ArrowUp class="h-12 w-12" />
-			</Button>
-		{/if}
-	</div>
+	{#if isLoading}
+		<Button
+			type="button"
+			onclick={onStop}
+			class="h-8 w-8 bg-transparent p-0 hover:bg-destructive/20"
+		>
+			<span class="sr-only">Stop</span>
+			<Square class="h-8 w-8 fill-destructive stroke-destructive" />
+		</Button>
+	{:else}
+		<ChatFormActionRecord {disabled} {isLoading} {isRecording} {onMicClick} />
+
+		<Button
+			type="submit"
+			disabled={!canSend || disabled || isLoading}
+			class="h-8 w-8 rounded-full p-0"
+		>
+			<span class="sr-only">Send</span>
+			<ArrowUp class="h-12 w-12" />
+		</Button>
+	{/if}
 </div>
@@ -0,0 +1,358 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { ChevronDown, Loader2 } from '@lucide/svelte';
+	import { cn } from '$lib/components/ui/utils';
+	import { portalToBody } from '$lib/utils/portal-to-body';
+	import {
+		fetchModels,
+		modelOptions,
+		modelsError,
+		modelsLoading,
+		modelsUpdating,
+		selectModel,
+		selectedModelId
+	} from '$lib/stores/models.svelte';
+	import type { ModelOption } from '$lib/types/models';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+
+	let options = $derived(modelOptions());
+	let loading = $derived(modelsLoading());
+	let updating = $derived(modelsUpdating());
+	let error = $derived(modelsError());
+	let activeId = $derived(selectedModelId());
+
+	let isMounted = $state(false);
+	let isOpen = $state(false);
+	let container: HTMLDivElement | null = null;
+	let triggerButton = $state<HTMLButtonElement | null>(null);
+	let menuRef = $state<HTMLDivElement | null>(null);
+	let menuPosition = $state<{
+		top: number;
+		left: number;
+		width: number;
+		placement: 'top' | 'bottom';
+		maxHeight: number;
+	} | null>(null);
+	let lockedWidth: number | null = null;
+
+	onMount(async () => {
+		try {
+			await fetchModels();
+		} catch (error) {
+			console.error('Unable to load models:', error);
+		} finally {
+			isMounted = true;
+		}
+	});
+
+	function handlePointerDown(event: PointerEvent) {
+		if (!container) return;
+
+		const target = event.target as Node | null;
+
+		if (target && !container.contains(target) && !(menuRef && menuRef.contains(target))) {
+			closeMenu();
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			closeMenu();
+		}
+	}
+
+	function handleResize() {
+		if (isOpen) {
+			updateMenuPosition();
+		}
+	}
+
+	function handleScroll() {
+		if (isOpen) {
+			updateMenuPosition();
+		}
+	}
+
+	async function handleSelect(value: string | undefined) {
+		if (!value) return;
+
+		const option = options.find((item) => item.id === value);
+		if (!option) {
+			console.error('Model is no longer available');
+			return;
+		}
+
+		try {
+			await selectModel(option.id);
+		} catch (error) {
+			console.error('Failed to switch model:', error);
+		}
+	}
+
+	const VIEWPORT_GUTTER = 8;
+	const MENU_OFFSET = 6;
+	const MENU_MAX_WIDTH = 320;
+
+	async function openMenu() {
+		if (loading || updating) return;
+
+		isOpen = true;
+		await tick();
+		updateMenuPosition();
+		requestAnimationFrame(() => updateMenuPosition());
+	}
+
+	function toggleOpen() {
+		if (loading || updating) return;
+
+		if (isOpen) {
+			closeMenu();
+		} else {
+			void openMenu();
+		}
+	}
+
+	function closeMenu() {
+		if (!isOpen) return;
+
+		isOpen = false;
+		menuPosition = null;
+		lockedWidth = null;
+	}
+
+	async function handleOptionSelect(optionId: string) {
+		try {
+			await handleSelect(optionId);
+		} finally {
+			closeMenu();
+		}
+	}
+
+	$effect(() => {
+		if (loading || updating) {
+			closeMenu();
+		}
+	});
+
+	$effect(() => {
+		const optionCount = options.length;
+
+		if (!isOpen || optionCount <= 0) return;
+
+		queueMicrotask(() => updateMenuPosition());
+	});
+
+	function updateMenuPosition() {
+		if (!isOpen || !triggerButton || !menuRef) return;
+
+		const triggerRect = triggerButton.getBoundingClientRect();
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+
+		if (viewportWidth === 0 || viewportHeight === 0) return;
+
+		const scrollWidth = menuRef.scrollWidth;
+		const scrollHeight = menuRef.scrollHeight;
+
+		const availableWidth = Math.max(0, viewportWidth - VIEWPORT_GUTTER * 2);
+		const constrainedMaxWidth = Math.min(MENU_MAX_WIDTH, availableWidth || MENU_MAX_WIDTH);
+		const safeMaxWidth =
+			constrainedMaxWidth > 0 ? constrainedMaxWidth : Math.min(MENU_MAX_WIDTH, viewportWidth);
+		const desiredMinWidth = Math.min(160, safeMaxWidth || 160);
+
+		let width = lockedWidth;
+		if (width === null) {
+			const naturalWidth = Math.min(scrollWidth, safeMaxWidth);
+			const baseWidth = Math.max(triggerRect.width, naturalWidth, desiredMinWidth);
+			width = Math.min(baseWidth, safeMaxWidth || baseWidth);
+			lockedWidth = width;
+		} else {
+			width = Math.min(Math.max(width, desiredMinWidth), safeMaxWidth || width);
+		}
+
+		if (width > 0) {
+			menuRef.style.width = `${width}px`;
+		}
+
+		const availableBelow = Math.max(
+			0,
+			viewportHeight - VIEWPORT_GUTTER - triggerRect.bottom - MENU_OFFSET
+		);
+		const availableAbove = Math.max(0, triggerRect.top - VIEWPORT_GUTTER - MENU_OFFSET);
+		const viewportAllowance = Math.max(0, viewportHeight - VIEWPORT_GUTTER * 2);
+		const fallbackAllowance = Math.max(1, viewportAllowance > 0 ? viewportAllowance : scrollHeight);
+
+		function computePlacement(placement: 'top' | 'bottom') {
+			const available = placement === 'bottom' ? availableBelow : availableAbove;
+			const allowedHeight =
+				available > 0 ? Math.min(available, fallbackAllowance) : fallbackAllowance;
+			const maxHeight = Math.min(scrollHeight, allowedHeight);
+			const height = Math.max(0, maxHeight);
+
+			let top: number;
+			if (placement === 'bottom') {
+				const rawTop = triggerRect.bottom + MENU_OFFSET;
+				const minTop = VIEWPORT_GUTTER;
+				const maxTop = viewportHeight - VIEWPORT_GUTTER - height;
+				if (maxTop < minTop) {
+					top = minTop;
+				} else {
+					top = Math.min(Math.max(rawTop, minTop), maxTop);
+				}
+			} else {
+				const rawTop = triggerRect.top - MENU_OFFSET - height;
+				const minTop = VIEWPORT_GUTTER;
+				const maxTop = viewportHeight - VIEWPORT_GUTTER - height;
+				if (maxTop < minTop) {
+					top = minTop;
+				} else {
+					top = Math.max(Math.min(rawTop, maxTop), minTop);
+				}
+			}
+
+			return { placement, top, height, maxHeight };
+		}
+
+		const belowMetrics = computePlacement('bottom');
+		const aboveMetrics = computePlacement('top');
+
+		let metrics = belowMetrics;
+		if (scrollHeight > belowMetrics.maxHeight && aboveMetrics.maxHeight > belowMetrics.maxHeight) {
+			metrics = aboveMetrics;
+		}
+
+		menuRef.style.maxHeight = metrics.maxHeight > 0 ? `${Math.round(metrics.maxHeight)}px` : '';
+
+		let left = triggerRect.right - width;
+		const maxLeft = viewportWidth - VIEWPORT_GUTTER - width;
+		if (maxLeft < VIEWPORT_GUTTER) {
+			left = VIEWPORT_GUTTER;
+		} else {
+			if (left > maxLeft) {
+				left = maxLeft;
+			}
+			if (left < VIEWPORT_GUTTER) {
+				left = VIEWPORT_GUTTER;
+			}
+		}
+
+		menuPosition = {
+			top: Math.round(metrics.top),
+			left: Math.round(left),
+			width: Math.round(width),
+			placement: metrics.placement,
+			maxHeight: Math.round(metrics.maxHeight)
+		};
+	}
+
+	function getDisplayOption(): ModelOption | undefined {
+		if (activeId) {
+			return options.find((option) => option.id === activeId);
+		}
+
+		return options[0];
+	}
+</script>
+
+<svelte:window onresize={handleResize} onscroll={handleScroll} />
+
+<svelte:document onpointerdown={handlePointerDown} onkeydown={handleKeydown} />
+
+<div
+	class={cn('relative z-10 flex max-w-[200px] min-w-[120px] flex-col items-end gap-1', className)}
+	bind:this={container}
+>
+	{#if loading && options.length === 0 && !isMounted}
+		<div class="flex items-center gap-2 text-xs text-muted-foreground">
+			<Loader2 class="h-4 w-4 animate-spin" />
+			Loading models…
+		</div>
+	{:else if options.length === 0}
+		<p class="text-xs text-muted-foreground">No models available.</p>
+	{:else}
+		{@const selectedOption = getDisplayOption()}
+
+		<div class="relative w-full">
+			<button
+				type="button"
+				class={cn(
+					'flex w-full items-center justify-end gap-2 rounded-md px-2 py-1 text-sm text-muted-foreground transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60',
+					isOpen ? 'text-foreground' : ''
+				)}
+				aria-haspopup="listbox"
+				aria-expanded={isOpen}
+				onclick={toggleOpen}
+				bind:this={triggerButton}
+				disabled={loading || updating}
+			>
+				<span class="max-w-[160px] truncate text-right font-medium">
+					{selectedOption?.name || 'Select model'}
+				</span>
+
+				{#if updating}
+					<Loader2 class="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+				{:else}
+					<ChevronDown
+						class={cn(
+							'h-4 w-4 text-muted-foreground transition-transform',
+							isOpen ? 'rotate-180 text-foreground' : ''
+						)}
+					/>
+				{/if}
+			</button>
+
+			{#if isOpen}
+				<div
+					bind:this={menuRef}
+					use:portalToBody
+					class={cn(
+						'fixed z-[1000] overflow-hidden rounded-md border bg-popover shadow-lg transition-opacity',
+						menuPosition ? 'opacity-100' : 'pointer-events-none opacity-0'
+					)}
+					role="listbox"
+					style:top={menuPosition ? `${menuPosition.top}px` : undefined}
+					style:left={menuPosition ? `${menuPosition.left}px` : undefined}
+					style:width={menuPosition ? `${menuPosition.width}px` : undefined}
+					data-placement={menuPosition?.placement ?? 'bottom'}
+				>
+					<div
+						class="overflow-y-auto py-1"
+						style:max-height={menuPosition && menuPosition.maxHeight > 0
+							? `${menuPosition.maxHeight}px`
+							: undefined}
+					>
+						{#each options as option (option.id)}
+							<button
+								type="button"
+								class={cn(
+									'flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left text-sm transition hover:bg-muted focus:bg-muted focus:outline-none',
+									option.id === selectedOption?.id ? 'bg-accent text-accent-foreground' : ''
+								)}
+								role="option"
+								aria-selected={option.id === selectedOption?.id}
+								onclick={() => handleOptionSelect(option.id)}
+							>
+								<span class="block w-full truncate font-medium" title={option.name}>
+									{option.name}
+								</span>
+
+								{#if option.description}
+									<span class="text-xs text-muted-foreground">{option.description}</span>
+								{/if}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	{#if error}
+		<p class="text-xs text-destructive">{error}</p>
+	{/if}
+</div>
@@ -10,6 +10,7 @@
 	import ChatMessageActions from './ChatMessageActions.svelte';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { config } from '$lib/stores/settings.svelte';
+	import { modelName as serverModelName } from '$lib/stores/server.svelte';
 	import { copyToClipboard } from '$lib/utils/copy';

 	interface Props {
@@ -70,6 +71,23 @@
 	}: Props = $props();

 	const processingState = useProcessingState();
+	let currentConfig = $derived(config());
+	let serverModel = $derived(serverModelName());
+	let displayedModel = $derived((): string | null => {
+		if (!currentConfig.showModelInfo) return null;
+
+		if (currentConfig.modelSelectorEnabled) {
+			return message.model ?? null;
+		}
+
+		return serverModel;
+	});
+
+	function handleCopyModel() {
+		const model = displayedModel();
+
+		void copyToClipboard(model ?? '');
+	}
 </script>

 <div
@@ -142,7 +160,7 @@
 		</div>
 	{/if}

-	{#if config().showModelInfo && message.model}
+	{#if displayedModel()}
 		<span class="mt-6 mb-4 inline-flex items-center gap-1 text-xs text-muted-foreground">
 			<Package class="h-3.5 w-3.5" />

@@ -150,9 +168,9 @@

 			<button
 				class="inline-flex cursor-pointer items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75"
-				onclick={() => copyToClipboard(message.model)}
+				onclick={handleCopyModel}
 			>
-				{message.model}
+				{displayedModel()}

 				<Copy class="ml-1 h-3 w-3 " />
 			</button>
@@ -216,6 +216,11 @@
 			title: 'Developer',
 			icon: Code,
 			fields: [
+				{
+					key: 'modelSelectorEnabled',
+					label: 'Enable model selector',
+					type: 'checkbox'
+				},
 				{
 					key: 'disableReasoningFormat',
 					label: 'Show raw LLM output',
@@ -8,6 +8,7 @@ export { default as ChatFormTextarea } from './chat/ChatForm/ChatFormTextarea.sv
 export { default as ChatFormActions } from './chat/ChatForm/ChatFormActions.svelte';
 export { default as ChatFormActionFileAttachments } from './chat/ChatForm/ChatFormActionFileAttachments.svelte';
 export { default as ChatFormActionRecord } from './chat/ChatForm/ChatFormActionRecord.svelte';
+export { default as ChatFormModelSelector } from './chat/ChatForm/ChatFormModelSelector.svelte';
 export { default as ChatFormHelperText } from './chat/ChatForm/ChatFormHelperText.svelte';
 export { default as ChatFormFileInputInvisible } from './chat/ChatForm/ChatFormFileInputInvisible.svelte';

@@ -32,7 +33,6 @@ export { default as ParameterSourceIndicator } from './chat/ChatSettings/Paramet
 export { default as ChatSidebar } from './chat/ChatSidebar/ChatSidebar.svelte';
 export { default as ChatSidebarConversationItem } from './chat/ChatSidebar/ChatSidebarConversationItem.svelte';
 export { default as ChatSidebarSearch } from './chat/ChatSidebar/ChatSidebarSearch.svelte';
-
 export { default as ChatErrorDialog } from './dialogs/ChatErrorDialog.svelte';
 export { default as EmptyFileAlertDialog } from './dialogs/EmptyFileAlertDialog.svelte';

@@ -8,22 +8,33 @@
 		class: className,
 		children,
 		size = 'default',
+		variant = 'default',
 		...restProps
 	}: WithoutChild<SelectPrimitive.TriggerProps> & {
 		size?: 'sm' | 'default';
+		variant?: 'default' | 'plain';
 	} = $props();
+
+	const baseClasses = $derived(
+		variant === 'plain'
+			? "group inline-flex w-full items-center justify-end gap-2 whitespace-nowrap px-0 py-0 text-sm font-medium text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3 [&_svg:not([class*='text-'])]:text-muted-foreground"
+			: "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"
+	);
+
+	const chevronClasses = $derived(
+		variant === 'plain'
+			? 'size-3 opacity-60 transition-transform group-data-[state=open]:-rotate-180'
+			: 'size-4 opacity-50'
+	);
 </script>

 <SelectPrimitive.Trigger
 	bind:ref
 	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",
-		className
-	)}
+	class={cn(baseClasses, className)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon class="size-4 opacity-50" />
+	<ChevronDownIcon class={chevronClasses} />
 </SelectPrimitive.Trigger>