AI Chat消息动画实现全解析：一步一步成就自己的传奇

本文带你用一步步拆解 AI 消息打字机动画效果。使用浏览器开发者工具定位、断点跟踪、并理解实现细节后，做一个最小可运行的 Demo，从而在自己的工作中复刻这个“效果”。

消息流：SSE

环境配置

找一个开源的AI聊天的工具，有很多的，我这里使用 https://github.com/chatboxai/chatbox 。

在带 python 的环境，使用的 nodejs-22，安装依赖。如果缺少 chalk，手动安装一下。

(base) PS D:\s.git\chatbox> npm install chalk --save-dev

然后启动调试模式。

启动后，我们还是使用浏览器访问。尽管它集成了electron，但浏览器比较好调试，定位代码位置比较简单和方便。

在 Settings 设置页面，配置大模型接口，我这使用阿里百炼；自己手动添加一个大模型，或者从 fetch 弹出的列表中选一个。

观察SSE

在输入窗口问 AI 一个问题，在开发者工具中 NetWork 面板查看 SSE 请求的内容，完整的展示了实时流式输出的内容。

开发者工具功能特别强大，可以看请求内容，还可以在 Initiator 页签中，看这个请求的调用堆栈。

点击定位到请求代码的具体行，查看上下位置相关代码，设置断点逐步跟踪调试。

UI界面：消息组件

除了查看请求的逻辑代码，主要我们要找到界面UI是在什么位置，用的什么组件。

方法一：DOM

通过 Elements 面板观察消息的 DOM，我们看到每条消息都有 break-words 这个class样式。在代码中查找它，就对应到 Markdown.tsx 这个类了。

方法二：React Developer Tools

方法二也很简单，我们知道它是用 React 写的后，用浏览器的react插件，来快速的定位内容对应的组件。

切换到 Component 的页签。选择左上角的选择元素按钮，定位消息使用组件。选中页面元素后，组件树就直接跳转到渲染该节点的 React 组件了。

然后点击组件窗口右上角的查看源码，就可以打开组件源码了。

通过上面的方法，我们就找到了渲染 markdown 内容的组件了。

这下载量真是一骑绝尘啊，这就是传说中的风口上的猪了。

当然，还有疑问，直接内容一直追加就能实现打字机的效果了？ 事实确实是这样。

我们先保留着这个疑惑，先把主线问题理清楚。最后我们会提取出一个最简的demo实现，后面运行起来看到效果就清晰明白了。

自动滚动到内容

当内容超过屏幕，chatbox 会自动滚动到最新的内容，它是怎么实现的呢？

在开发者工具的 React Component 面板，从 Markdown 组件往上找，有scroller的组件，但它不在源代码库的；再往上就是 MessageList, 打开代码里面有很多 scroll 滚动相关的代码逻辑。

注：前面说过看源码，不可能一步到位的。一个个的去找，去猜测，再去验证确认，以此往复，直至找到。

查看 clearAutoScroll 的源码，这个类是滚动相关代码的实现。在这个类的 startAutoScroll 和 tickAutoScroll 的代码上增加断点，观察滚动何时被启动、被更新、以及如何计算目标位置等等。

再在输入框中问一个问题，等大模型有结果输出就会进到断点。

再往前一点，一起看这两个 useEffect，就能形成整体的滚动实现逻辑：在生成内容前设置 startAutoScroll，每次内容变化调用 tickAutoScroll，更新 scrollToMessage 到最新的内容位置(behavior：end)。

自己实现一个

用AI写新项目是最省事的最可靠的，我们让它来写这个demo：打字机效果并自动滚动到最新内容的小项目。

第一步：实现markdown内容追加显示：

让它按照 Markdown.tsx 写一个解析markdown内容的小应用。

它给弄成了页签的切换方式。让它改成内容追加，在一个markdown组件中显示。

第二步：自动滚动到最新内容：

上面，我们已经看到了 chatbox 自动滚动的实现，让AI模仿实现。

虽然是让它模仿 chatbox，但它偷懒实现了，效果是类似的：在内容底部增加了一个元素，然后滚动到显示这个元素。

运行整体效果如下：

核心实现代码：

总结

很多看起来炫酷的效果，本质上却是最朴实的实现。打字机式的消息输出，只是内容不断追加；自动滚动的丝滑体验，其实就是一次 scrollToIndex；而流式 SSE 传输，不过是持续输出的文本流。

每一次拆解，都是一次积累；每一次积累，都会扩宽我们的眼见。久而久之，面对复杂的系统，我们也能保持从容镇定，拆解、理解、然后复刻。

不断积累，才能让眼界越来越宽阔，步履也更坚定。