From 085f1b5ca45b109ae1d2a494b96b8f71cd369322 Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Tue, 11 Aug 2026 01:29:51 -0400
Subject: [PATCH] feat: add a user setting to toggle sidebar chat hover
 previews (#27632)

Co-authored-by: Tim Baek <tim@openwebui.com>
---
 .../common/InterfaceSettings.svelte           | 27 +++++++++++++++++++
 .../components/layout/Sidebar/ChatItem.svelte |  2 +-
 src/lib/i18n/locales/en-US/translation.json   |  2 ++
 src/lib/stores/index.ts                       |  1 +
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/common/InterfaceSettings.svelte b/src/lib/components/common/InterfaceSettings.svelte
index 82ed752ce2..51a16fb433 100644
--- a/src/lib/components/common/InterfaceSettings.svelte
+++ b/src/lib/components/common/InterfaceSettings.svelte
@@ -74,6 +74,7 @@
 	let renderMarkdownInUserMessages = true;
 	let renderMarkdownInAssistantMessages = true;
 	let expandDetails = false;
+	let chatHoverPreview = true;
 	let renderMarkdownInPreviews = true;
 	let showChatTitleInTab = true;
 
@@ -287,6 +288,7 @@
 		renderMarkdownInUserMessages = currentSettings?.renderMarkdownInUserMessages ?? true;
 		renderMarkdownInAssistantMessages = currentSettings?.renderMarkdownInAssistantMessages ?? true;
 		expandDetails = currentSettings?.expandDetails ?? false;
+		chatHoverPreview = currentSettings?.chatHoverPreview ?? true;
 		renderMarkdownInPreviews = currentSettings?.renderMarkdownInPreviews ?? true;
 
 		landingPageMode = currentSettings?.landingPageMode ?? '';
@@ -1155,6 +1157,31 @@
 				</p>
 			</div>
 
+			<div>
+				<div class={settingRowClass}>
+					<div id="chat-hover-preview-label" class={settingLabelClass}>
+						{$i18n.t('Chat Hover Previews')}
+					</div>
+
+					<div class={settingControlClass}>
+						<Switch
+							ariaLabelledbyId="chat-hover-preview-label"
+							tooltip={true}
+							bind:state={chatHoverPreview}
+							inherited={isDefaultSetting('chatHoverPreview')}
+							on:change={() => {
+								saveSettings({ chatHoverPreview });
+							}}
+						/>
+					</div>
+				</div>
+				<p class={settingDescriptionClass}>
+					{$i18n.t(
+						'Show a floating preview of recent messages when hovering a chat in the sidebar.'
+					)}
+				</p>
+			</div>
+
 			<div>
 				<div class={settingRowClass}>
 					<div id="render-markdown-in-previews-label" class={settingLabelClass}>
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 9d3fc269e1..d35adba28b 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -637,7 +637,7 @@
 		<LinkPreview.Root
 			openDelay={300}
 			closeDelay={0}
-			disabled={confirmEdit || dragged}
+			disabled={confirmEdit || dragged || !($settings?.chatHoverPreview ?? true)}
 			bind:open={openPreview}
 		>
 			<LinkPreview.Trigger
diff --git a/src/lib/i18n/locales/en-US/translation.json b/src/lib/i18n/locales/en-US/translation.json
index 8764964f6d..a01be4d9f3 100644
--- a/src/lib/i18n/locales/en-US/translation.json
+++ b/src/lib/i18n/locales/en-US/translation.json
@@ -428,6 +428,7 @@
 	"Chat forked": "",
 	"Chat history": "",
 	"Chat History": "",
+	"Chat Hover Previews": "",
 	"Chat ID": "",
 	"Chat is too short to compact": "",
 	"Chat moved successfully": "",
@@ -2450,6 +2451,7 @@
 	"Sharing Permissions": "",
 	"Show": "",
 	"Show \"What's New\" Modal on Login": "",
+	"Show a floating preview of recent messages when hovering a chat in the sidebar.": "",
 	"Show admin contact details while an account waits for approval.": "",
 	"Show All": "",
 	"Show all ({{COUNT}} characters)": "",
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 89e76903e8..abbd2c556d 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -253,6 +253,7 @@ type Settings = {
 	chatDirection?: 'LTR' | 'RTL' | 'auto';
 	ctrlEnterToSend?: boolean;
 	keyboardShortcuts?: boolean;
+	chatHoverPreview?: boolean;
 	renderMarkdownInPreviews?: boolean;
 	renderMarkdownInUserMessages?: boolean;
 	renderMarkdownInAssistantMessages?: boolean;