settings / features / slots / renderers 怎么选

定制界面有四个入口。本页说明它们各管什么,以及遇到一个需求时该用哪个。

分工

配置:填值、开关插槽:放业务自己的组件
管界面settings:只填值slots:按位置放业务组件
管功能与内容features:内置功能的开关与参数renderers:按类型决定内容怎么显示
  • settings:文字、数字、开关。没有函数,没有界面内容。
  • features:内置功能。开关、换位置、提供功能需要的函数(上传、赞踩回调、语音识别)。
  • slots:聊天区 17 个固定位置,放什么由业务方决定。会话列表 SessionList 另有两个位置,见插槽。
  • renderers:后端返回的某一类内容(业务卡片、工具、失败、系统提示、Markdown 元素)怎么显示。按需引入的 OpenUI 渲染与产物预览也通过 renderers 登记。

另有 onSend(发送前处理)、onEvent(事件)、onError(错误)三个回调;失败卡片文字通过 renderers.errors 的 renderDefault 覆盖。

四个判断问题

按顺序问,第一个回答「是」的就是答案:

顺序问题是 → 用什么
1是改占位文字、宽度、语言或显示方式等已有设置吗?settings
2是开关、调整 chatkit 已有的功能吗?features
3是后端返回的某类内容要换一种显示吗?renderers
4是在界面某个位置加业务自己的组件吗?slots

四个都不是,多半是要在发送前改输入(onSend),或者这件事不能定制(见不能定制的部分)。

十个常见场景

场景用什么见
改输入框占位文字、欢迎语settings.placeholder、settings.welcome欢迎语与推荐问题
调整空会话内容和位置slots['session.empty']空会话内容与位置
在输入框轮播可填入的建议features.promptCompletion输入建议
工具调用逐个显示,不要折叠settings.toolFlow: 'step'思考与工具调用
不要编辑后重发features.edit: false内置功能总览
把附件按钮从工具栏左边挪到右边features.attachments: { upload, slot: 'composer.toolbarEnd' }调整内置功能
消息区上方放一条公告slots['session.top']插槽
回答下方加「收藏」按钮slots['message.actions']收藏与分享
后端返回的订单数据显示成卡片renderers.parts['acme.order']业务卡片
自家的查询工具显示成表格renderers.tools.query_orders工具展示
模型繁忙时定制失败卡片renderers.errors.MODEL_OVERLOADED失败卡片与系统提示
每次发送带上当前选中的知识库onSend发送前处理

两处容易选错

内容类的用 renderers,不要用 slots

「回答里显示一张订单卡片」容易想成往 message.footer 放一个组件,再从消息里找数据。这样做卡片的位置固定在消息末尾,历史回放时还要自己判断哪条消息有订单。

适合的做法是让后端(或适配器)把订单作为回答里的一块数据返回,用 renderers.parts 按类型登记组件。卡片按片段顺序显示;刷新后能否恢复,取决于历史是否保留相同数据与顺序。

判断标准:这块内容是回答的一部分,用 renderers;是界面上固定位置的功能入口,用 slots。

已有的功能用 features,不要自己在 slots 里再做一个

想把附件按钮换个位置,容易想成关掉内置的、自己在插槽里写一个上传按钮。这样拖拽、粘贴、大小限制、类型限制都要重新实现。

仅调整位置时使用 features.attachments: { upload, slot: 'composer.toolbarEnd' }。要放到 slot 支持的位置之外时写 slot: false,再把导出的内置组件放到需要的位置,见调整内置功能。

判断标准:chatkit 已有的功能只调整位置与开关,业务特有的功能才自己写。