From 1711cdceeeeaef461700da137bdc5f9931102868 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 14 Oct 2026 17:04:46 +0400
Subject: [PATCH] refac

---
 src/lib/components/chat/FileNav/FileCompare.svelte    |  9 ++++-----
 .../chat/FileNav/FileComparisonModal.svelte           | 11 ++++++-----
 src/lib/components/common/DiffEditorModal.svelte      | 11 ++++++-----
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/chat/FileNav/FileCompare.svelte b/src/lib/components/chat/FileNav/FileCompare.svelte
index b728789ffc..252e33b324 100644
--- a/src/lib/components/chat/FileNav/FileCompare.svelte
+++ b/src/lib/components/chat/FileNav/FileCompare.svelte
@@ -208,11 +208,10 @@
 		>
 	</div>
 	<div class="grid shrink-0 grid-cols-2 border-b border-black/5 dark:border-white/5">
-		{#each [{ label: $i18n.t('Original'), path: original }, { label: $i18n.t('Revised'), path: revised }] as file}
-			<div class="min-w-0 px-3 py-2" title={file.path}>
-				
-				<div class="truncate font-normal text-gray-700 dark:text-gray-300">{name(file.path)}</div>
-			</div>
+		{#each [original, revised] as path}
+			<Tooltip content={path} allowHTML={false} className="min-w-0 px-3 py-2">
+				<div class="truncate font-normal text-gray-700 dark:text-gray-300">{name(path)}</div>
+			</Tooltip>
 		{/each}
 	</div>
 	{#if loading}
diff --git a/src/lib/components/chat/FileNav/FileComparisonModal.svelte b/src/lib/components/chat/FileNav/FileComparisonModal.svelte
index 7b85b4c37c..f998617401 100644
--- a/src/lib/components/chat/FileNav/FileComparisonModal.svelte
+++ b/src/lib/components/chat/FileNav/FileComparisonModal.svelte
@@ -3,6 +3,7 @@
 	import { readComparisonSource } from '$lib/apis/terminal';
 	import DiffEditorModal from '$lib/components/common/DiffEditorModal.svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import FileCompare from './FileCompare.svelte';
@@ -152,13 +153,13 @@
 					</header>
 					<div class="grid grid-cols-2 gap-4 px-4 py-2">
 						{#each sourceFiles as file}
-							<div
-								class="min-w-0 rounded-lg bg-gray-50/70 px-3 py-2 text-gray-500 dark:bg-white/[0.03]"
-								title={file.path}
+							<Tooltip
+								content={file.path}
+								allowHTML={false}
+								className="min-w-0 rounded-lg bg-gray-50/70 px-3 py-2 text-gray-500 dark:bg-white/[0.03]"
 							>
 								<p class="truncate font-medium">{file.name}</p>
-								
-							</div>
+							</Tooltip>
 						{/each}
 					</div>
 					{#if loading}
diff --git a/src/lib/components/common/DiffEditorModal.svelte b/src/lib/components/common/DiffEditorModal.svelte
index e901d977e1..afe6b4fec7 100644
--- a/src/lib/components/common/DiffEditorModal.svelte
+++ b/src/lib/components/common/DiffEditorModal.svelte
@@ -11,6 +11,7 @@
 	import { oneDark } from '@codemirror/theme-one-dark';
 	import type { MergeView } from '@codemirror/merge';
 	import Modal from './Modal.svelte';
+	import Tooltip from './Tooltip.svelte';
 	import ConfirmDialog from './ConfirmDialog.svelte';
 	import FileCodeEditor from '$lib/components/chat/FileNav/FileCodeEditor.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
@@ -404,8 +405,9 @@
 		<div class="diff-editor flex h-full min-h-0 flex-col text-xs" on:keydown|capture={preventSave}>
 			<header class="flex shrink-0 flex-wrap items-center gap-3 px-5 pt-4 pb-2">
 				<div class="min-w-0 flex-1">
-					<h2 class="font-medium" title={session.path ?? undefined}>{session.title || $i18n.t('Compare revision')}</h2>
-					
+					<Tooltip content={session.path ?? ''} allowHTML={false} className="min-w-0">
+						<h2 class="truncate font-medium">{session.title || $i18n.t('Compare revision')}</h2>
+					</Tooltip>
 				</div>
 				{#if !comparing && session.mode === 'edit'}
 					<button type="button" class="primary" on:click={() => (comparing = true)}
@@ -506,13 +508,12 @@
 									<div
 										class="pane-header flex min-w-0 items-center gap-2 rounded-lg bg-gray-50/70 px-3 py-2 text-gray-500 dark:bg-white/[0.03]"
 									>
-										<div class="min-w-0" title={file?.path}>
+										<Tooltip content={file?.path ?? ''} allowHTML={false} className="min-w-0">
 											<span class="block truncate font-medium"
 												>{file?.name ??
 													(side === 'a' ? $i18n.t('Original') : $i18n.t('Proposed revision'))}</span
 											>
-
-										</div>
+										</Tooltip>
 										{#if comparing && !loading}
 											<span
 												class="whitespace-nowrap"