<script>
  import Markdown from "./Markdown.svelte";
  import Icon from "./Icon.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"><Icon name="more" size={16} /></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"><Icon name="chevron-down" size={14} /></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>
