Articulate富媒体响应指南：Handlebars打造卡片、图表等10种Rich Response

Articulate富媒体响应指南：Handlebars打造卡片、图表等10种Rich Response

【免费下载链接】articulateA platform for building conversational interfaces with intelligent agents (chatbots)项目地址: https://gitcode.com/gh_mirrors/ar/articulate

Articulate 是一款开源的对话式智能体（Chatbot）构建平台，帮助你在 Slack、Facebook Messenger、Google Home、Web 等渠道上创建智能对话机器人。除了纯文本回复，Articulate 内置了10 种富媒体响应（Rich Response）——卡片轮播、图表、按钮、快速回复、富文本、图片、视频、音频、折叠面板和定位请求，并支持用Handlebars 模板为这些数据注入动态变量。本指南带你在 10 分钟内掌握它的完整用法。

富媒体响应能做什么？

传统聊天机器人只会回一句文本，而 Rich Response 让机器人可以：

• 🃏 发送可点击的卡片轮播，展示商品或信息列表
• 📊 用Chart.js 风格的图表直接渲染数据
• 🔘 发送按钮触发指定动作或跳转链接
• ⚡ 提供快速回复，让用户一键作答
• 📝 输出富文本（标题、链接、排版）
• 🖼️ 嵌入图片、视频、音频，甚至请求用户定位

Articulate 的 10 种响应类型集中定义在api/lib/rich-responses/目录下，每种类型一个子文件夹（如card/、chart/、button/），其中的info.json声明了类型名、描述和默认数据结构。系统启动时会由api/lib/rich-responses/index.js统一加载。

10 种 Rich Response 类型速查表

💡 每种类型的info.json（例如api/lib/rich-responses/chart/info.json）中都内置了defaultPayload，在界面上选择类型后会自动填充示例数据，方便你直接上手修改。

在哪里配置 Rich Response？

所有配置都在Action（动作）的 Response 标签页完成：

1. 打开目标智能体 → 选择一个 Action
2. 切换到Response页签，输入文本回复
3. 开启Response Format开关，即可在该回复旁添加富媒体响应
4. 选择类型（下拉列表来自api/lib/routes/rich-responses/rich-response.list.route.js暴露的接口，后端由api/lib/services/rich-response/rich-response.info.service.js汇总各类型元信息）

每条富媒体响应由两部分组成，定义在api/lib/models/action.response.rich-response.model.js中：

• type：类型标识，如cardsCarousel、quickResponses
• data：一段 JSON 字符串，这是 Handlebars 用武之地

前端界面由ui/app/containers/ActionPage/Components/ResponseForm.js实现，图标映射见ui/app/components/RichResponsesIcons/index.js。

用 Handlebars 让数据"活"起来

普通回复中，data就是静态 JSON；但 Articulate 在生成响应前，会先把data当作 Handlebars 模板编译——核心逻辑在api/lib/services/agent/agent.converse-compile-rich-responses-templates.service.js：

richResponse.data = JSON.parse(handlebars.compile(richResponse.data)(templateContext));

也就是说，你可以在 JSON 里写{{ }}占位符，引用槽位值、Webhook 返回数据、上下文变量等，机器人回复就会变成千人千面的动态内容：

{ "title": "欢迎，{{ name }}！", "description": "您有 {{ count }} 条未读消息" }

Articulate 在api/server/plugins/handlebars/helpers/下预装了一批实用助手函数（helpers），无需手写复杂逻辑：

✨ 例如：{{ dateTimeFormat createdAt "YYYY-MM-DD" }}就能在卡片里展示格式化日期。

快速上手：打造第一个富媒体响应

步骤 1｜创建智能体与动作：在界面中创建 Agent，新建一个 Category 和 Action（如Order Pizza），为它配置需要的 Slots。

步骤 2｜添加 Rich Response：在 Action 的 Response 页签开启 Response Format，选择 Card Carousel，把默认 payload 中的{{ title }}、{{ imageURL }}等替换为你的模板变量。

步骤 3｜训练并测试：点击 Train 训练模型，然后在右侧对话窗或 Web Demo 渠道中实测。Web Demo 渠道通过api/lib/channels/web-demo/提供服务，连接配置如下：


整个构建流程——从录入 Sayings 到对话测试——都在同一块看板内完成，右栏即为实时对话窗口：

常见问题（FAQ）

Q：Chart 和 Location 类型为什么用不了？A：二者在info.json中标记为enabled: false，属于实验性能力。开启渠道对图表渲染的支持前，建议优先使用其余 8 种类型。

Q：一个 Action 能挂多个富媒体响应吗？A：可以。richResponses是数组，你可以组合文本 + 卡片 + 快速回复，例如先推送卡片轮播，再附上"查看更多/取消"按钮。

Q：模板变量从哪里来？A：来自templateContext，包括已填充的 Slot 值、Webhook 返回数据与会话上下文。Webhook 结果可用{{ JSONPath data "$.store.book[0].title" }}这类写法提取。

小结

Articulate 的富媒体响应体系 =10 种开箱即用的类型（api/lib/rich-responses/）+Handlebars 动态模板（api/server/plugins/handlebars/）+Response 页签的可视化配置。掌握这套组合拳，你的聊天机器人就能从"只会说话"进化为"图文并茂、可点可交互"的智能助手。🚀

【免费下载链接】articulateA platform for building conversational interfaces with intelligent agents (chatbots)项目地址: https://gitcode.com/gh_mirrors/ar/articulate