diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte index aeb612bee7..d0cc31b0dd 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte @@ -7,7 +7,6 @@ ChatFormHelperText, ChatFormTextarea } from '$lib/components/app'; - import { getChatWidth } from '$lib/utils/chat-width'; import { INPUT_CLASSES } from '$lib/constants/input-classes'; import { SETTING_CONFIG_DEFAULT } from '$lib/constants/settings-config'; import { config } from '$lib/stores/settings.svelte'; @@ -15,6 +14,7 @@ import { isRouterMode } from '$lib/stores/server.svelte'; import { chatStore } from '$lib/stores/chat.svelte'; import { activeMessages } from '$lib/stores/conversations.svelte'; + import { chatWidthClasses } from '$lib/stores/chat.svelte'; import { FileTypeCategory, MimeTypeApplication, @@ -74,10 +74,6 @@ let recordingSupported = $state(false); let textareaRef: ChatFormTextarea | undefined = $state(undefined); - let widthConfig = $derived( - getChatWidth(currentConfig.autoChatWidth, currentConfig.customChatWidth) - ); - // Check if model is selected (in ROUTER mode) let conversationModel = $derived( chatStore.getConversationModel(activeMessages() as DatabaseMessage[]) @@ -358,7 +354,8 @@
([]); const currentConfig = config(); - let widthConfig = $derived(getChatWidth(config().autoChatWidth, config().customChatWidth)); - function refreshAllMessages() { const conversation = activeConversation(); @@ -131,8 +129,8 @@
{#each displayMessages as { message, siblingInfo } (message.id)} @@ -456,7 +454,7 @@ ondrop={handleDrop} role="main" > -
+

llama.cpp

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte index 96049ec7f2..460a3b2863 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte @@ -5,7 +5,7 @@ import { chatStore, isLoading, isChatStreaming } from '$lib/stores/chat.svelte'; import { activeMessages, activeConversation } from '$lib/stores/conversations.svelte'; import { config } from '$lib/stores/settings.svelte'; - import { getChatWidth } from '$lib/utils/chat-width'; + import { chatWidthClasses } from '$lib/stores/chat.svelte'; const processingState = useProcessingState(); @@ -24,8 +24,6 @@ untrack(() => chatStore.setActiveProcessingConversation(conversation?.id ?? null)); }); - let widthConfig = $derived(getChatWidth(config().autoChatWidth, config().customChatWidth)); - $effect(() => { const keepStatsVisible = config().keepStatsVisible; const shouldMonitor = keepStatsVisible || isCurrentConversationLoading || isStreaming; @@ -64,7 +62,10 @@
-
+
{#each processingDetails as detail (detail)} {detail} {/each} diff --git a/tools/server/webui/src/lib/stores/chat.svelte.ts b/tools/server/webui/src/lib/stores/chat.svelte.ts index 67157e36ac..7d6205544a 100644 --- a/tools/server/webui/src/lib/stores/chat.svelte.ts +++ b/tools/server/webui/src/lib/stores/chat.svelte.ts @@ -15,6 +15,7 @@ import { } from '$lib/utils'; import { SvelteMap } from 'svelte/reactivity'; import { DEFAULT_CONTEXT } from '$lib/constants/default-context'; +import { AUTO_WIDTH_CLASSES, CUSTOM_WIDTH_PRESETS, DEFAULT_WIDTH } from '$lib/constants/chat-width'; /** * chatStore - Active AI interaction and streaming state management @@ -77,6 +78,32 @@ class ChatStore { private isEditModeActive = $state(false); private addFilesHandler: ((files: File[]) => void) | null = $state(null); + get chatWidthClasses(): { class: string; style?: string } { + const currentConfig = config(); + const customChatWidth = currentConfig.customChatWidth; + + // Custom width takes priority if set + if (customChatWidth) { + let pixelValue: number | null = null; + + if (customChatWidth in CUSTOM_WIDTH_PRESETS) { + const preset = customChatWidth as keyof typeof CUSTOM_WIDTH_PRESETS; + pixelValue = CUSTOM_WIDTH_PRESETS[preset]; + } else { + // User typed a number directly instead of selecting a preset + const number = Number(customChatWidth); + if (!isNaN(number) && number > 0) { + pixelValue = number; + } + } + if (pixelValue !== null) { + return { class: '', style: `max-width: ${pixelValue}px` }; + } + } + + return currentConfig.autoChatWidth ? { class: AUTO_WIDTH_CLASSES } : { class: DEFAULT_WIDTH }; + } + // ───────────────────────────────────────────────────────────────────────────── // Loading State // ───────────────────────────────────────────────────────────────────────────── @@ -1483,3 +1510,4 @@ export const isEditing = () => chatStore.isEditing(); export const isLoading = () => chatStore.isLoading; export const setEditModeActive = (handler: (files: File[]) => void) => chatStore.setEditModeActive(handler); +export const chatWidthClasses = () => chatStore.chatWidthClasses; diff --git a/tools/server/webui/src/lib/utils/chat-width.ts b/tools/server/webui/src/lib/utils/chat-width.ts deleted file mode 100644 index 532b5b69b1..0000000000 --- a/tools/server/webui/src/lib/utils/chat-width.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { AUTO_WIDTH_CLASSES, CUSTOM_WIDTH_PRESETS, DEFAULT_WIDTH } from '$lib/constants/chat-width'; - -export type CustomWidthPreset = keyof typeof CUSTOM_WIDTH_PRESETS; - -/** - * Get the appropriate width configuration based on settings - * @param autoChatWidth - Whether automatic responsive width is enabled - * @param customChatWidth - Custom width setting (preset key or pixel value) - */ -export function getChatWidth( - autoChatWidth: boolean, - customChatWidth: string -): { class: string; style?: string } { - if (autoChatWidth) { - return { class: AUTO_WIDTH_CLASSES }; - } - - if (customChatWidth) { - if (customChatWidth in CUSTOM_WIDTH_PRESETS) { - const pixelValue = CUSTOM_WIDTH_PRESETS[customChatWidth as CustomWidthPreset]; - return { class: '', style: `max-width: ${pixelValue}px` }; - } - - const numValue = Number(customChatWidth); - if (!isNaN(numValue) && numValue > 0) { - return { class: '', style: `max-width: ${numValue}px` }; - } - } - - return { class: DEFAULT_WIDTH }; -}