feat: add a user setting to toggle sidebar chat hover previews (#27632)

Co-authored-by: Tim Baek <tim@openwebui.com>

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}>

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

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)": "",

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;