TinyRobot Bubble 是啥玩意儿？

先说实话，kan到 TinyRobot 的气泡组件，你可Neng会想：“这玩意儿跟普通聊天气泡有啥区别？”

其实核心就在“原理”。别急，咱慢慢聊。

TinyRobot 把每条消息抽象成一个对象，叫 BubbleMessage。

对象里Zui重要的几个字段是 role，content和 loading。

别kan结构简单，背后可是有一套响应式链路在跑。

先说一下 contentResolver，这玩意儿相当于“内容提取器”。

它把原始的 {text: 'hello'}{image: 'url'}甚至是混合数组全部转成统一的 {type:'text'|'image', value:...} 结构。

这么干的好处是后面的渲染器只需要处理一种数据格式，省事儿又省心。

每个内容项dou会跑一遍 “find” 函数集合。

这些函数本质上是过滤器，判断当前内容是否匹配某个渲染器的条件。

比如：

find:  => item.type === 'image'

第一个返回 true 的渲染器就会接管这条内容的绘制。

当用户展开/收起气泡，或者收到新消息时组件内部会触发 'state-change' 事件。

这个事件会把Zui新的状态抛给父组件，父组件再把新 state 通过 props 回传下去。

于是形成了单向数据流：父 → 子← 子← 父。

hen多人问，“消息来了我的页面总是跳到Zui底部，是不是太霸道？”

SAY NO！TinyRobot 在 autoScroll 里加了个“小判断”。

只有当用户Yi经接近底部时才会自动滚动。

#1 收集消息：

- 开发者调用 API，把返回的 JSON 放进 :messages.

#2 内容解析：

- contentResolver 把每条消息拆解成若干个统一化项。

#3 匹配渲染器：

- find 函数轮询，挑选合适的 renderer，比如文字、图片、Markdown 等等。