From 283683480105961604f4fedc300de6c5266742d8 Mon Sep 17 00:00:00 2001
From: Imad Saddik <simad3647@gmail.com>
Date: Sun, 15 Mar 2026 16:54:43 +0000
Subject: [PATCH] refactor: remove anything related to the custom chat width
 setting

---
 .../app/chat/ChatMessages/ChatMessage.svelte  |  4 ----
 .../ChatMessages/ChatMessageAssistant.svelte  |  5 +---
 .../chat/ChatMessages/ChatMessageUser.svelte  |  3 ---
 .../app/chat/ChatMessages/ChatMessages.svelte |  1 -
 .../app/chat/ChatScreen/ChatScreen.svelte     |  3 +--
 .../app/chat/ChatScreen/ChatScreenForm.svelte |  2 +-
 .../app/chat/ChatSettings/ChatSettings.svelte |  5 ----
 .../webui/src/lib/constants/chat-width.ts     | 19 +--------------
 .../src/lib/constants/settings-config.ts      |  3 ---
 .../webui/src/lib/constants/settings-keys.ts  |  1 -
 tools/server/webui/src/lib/enums/settings.ts  |  3 +--
 .../lib/services/parameter-sync.service.ts    |  6 -----
 .../webui/src/lib/stores/chat.svelte.ts       | 24 ++-----------------
 13 files changed, 7 insertions(+), 72 deletions(-)

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
index 7beb4d0367..52a9355104 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
@@ -18,7 +18,6 @@
 
 	interface Props {
 		class?: string;
-		style?: string;
 		message: DatabaseMessage;
 		isLastAssistantMessage?: boolean;
 		siblingInfo?: ChatMessageSiblingInfo | null;
@@ -26,7 +25,6 @@
 
 	let {
 		class: className = '',
-		style,
 		message,
 		isLastAssistantMessage = false,
 		siblingInfo = null
@@ -281,7 +279,6 @@
 {:else if message.role === MessageRole.USER}
 	<ChatMessageUser
 		class={className}
-		{style}
 		{deletionInfo}
 		{message}
 		onConfirmDelete={handleConfirmDelete}
@@ -297,7 +294,6 @@
 	<ChatMessageAssistant
 		bind:textareaElement
 		class={className}
-		{style}
 		{deletionInfo}
 		{isLastAssistantMessage}
 		{message}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
index 6315ab3c55..5dd07a6d56 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
@@ -27,7 +27,6 @@
 
 	interface Props {
 		class?: string;
-		style?: string;
 		deletionInfo: {
 			totalCount: number;
 			userMessages: number;
@@ -52,7 +51,6 @@
 
 	let {
 		class: className = '',
-		style,
 		deletionInfo,
 		isLastAssistantMessage = false,
 		message,
@@ -197,12 +195,11 @@
 
 <div
 	class="text-md group w-full leading-7.5 {className}"
-	{style}
 	role="group"
 	aria-label="Assistant message with actions"
 >
 	{#if showProcessingInfoTop}
-		<div class="mt-6 w-full {className}" {style} in:fade>
+		<div class="mt-6 w-full {className}" in:fade>
 			<div class="processing-container">
 				<span class="processing-text">
 					{processingState.getPromptProgressText() ??
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
index dcadf78108..9b9d9a3e99 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
@@ -9,7 +9,6 @@
 
 	interface Props {
 		class?: string;
-		style?: string;
 		message: DatabaseMessage;
 		siblingInfo?: ChatMessageSiblingInfo | null;
 		deletionInfo: {
@@ -29,7 +28,6 @@
 
 	let {
 		class: className = '',
-		style,
 		message,
 		siblingInfo = null,
 		deletionInfo,
@@ -77,7 +75,6 @@
 <div
 	aria-label="User message with actions"
 	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
-	{style}
 	role="group"
 >
 	{#if editCtx.isEditing}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
index 0362ca641d..b3caf9fbf2 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
@@ -146,7 +146,6 @@
 	{#each displayMessages as { message, isLastAssistantMessage, siblingInfo } (message.id)}
 		<ChatMessage
 			class="mx-auto w-full {widthClasses.class}"
-			style={widthClasses.style}
 			{message}
 			{isLastAssistantMessage}
 			{siblingInfo}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index 1cd6ac133e..6a506ec2b5 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -379,7 +379,6 @@
 			{#if hasPropsError}
 				<div
 					class="pointer-events-auto mx-auto mb-4 {widthClasses.class} px-1"
-					style={widthClasses.style}
 					in:fly={{ y: 10, duration: 250 }}
 				>
 					<Alert.Root variant="destructive">
@@ -429,7 +428,7 @@
 		ondrop={handleDrop}
 		role="main"
 	>
-		<div class="w-full {widthClasses.class} px-4" style={widthClasses.style}>
+		<div class="w-full {widthClasses.class} px-4">
 			<div class="mb-10 text-center" in:fade={{ duration: 300 }}>
 				<h1 class="mb-2 text-2xl font-semibold tracking-tight md:text-3xl">llama.cpp</h1>
 
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte
index 02cf370b37..4755a3c419 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte
@@ -104,7 +104,7 @@
 	});
 </script>
 
-<div class="relative mx-auto {widthClasses.class}" style={widthClasses.style}>
+<div class="relative mx-auto {widthClasses.class}">
 	<ChatForm
 		bind:this={chatFormRef}
 		bind:value={message}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
index 66f74e84a0..fd2d934702 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
@@ -96,11 +96,6 @@
 					label: 'Automatic width',
 					type: SettingsFieldType.CHECKBOX
 				},
-				{
-					key: SETTINGS_KEYS.CUSTOM_CHAT_WIDTH,
-					label: 'Custom width',
-					type: SettingsFieldType.COMBOBOX
-				},
 				{
 					key: SETTINGS_KEYS.SHOW_MESSAGE_STATS,
 					label: 'Show message generation statistics',
diff --git a/tools/server/webui/src/lib/constants/chat-width.ts b/tools/server/webui/src/lib/constants/chat-width.ts
index 45f258255a..2a96ee763e 100644
--- a/tools/server/webui/src/lib/constants/chat-width.ts
+++ b/tools/server/webui/src/lib/constants/chat-width.ts
@@ -1,7 +1,4 @@
-export const DEFAULT_WIDTH = 'max-w-[48rem]';
-
-export const MIN_CUSTOM_WIDTH = 300;
-export const MAX_CUSTOM_WIDTH = 10000;
+export const DEFAULT_WIDTH_CLASS = 'max-w-[48rem]';
 
 export const AUTO_WIDTH_CLASSES = `
   max-w-[48rem] 
@@ -12,17 +9,3 @@ export const AUTO_WIDTH_CLASSES = `
   4xl:max-w-[100rem] 
   5xl:max-w-[150rem]
 `;
-
-export const CUSTOM_WIDTH_PRESETS = {
-	xs: 480,
-	sm: 600,
-	md: 768,
-	lg: 960,
-	xl: 1152,
-	'2xl': 1280,
-	'3xl': 1440,
-	'4xl': 1600,
-	'5xl': 1920,
-	'6xl': 2304,
-	'7xl': 3072
-} as const;
diff --git a/tools/server/webui/src/lib/constants/settings-config.ts b/tools/server/webui/src/lib/constants/settings-config.ts
index 226931321f..1fa340165f 100644
--- a/tools/server/webui/src/lib/constants/settings-config.ts
+++ b/tools/server/webui/src/lib/constants/settings-config.ts
@@ -13,7 +13,6 @@ export const SETTING_CONFIG_DEFAULT: Record<string, string | number | boolean> =
 	showRawOutputSwitch: false,
 	keepStatsVisible: false,
 	autoChatWidth: false,
-	customChatWidth: '',
 	showMessageStats: true,
 	askForTitleConfirmation: false,
 	pasteLongTextToFileLen: 2500,
@@ -110,8 +109,6 @@ export const SETTING_CONFIG_INFO: Record<string, string> = {
 	keepStatsVisible: 'Keep processing statistics visible after generation finishes.',
 	autoChatWidth:
 		'Automatically adapt the chat width to your screen size. If enabled, this ignores the custom width setting.',
-	customChatWidth:
-		'Set a specific width for the chat. You can use presets (xs to 7xl) or type a pixel value (e.g. 800).',
 	showMessageStats:
 		'Display generation statistics (tokens/second, token count, duration) below each assistant message.',
 	askForTitleConfirmation:
diff --git a/tools/server/webui/src/lib/constants/settings-keys.ts b/tools/server/webui/src/lib/constants/settings-keys.ts
index 233e9a3855..49a1684615 100644
--- a/tools/server/webui/src/lib/constants/settings-keys.ts
+++ b/tools/server/webui/src/lib/constants/settings-keys.ts
@@ -54,7 +54,6 @@ export const SETTINGS_KEYS = {
 	SHOW_TOOL_CALL_IN_PROGRESS: 'showToolCallInProgress',
 	// Chat width
 	AUTO_CHAT_WIDTH: 'autoChatWidth',
-	CUSTOM_CHAT_WIDTH: 'customChatWidth',
 	// Developer
 	DISABLE_REASONING_PARSING: 'disableReasoningParsing',
 	SHOW_RAW_OUTPUT_SWITCH: 'showRawOutputSwitch',
diff --git a/tools/server/webui/src/lib/enums/settings.ts b/tools/server/webui/src/lib/enums/settings.ts
index a41960ee88..f17f219762 100644
--- a/tools/server/webui/src/lib/enums/settings.ts
+++ b/tools/server/webui/src/lib/enums/settings.ts
@@ -22,6 +22,5 @@ export enum SettingsFieldType {
 	INPUT = 'input',
 	TEXTAREA = 'textarea',
 	CHECKBOX = 'checkbox',
-	SELECT = 'select',
-	COMBOBOX = 'combobox'
+	SELECT = 'select'
 }
diff --git a/tools/server/webui/src/lib/services/parameter-sync.service.ts b/tools/server/webui/src/lib/services/parameter-sync.service.ts
index dfb83cc5cf..66e02b7844 100644
--- a/tools/server/webui/src/lib/services/parameter-sync.service.ts
+++ b/tools/server/webui/src/lib/services/parameter-sync.service.ts
@@ -118,12 +118,6 @@ export const SYNCABLE_PARAMETERS: SyncableParameter[] = [
 		type: SyncableParameterType.BOOLEAN,
 		canSync: true
 	},
-	{
-		key: 'customChatWidth',
-		serverKey: 'customChatWidth',
-		type: SyncableParameterType.STRING,
-		canSync: true
-	},
 	{
 		key: 'showMessageStats',
 		serverKey: 'showMessageStats',
diff --git a/tools/server/webui/src/lib/stores/chat.svelte.ts b/tools/server/webui/src/lib/stores/chat.svelte.ts
index 67acd240e7..d40505c385 100644
--- a/tools/server/webui/src/lib/stores/chat.svelte.ts
+++ b/tools/server/webui/src/lib/stores/chat.svelte.ts
@@ -36,8 +36,7 @@ import {
 	REASONING_TAGS,
 	SYSTEM_MESSAGE_PLACEHOLDER,
 	AUTO_WIDTH_CLASSES,
-	CUSTOM_WIDTH_PRESETS,
-	DEFAULT_WIDTH
+	DEFAULT_WIDTH_CLASS
 } from '$lib/constants';
 import type {
 	ChatMessageTimings,
@@ -85,31 +84,12 @@ class ChatStore {
 	get chatWidthClasses(): { class: string; style?: string } {
 		const currentConfig = config();
 		const autoChatWidth = currentConfig.autoChatWidth;
-		const customChatWidth = currentConfig.customChatWidth;
 
 		if (autoChatWidth) {
 			return { class: AUTO_WIDTH_CLASSES };
 		}
 
-		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 { class: DEFAULT_WIDTH };
+		return { class: DEFAULT_WIDTH_CLASS };
 	}
 
 	private setChatLoading(convId: string, loading: boolean): void {