TinyRobot v0.4.1：Vue 3 的 AI 对话组件库，三个包哪些必装、哪些先别装
TinyRobot 是 OpenTiny 团队做的 AI 对话组件库，面向 Vue 3，遵循 OpenTiny Design 设计体系。当前版本 v0.4.1，MIT 许可，已经迭代过 22 个版本。仓库语言构成 TypeScript 58.1% / Vue 35.4%。
- 仓库：opentiny/tiny-robot
- 文档：docs.opentiny.design/tiny-robot
- 首页：opentiny.design/tiny-robot
- npm：@opentiny/tiny-robot
它的定位很窄：只做聊天气泡、消息输入框、会话管理这类 AI 交互组件。后台、表单、弹窗这些通用 UI 由 TinyVue 负责，两者互补，不抢活。
三个包的分工
| 包 | 作用 | 是否必装 |
|---|---|---|
@opentiny/tiny-robot | 核心组件库（bubble、sender、container 等） | 必须 |
@opentiny/tiny-robot-kit | AI 数据层工具（Provider 接入、Composable、存储、插件） | 想对接 AI 就装 |
@opentiny/tiny-robot-svgs | SVG 图标库 | 需要官方图标才装 |
拆包的依据是关注点分离。组件层只管渲染和交互，AI 请求怎么发、数据怎么存它不关心；工具层处理 Provider 接入、消息状态机、插件、对话状态、存储策略；图标单独打包，避免跟着主包一起进产物。整体按需引入，不会因为用了 TrBubble 就把 kit 全量拖进来。
快速开始
前置条件是 Node.js >= 20.13.0、Vue >= 3.2.0。
pnpm add @opentiny/tiny-robot
# 需要对接 AI 时
pnpm add @opentiny/tiny-robot-kit
样式在 main.ts 里引一次：
import { createApp } from 'vue'
import App from './App.vue'
import '@opentiny/tiny-robot/dist/style.css'
const app = createApp(App)
app.mount('#app')
组件用法就是普通 Vue 组件，role 决定气泡方向：
import { TrBubble } from '@opentiny/tiny-robot'
这个阶段只有渲染，消息从哪来、怎么追加、要不要落盘，都还是你自己决定的事。
Kit 的 Composable 架构
写聊天页面最头疼的是状态管理：要么 props 层层传，要么引全局状态库。Kit 用两个 Hook 解决：
packages/kit/src/vue/
├── message/ # useMessage composable
└── conversation/ # useConversation composable
useMessage 负责创建、更新、删除、流式追加消息；消息状态封装成 Vue reactive 对象，跟组件自动响应式绑定，不需要手动同步；消息按角色分成 user / ai / system。
useConversation 管理对话上下文、轮次、历史、会话切换，并集成存储策略，生命周期（创建、加载、切换、销毁）自动管理。
结果是任意 Vue 组件里 useXxx() 就能拿到对话管理能力，不用 props 层层传递，也不用为此引入全局 store。
组件能力方面，除了 chat bubble、message input、conversation management 这些核心交互组件，还提供了完整 TypeScript 类型、多主题与自定义样式、Tree Shaking 按需引入，流式响应（Streaming）是内建支持的，存储策略可选 LocalStorage、IndexedDB 或自定义实现。
responseProvider：换模型不重构前端
项目从 OpenAI 换成 DeepSeek、本地私有化模型或企业内部 AI 网关时，前端对话逻辑常常要大范围重构。Kit 在这里弱化了传统 AI Client Provider 的概念：组件和消息引擎不关心背后是 OpenAI、DeepSeek、本地模型还是内部网关，只要求把模型响应整理成 OpenAI Chat Completions 兼容的数据结构。
这样模型服务和接入方式都可替换——前端直连、后端转发、统一网关都行，组件层保持稳定。
项目结构
tiny-robot/
├── packages/
│ ├── components/ bubble/ sender/ container/ history/ attachments/
│ ├── kit/ providers/ vue/(message,conversation) storage/
│ ├── svgs/ 图标库
│ ├── playground/
│ └── test/
├── docs/
└── scripts/
本地开发：pnpm install，然后 pnpm dev（同时起 playground 和文档站），跑测试用 pnpm test。
什么时候上 kit，什么时候先不用
判断标准其实就一条：AI 请求和数据这块要不要别人帮你管。
只装 @opentiny/tiny-robot 就够了的情况：你已经有自己的消息 store 或后端接口，只需要气泡、输入框、会话列表这些视觉与交互组件，消息数据全程自己掌控。这时 kit 是额外依赖。
需要装 @opentiny/tiny-robot-kit 的情况：要做 Provider 接入、消息状态机、流式追加、多会话切换，或者想让存储策略（LocalStorage / IndexedDB / 自定义）由库统一处理。这也是它默认的推荐组合。
@opentiny/tiny-robot-svgs 只有要用官方图标集时才装，自己有一份图标体系的话完全可以跳过。
另外，如果只是页面上放一个固定文案的简单对话框，没有多轮会话、没有 Provider 切换、不需要历史记录，那组件层本身可能就已经富余了——这种情况下先掂量一下是否值得引入整套依赖。
和 TinyVue 的关系同理：项目里本来就有 TinyVue，两者可以并存，一个管通用 UI，一个管 AI 对话交互，不冲突。