From 3be006dcafcacf7011734fd2e7feffacba476100 Mon Sep 17 00:00:00 2001
From: Imad Saddik <simad3647@gmail.com>
Date: Sat, 20 Dec 2025 14:29:15 +0100
Subject: [PATCH] Display the custom chat width combobox in the settings with
 just presets

---
 .../ChatSettings/ChatSettingsFields.svelte    | 30 +++++++
 .../ChatSettings/CustomWidthCombobox.svelte   | 86 +++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 tools/server/webui/src/lib/components/app/chat/ChatSettings/CustomWidthCombobox.svelte

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte
index d17f7e4229..b878673958 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte
@@ -10,6 +10,7 @@
 	import { getParameterInfo, resetParameterToServerDefault } from '$lib/stores/settings.svelte';
 	import { ParameterSyncService } from '$lib/services/parameter-sync';
 	import ParameterSourceIndicator from './ParameterSourceIndicator.svelte';
+	import CustomWidthCombobox from './CustomWidthCombobox.svelte';
 	import type { Component } from 'svelte';
 
 	interface Props {
@@ -197,6 +198,35 @@
 					{field.help || SETTING_CONFIG_INFO[field.key]}
 				</p>
 			{/if}
+		{:else if field.type === 'combobox'}
+			{#if field.key === 'customChatWidth'}
+				{@const isDisabled = localConfig.autoChatWidth}
+
+				<div class="space-y-2">
+					<Label
+						for={field.key}
+						class="text-sm font-medium {isDisabled ? 'text-muted-foreground' : ''}"
+					>
+						{field.label}
+					</Label>
+
+					<div class="w-full md:max-w-md">
+						<CustomWidthCombobox
+							bind:value={localConfig[field.key]}
+							onChange={(value) => onConfigChange(field.key, value)}
+							disabled={isDisabled}
+						/>
+					</div>
+
+					{#if isDisabled}
+						<p class="text-xs text-muted-foreground">Disabled when responsive width is enabled.</p>
+					{:else if field.help || SETTING_CONFIG_INFO[field.key]}
+						<p class="text-xs text-muted-foreground">
+							{field.help || SETTING_CONFIG_INFO[field.key]}
+						</p>
+					{/if}
+				</div>
+			{/if}
 		{:else if field.type === 'checkbox'}
 			{@const isDisabled = field.key === 'pdfAsImage' && !supportsVision()}
 
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/CustomWidthCombobox.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/CustomWidthCombobox.svelte
new file mode 100644
index 0000000000..86de4c57d6
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/CustomWidthCombobox.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { Check, ChevronsUpDown } from '@lucide/svelte';
+	import * as Command from '$lib/components/ui/command';
+	import * as Popover from '$lib/components/ui/popover';
+	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/components/ui/utils';
+	import { tick } from 'svelte';
+	import { CUSTOM_WIDTH_PRESETS } from '$lib/utils/chat-width';
+
+	interface Props {
+		value: string;
+		onChange: (value: string) => void;
+		disabled?: boolean;
+	}
+
+	let { value = $bindable(''), onChange, disabled = false }: Props = $props();
+
+	let open = $state(false);
+	let triggerRef = $state<HTMLButtonElement>(null!);
+    console.log("Rendering CustomWidthCombobox with value:", value);
+
+	const widthPresets = Object.entries(CUSTOM_WIDTH_PRESETS).map(([key, pixelValue]) => ({
+		value: key,
+		label: `${key} (${pixelValue}px)`
+	}));
+
+	const displayValue = $derived.by(() => {
+		const selectedWidthPreset = widthPresets.find((preset) => preset.value === value);
+		if (selectedWidthPreset) return selectedWidthPreset.label;
+
+		return 'Select width...';
+	});
+
+	function closeAndFocusTrigger() {
+		open = false;
+		tick().then(() => {
+			triggerRef.focus();
+		});
+	}
+
+	function handleSelectPreset(newValue: string) {
+		value = newValue;
+		onChange(newValue);
+		closeAndFocusTrigger();
+	}
+</script>
+
+<div class="flex w-full flex-col gap-2">
+	<Popover.Root bind:open>
+		<Popover.Trigger bind:ref={triggerRef}>
+			{#snippet child({ props })}
+				<Button
+					{...props}
+					variant="outline"
+					class="w-full justify-between font-normal"
+					role="combobox"
+					aria-expanded={open}
+					{disabled}
+				>
+					{displayValue}
+					<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			{/snippet}
+		</Popover.Trigger>
+
+		<Popover.Content class="z-[1000000] w-[var(--bits-popover-anchor-width)] p-0">
+			<Command.Root>
+				<Command.Input placeholder="Search presets" />
+				<Command.List>
+					<Command.Empty>No presets found.</Command.Empty>
+
+					<Command.Group value="width-presets">
+						{#each widthPresets as preset (preset.value)}
+							<Command.Item value={preset.value} onSelect={() => handleSelectPreset(preset.value)}>
+								<Check
+									class={cn('mr-2 h-4 w-4', value === preset.value ? 'opacity-100' : 'opacity-0')}
+								/>
+								{preset.label}
+							</Command.Item>
+						{/each}
+					</Command.Group>
+				</Command.List>
+			</Command.Root>
+		</Popover.Content>
+	</Popover.Root>
+</div>