From e769f9ff4f9fa7b0faebdd4f34ff98fe0dcc300d Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 23 Jul 2026 17:53:13 -0400
Subject: [PATCH] refac

---
 src/lib/components/chat/Messages.svelte       |  2 +-
 .../chat/Messages/ResponseMessage.svelte      | 62 +++++++++----------
 src/lib/components/layout/SearchModal.svelte  | 40 +++++++++---
 3 files changed, 62 insertions(+), 42 deletions(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 34f529f4e9..31bc65832c 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -89,7 +89,7 @@
 		let message = history.messages[history.currentId];
 		const visitedMessageIds = new Set();
 
-		while (message && (messagesCount !== null ? _messages.length <= messagesCount : true)) {
+		while (message && (messagesCount !== null ? _messages.length < messagesCount : true)) {
 			if (visitedMessageIds.has(message.id)) {
 				console.warn('Circular dependency detected in message history', message.id);
 				break;
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 45c7527bdc..9295ecd136 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -1074,37 +1074,6 @@
 									</button>
 								</Tooltip>
 
-								{#if message.done && !readOnly && forkHandler}
-									<Tooltip content="Fork chat" placement="bottom">
-										<button
-											aria-label="Fork chat"
-											class="{isLastMessage || ($settings?.highContrastMode ?? false)
-												? 'visible'
-												: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
-											on:click={() => {
-												forkHandler?.(message.id);
-											}}
-										>
-											<svg
-												class="w-4 h-4"
-												viewBox="0 0 24 24"
-												fill="none"
-												stroke="currentColor"
-												stroke-width="1.8"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												aria-hidden="true"
-											>
-												<path d="M4 12H9" />
-												<path d="M9 12C12.5 12 12.5 7 16 7H20" />
-												<path d="M17 4L20 7L17 10" />
-												<path d="M9 12C12.5 12 12.5 17 16 17H20" />
-												<path d="M17 14L20 17L17 20" />
-											</svg>
-										</button>
-									</Tooltip>
-								{/if}
-
 								{#if onInsertToNote && visibleResponseContent}
 									<Tooltip content={$i18n.t('Insert into note')} placement="bottom">
 										<button
@@ -1369,6 +1338,37 @@
 										</Tooltip>
 									{/if}
 
+									{#if message.done && !readOnly && forkHandler}
+										<Tooltip content="Fork chat" placement="bottom">
+											<button
+												aria-label="Fork chat"
+												class="{isLastMessage || ($settings?.highContrastMode ?? false)
+													? 'visible'
+													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+												on:click={() => {
+													forkHandler?.(message.id);
+												}}
+											>
+												<svg
+													class="w-4 h-4"
+													viewBox="0 0 24 24"
+													fill="none"
+													stroke="currentColor"
+													stroke-width="1.8"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													aria-hidden="true"
+												>
+													<path d="M4 12H9" />
+													<path d="M9 12C12.5 12 12.5 7 16 7H20" />
+													<path d="M17 4L20 7L17 10" />
+													<path d="M9 12C12.5 12 12.5 17 16 17H20" />
+													<path d="M17 14L20 17L17 20" />
+												</svg>
+											</button>
+										</Tooltip>
+									{/if}
+
 									{#if $user?.role === 'admin' || ($user?.permissions?.chat?.regenerate_response ?? true)}
 										{#if $settings?.regenerateMenu ?? true}
 											<button
diff --git a/src/lib/components/layout/SearchModal.svelte b/src/lib/components/layout/SearchModal.svelte
index 5be426dac8..b5036b5032 100644
--- a/src/lib/components/layout/SearchModal.svelte
+++ b/src/lib/components/layout/SearchModal.svelte
@@ -271,6 +271,8 @@
 	let selectedModels = [''];
 	let history = null;
 	let messages = null;
+	let messagesContainerElement: HTMLElement | null = null;
+	const messagesContainerId = 'chat-preview';
 
 	const searchFilterPrefixes = ['tag:', 'folder:', 'pinned:', 'archived:', 'shared:'];
 
@@ -311,6 +313,26 @@
 		loadChatPreview(selectedIdx);
 	}
 
+	const scrollPreviewToBottom = async () => {
+		await tick();
+		requestAnimationFrame(() => {
+			if (messagesContainerElement) {
+				messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+
+				requestAnimationFrame(() => {
+					if (messagesContainerElement) {
+						messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+					}
+				});
+			}
+		});
+		setTimeout(() => {
+			if (messagesContainerElement) {
+				messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+			}
+		}, 80);
+	};
+
 	const loadChatPreview = async (selectedIdx) => {
 		if (!chatList || chatList.length === 0 || selectedIdx === null) {
 			selectedChat = null;
@@ -336,6 +358,8 @@
 		});
 
 		if (chat) {
+			selectedChat = chat;
+
 			if (chat?.chat?.history) {
 				selectedModels =
 					(chat?.chat?.models ?? undefined) !== undefined
@@ -343,14 +367,8 @@
 						: [chat?.chat?.models ?? ''];
 
 				history = chat?.chat?.history;
-				messages = createMessagesList(chat?.chat?.history, chat?.chat?.history?.currentId);
-
-				// scroll to the bottom of the messages container
-				await tick();
-				const messagesContainerElement = document.getElementById('chat-preview');
-				if (messagesContainerElement) {
-					messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
-				}
+				messages = [];
+				await scrollPreviewToBottom();
 			} else {
 				messages = [];
 			}
@@ -853,7 +871,8 @@
 				{/if}
 			</div>
 			<div
-				id="chat-preview"
+				id={messagesContainerId}
+				bind:this={messagesContainerElement}
 				class="hidden md:flex md:flex-1 w-full overflow-y-auto h-96 md:h-[40rem] scrollbar-hidden @container"
 			>
 				{#if messages === null}
@@ -871,8 +890,9 @@
 							readOnly={true}
 							{selectedModels}
 							bind:history
-							bind:messages
 							autoScroll={true}
+							{messagesContainerId}
+							messagesCount={8}
 							sendMessage={() => {}}
 							continueResponse={() => {}}
 							regenerateResponse={() => {}}