<script>
  import Markdown from "./Markdown.svelte";
  import Icon from "./Icon.svelte";

  let { turn } = $props();

  function phaseLabel(value) {
    return ({ queued: "排队中", reasoning: "思考中", responding: "生成中", acting: "调用工具中", finalizing: "收尾中" })[value] || value;
  }

  function statusLabel(value) {
    return ({ running: phaseLabel(turn.phase), completed: "已完成", cancelled: "已停止", failed: "失败" })[value] || value;
  }

  function toolStatus(value) {
    return ({ running: "执行中", completed: "已完成", cancelled: "已停止", failed: "失败" })[value] || value;
  }
</script>

<div class="message assistant active-turn">
  <div class="avatar"><Icon name="bot" size={15} /></div>
  <div class="message-content">
    {#each turn.blocks as block (block.id)}
      {#if block.type === "reasoning"}
        <details class="reasoning-block">
          <summary><span class="pulse"></span>思考过程</summary>
          <div class="reasoning-content"><Markdown content={block.text} /></div>
        </details>
      {:else if block.type === "assistant"}
        <div class="bubble streaming"><Markdown content={block.text} /></div>
      {:else if block.type === "tool"}
        <details class="live-tool">
          <summary><span>⌘</span><strong>{block.name}</strong><small>{toolStatus(block.status)}</small></summary>
          <div class="live-tool-details">
            {#if block.arguments !== null}<pre>{JSON.stringify(block.arguments, null, 2)}</pre>{/if}
            {#if block.preview}<div class="tool-result"><Markdown content={block.preview} /></div>{/if}
          </div>
        </details>
      {/if}
    {/each}
    <div class:failed={turn.status === "failed"} class="turn-status">
      {#if turn.status === "running"}<span class="pulse"></span>{/if}{statusLabel(turn.status)}
    </div>
    {#if turn.error}<div class="turn-error">{turn.error}</div>{/if}
  </div>
</div>
