Case Study — cwkPippa 의 스트리밍 채팅

import { use, useState, useRef, useCallback } from "react";
import { fetchConversation } from "@/lib/api";
import type { Message } from "@/types";

// 모듈 레벨 캐시 — 같은 conversation id 가 render 간 같은 promise 반환
// (lesson 4 의 use() 기본 규칙).
const conversationCache = new Map<string, Promise<Message[]>>();
function getConversationPromise(id: string) {
  if (!conversationCache.has(id)) {
    conversationCache.set(id, fetchConversation(id));
  }
  return conversationCache.get(id)!;
}

export function useChat(conversationId: string) {
  // use() 통한 초기 로드 — 첫 번째 suspend, 반복엔 캐시.
  const initial = use(getConversationPromise(conversationId));

  const [messages, setMessages] = useState<Message[]>(initial);
  const [isStreaming, setIsStreaming] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const ctrlRef = useRef<AbortController | null>(null);

  const send = useCallback(async (text: string) => {
    // In-flight 스트림 먼저 abort.
    ctrlRef.current?.abort();
    const ctrl = new AbortController();
    ctrlRef.current = ctrl;
    setError(null);
    setIsStreaming(true);

    // Optimistic append — 사용자 메시지 즉시 등장.
    const userMsg: Message = { id: `local-${Date.now()}`, role: "user", content: text };
    const draftAssistant: Message = { id: `draft-${Date.now()}`, role: "assistant", content: "" };
    setMessages((m) => [...m, userMsg, draftAssistant]);

    try {
      const response = await fetch(`/api/chat`, {
        method: "POST",
        body: JSON.stringify({ conversationId, text }),
        signal: ctrl.signal,
      });
      if (!response.body) throw new Error("no stream body");

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        const chunk = decoder.decode(value, { stream: true });
        // SSE chunk 파싱, draft 어시스턴트 메시지에 누적.
        for (const event of parseSSE(chunk)) {
          if (event.type === "delta") {
            setMessages((m) =>
              m.map((msg) =>
                msg.id === draftAssistant.id
                  ? { ...msg, content: msg.content + event.text }
                  : msg
              )
            );
          } else if (event.type === "done") {
            // Draft id 를 서버 발급 거로 교체.
            setMessages((m) =>
              m.map((msg) => (msg.id === draftAssistant.id ? { ...msg, id: event.messageId } : msg))
            );
            // 캐시 무효화 — 다음 마운트가 권위 있는 state re-fetch.
            conversationCache.delete(conversationId);
          }
        }
      }
    } catch (e) {
      if ((e as Error).name !== "AbortError") setError(e as Error);
      // Partial draft 유지 — 서버 JSONL 가 같은 partial 캡처.
    } finally {
      setIsStreaming(false);
    }
  }, [conversationId]);

  const stop = useCallback(() => ctrlRef.current?.abort(), []);

  return { messages, send, stop, isStreaming, error };
}

function parseSSE(_chunk: string): Array<{ type: "delta"; text: string } | { type: "done"; messageId: string }> {
  // 진짜 파서는 partial line, chunk 당 여러 이벤트, JSON payload 처리.
  // 케이스 스터디 모양엔 여기서 단순화.
  return [];
}

import { Suspense, useState } from "react";
import { useChat } from "@/hooks/useChat";

function ChatPanel({ conversationId }: { conversationId: string }) {
  const { messages, send, stop, isStreaming, error } = useChat(conversationId);
  const [draft, setDraft] = useState("");

  return (
    <div className="flex flex-col h-full">
      <div className="flex-1 overflow-y-auto p-4 space-y-2">
        {messages.map((m) => (
          <div key={m.id} className={m.role === "user" ? "text-fg" : "text-brand"}>
            {m.content}
          </div>
        ))}
      </div>
      {error && <p className="text-danger text-sm px-4">{error.message}</p>}
      <form
        className="flex p-4 gap-2 border-t"
        onSubmit={(e) => {
          e.preventDefault();
          if (draft.trim()) { send(draft); setDraft(""); }
        }}
      >
        <input
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          className="flex-1 px-3 py-2 rounded border bg-bg text-fg"
          placeholder="Message Pippa…"
        />
        {isStreaming ? (
          <button type="button" onClick={stop} className="px-4 py-2 rounded bg-danger text-bg">
            Stop
          </button>
        ) : (
          <button type="submit" className="px-4 py-2 rounded bg-brand text-bg">
            Send
          </button>
        )}
      </form>
    </div>
  );
}

export function ChatPage({ conversationId }: { conversationId: string }) {
  return (
    <Suspense fallback={<div className="p-4 text-muted">Loading conversation…</div>}>
      <ChatPanel conversationId={conversationId} />
    </Suspense>
  );
}