From 8d920935706aeaf56cc9ca4aa04ae014a4a1d3c4 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 18 Sep 2024 02:55:25 +0200
Subject: [PATCH] enh: node show content as tooltip

---
 .../chat/Messages/ResponseMessage.svelte      |  2 +-
 src/lib/components/chat/Overview/Node.svelte  | 45 ++++++++++---------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 79c507a5a..211922761 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -85,7 +85,7 @@
 
 	export let updateChatMessages: Function;
 	export let confirmEditResponseMessage: Function;
-	export let saveNewResponseMessage: Function;
+	export let saveNewResponseMessage: Function = () => {};
 
 	export let showPreviousMessage: Function;
 	export let showNextMessage: Function;
diff --git a/src/lib/components/chat/Overview/Node.svelte b/src/lib/components/chat/Overview/Node.svelte
index e159ad92c..906c572a7 100644
--- a/src/lib/components/chat/Overview/Node.svelte
+++ b/src/lib/components/chat/Overview/Node.svelte
@@ -3,6 +3,7 @@
 	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
 	import ProfileImageBase from '../Messages/ProfileImageBase.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	type $$Props = NodeProps;
 	export let data: $$Props['data'];
@@ -11,30 +12,32 @@
 <div
 	class="px-4 py-3 shadow-md rounded-xl dark:bg-black bg-white border dark:border-gray-900 w-60 h-20"
 >
-	{#if data.message.role === 'user'}
-		<div class="flex w-full">
-			<ProfileImageBase
-				src={data.user?.profile_image_url ?? '/user.png'}
-				className={'size-5 -translate-y-[1px]'}
-			/>
-			<div class="ml-2">
-				<div class="text-xs text-black dark:text-white font-medium">{data.user.name}</div>
-				<div class="text-gray-500 line-clamp-2 text-xs mt-0.5">{data.message.content}</div>
+	<Tooltip content={data.message.content} class="w-full">
+		{#if data.message.role === 'user'}
+			<div class="flex w-full">
+				<ProfileImageBase
+					src={data.user?.profile_image_url ?? '/user.png'}
+					className={'size-5 -translate-y-[1px]'}
+				/>
+				<div class="ml-2">
+					<div class="text-xs text-black dark:text-white font-medium">{data.user.name}</div>
+					<div class="text-gray-500 line-clamp-2 text-xs mt-0.5">{data.message.content}</div>
+				</div>
 			</div>
-		</div>
-	{:else}
-		<div class="flex w-full">
-			<ProfileImageBase
-				src={data?.model?.info?.meta?.profile_image_url ?? ''}
-				className={'size-5 -translate-y-[1px]'}
-			/>
+		{:else}
+			<div class="flex w-full">
+				<ProfileImageBase
+					src={data?.model?.info?.meta?.profile_image_url ?? ''}
+					className={'size-5 -translate-y-[1px]'}
+				/>
 
-			<div class="ml-2">
-				<div class="text-xs text-black dark:text-white font-medium">{data.model.name}</div>
-				<div class="text-gray-500 line-clamp-2 text-xs mt-0.5">{data.message.content}</div>
+				<div class="ml-2">
+					<div class="text-xs text-black dark:text-white font-medium">{data.model.name}</div>
+					<div class="text-gray-500 line-clamp-2 text-xs mt-0.5">{data.message.content}</div>
+				</div>
 			</div>
-		</div>
-	{/if}
+		{/if}
+	</Tooltip>
 	<Handle type="target" position={Position.Top} class="w-2 rounded-full dark:bg-gray-900" />
 	<Handle type="source" position={Position.Bottom} class="w-2 rounded-full dark:bg-gray-900" />
 </div>