From 4561f25021094ab355439f6200aed6f0fa13966b Mon Sep 17 00:00:00 2001
From: Imad Saddik <simad3647@gmail.com>
Date: Sat, 14 Mar 2026 06:43:19 +0000
Subject: [PATCH] refactor: call chatWidthClasses once and reuse it everywhere

---
 .../components/app/chat/ChatMessages/ChatMessages.svelte   | 5 +++--
 .../lib/components/app/chat/ChatScreen/ChatScreen.svelte   | 7 ++++---
 .../app/chat/ChatScreen/ChatScreenProcessingInfo.svelte    | 7 ++++---
 3 files changed, 11 insertions(+), 8 deletions(-)

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 81c587bbb6..0362ca641d 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
@@ -18,6 +18,7 @@
 
 	let allConversationMessages = $state<DatabaseMessage[]>([]);
 	const currentConfig = config();
+	let widthClasses = $derived(chatWidthClasses());
 
 	setChatActionsContext({
 		copy: async (message: DatabaseMessage) => {
@@ -144,8 +145,8 @@
 <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 {chatWidthClasses().class}"
-			style={chatWidthClasses().style}
+			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 d697430e5e..1cd6ac133e 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
@@ -78,6 +78,7 @@
 	let activeErrorDialog = $derived(errorDialog());
 	let isServerLoading = $derived(serverLoading());
 	let hasPropsError = $derived(!!serverError());
+	let widthClasses = $derived(chatWidthClasses());
 
 	let isCurrentConversationLoading = $derived(isLoading() || isChatStreaming());
 
@@ -377,8 +378,8 @@
 
 			{#if hasPropsError}
 				<div
-					class="pointer-events-auto mx-auto mb-4 {chatWidthClasses().class} px-1"
-					style={chatWidthClasses().style}
+					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">
@@ -428,7 +429,7 @@
 		ondrop={handleDrop}
 		role="main"
 	>
-		<div class="w-full {chatWidthClasses().class} px-4" style={chatWidthClasses().style}>
+		<div class="w-full {widthClasses.class} px-4" style={widthClasses.style}>
 			<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/ChatScreenProcessingInfo.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte
index e34eeef491..f2d631ab2e 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
@@ -8,7 +8,8 @@
 	import { chatWidthClasses } from '$lib/stores/chat.svelte';
 
 	const processingState = useProcessingState();
-
+    
+	let widthClasses = $derived(chatWidthClasses());
 	let isCurrentConversationLoading = $derived(isLoading());
 	let isStreaming = $derived(isChatStreaming());
 	let hasProcessingData = $derived(processingState.processingState !== null);
@@ -63,8 +64,8 @@
 
 <div class="chat-processing-info-container pointer-events-none" class:visible={showProcessingInfo}>
 	<div
-		class="chat-processing-info-content {chatWidthClasses().class}"
-		style={chatWidthClasses().style}
+		class="chat-processing-info-content {widthClasses.class}"
+		style={widthClasses.style}
 	>
 		{#each processingDetails as detail (detail)}
 			<span class="chat-processing-info-detail pointer-events-auto backdrop-blur-sm">{detail}</span>