组件(Widget)
画布内容的基本单元——VizChat 内置的组件,以及为你的组件库定制的自定义组件。
组件的定位
组件(widget)是画布的最小内容单元,对应传统工具里的幻灯片一页、表格一个单元格、Notion 一个块——但比它们都更通用。VizChat 的组件可以是一张图、一段文字、一个完整的网页、一个跑着 JS 的交互组件。
每个组件自带数据与配置,并定义自己的一套操作。这些字段和操作属于组件自身、会随组件演进——Agent 用到时会去查,而不是假定一个固定形状。
两类组件
内置组件
VizChat 自带的组件,覆盖常见场景:图表与数据(含数学——坐标系、数轴、立体几何、概率分布、韦恩图、概率树、数据表)、富文本与代码、PDF、网页嵌入与外链、图片与信息图、幻灯片封面。完整清单与各自能做什么见组件类型总览。
自定义组件
内置组件覆盖不到时,Agent 可以替你做一个:计时器、看板、计算器,或任何特定的交互组件。自定义组件在运行时生成、存入你的组件库,并可跨文档复用。典型场景:
- 标准组件不覆盖的可视化(如桑基图、日历热力图)
- 需要状态管理和事件交互(筛选器、日期选择器)
- 需要嵌入第三方库
自定义组件默认 inline 挂载在画布内;需要完全隔离的运行环境时可选 nested 挂载,跑在沙盒 iframe 里。两种形态都通过受控 API 与宿主画布通信。默认仅你自己可见,也可以发布到市场供他人使用和收藏。
组件独立性
每个组件都是一个独立的小应用。它:
- 有自己的数据与配置,保存在文档里
- 有自己的生命周期(挂载、渲染、销毁)
- 可以单独编辑、复制、删除
AI 如何操作组件
你提出需求后,Agent 大致按这条路径工作:
- 找组件——
search_widgets在同一个池子里检索内置组件与用户发布的组件;你收藏过的、或用@提到的组件会被优先考虑。 - 取契约——
get_widget_operations返回该组件实际接受的字段与操作。 - 写入文档——把组件及其初始数据写进文档;后续修改用
edit_yaml_path做精确路径编辑。 - 验证——
validate_board检查文档结构、引用的组件是否都已创建、引用的工作空间文档是否存在。
如果组件库里没有合适的,Agent 会转而替你新建一个自定义组件。