用react搞定一个大模型对话效果

最新推荐文章于 2025-11-22 10:14:41 发布

原创

最新推荐文章于 2025-11-22 10:14:41 发布 · 1.9k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架 #大模型

本文介绍了如何在React中实现类似文心一言的逐字对话效果，包括处理前后端交互、使用useState和useCallback管理状态以及实现动态加载的技巧。

怎么用react实现一个类似文心一言那样的对话效果呢？

最近AI盛行，关注几个大模型网站都能发现，跟AI对话的时候，返回的文本是逐字展示的，就给人一种AI边解析边返回的感觉（不知道是为了装X还是真的需要这样）。正好部门内也有这么个需求，那就开干呗。
先看看效果：

在这里插入图片描述
ok
由于我这边后端返回是一次性返回所有回复，而天煞的产品经理要求做出逐字展示效果，于是我只能纯前端控制展示。
废发不多梭，开始搞代码。
先上个图，看看页面结构

列表的的格式是这样：

const [list, setList] = useState([
    {
      id: -1,
      type: 1,
      content: <Introduction chooseChatType={(v) => chatInit(v)} />,  // 渲染对象
    },
  ]); // 对话列表, type: 1 机器人， type: 2 用户 -1 初始介绍 -2 loading

整体编码过程不难，有几个细节需要注意：
1.发送消息后到后端返回消息钱，需要展示一个loading过渡
2.后端返回字符串后，需要逐字切割展示。这里我注意考虑两个方案，
第一个：用个定时器，把时差设置为变量delay，每次都随机生成delay，固定展示三个字符，直到展示完全。简单来讲就是，速度不固定，每次展示长度固定
第二个：速度固定，每次展示不同长度内容

这里我选用的第一种方案。

需要注意的是每