thinking 스트림과 text 스트림을 분리해 UI에 단계적으로 노출하기

import Anthropic from "@anthropic-ai/sdk";
 
const client = new Anthropic();
 
type BlockKind = "thinking" | "text" | "redacted_thinking" | "other";
const blockKinds = new Map<number, BlockKind>();
 
export async function POST(req: Request) {
  const { prompt } = await req.json();
  const encoder = new TextEncoder();
 
  const stream = new ReadableStream({
    async start(controller) {
      const send = (obj: unknown) =>
        controller.enqueue(encoder.encode(`data: ${JSON.stringify(obj)}\n\n`));
 
      const anthropicStream = client.messages.stream({
        model: "claude-sonnet-4-5",
        max_tokens: 16000,
        thinking: { type: "enabled", budget_tokens: 10000 },
        messages: [{ role: "user", content: prompt }],
      });
 
      for await (const event of anthropicStream) {
        if (event.type === "content_block_start") {
          const t = event.content_block.type;
          blockKinds.set(
            event.index,
            t === "thinking" || t === "text" || t === "redacted_thinking"
              ? t
              : "other",
          );
          continue;
        }
 
        if (event.type === "content_block_delta") {
          const kind = blockKinds.get(event.index);
          if (kind === "redacted_thinking") continue;
 
          if (event.delta.type === "thinking_delta") {
            send({ type: "thinking", content: event.delta.thinking });
          } else if (event.delta.type === "text_delta") {
            send({ type: "text", content: event.delta.text });
          }
          continue;
        }
 
        if (event.type === "content_block_stop") {
          const kind = blockKinds.get(event.index);
          if (kind === "thinking") send({ type: "thinking_end" });
          else if (kind === "text") send({ type: "text_end" });
          blockKinds.delete(event.index);
          continue;
        }
 
        if (event.type === "message_stop") {
          controller.enqueue(encoder.encode(`data: [DONE]\n\n`));
          controller.close();
        }
      }
    },
  });
 
  return new Response(stream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
    },
  });
}

import { useState, useRef, useCallback } from "react";
 
type Phase = "idle" | "thinking" | "responding" | "done";
 
export function useThinkingStream() {
  const [phase, setPhase] = useState<Phase>("idle");
  const [thinkingContent, setThinkingContent] = useState("");
  const [textContent, setTextContent] = useState("");
  const bufferRef = useRef("");
 
  const handleEvent = useCallback((raw: string) => {
    if (raw === "[DONE]") {
      setPhase("done");
      return;
    }
    let msg: { type: string; content?: string };
    try {
      msg = JSON.parse(raw);
    } catch {
      return;
    }
 
    switch (msg.type) {
      case "thinking":
        setThinkingContent((prev) => prev + (msg.content ?? ""));
        break;
      case "thinking_end":
        setPhase("responding");
        break;
      case "text":
        setTextContent((prev) => prev + (msg.content ?? ""));
        break;
      case "text_end":
        break;
    }
  }, []);
 
  const startStream = useCallback(
    async (prompt: string) => {
      setPhase("thinking");
      setThinkingContent("");
      setTextContent("");
      bufferRef.current = "";
 
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt }),
      });
 
      const reader = response.body!.getReader();
      const decoder = new TextDecoder();
 
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
 
        bufferRef.current += decoder.decode(value, { stream: true });
 
        let sepIndex: number;
        while ((sepIndex = bufferRef.current.indexOf("\n\n")) !== -1) {
          const rawEvent = bufferRef.current.slice(0, sepIndex);
          bufferRef.current = bufferRef.current.slice(sepIndex + 2);
 
          for (const line of rawEvent.split("\n")) {
            if (line.startsWith("data: ")) handleEvent(line.slice(6));
          }
        }
      }
    },
    [handleEvent],
  );
 
  return { phase, thinkingContent, textContent, startStream };
}

function ThinkingPanel({
  content,
  phase,
}: {
  content: string;
  phase: string;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const isActive = phase === "thinking";
 
  if (!content && !isActive) return null;
 
  return (
    <div className="thinking-panel">
      <button
        className="thinking-header"
        onClick={() => setCollapsed((c) => !c)}
      >
        <span className="thinking-icon">{isActive ? "⟳" : "✓"}</span>
        <span>{isActive ? "추론 중..." : "추론 과정"}</span>
        <span>{collapsed ? "▶" : "▼"}</span>
      </button>
      {!collapsed && (
        <div className="thinking-body">
          <pre className="thinking-text">{content}</pre>
        </div>
      )}
    </div>
  );
}