enh: node show content as tooltip

This commit is contained in:
Timothy J. Baek 2024-09-18 02:55:25 +02:00
parent 1ccac9111b
commit 8d92093570
2 changed files with 25 additions and 22 deletions

View File

@ -85,7 +85,7 @@
export let updateChatMessages: Function; export let updateChatMessages: Function;
export let confirmEditResponseMessage: Function; export let confirmEditResponseMessage: Function;
export let saveNewResponseMessage: Function; export let saveNewResponseMessage: Function = () => {};
export let showPreviousMessage: Function; export let showPreviousMessage: Function;
export let showNextMessage: Function; export let showNextMessage: Function;

View File

@ -3,6 +3,7 @@
import { Handle, Position, type NodeProps } from '@xyflow/svelte'; import { Handle, Position, type NodeProps } from '@xyflow/svelte';
import ProfileImageBase from '../Messages/ProfileImageBase.svelte'; import ProfileImageBase from '../Messages/ProfileImageBase.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
type $$Props = NodeProps; type $$Props = NodeProps;
export let data: $$Props['data']; export let data: $$Props['data'];
@ -11,30 +12,32 @@
<div <div
class="px-4 py-3 shadow-md rounded-xl dark:bg-black bg-white border dark:border-gray-900 w-60 h-20" 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'} <Tooltip content={data.message.content} class="w-full">
<div class="flex w-full"> {#if data.message.role === 'user'}
<ProfileImageBase <div class="flex w-full">
src={data.user?.profile_image_url ?? '/user.png'} <ProfileImageBase
className={'size-5 -translate-y-[1px]'} 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="ml-2">
<div class="text-gray-500 line-clamp-2 text-xs mt-0.5">{data.message.content}</div> <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>
</div> {:else}
{:else} <div class="flex w-full">
<div class="flex w-full"> <ProfileImageBase
<ProfileImageBase src={data?.model?.info?.meta?.profile_image_url ?? ''}
src={data?.model?.info?.meta?.profile_image_url ?? ''} className={'size-5 -translate-y-[1px]'}
className={'size-5 -translate-y-[1px]'} />
/>
<div class="ml-2"> <div class="ml-2">
<div class="text-xs text-black dark:text-white font-medium">{data.model.name}</div> <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="text-gray-500 line-clamp-2 text-xs mt-0.5">{data.message.content}</div>
</div>
</div> </div>
</div> {/if}
{/if} </Tooltip>
<Handle type="target" position={Position.Top} class="w-2 rounded-full dark:bg-gray-900" /> <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" /> <Handle type="source" position={Position.Bottom} class="w-2 rounded-full dark:bg-gray-900" />
</div> </div>