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

---
 src/lib/components/chat/Messages.svelte         |  4 ++--
 .../chat/Messages/ContentRenderer.svelte        |  5 ++++-
 .../components/chat/Messages/Markdown.svelte    |  2 ++
 .../Markdown/ConsecutiveDetailsGroup.svelte     |  4 ++--
 .../Messages/Markdown/MarkdownTokens.svelte     | 11 +++++++++--
 src/lib/components/chat/Messages/Message.svelte |  8 ++++----
 .../chat/Messages/MultiResponseMessages.svelte  | 12 ++++++------
 .../chat/Messages/ResponseMessage.svelte        |  9 +++++----
 .../Messages/StructuredOutputRenderer.svelte    |  8 ++++++--
 .../components/chat/Messages/UserMessage.svelte | 17 +++++++++--------
 .../layout/Sidebar/ChatHoverPreview.svelte      |  2 +-
 11 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 740a8981fd..34f529f4e9 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -43,7 +43,7 @@
 	export let forkHandler: Function | null = null;
 
 	export let readOnly = false;
-	export let preview = false;
+	export let compactPreview = false;
 	export let editCodeBlock = true;
 
 	export let topPadding = false;
@@ -557,7 +557,7 @@
 								{forkHandler}
 								{triggerScroll}
 								{readOnly}
-								{preview}
+								{compactPreview}
 								{editCodeBlock}
 								{topPadding}
 								{onInsertToNote}
diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
index a6d3650cfb..e7c0916c7e 100644
--- a/src/lib/components/chat/Messages/ContentRenderer.svelte
+++ b/src/lib/components/chat/Messages/ContentRenderer.svelte
@@ -83,6 +83,7 @@
 
 	export let save = false;
 	export let preview = false;
+	export let compactPreview = false;
 	export let floatingButtons = true;
 
 	export let editCodeBlock = true;
@@ -270,6 +271,7 @@
 			{model}
 			{save}
 			{preview}
+			{compactPreview}
 			{done}
 			{editCodeBlock}
 			{topPadding}
@@ -290,6 +292,7 @@
 				{model}
 				{save}
 				{preview}
+				{compactPreview}
 				{done}
 				{editCodeBlock}
 				{topPadding}
@@ -307,7 +310,7 @@
 		{#if extracted.detailsContent}
 			<!-- Render structural blocks (tool calls, reasoning, etc.) through Markdown -->
 			<div class="markdown-prose">
-				<Markdown {id} content={extracted.detailsContent} {preview} {done} />
+				<Markdown {id} content={extracted.detailsContent} {preview} {compactPreview} {done} />
 			</div>
 		{/if}
 		{#if extracted.plainContent}
diff --git a/src/lib/components/chat/Messages/Markdown.svelte b/src/lib/components/chat/Messages/Markdown.svelte
index 96b22a4238..b3bac964d5 100644
--- a/src/lib/components/chat/Messages/Markdown.svelte
+++ b/src/lib/components/chat/Messages/Markdown.svelte
@@ -41,6 +41,7 @@
 	export let model = null;
 	export let save = false;
 	export let preview = false;
+	export let compactPreview = false;
 
 	export let paragraphTag = 'p';
 	export let editCodeBlock = true;
@@ -103,6 +104,7 @@
 		{done}
 		{save}
 		{preview}
+		{compactPreview}
 		{paragraphTag}
 		{editCodeBlock}
 		{sourceIds}
diff --git a/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte b/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
index c9119a8687..ebfd833bb1 100644
--- a/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
+++ b/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
@@ -31,7 +31,7 @@
 
 	export let messageDone = true;
 	export let allowEmbeds = true;
-	export let preview = false;
+	export let compactPreview = false;
 
 	let open = $settings?.expandDetails ?? false;
 
@@ -113,7 +113,7 @@
 <div {id} class="w-full">
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<button
-		class="w-fit py-0.5 text-left {preview
+		class="w-fit py-0.5 text-left {compactPreview
 			? 'text-xs'
 			: 'text-[0.9375rem]'} text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition cursor-pointer"
 		aria-label={$i18n.t('Toggle details')}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index 9f391c3e7c..ad2035cc56 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -36,6 +36,7 @@
 
 	export let save = false;
 	export let preview = false;
+	export let compactPreview = false;
 
 	export let paragraphTag = 'p';
 
@@ -98,7 +99,7 @@
 	};
 
 	$: detailButtonClassName = `w-fit py-0.5 ${
-		preview ? 'text-xs' : 'text-[0.9375rem]'
+		compactPreview ? 'text-xs' : 'text-[0.9375rem]'
 	} text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition`;
 
 	$: displayTokens = getDisplayTokens(tokens);
@@ -283,6 +284,7 @@
 					tokens={token.tokens}
 					{done}
 					{preview}
+					{compactPreview}
 					{editCodeBlock}
 					{onTaskClick}
 					{sourceIds}
@@ -319,6 +321,7 @@
 							top={token.loose}
 							{done}
 							{preview}
+							{compactPreview}
 							{editCodeBlock}
 							{onTaskClick}
 							{sourceIds}
@@ -355,6 +358,7 @@
 									top={token.loose}
 									{done}
 									{preview}
+									{compactPreview}
 									{editCodeBlock}
 									{onTaskClick}
 									{sourceIds}
@@ -368,6 +372,7 @@
 								top={token.loose}
 								{done}
 								{preview}
+								{compactPreview}
 								{editCodeBlock}
 								{onTaskClick}
 								{sourceIds}
@@ -383,7 +388,7 @@
 			id={`${id}-${tokenIdx}-detail-group`}
 			tokens={token.items}
 			messageDone={done}
-			{preview}
+			{compactPreview}
 			{allowEmbeds}
 		>
 			<div slot="content">
@@ -417,6 +422,7 @@
 									attributes={detailToken?.attributes}
 									{done}
 									{preview}
+									{compactPreview}
 									{editCodeBlock}
 									{onTaskClick}
 									{sourceIds}
@@ -469,6 +475,7 @@
 						attributes={token?.attributes}
 						{done}
 						{preview}
+						{compactPreview}
 						{editCodeBlock}
 						{onTaskClick}
 						{sourceIds}
diff --git a/src/lib/components/chat/Messages/Message.svelte b/src/lib/components/chat/Messages/Message.svelte
index f7839bea8c..09700aabad 100644
--- a/src/lib/components/chat/Messages/Message.svelte
+++ b/src/lib/components/chat/Messages/Message.svelte
@@ -42,7 +42,7 @@
 	export let forkHandler: Function | null = null;
 	export let triggerScroll;
 	export let readOnly = false;
-	export let preview = false;
+	export let compactPreview = false;
 	export let editCodeBlock = true;
 	export let topPadding = false;
 	export let onInsertToNote: ((content: string) => void) | null = null;
@@ -73,7 +73,7 @@
 				{editMessage}
 				{deleteMessage}
 				{readOnly}
-				{preview}
+				{compactPreview}
 				{editCodeBlock}
 				{topPadding}
 				{onInsertToNote}
@@ -102,7 +102,7 @@
 				{addMessages}
 				{forkHandler}
 				{readOnly}
-				{preview}
+				{compactPreview}
 				{editCodeBlock}
 				{topPadding}
 			/>
@@ -129,7 +129,7 @@
 					{addMessages}
 					{forkHandler}
 					{readOnly}
-					{preview}
+					{compactPreview}
 					{editCodeBlock}
 					{topPadding}
 					{onInsertToNote}
diff --git a/src/lib/components/chat/Messages/MultiResponseMessages.svelte b/src/lib/components/chat/Messages/MultiResponseMessages.svelte
index a2ce3f0f2f..acd35fff86 100644
--- a/src/lib/components/chat/Messages/MultiResponseMessages.svelte
+++ b/src/lib/components/chat/Messages/MultiResponseMessages.svelte
@@ -28,7 +28,7 @@
 
 	export let isLastMessage;
 	export let readOnly = false;
-	export let preview = false;
+	export let compactPreview = false;
 	export let editCodeBlock = true;
 
 	export let setInputText: Function = () => {};
@@ -253,7 +253,7 @@
 			{#if $settings?.displayMultiModelResponsesInTabs ?? false}
 				<div class="w-full">
 					<div
-						class=" flex w-full mb-4.5 border-b border-gray-200 dark:border-gray-850 {preview
+						class=" flex w-full mb-4.5 border-b border-gray-200 dark:border-gray-850 {compactPreview
 							? 'hidden'
 							: ''}"
 					>
@@ -327,7 +327,7 @@
 									{addMessages}
 									{forkHandler}
 									{readOnly}
-									{preview}
+									{compactPreview}
 									{topPadding}
 									{onInsertToNote}
 								/>
@@ -344,7 +344,7 @@
 							groupedMessageIds[modelIdx].messageIds[groupedMessageIdsIdx[modelIdx]]}
 
 						<div
-							class="snap-center w-full max-w-full transition-all {preview
+							class="snap-center w-full max-w-full transition-all {compactPreview
 								? ''
 								: `m-1 border p-5 rounded-2xl ${
 										history.messages[messageId]?.modelIdx == modelIdx
@@ -389,7 +389,7 @@
 										{addMessages}
 										{forkHandler}
 										{readOnly}
-										{preview}
+										{compactPreview}
 										{editCodeBlock}
 										{topPadding}
 										{onInsertToNote}
@@ -402,7 +402,7 @@
 			{/if}
 		</div>
 
-		{#if !preview && !readOnly}
+		{#if !compactPreview && !readOnly}
 			{#if !Object.keys(groupedMessageIds).find((modelIdx) => {
 				const { messageIds } = groupedMessageIds[modelIdx];
 				const _messageId = messageIds[groupedMessageIdsIdx[modelIdx]];
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 33bf324f81..45c7527bdc 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -165,7 +165,7 @@
 
 	export let isLastMessage = true;
 	export let readOnly = false;
-	export let preview = false;
+	export let compactPreview = false;
 	export let editCodeBlock = true;
 	export let topPadding = false;
 	export let onInsertToNote: ((content: string) => void) | null = null;
@@ -666,7 +666,7 @@
 		</div>
 
 		<div class="flex-auto w-0 pl-1 relative">
-			{#if !preview}
+			{#if !compactPreview}
 				<Name>
 					<Tooltip content={model?.name ?? message.model} placement="top-start">
 						<span id="response-message-model-name" class="line-clamp-1 text-black dark:text-white">
@@ -825,7 +825,8 @@
 										!readOnly &&
 										($settings?.showFloatingActionButtons ?? true)}
 									save={!readOnly}
-									preview={preview || !readOnly}
+									preview={!readOnly}
+									{compactPreview}
 									{editCodeBlock}
 									{topPadding}
 									done={($settings?.chatFadeStreamingText ?? true)
@@ -894,7 +895,7 @@
 					</div>
 				</div>
 
-				{#if preview && message.timestamp}
+				{#if compactPreview && message.timestamp}
 					<div class="mt-0.5 flex justify-start whitespace-nowrap text-gray-600 dark:text-gray-500">
 						<Tooltip
 							className="flex self-center"
diff --git a/src/lib/components/chat/Messages/StructuredOutputRenderer.svelte b/src/lib/components/chat/Messages/StructuredOutputRenderer.svelte
index a39e8dcbdb..46a2b6b533 100644
--- a/src/lib/components/chat/Messages/StructuredOutputRenderer.svelte
+++ b/src/lib/components/chat/Messages/StructuredOutputRenderer.svelte
@@ -18,6 +18,7 @@
 	export let model = null;
 	export let save = false;
 	export let preview = false;
+	export let compactPreview = false;
 	export let renderMarkdown = true;
 	export let editCodeBlock = true;
 	export let topPadding = false;
@@ -33,7 +34,7 @@
 	const getDetailAttributes = (detailToken: OutputDetailToken): any => detailToken.attributes;
 
 	$: detailButtonClassName = `w-fit py-0.5 ${
-		preview ? 'text-xs' : 'text-[0.9375rem]'
+		compactPreview ? 'text-xs' : 'text-[0.9375rem]'
 	} text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition`;
 
 	$: displayItems = buildOutputDisplayItems(output) as OutputDisplayItem[];
@@ -49,6 +50,7 @@
 					{model}
 					{save}
 					{preview}
+					{compactPreview}
 					{done}
 					{editCodeBlock}
 					{topPadding}
@@ -68,7 +70,7 @@
 			id={`${id}-${displayItem.id}`}
 			tokens={displayItem.tokens}
 			messageDone={done}
-			{preview}
+			{compactPreview}
 		>
 			<div slot="content">
 				{#each displayItem.tokens as detailToken, detailIndex}
@@ -98,6 +100,7 @@
 										content={detailToken.text}
 										{done}
 										{preview}
+										{compactPreview}
 										{editCodeBlock}
 									/>
 								</div>
@@ -144,6 +147,7 @@
 							content={detailToken.text}
 							{done}
 							{preview}
+							{compactPreview}
 							{editCodeBlock}
 						/>
 					</div>
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 21cb2f44b2..3becea4590 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -39,7 +39,7 @@
 
 	export let isFirstMessage: boolean;
 	export let readOnly: boolean;
-	export let preview = false;
+	export let compactPreview = false;
 	export let editCodeBlock = true;
 	export let topPadding = false;
 
@@ -416,8 +416,9 @@
 						>
 							<time
 								datetime={new Date(message.timestamp * 1000).toISOString()}
-								class="{preview ? '' : 'invisible group-hover:visible'} {($settings?.chatBubble ??
-								true)
+								class="{compactPreview
+									? ''
+									: 'invisible group-hover:visible'} {($settings?.chatBubble ?? true)
 									? 'mr-1'
 									: 'ml-1 shrink-0 whitespace-nowrap'} text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
 							>
@@ -426,7 +427,7 @@
 						</Tooltip>
 					{/if}
 
-					{#if !preview && !($settings?.chatBubble ?? true)}
+					{#if !compactPreview && !($settings?.chatBubble ?? true)}
 						{#if siblings.length > 1}
 							<div class="flex self-center" dir="ltr">
 								<button
@@ -520,7 +521,7 @@
 							</div>
 						{/if}
 					{/if}
-					{#if !preview && !readOnly}
+					{#if !compactPreview && !readOnly}
 						<Tooltip content={$i18n.t('Edit')} placement="bottom">
 							<button
 								class="{($settings?.highContrastMode ?? false)
@@ -548,7 +549,7 @@
 						</Tooltip>
 					{/if}
 
-					{#if !preview && message?.content}
+					{#if !compactPreview && message?.content}
 						<Tooltip content={$i18n.t('Copy')} placement="bottom">
 							<button
 								class="{($settings?.highContrastMode ?? false)
@@ -577,7 +578,7 @@
 					{/if}
 
 					{#if $_user?.role === 'admin' || ($_user?.permissions?.chat?.delete_message ?? false)}
-						{#if !preview && !readOnly && (!isFirstMessage || siblings.length > 1)}
+						{#if !compactPreview && !readOnly && (!isFirstMessage || siblings.length > 1)}
 							<Tooltip content={$i18n.t('Delete')} placement="bottom">
 								<button
 									class="{($settings?.highContrastMode ?? false)
@@ -610,7 +611,7 @@
 						{/if}
 					{/if}
 
-					{#if !preview && ($settings?.chatBubble ?? true)}
+					{#if !compactPreview && ($settings?.chatBubble ?? true)}
 						{#if siblings.length > 1}
 							<div class="flex self-center" dir="ltr">
 								<button
diff --git a/src/lib/components/layout/Sidebar/ChatHoverPreview.svelte b/src/lib/components/layout/Sidebar/ChatHoverPreview.svelte
index e4f964b654..84836eb7e9 100644
--- a/src/lib/components/layout/Sidebar/ChatHoverPreview.svelte
+++ b/src/lib/components/layout/Sidebar/ChatHoverPreview.svelte
@@ -128,7 +128,7 @@
 						user={$user}
 						prompt=""
 						readOnly={true}
-						preview={true}
+						compactPreview={true}
 						{selectedModels}
 						atSelectedModel={null}
 						{history}