open-webui/src/lib/components/chat/Overview/Node.svelte

44 lines
1.5 KiB
Svelte
Raw Normal View History

2024-09-17 20:05:19 +00:00
<script lang="ts">
import { WEBUI_BASE_URL } from '$lib/constants';
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
import ProfileImageBase from '../Messages/ProfileImageBase.svelte';
2024-09-18 00:55:25 +00:00
import Tooltip from '$lib/components/common/Tooltip.svelte';
2024-09-17 20:05:19 +00:00
type $$Props = NodeProps;
export let data: $$Props['data'];
</script>
<div
class="px-4 py-3 shadow-md rounded-xl dark:bg-black bg-white border dark:border-gray-900 w-60 h-20"
>
2024-09-18 00:55:25 +00:00
<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>
2024-09-17 20:05:19 +00:00
</div>
2024-09-18 00:55:25 +00:00
{:else}
<div class="flex w-full">
<ProfileImageBase
src={data?.model?.info?.meta?.profile_image_url ?? ''}
className={'size-5 -translate-y-[1px]'}
/>
2024-09-17 20:05:19 +00:00
2024-09-18 00:55:25 +00:00
<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>
2024-09-17 20:05:19 +00:00
</div>
2024-09-18 00:55:25 +00:00
{/if}
</Tooltip>
2024-09-17 20:05:19 +00:00
<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>