Articulate富媒体响应指南Handlebars打造卡片、图表等10种Rich Response【免费下载链接】articulateA platform for building conversational interfaces with intelligent agents (chatbots)项目地址: https://gitcode.com/gh_mirrors/ar/articulateArticulate 是一款开源的对话式智能体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 类型速查表#类型用途默认开启1Card Carousel可点击卡片展示标题/描述/图片✅2Buttons带链接或动作载荷的按钮组✅3Quick Responses字符串数组渲染为一排快捷按钮✅4Rich TextHTML 富文本支持排版与嵌入✅5Image单张图片消息✅6Video可播放视频消息✅7Audio可播放音频消息✅8Collapsible折叠面板摘要式呈现长内容✅9Chart基于 Chart.js 的饼图/图表⛔ 默认关闭10Location请求用户地理位置⛔ 默认关闭 每种类型的info.json例如api/lib/rich-responses/chart/info.json中都内置了defaultPayload在界面上选择类型后会自动填充示例数据方便你直接上手修改。在哪里配置 Rich Response所有配置都在Action动作的 Response 标签页完成打开目标智能体 → 选择一个 Action切换到Response页签输入文本回复开启Response Format开关即可在该回复旁添加富媒体响应选择类型下拉列表来自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、quickResponsesdata一段 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.jsrichResponse.data JSON.parse(handlebars.compile(richResponse.data)(templateContext));也就是说你可以在 JSON 里写{{ }}占位符引用槽位值、Webhook 返回数据、上下文变量等机器人回复就会变成千人千面的动态内容{ title: 欢迎{{ name }}, description: 您有 {{ count }} 条未读消息 }Articulate 在api/server/plugins/handlebars/helpers/下预装了一批实用助手函数helpers无需手写复杂逻辑Helper功能文件dateTimeFormat基于 Moment 的日期格式化支持时区date-time-format.handlebars-helper.jsmoment完整 Moment.js 能力moment.handlebars-helper.jsnumeral数字格式化千分位、货币等numeral.handlebars-helper.jsJSONPath用 JSONPath 从嵌套数据中取值json-path.handlebars-helper.jsintl国际化文本处理intl.handlebars-helper.jsnearestDate查找最近日期nearest-date.handlebars-helper.jstoXml/md5转 XML / 哈希计算to-xml.handlebars-helper.js等通用组字符串、数组、数学、比较等来自 handlebars-helpersmisc.handlebars-helper.js✨ 例如{{ 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 到对话测试——都在同一块看板内完成右栏即为实时对话窗口常见问题FAQQChart 和 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考