Chat SDK斜杠命令与模态框实战构建支持/command指令与表单验证的交互【免费下载链接】chatUniversal chat layer for building bots and agents.项目地址: https://gitcode.com/gh_mirrors/chat67/chatChat SDK 是一个跨平台的聊天机器人开发工具包本文将带你用 Chat SDK 的**斜杠命令Slash Commands和模态框Modals**两大功能一步步构建支持/command指令调用与表单验证的交互式机器人。你只需注册一个事件处理器就能让用户通过/feedback这样的命令打开表单弹窗并在服务端完成输入校验——无需为 Slack、Teams、Telegram 等平台分别写一遍逻辑。为什么选择斜杠命令 模态框组合斜杠命令让用户以/command的语法主动召唤机器人是客服工单、系统状态查询、审批流等场景的天然入口。而模态框则把自由聊天升级为结构化表单文本框、下拉框、日期选择器、数字输入一应俱全。两者配合的典型流程是用户在频道里输入/feedback机器人弹出一个反馈表单模态框用户填写并提交服务端校验数据错误直接标在对应字段上目前Slack 和 Teams 完整支持模态框Slack、Discord、Telegram 支持斜杠命令平台能力差异 Chat SDK 已帮你抹平。三步搞定你的第一个斜杠命令第一步注册一个具体的命令处理器。以下代码来自官方示例 lib/bot.tsbot.onSlashCommand(/status, async (event) { await event.channel.post(All systems operational!); });第二步也可以让一个处理器同时响应多个命令bot.onSlashCommand([/help, /info], async (event) { await event.channel.post(You invoked ${event.command}); });第三步如果想兜底接收所有未单独处理的命令注册一个不传命令名的处理器即可通过event.command和event.text区分指令与参数。处理器收到的event对象包含关键字段属性说明command命令名如/statustext命令后的参数文本user触发命令的用户channel命令所在的频道可用来回发消息openModal打开模态框的方法 ⭐其中openModal正是通向模态框的钥匙。 小贴士Telegram 上用户输入/statusmybot这类带机器人后缀的写法同样会被识别Discord 的子命令如/project create会被自动展平为event.command路径参数归入event.text。从斜杠命令直接打开模态框表单在命令处理器里调用event.openModal()传入用 JSX 描述的表单即可。这是一个用户反馈收集的真实写法import { Modal, TextInput, Select, SelectOption } from chat; bot.onSlashCommand(/feedback, async (event) { const result await event.openModal( Modal callbackIdfeedback_form titleSend Feedback submitLabelSend TextInput idmessage labelYour Feedback multiline / Select idcategory labelCategory SelectOption labelBug valuebug / SelectOption labelFeature valuefeature / /Select /Modal ); if (!result) { await event.channel.post(Couldnt open the feedback form. Please try again.); } });注意callbackIdfeedback_form——它是表单的身份证稍后的提交处理器会靠它来匹配路由。模态框组件一览搭建表单的积木模态框支持的字段组件详见 modals.mdx组件用途TextInput文本输入支持多行、最大长度限制NumberInput数字输入可设min/maxDateInput日期选择提交为YYYY-MM-DDSelect/RadioSelect下拉单选 / 单选按钮组ExternalSelect动态搜索下拉Slack 专属适合搜索人员、工单每个组件的id会作为键出现在提交事件的event.values里optional属性控制字段是否允许留空。表单标题、提交/取消按钮文案也都可以通过title、submitLabel、closeLabel自定义。服务端表单验证把错误标回字段上模态框最大的价值在于服务端校验。在onModalSubmit处理器里只要返回errors响应Slack/Teams 就会把错误信息直接显示在对应字段下方表单保持打开状态用户可修改后重新提交bot.onModalSubmit(feedback_form, async (event) { const { message, category } event.values; // 校验不通过错误标回字段 if (!message || message.length 5) { return { action: errors, errors: { message: Feedback must be at least 5 characters }, }; } // 校验通过回复到命令所在频道 if (event.relatedChannel) { await event.relatedChannel.post(Feedback received! Category: ${category}); } // 不返回任何值模态框自动关闭 });提交时可用的响应类型返回值效果undefined或{ action: close }关闭当前视图{ action: clear }清空所有视图彻底关闭模态框{ action: errors, errors: {...} }在指定字段显示校验错误{ action: update, modal: ... }替换模态框内容{ action: push, modal: ... }压入新的模态框视图多步表单一个关键细节从斜杠命令打开的模态框提交事件里拿到的是relatedChannel而非relatedThread用它把确认消息发回命令被触发的频道即可。取消处理与跨平台注意事项监听取消给Modal加上notifyOnClose再注册bot.onModalClose(feedback_form, ...)用户点取消时也能发条友好的提示。平台差异模态框目前由 Slack 和 Teams 适配器支持源码见 modals.ts在不支持的平台调用event.openModal()只会记录警告并返回undefined所以养成检查返回值的习惯很重要。动态下拉Slack 的ExternalSelect要求选项加载在 3 秒内响应记得做好缓存或预取。相关文件速查想深入了解仓库中这些文件值得一读斜杠命令指南apps/docs/content/docs/slash-commands.mdx模态框完整文档apps/docs/content/docs/modals.mdx模态框组件参考apps/docs/content/docs/api/modals.mdx事件注册核心实现packages/chat/src/chat.ts模态框组件定义packages/chat/src/modals.tsSlack 适配器模态框实现packages/adapter-slack/src/modals.ts小结用 Chat SDK 构建/command指令 表单验证交互核心就三步注册onSlashCommand→ 调用event.openModal()描述表单 → 在onModalSubmit里做服务端校验。一次编写Slack、Teams、Discord、Telegram 各取所需这正体现了写一次逻辑、部署到所有平台的 Chat SDK 理念 【免费下载链接】chatUniversal chat layer for building bots and agents.项目地址: https://gitcode.com/gh_mirrors/chat67/chat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考