-
+
{#if field.help || SETTING_CONFIG_INFO[field.key]}
diff --git a/tools/server/webui/src/lib/constants/chat-width.ts b/tools/server/webui/src/lib/constants/chat-width.ts
new file mode 100644
index 0000000000..2a96ee763e
--- /dev/null
+++ b/tools/server/webui/src/lib/constants/chat-width.ts
@@ -0,0 +1,11 @@
+export const DEFAULT_WIDTH_CLASS = 'max-w-[48rem]';
+
+export const AUTO_WIDTH_CLASSES = `
+ max-w-[48rem]
+ md:max-w-[60rem]
+ xl:max-w-[70rem]
+ 2xl:max-w-[80rem]
+ 3xl:max-w-[90rem]
+ 4xl:max-w-[100rem]
+ 5xl:max-w-[150rem]
+`;
diff --git a/tools/server/webui/src/lib/constants/index.ts b/tools/server/webui/src/lib/constants/index.ts
index 41c117df54..1bf35e98f9 100644
--- a/tools/server/webui/src/lib/constants/index.ts
+++ b/tools/server/webui/src/lib/constants/index.ts
@@ -8,6 +8,7 @@ export * from './auto-scroll';
export * from './binary-detection';
export * from './cache';
export * from './chat-form';
+export * from './chat-width';
export * from './code-blocks';
export * from './code';
export * from './css-classes';
diff --git a/tools/server/webui/src/lib/constants/settings-config.ts b/tools/server/webui/src/lib/constants/settings-config.ts
index e76fa89e9a..4ebd2ece6f 100644
--- a/tools/server/webui/src/lib/constants/settings-config.ts
+++ b/tools/server/webui/src/lib/constants/settings-config.ts
@@ -12,6 +12,7 @@ export const SETTING_CONFIG_DEFAULT: Record =
disableReasoningParsing: false,
showRawOutputSwitch: false,
keepStatsVisible: false,
+ autoChatWidth: true,
showMessageStats: true,
askForTitleConfirmation: false,
pasteLongTextToFileLen: 2500,
@@ -106,6 +107,8 @@ export const SETTING_CONFIG_INFO: Record = {
showRawOutputSwitch:
'Show toggle button to display messages as plain text instead of Markdown-formatted content',
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.',
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 1209103578..49a1684615 100644
--- a/tools/server/webui/src/lib/constants/settings-keys.ts
+++ b/tools/server/webui/src/lib/constants/settings-keys.ts
@@ -52,6 +52,8 @@ export const SETTINGS_KEYS = {
ALWAYS_SHOW_AGENTIC_TURNS: 'alwaysShowAgenticTurns',
AGENTIC_MAX_TOOL_PREVIEW_LINES: 'agenticMaxToolPreviewLines',
SHOW_TOOL_CALL_IN_PROGRESS: 'showToolCallInProgress',
+ // Chat width
+ AUTO_CHAT_WIDTH: 'autoChatWidth',
// Developer
DISABLE_REASONING_PARSING: 'disableReasoningParsing',
SHOW_RAW_OUTPUT_SWITCH: 'showRawOutputSwitch',
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 1acb5ce453..66e02b7844 100644
--- a/tools/server/webui/src/lib/services/parameter-sync.service.ts
+++ b/tools/server/webui/src/lib/services/parameter-sync.service.ts
@@ -112,6 +112,12 @@ export const SYNCABLE_PARAMETERS: SyncableParameter[] = [
type: SyncableParameterType.BOOLEAN,
canSync: true
},
+ {
+ key: 'autoChatWidth',
+ serverKey: 'autoChatWidth',
+ type: SyncableParameterType.BOOLEAN,
+ 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 c31dfc8cbf..6467a98b2c 100644
--- a/tools/server/webui/src/lib/stores/chat.svelte.ts
+++ b/tools/server/webui/src/lib/stores/chat.svelte.ts
@@ -34,7 +34,9 @@ import {
MAX_INACTIVE_CONVERSATION_STATES,
INACTIVE_CONVERSATION_STATE_MAX_AGE_MS,
REASONING_TAGS,
- SYSTEM_MESSAGE_PLACEHOLDER
+ SYSTEM_MESSAGE_PLACEHOLDER,
+ AUTO_WIDTH_CLASSES,
+ DEFAULT_WIDTH_CLASS
} from '$lib/constants';
import type {
ChatMessageTimings,
@@ -79,6 +81,13 @@ class ChatStore {
private _pendingDraftMessage = $state('');
private _pendingDraftFiles = $state([]);
+ get chatWidthClasses(): { class: string } {
+ const currentConfig = config();
+ return currentConfig.autoChatWidth
+ ? { class: AUTO_WIDTH_CLASSES }
+ : { class: DEFAULT_WIDTH_CLASS };
+ }
+
private setChatLoading(convId: string, loading: boolean): void {
this.touchConversationState(convId);
if (loading) {
@@ -1554,3 +1563,4 @@ export const isChatStreaming = () => chatStore.isStreaming();
export const isEditing = () => chatStore.isEditing();
export const isLoading = () => chatStore.isLoading;
export const pendingEditMessageId = () => chatStore.pendingEditMessageId;
+export const chatWidthClasses = () => chatStore.chatWidthClasses;