From 1457f2dec875ab516a8feb4c203c568dd83aac8d Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 25 Jun 2026 03:26:17 +0100
Subject: [PATCH] refac

---
 src/lib/components/chat/Chat.svelte           | 162 +++++++++---------
 src/lib/components/chat/Navbar.svelte         |   6 +-
 .../chat/Placeholder/ChatList.svelte          |   1 -
 .../chat/Placeholder/FolderPlaceholder.svelte |  14 +-
 4 files changed, 92 insertions(+), 91 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 24210547df..3e71bd95d6 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -3177,96 +3177,94 @@
 							</div>
 
 							{#if readOnly}
-							<div class="pb-6 z-10">
-								<div
-									class="text-xs text-gray-400 dark:text-gray-500 text-center"
-								>
-									{$i18n.t('Read only')}
+								<div class="pb-6 z-10">
+									<div class="text-xs text-gray-400 dark:text-gray-500 text-center">
+										{$i18n.t('Read only')}
+									</div>
 								</div>
-							</div>
-						{:else}
-						<div class=" pb-2 {dragged ? 'z-0' : 'z-10'}">
-								<MessageInput
-									bind:this={messageInput}
-									{history}
-									{taskIds}
-									{selectedModels}
-									bind:files
-									bind:prompt
-									bind:autoScroll
-									bind:selectedToolIds
-									bind:selectedSkillIds
-									bind:selectedFilterIds
-									bind:imageGenerationEnabled
-									bind:codeInterpreterEnabled
-									{pendingOAuthTools}
-									bind:webSearchEnabled
-									bind:atSelectedModel
-									bind:showCommands
-									bind:dragged
-									toolServers={$toolServers}
-									{generating}
-									{stopResponse}
-									{createMessagePair}
-									{onUpload}
-									messageQueue={$chatRequestQueues[$chatId] ?? []}
-									{chatTasks}
-									onQueueSendNow={async (id) => {
-										const queue = $chatRequestQueues[$chatId] ?? [];
-										const item = queue.find((m) => m.id === id);
-										if (item) {
-											// Remove from queue
+							{:else}
+								<div class=" pb-2 {dragged ? 'z-0' : 'z-10'}">
+									<MessageInput
+										bind:this={messageInput}
+										{history}
+										{taskIds}
+										{selectedModels}
+										bind:files
+										bind:prompt
+										bind:autoScroll
+										bind:selectedToolIds
+										bind:selectedSkillIds
+										bind:selectedFilterIds
+										bind:imageGenerationEnabled
+										bind:codeInterpreterEnabled
+										{pendingOAuthTools}
+										bind:webSearchEnabled
+										bind:atSelectedModel
+										bind:showCommands
+										bind:dragged
+										toolServers={$toolServers}
+										{generating}
+										{stopResponse}
+										{createMessagePair}
+										{onUpload}
+										messageQueue={$chatRequestQueues[$chatId] ?? []}
+										{chatTasks}
+										onQueueSendNow={async (id) => {
+											const queue = $chatRequestQueues[$chatId] ?? [];
+											const item = queue.find((m) => m.id === id);
+											if (item) {
+												// Remove from queue
+												chatRequestQueues.update((q) => ({
+													...q,
+													[$chatId]: queue.filter((m) => m.id !== id)
+												}));
+												await stopResponse(false);
+												await tick();
+												await submitPrompt(item.prompt, item.files);
+											}
+										}}
+										onQueueEdit={(id) => {
+											const queue = $chatRequestQueues[$chatId] ?? [];
+											const item = queue.find((m) => m.id === id);
+											if (item) {
+												// Remove from queue
+												chatRequestQueues.update((q) => ({
+													...q,
+													[$chatId]: queue.filter((m) => m.id !== id)
+												}));
+												// Set files and restore prompt to input
+												files = item.files;
+												messageInput?.setText(item.prompt);
+											}
+										}}
+										onQueueDelete={(id) => {
+											const queue = $chatRequestQueues[$chatId] ?? [];
 											chatRequestQueues.update((q) => ({
 												...q,
 												[$chatId]: queue.filter((m) => m.id !== id)
 											}));
-											await stopResponse(false);
-											await tick();
-											await submitPrompt(item.prompt, item.files);
-										}
-									}}
-									onQueueEdit={(id) => {
-										const queue = $chatRequestQueues[$chatId] ?? [];
-										const item = queue.find((m) => m.id === id);
-										if (item) {
-											// Remove from queue
-											chatRequestQueues.update((q) => ({
-												...q,
-												[$chatId]: queue.filter((m) => m.id !== id)
-											}));
-											// Set files and restore prompt to input
-											files = item.files;
-											messageInput?.setText(item.prompt);
-										}
-									}}
-									onQueueDelete={(id) => {
-										const queue = $chatRequestQueues[$chatId] ?? [];
-										chatRequestQueues.update((q) => ({
-											...q,
-											[$chatId]: queue.filter((m) => m.id !== id)
-										}));
-									}}
-									onChange={(data) => {
-										if (!$temporaryChatEnabled) {
-											saveDraft(data, $chatId);
-										}
-									}}
-									on:submit={async (e) => {
-										clearDraft($chatId);
-										if (e.detail || files.length > 0) {
-											await tick();
+										}}
+										onChange={(data) => {
+											if (!$temporaryChatEnabled) {
+												saveDraft(data, $chatId);
+											}
+										}}
+										on:submit={async (e) => {
+											clearDraft($chatId);
+											if (e.detail || files.length > 0) {
+												await tick();
 
-											submitHandler(e.detail);
-										}
-									}}
-								/>
+												submitHandler(e.detail);
+											}
+										}}
+									/>
 
-								<div
-									class="absolute bottom-1 text-xs text-gray-500 text-center line-clamp-1 right-0 left-0"
-								>
-									<!-- {$i18n.t('LLMs can make mistakes. Verify important information.')} -->
+									<div
+										class="absolute bottom-1 text-xs text-gray-500 text-center line-clamp-1 right-0 left-0"
+									>
+										<!-- {$i18n.t('LLMs can make mistakes. Verify important information.')} -->
+									</div>
 								</div>
-							</div>
 							{/if}
 						{:else}
 							<div class="flex items-center h-full">
diff --git a/src/lib/components/chat/Navbar.svelte b/src/lib/components/chat/Navbar.svelte
index 04cb76f704..e6a05c3c40 100644
--- a/src/lib/components/chat/Navbar.svelte
+++ b/src/lib/components/chat/Navbar.svelte
@@ -123,7 +123,11 @@
 			"
 				>
 					{#if showModelSelector}
-						<ModelSelector bind:selectedModels showSetDefault={!shareEnabled && !readOnly} disabled={readOnly} />
+						<ModelSelector
+							bind:selectedModels
+							showSetDefault={!shareEnabled && !readOnly}
+							disabled={readOnly}
+						/>
 					{/if}
 				</div>
 
diff --git a/src/lib/components/chat/Placeholder/ChatList.svelte b/src/lib/components/chat/Placeholder/ChatList.svelte
index 3dfc187089..7652b102f6 100644
--- a/src/lib/components/chat/Placeholder/ChatList.svelte
+++ b/src/lib/components/chat/Placeholder/ChatList.svelte
@@ -55,7 +55,6 @@
 	let orderBy = 'updated_at';
 	let direction = 'desc'; // 'asc' or 'desc'
 
-
 	$: if (chats) {
 		init();
 	}
diff --git a/src/lib/components/chat/Placeholder/FolderPlaceholder.svelte b/src/lib/components/chat/Placeholder/FolderPlaceholder.svelte
index 1cb8dc4c8d..52d9307873 100644
--- a/src/lib/components/chat/Placeholder/FolderPlaceholder.svelte
+++ b/src/lib/components/chat/Placeholder/FolderPlaceholder.svelte
@@ -38,18 +38,18 @@
 		if (folder && folder.id) {
 			// Always use the shared folder endpoint so owners also see
 			// chats created by users who have write access to this folder.
-			const res = await getSharedFolderChats(localStorage.token, folder.id).catch(
-				(error) => {
-					console.error(error);
-					return null;
-				}
-			);
+			const res = await getSharedFolderChats(localStorage.token, folder.id).catch((error) => {
+				console.error(error);
+				return null;
+			});
 			if (res && res.chats) {
 				chats = res.chats;
 				allChatsLoaded = true;
 			} else {
 				// Fallback to regular API (e.g. if user has no shared access)
-				const fallback = await getChatListByFolderId(localStorage.token, folder.id, page).catch(() => []);
+				const fallback = await getChatListByFolderId(localStorage.token, folder.id, page).catch(
+					() => []
+				);
 				chats = fallback || [];
 			}
 		} else {