组件联动进阶：玩转TinyRobot组合开发提升项目灵活性

组件联动进阶：玩转 TinyRobot 组合开发，提升项目灵活性

AI聊天应用从来不是单个组件的独角戏，而是一个多方协作的生态系统。用户输入消息、查看消息列表、选择提示、管理会话——这些环节需要无缝衔接，数据得实时同步，状态也得保持一致。说白了，就是要把Sender、BubbleList、Prompts、useConversation这些角色串起来，让它们配合默契。

TinyRobot的组件设计遵循一个核心理念：组合优于配置。每个组件单独拿出来都能用，但通过事件、方法和组合式函数的衔接，就能组装出一套完整的聊天应用。下面从7个联动场景入手，一步步搭出一个实打实的AI聊天工具。

Sender + BubbleList：输入与展示联动

这是最基础的联动模式：用户通过Sender输入消息，BubbleList展示消息列表。

sendMessage 流程

核心流程其实很直白：Sender提交 → 创建一条user消息 → 再创建一条assistant消息（先显示loading）→ 请求AI响应 → 更新assistant消息内容。每一步都得相互配合。

 复制代码

loading 状态同步

Sender的loading属性需要跟BubbleList消息的loading状态保持同步：

• Sender loading = true → 提交按钮自动变成停止按钮
• BubbleList中助手消息 loading = true → 显示加载动画

cancel 取消操作

点击Sender的停止按钮会触发cancel事件，这时候需要做两件事：

1. 中止AI响应请求（比如调用abortRequest()）
2. 把BubbleList中那条正在loading的助手消息终止掉

Sender + Prompts：提示集与输入联动

Prompts组件展示预设的提示列表，用户点击某个提示项后，文本自动填入Sender。

item-click 事件与 setContent 方法

 复制代码

关键衔接点在于：

• Prompts的item-click事件会传出 (ev, item) 参数
• Sender的setContent()方法（v0.4新增）可以设置编辑器内容
• Sender的focus()方法让编辑器自动获取焦点

这种"点击提示 → 内容填入 → 聚焦编辑器"的流程，可以说是AI聊天应用里最常见的交互模式了。

Sender + Container：容器内嵌布局

Container组件提供聊天界面的容器框架，Sender通常被放在Container的footer插槽里。

全屏模式下的布局适配

 复制代码

全屏模式下，Container会自动加上fullscreen类名。这时可以用.fullscreen选择器自定义footer插槽中Sender的样式：

 复制代码/* 全屏模式下 Sender 的样式调整 */
.fullscreen .tr-sender {
  --tr-sender-bg-color: #fff;
  --tr-sender-border-radius: 8px;
}

Container还提供了一些全屏模式专属的CSS变量：

 复制代码:root {
  --tr-container-header-padding-fullscreen: 0 200px 24px;
  --tr-container-title-font-size-fullscreen: 20px;
}

Sender + Feedback：反馈与气泡联动

Feedback组件用来对气泡消息进行操作反馈——复制、点赞、刷新等，通常放在Bubble的content-footer插槽里。

 复制代码

Sender + useMessage：数据管理与输入联动

useMessage是TinyRobot提供的一个消息数据管理组合式函数，封装了发送消息、处理AI响应、管理请求状态等逻辑。跟Sender联动后，开发者就不用再手动管理消息数组了。

sendMessage 与 Sender.submit 对接

 复制代码

requestState 驱动 Sender 的 loading/disabled

useMessage的requestState提供了更精细的状态控制：

 复制代码type RequestState = 'idle' | 'processing' | 'completed' | 'aborted' | 'error'

 复制代码

• isProcessing → Sender的loading（显示停止按钮）
• requestState === 'error' → Sender的disabled（出错时禁用输入）

这样一来，Sender的状态完全由useMessage驱动，开发者再也不用自己维护isLoading状态了。

Sender + useConversation：多会话联动

useConversation在useMessage基础上增加了多会话管理能力。每个会话都有独立的useMessage引擎，切换会话时需要同步更新Sender的状态。

activeConversation 与 Sender 联动

 复制代码

关键联动点：

1. 切换会话：switchConversation() → 更新 activeConversation → 更新 currentMessages → BubbleList自动渲染新会话的消息
2. 发送消息：sendMessage() → 当前会话的useMessage引擎处理
3. 取消请求：abortActiveRequest() → 当前会话的请求被中止
4. 并行处理：切换会话后，旧会话的请求可以在后台继续执行，互不干扰

Sender + ThemeProvider：主题联动

ThemeProvider的主题切换会影响所有子组件的样式，Sender当然也不例外。

 复制代码

通过CSS属性选择器，可以定制Sender在不同主题下的样式：

 复制代码/* 亮色模式 */
[data-tr-color-mode='light'] {
  --tr-sender-bg-color: #ffffff;
  --tr-sender-text-color: #333333;
  --tr-sender-placeholder-color: #999999;
}/* 暗色模式 */
[data-tr-color-mode='dark'] {
  --tr-sender-bg-color: #1a1a2e;
  --tr-sender-text-color: #e0e0e0;
  --tr-sender-placeholder-color: #666666;
}/* 自定义品牌主题 */
[data-tr-theme='brand'] {
  --tr-sender-bg-color: #f0f7ff;
  --tr-sender-border-radius: 16px;
  --tr-sender-button-size: 36px;
}

实战组合案例：完整 AI 聊天应用

把上面所有这些联动场景整合到一起，就是一个完整的AI聊天应用了：

 复制代码

组合开发模式总结

回顾一下，TinyRobot的组合开发遵循一套清晰的模式：

联动场景	衔接机制	核心方法/事件
Sender + BubbleList	事件 + 数据	submit → push message, cancel → abort
Sender + Prompts	事件 + 方法	item-click → setContent + focus
Sender + Container	插槽	footer 插槽放置 Sender
Sender + Feedback	插槽 + 事件	content-footer 插槽, action → submit
Sender + useMessage	组合式函数	sendMessage, isProcessing, abortRequest
Sender + useConversation	组合式函数	sendMessage, abortActiveRequest, switchConversation
Sender + ThemeProvider	CSS 变量	data-tr-theme / data-tr-color-mode 属性选择器

核心原则其实就一句话：组件之间通过事件和方法衔接，而不是靠共享状态或直接引用。这种松耦合设计让每个组件都能独立使用、独立测试，组合时只需要做好"接线"工作即可。这才是真正意义上的灵活组合。后续在真实项目里遇到新的交互需求，按照这套思路去对接，基本都能顺畅搞定。