Merge f62e0d9b4e into 88915cb55c

tools/server/webui/src/app.css

@@ -114,6 +114,9 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+	--breakpoint-3xl: 120rem; /* 1920px */
+	--breakpoint-4xl: 150rem; /* 2400px */
+	--breakpoint-5xl: 180rem; /* 2880px */
 }
 
 :root {

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte

@@ -318,7 +318,6 @@
 		flex-direction: column;
 		gap: 0.5rem;
 		width: 100%;
-		max-width: 48rem;
 	}
 
 	.agentic-text {

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte

@@ -398,7 +398,6 @@
 
 	.raw-output {
 		width: 100%;
-		max-width: 48rem;
 		margin-top: 1.5rem;
 		padding: 1rem 1.25rem;
 		border-radius: 1rem;

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte

@@ -6,6 +6,7 @@
 	import { conversationsStore, activeConversation } from '$lib/stores/conversations.svelte';
 	import { config } from '$lib/stores/settings.svelte';
 	import { copyToClipboard, formatMessageForClipboard, getMessageSiblings } from '$lib/utils';
+	import { chatWidthClasses } from '$lib/stores/chat.svelte';
 
 	interface Props {
 		class?: string;
@@ -17,6 +18,7 @@
 
 	let allConversationMessages = $state<DatabaseMessage[]>([]);
 	const currentConfig = config();
+	let widthClasses = $derived(chatWidthClasses());
 
 	setChatActionsContext({
 		copy: async (message: DatabaseMessage) => {
@@ -143,7 +145,7 @@
 <div class="flex h-full flex-col space-y-10 pt-24 {className}" style="height: auto; ">
 	{#each displayMessages as { message, isLastAssistantMessage, siblingInfo } (message.id)}
 		<ChatMessage
-			class="mx-auto w-full max-w-[48rem]"
+			class="mx-auto w-full {widthClasses.class}"
 			{message}
 			{isLastAssistantMessage}
 			{siblingInfo}

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte

@@ -12,6 +12,7 @@
 	} from '$lib/components/app';
 	import * as Alert from '$lib/components/ui/alert';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { chatWidthClasses } from '$lib/stores/chat.svelte';
 	import { INITIAL_SCROLL_DELAY } from '$lib/constants';
 	import { KeyboardKey } from '$lib/enums';
 	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
@@ -77,6 +78,7 @@
 	let activeErrorDialog = $derived(errorDialog());
 	let isServerLoading = $derived(serverLoading());
 	let hasPropsError = $derived(!!serverError());
+	let widthClasses = $derived(chatWidthClasses());
 
 	let isCurrentConversationLoading = $derived(isLoading() || isChatStreaming());
 
@@ -376,7 +378,7 @@
 
 			{#if hasPropsError}
 				<div
-					class="pointer-events-auto mx-auto mb-4 max-w-[48rem] px-1"
+					class="pointer-events-auto mx-auto mb-4 {widthClasses.class} px-1"
 					in:fly={{ y: 10, duration: 250 }}
 				>
 					<Alert.Root variant="destructive">
@@ -426,7 +428,7 @@
 		ondrop={handleDrop}
 		role="main"
 	>
-		<div class="w-full max-w-[48rem] px-4">
+		<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>
 

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import { ChatFormHelperText, ChatForm } from '$lib/components/app';
+	import { chatWidthClasses } from '$lib/stores/chat.svelte';
 	import { onMount } from 'svelte';
 
 	interface Props {
@@ -48,6 +49,7 @@
 		onSystemPromptAdd?.({ message, files: uploadedFiles });
 	}
 
+	let widthClasses = $derived(chatWidthClasses());
 	let hasLoadingAttachments = $derived(uploadedFiles.some((f) => f.isLoading));
 
 	async function handleSubmit() {
@@ -102,7 +104,7 @@
 	});
 </script>
 
-<div class="relative mx-auto max-w-[48rem]">
+<div class="relative mx-auto {widthClasses.class}">
 	<ChatForm
 		bind:this={chatFormRef}
 		bind:value={message}

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte

@@ -91,6 +91,11 @@
 			title: SETTINGS_SECTION_TITLES.DISPLAY,
 			icon: Monitor,
 			fields: [
+				{
+					key: SETTINGS_KEYS.AUTO_CHAT_WIDTH,
+					label: 'Automatic width',
+					type: SettingsFieldType.CHECKBOX
+				},
 				{
 					key: SETTINGS_KEYS.SHOW_MESSAGE_STATS,
 					label: 'Show message generation statistics',

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte

@@ -233,7 +233,7 @@
 				/>
 
 				<div class="space-y-1">
-					<label
+					<Label
 						for={field.key}
 						class="flex cursor-pointer items-center gap-1.5 pt-1 pb-0.5 text-sm leading-none font-medium"
 					>
@@ -242,7 +242,7 @@
 						{#if field.isExperimental}
 							<FlaskConical class="h-3.5 w-3.5 text-muted-foreground" />
 						{/if}
-					</label>
+					</Label>
 
 					{#if field.help || SETTING_CONFIG_INFO[field.key]}
 						<p class="text-xs text-muted-foreground">

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]
+`;

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';

tools/server/webui/src/lib/constants/settings-config.ts

@@ -12,6 +12,7 @@ export const SETTING_CONFIG_DEFAULT: Record<string, string | number | boolean> =
 	disableReasoningParsing: false,
 	showRawOutputSwitch: false,
 	keepStatsVisible: false,
+	autoChatWidth: true,
 	showMessageStats: true,
 	askForTitleConfirmation: false,
 	pasteLongTextToFileLen: 2500,
@@ -106,6 +107,8 @@ export const SETTING_CONFIG_INFO: Record<string, string> = {
 	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:

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',

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',

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<string>('');
 	private _pendingDraftFiles = $state<ChatUploadedFile[]>([]);
 
+	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;