🧳 我的 React Trip 之旅（5）：我的 AI 聊天机器人，今天又把用户气笑了

从 DeepSeek 到 Kimi，我写了个"模型切换器"，结果发现 AI 也会胡说八道

🤖 开头：用户问"附近有什么好玩的？"，AI 回"建议去火星"

集成 LLM 时，我以为只要调个 API 就行。结果第一次测试，用户问旅游建议，AI 回："推荐您乘坐 SpaceX 前往火星，门票仅需 2 亿美元。"

我差点把电脑砸了。

后来才明白：不同模型，性格不同。DeepSeek 严谨，Kimi 活泼，Doubao 像个段子手。

于是，我决定------不绑死一个模型，做个"AI 模型切换器" ！

🔌 核心思想：抽象出一个 `chat(model, messages)` 函数

不管外面风多大，我的组件只认一个接口：

javascript 复制代码

// llm/chat.js
export async function chat(model, messages) {
  const apiKey = getApiKey(model); // 从 .env 读取
  const url = getModelEndpoint(model);

  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages, stream: true })
  });

  if (!response.ok) throw new Error('LLM request failed');

  return response; // 支持流式读取
}

✅ 组件调用：const res = await chat('kimi', messages);

✅ 换模型？只需改第一个参数，业务代码一行不动！

💬 流式输出：让用户看到 AI "打字"的过程

普通请求是"等半天，啪一下全出来"。但聊天要有对话感！

我用 ReadableStream 逐字解析：

ini 复制代码

const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = new TextDecoder().decode(value);
  // 解析 chunk 中的 content，追加到 messages
  setMessages(prev => [...prev.slice(0, -1), { role: 'assistant', content: newContent }]);
}

用户看到文字一个一个蹦出来，感觉 AI 在认真思考，而不是复制粘贴。

🧠 上下文管理：别让 AI 忘记刚才聊了啥

用户问："推荐海岛"，AI 回："马尔代夫"。

用户接着问："那里签证难吗？"，AI 却回："您说的是哪个地方？"

------因为它没收到上下文！

我在 Zustand 里维护完整对话历史，并用 LRU 缓存 控制长度（避免 token 超限）：

ini 复制代码

// stores/useChatStore.js
const MAX_MESSAGES = 10;
const addMessage = (msg) => {
  const newMsgs = [...get().messages, msg].slice(-MAX_MESSAGES);
  set({ messages: newMsgs });
};

😅 结尾：AI 还是会犯傻，但至少我能快速换一个

现在，如果 Kimi 又开始胡说八道，我只需在代码里改一行：

csharp 复制代码

// 从 'kimi' 换成 'deepseek-r1'
const res = await chat('deepseek-r1', messages);

用户毫无感知，但 AI 突然变得一本正经。

前端智能，不是让 AI 完美，而是让切换成本趋近于零。

下一站，我要解决一个看似简单却坑哭无数人的问题------如何全局弹出一个 Toast？UI 库不够用，我只好自己造了个"会飞的通知" 。