集成 LLM 的前端实践

type MessageStatus = "streaming" | "done" | "error";

interface UserMessage {
  id: string;            // 稳定唯一 id，列表的 key 全靠它（第 7 篇）
  role: "user";
  content: string;
  createdAt: number;
}

interface AssistantMessage {
  id: string;
  role: "assistant";
  content: string;       // 流式过程中不断追加
  status: MessageStatus; // 占位 → 流式 → 完成/失败，UI 靠它分流
  error?: string;        // status 为 error 时的提示文案
  createdAt: number;
}

// 可辨识联合：role 就是那个「辨识字段」（第 28 篇）
type Message = UserMessage | AssistantMessage;

const [messages, setMessages] = useState<Message[]>([]);

async function sendMessage(text: string) {
  const assistantId = crypto.randomUUID();
  const userMsg: UserMessage = {
    id: crypto.randomUUID(),
    role: "user",
    content: text,
    createdAt: Date.now(),
  };

  // 本地先拼好「下一版状态」：真实用户消息 + 占位 assistant 消息
  const next: Message[] = [
    ...messages,
    userMsg,
    { id: assistantId, role: "assistant", content: "", status: "streaming" as const, createdAt: Date.now() },
  ];
  setMessages(next); // ①② 乐观提交：不等网络，界面立刻多两条消息

  const controller = new AbortController();
  controllerRef.current = controller; // 停止生成的开关，第 4 站细讲

  try {
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ messages: toApiMessages(next) }), // 多轮上下文，第 5 站细讲
      signal: controller.signal,
    });

    // ③ 流式填充：readStream 的完整拆解在第 45 篇，这里只留骨架
    await readStream(res, (delta) => {
      setMessages((prev) =>
        prev.map((m) => (m.id === assistantId ? { ...m, content: m.content + delta } : m))
      );
    });

    // ④a 提交：streaming → done
    setMessages((prev) =>
      prev.map((m) => (m.id === assistantId ? { ...m, status: "done" as const } : m))
    );
  } catch {
    // ④b 标记失败：半截内容保留；「主动中止」的区分第 4 站讲
    setMessages((prev) =>
      prev.map((m) =>
        m.id === assistantId ? { ...m, status: "error" as const, error: "生成失败，请重试" } : m
      )
    );
  } finally {
    controllerRef.current = null;
  }
}

import { useEffect, useRef, memo } from "react";

// memo：流式时只有最后一条在变，前面的消息别陪着重渲染（第 37 篇）
const MessageItem = memo(function MessageItem({
  message,
  onRetry,
}: {
  message: Message;
  onRetry: (id: string) => void;
}) {
  if (message.role === "user") {
    return <div className="msg msg-user">{message.content}</div>;
  }
  // 走到这里 TS 已收窄为 AssistantMessage：status / error 随便用
  if (message.status === "error") {
    return (
      <div className="msg msg-assistant msg-error">
        {message.content || "生成失败"}
        <button onClick={() => onRetry(message.id)}>重试</button>
      </div>
    );
  }
  const empty = message.status === "streaming" && message.content === "";
  return (
    <div className="msg msg-assistant">
      {empty ? <span className="thinking-dot">思考中…</span> : <Markdown source={message.content} />}
    </div>
  );
});

function MessageList({ messages, onRetry }: { messages: Message[]; onRetry: (id: string) => void }) {
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" }); // 消息一变就滚到底部
  }, [messages]);

  return (
    <div className="msg-list">
      {/* key 用稳定 id：流式、重试都会增删消息，用下标必乱（第 7 篇） */}
      {messages.map((m) => (
        <MessageItem key={m.id} message={m} onRetry={onRetry} />
      ))}
      <div ref={bottomRef} />
    </div>
  );
}

const controllerRef = useRef<AbortController | null>(null);

function stop() {
  controllerRef.current?.abort(); // fetch 会立刻抛出 AbortError
  controllerRef.current = null;
}

} catch (e) {
  const aborted = e instanceof DOMException && e.name === "AbortError";
  setMessages((prev) =>
    prev.map((m) => {
      if (m.id !== assistantId) return m;
      return aborted
        ? { ...m, status: "done" as const } // 半截答案保留，别浪费 token
        : { ...m, status: "error" as const, error: "生成失败，请重试" };
    })
  );
}

function retry(failedId: string) {
  const idx = messages.findIndex((m) => m.id === failedId);
  const failed = messages[idx];
  const lastUser = messages[idx - 1]; // 失败消息的前一条必是用户消息
  if (!failed || failed.role !== "assistant" || !lastUser || lastUser.role !== "user") return;

  setMessages((prev) => prev.filter((m) => m.id !== failedId)); // 移除失败消息
  sendMessage(lastUser.content); // 原样重发，走一遍完整流程
}

const [messages, setMessages] = useState<Message[]>(() => {
  try {
    const raw = localStorage.getItem("chat:history");
    const list: Message[] = raw ? JSON.parse(raw) : [];
    // 流式中途刷新会留下半截消息，恢复时统一收敛成 done
    return list.map((m) =>
      m.role === "assistant" && m.status === "streaming" ? { ...m, status: "done" as const } : m
    );
  } catch {
    return []; // JSON 损坏也别让整个聊天页白屏
  }
});

useEffect(() => {
  localStorage.setItem("chat:history", JSON.stringify(messages));
}, [messages]);

function toApiMessages(messages: Message[]) {
  return messages
    .filter((m) => m.role === "user" || m.status !== "error") // 顺便收窄：user 没有 status 字段
    .map((m) => ({ role: m.role, content: m.content }));
}