基于Node.js的Azure Bot Service Web Chat能否添加输入栏持久菜单按钮？

当然可以搞定！结合你用的Node.js SDK、Web Chat渠道还有Azure Bot Service，完全能在输入栏旁边加个持久的菜单按钮，我给你捋捋具体怎么实现：

核心思路 #

Web Chat本质是React构建的，所以我们可以通过自定义Web Chat的UI组件来扩展输入栏区域，添加上菜单按钮；同时用Node.js SDK处理按钮触发后的交互逻辑，完美衔接前端和机器人的交互。

具体实现步骤 #

1. 自定义Web Chat的输入栏组件 #

你需要在嵌入Web Chat的前端代码里，重写输入栏的渲染逻辑，把菜单按钮加进去。这里给你个React组件示例：

import React from 'react';
import { createDirectLine } from 'botframework-webchat';
import WebChat from 'botframework-webchat';

const CustomSendBox = ({ sendBoxProps }) => {
  const handleMenuClick = () => {
    // 点击按钮后给机器人发消息触发菜单
    sendBoxProps.postActivity({
      type: 'message',
      text: 'show_main_menu'
    });
  };

  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      {/* 保留原有的输入框 */}
      <input
        {...sendBoxProps}
        style={{ flex: 1, padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
      />
      {/* 自定义的菜单按钮 */}
      <button
        onClick={handleMenuClick}
        style={{ padding: '8px 16px', borderRadius: '4px', border: 'none', backgroundColor: '#0078d4', color: 'white', cursor: 'pointer' }}
      >
        菜单
      </button>
    </div>
  );
};

// 初始化Direct Line连接，记得替换成你的token
const directLine = createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });

// 渲染带自定义输入栏的Web Chat
export default () => (
  <WebChat
    directLine={directLine}
    components={{
      SendBox: CustomSendBox
    }}
  />
);

2. 在Node.js机器人里处理菜单触发逻辑 #

接下来在你的Node.js Bot代码中，监听前端发过来的show_main_menu消息，返回对应的菜单选项就行：

const { ActivityHandler, MessageFactory } = require('botbuilder');

class MyBot extends ActivityHandler {
    constructor() {
        super();
        // 处理用户消息
        this.onMessage(async (context, next) => {
            if (context.activity.text === 'show_main_menu') {
                // 生成英雄卡片作为菜单
                const menuCard = MessageFactory.attachment({
                    contentType: 'application/vnd.microsoft.card.hero',
                    content: {
                        title: '主菜单',
                        buttons: [
                            { type: 'imBack', title: '查看帮助', value: 'help' },
                            { type: 'imBack', title: '我的订单', value: 'my_orders' },
                            { type: 'imBack', title: '联系客服', value: 'contact_support' }
                        ]
                    }
                });
                await context.sendActivity(menuCard);
            } else {
                // 处理其他普通消息
                await context.sendActivity(`你刚发了: ${context.activity.text}`);
            }
            await next();
        });
    }
}

module.exports.MyBot = MyBot;

3. 部署测试 #

• 把自定义Web Chat的前端代码部署到你的Web应用里
• 确保Node.js机器人已经部署到Azure Bot Service，并且配置好了Direct Line渠道
• 打开你的Web应用，就能看到输入栏旁边的菜单按钮，点击后机器人会返回菜单选项啦

小提示 #

• 如果用的是Web Chat的CDN版本（不是React组件），也可以通过DOM操作加按钮，但自定义灵活性不如React组件方式
• 按钮的样式完全可以根据你的网站风格调整，颜色、大小、位置都能改
• 更优雅的方式是发送**事件（event）**而不是文本消息触发菜单，比如把postActivity里的type设为event，name设为showMenu，然后在机器人里用onEvent监听，这样就不会和普通文本消息混淆啦

内容的提问来源于stack exchange，提问作者priya sethi