From 689b7a5bd6105b8e8782c0c14d876462991d4008 Mon Sep 17 00:00:00 2001 From: Imad Saddik Date: Sat, 20 Dec 2025 15:25:41 +0100 Subject: [PATCH] Removed console log and refactored the code --- .../ChatSettings/CustomWidthCombobox.svelte | 173 ++++++++---------- .../server/webui/src/lib/utils/chat-width.ts | 3 + 2 files changed, 80 insertions(+), 96 deletions(-) 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 index 84e97167ce..a34aa8e85f 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/CustomWidthCombobox.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/CustomWidthCombobox.svelte @@ -6,7 +6,7 @@ import { Input } from '$lib/components/ui/input'; import { cn } from '$lib/components/ui/utils'; import { tick } from 'svelte'; - import { CUSTOM_WIDTH_PRESETS } from '$lib/utils/chat-width'; + import { CUSTOM_WIDTH_PRESETS, MIN_CUSTOM_WIDTH, MAX_CUSTOM_WIDTH } from '$lib/utils/chat-width'; interface Props { value: string; @@ -15,95 +15,85 @@ } let { value = $bindable(''), onChange, disabled = false }: Props = $props(); - console.log('Rendering CustomWidthCombobox with value:', value); let open = $state(false); - let showCustomPixelInput = $state(false); - let customPixelValue = $state(''); - let invalidCustomPixel = $state(false); + let isEditing = $state(false); + let inputValue = $state(''); + let isError = $state(false); let triggerRef = $state(null!); - let customPixelInputRef = $state(null!); + let inputRef = $state(null!); - const widthPresets = Object.entries(CUSTOM_WIDTH_PRESETS).map(([key, pixelValue]) => ({ + const presets = Object.entries(CUSTOM_WIDTH_PRESETS).map(([key, pixelValue]) => ({ value: key, label: `${key} (${pixelValue}px)` })); - const isValueANumber = $derived.by(() => { - const numValue = Number(value); - if (!isNaN(numValue) && numValue > 0) { - return true; - } - return false; - }); + const displayLabel = $derived.by(() => { + if (isEditing) return 'Set pixel value'; - const displayValue = $derived.by(() => { - if (showCustomPixelInput) { - return 'Set pixel value'; - } + const foundPreset = presets.find((p) => p.value === value); + if (foundPreset) return foundPreset.label; - const selectedWidthPreset = widthPresets.find((preset) => preset.value === value); - if (selectedWidthPreset) return selectedWidthPreset.label; - - if (isValueANumber) { - return `Custom (${Number(value)}px)`; + const number = Number(value); + if (!isNaN(number) && number > 0) { + return `Custom (${number}px)`; } return 'Select width...'; }); - function closeAndFocusTrigger() { + function closePopover() { open = false; - tick().then(() => { - triggerRef.focus(); - }); + tick().then(() => triggerRef?.focus()); } - function handleSelectPreset(newValue: string) { + function selectPreset(newValue: string) { value = newValue; - showCustomPixelInput = false; + isEditing = false; + isError = false; onChange(newValue); - closeAndFocusTrigger(); + closePopover(); } - function handleShowCustomPixelInput() { + function startEditing() { open = false; - showCustomPixelInput = true; + isEditing = true; + inputValue = ''; + isError = false; - tick().then(() => { - if (customPixelInputRef) customPixelInputRef.focus(); - }); + tick().then(() => inputRef?.focus()); } - function handleCancelCustomPixelInput() { - showCustomPixelInput = false; - customPixelValue = ''; + function cancelEditing() { + isEditing = false; + inputValue = ''; + isError = false; + } + + function submitCustomValue() { + if (!inputValue) { + isError = true; + return; + } + + const number = Number(inputValue); + const isValid = !isNaN(number) && number >= MIN_CUSTOM_WIDTH && number <= MAX_CUSTOM_WIDTH; + + if (isValid) { + value = String(number); + onChange(String(number)); + isEditing = false; + isError = false; + } else { + isError = true; + } } function handleKeydown(e: KeyboardEvent) { if (e.key === 'Enter') { e.preventDefault(); - handleSaveCustomPixelInput(); - } - } - - function handleSaveCustomPixelInput() { - if (!customPixelValue) { - invalidCustomPixel = true; - return; - } - - const number = Number(customPixelValue); - const isValid = !isNaN(number) && number >= 300 && number <= 10000; - - if (isValid) { - value = String(number); - onChange(String(number)); - invalidCustomPixel = false; - showCustomPixelInput = false; - } else { - invalidCustomPixel = true; + submitCustomValue(); } } @@ -120,7 +110,7 @@ aria-expanded={open} {disabled} > - {displayValue} + {displayLabel} {/snippet} @@ -132,25 +122,20 @@ No presets found. - - - + + + Set pixel value - {#each widthPresets as preset (preset.value)} - handleSelectPreset(preset.value)}> + {#each presets as preset (preset.value)} + selectPreset(preset.value)}> {preset.label} @@ -162,32 +147,28 @@ - {#if showCustomPixelInput} -
- - - + {#if isEditing} +
+
+ +

+ Enter a value between {MIN_CUSTOM_WIDTH} and {MAX_CUSTOM_WIDTH}. +

+
+ +
+ + +
-

- Enter a value between 300 and 10000 pixels. -

{/if}
diff --git a/tools/server/webui/src/lib/utils/chat-width.ts b/tools/server/webui/src/lib/utils/chat-width.ts index 54a7bd86ce..d59f53a51b 100644 --- a/tools/server/webui/src/lib/utils/chat-width.ts +++ b/tools/server/webui/src/lib/utils/chat-width.ts @@ -1,5 +1,8 @@ export const DEFAULT_WIDTH = 'max-w-[48rem]'; +export const MIN_CUSTOM_WIDTH = 300; +export const MAX_CUSTOM_WIDTH = 10000; + export const AUTO_WIDTH_CLASSES = ` max-w-[48rem] md:max-w-[60rem]