blob: 447bb298f7ad9a16e8dff25feabf3afa622f682f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<script lang="ts">
import type { ChatMessage } from "../types.js";
import ToolCallDisplay from "./ToolCallDisplay.svelte";
const { message }: { message: ChatMessage } = $props();
const isUser = $derived(message.role === "user");
</script>
<div class="chat {isUser ? 'chat-end' : 'chat-start'} mb-2">
<div class="chat-bubble {isUser ? 'chat-bubble-primary' : 'chat-bubble-secondary'} max-w-[80%] break-words">
{#if message.content}
<span>{message.content}</span>
{/if}
{#if message.isStreaming}
<span class="inline-block w-2 h-4 bg-current animate-pulse ml-0.5 align-middle">▌</span>
{/if}
{#if message.toolCalls && message.toolCalls.length > 0}
<div class="mt-2">
{#each message.toolCalls as toolCall (toolCall.id)}
<ToolCallDisplay {toolCall} />
{/each}
</div>
{/if}
</div>
</div>
|
