PicoBot/webui/src/lib/ToolCallCard.svelte

33 lines
1.1 KiB
Svelte

<script>
import Markdown from "./Markdown.svelte";
let { call, result = null } = $props();
let open = $state(false);
const argumentsText = $derived.by(() => {
try {
return JSON.stringify(call?.arguments ?? {}, null, 2);
} catch {
return String(call?.arguments ?? "");
}
});
</script>
<article class:open class="tool-call">
<button type="button" class="tool-call-summary" onclick={() => open = !open} aria-expanded={open}>
<span class="tool-call-icon" aria-hidden="true"></span>
<span class="tool-call-title"><small>工具调用</small><strong>{call?.name || result?.tool_name || "未知工具"}</strong></span>
<span class="tool-call-status">{result ? "已完成" : "已调用"}</span>
<span class="tool-call-chevron" aria-hidden="true"></span>
</button>
{#if open}
<div class="tool-call-details">
<div><span>参数</span><pre>{argumentsText}</pre></div>
{#if result}
<div><span>结果</span><div class="tool-result"><Markdown content={result.content || "无返回内容"} /></div></div>
{/if}
</div>
{/if}
</article>