使用React自定义Azure聊天机器人Web UI，实现会议预约及useSendPostBack使用咨询

1. 先完成Web Chat基础集成
   安装必要依赖botframework-webchat，在你的React组件中初始化Web Chat，传入Azure机器人的直连密钥，确保基础聊天功能正常运行。
2. 配置Redux Middleware监听触发词
   添加自定义Middleware拦截Web Chat的活动流，当检测到用户发送的消息内容为schedule meeting时，更新本地状态控制预约表单渲染：

// 自定义Middleware示例
const scheduleMeetingMiddleware = store => next => action => {
  // 拦截用户发送消息成功的回调action
  if (action.type === 'DIRECT_LINE/POST_ACTIVITY_FULFILLED') {
    const messageText = action.payload.activity.text?.trim().toLowerCase();
    if (messageText === 'schedule meeting') {
      // 此处更新你组件内部的状态，显示表单
      setShowMeetingForm(true);
    }
  }
  return next(action);
};
// 初始化Web Chat时传入Middleware
<ReactWebChat
  directLine={createDirectLine({ token: '你的直连密钥' })}
  middleware={{ activity: [scheduleMeetingMiddleware] }}
/>

3. 开发会议预约表单组件
   按普通React受控表单的写法开发即可，包含你需要的字段比如会议主题、参会人邮箱、预约时间、会议时长等。
4. 调用useSendPostBack提交表单
   在表单的提交回调函数中调用该钩子，把表单数据发送给机器人：

import { useSendPostBack } from '@botframework-webchat/core';

function MeetingForm() {
  const sendPostBack = useSendPostBack();
  const handleSubmit = (formData) => {
    // 第一个参数为提交的payload，第二个参数控制是否在聊天窗口显示提交消息，填false即可
    sendPostBack(formData, false);
    // 提交完成后隐藏表单
    setShowMeetingForm(false);
  };
  // 表单渲染逻辑省略
}

• 这是Bot Framework Web Chat官方封装的专用钩子，作用是生成并发送postBack类型的活动，这类活动默认不会在聊天窗口中展示，适合传递表单数据这类不需要用户可见的后台交互。
• 钩子内部已经封装了Bot Framework的协议格式，你传入的表单数据会被自动填充到活动的value字段中，通过直连通道直接发送到Azure端的机器人服务，不需要手动处理通信和协议适配逻辑。

不需要修改Echo Bot的基础接入逻辑，只需要在消息处理回调中增加对postBack类型活动的判断，直接从activity.value字段读取提交的表单数据即可，不同语言的实现逻辑一致，这里以C#为例：

protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
{
    // 判断是否为提交的表单数据
    if (turnContext.Activity.Value != null)
    {
        var meetingInfo = turnContext.Activity.Value as JObject;
        // 此处可添加你的业务逻辑，比如写入日历、发送通知等
        await turnContext.SendActivityAsync($"已成功预约会议：{meetingInfo["title"]}", cancellationToken: cancellationToken);
        return;
    }
    // 原有Echo逻辑保持不变
    await turnContext.SendActivityAsync(MessageFactory.Text($"Echo: {turnContext.Activity.Text}"), cancellationToken);
}

• 表单校验逻辑可以正常加在前端提交前，校验不通过不调用发送接口即可。
• 触发表单显示后，可以主动给用户发送一条提示消息，引导用户填写表单，体验会更好。
• 如果需要支持用户取消填写，添加一个取消按钮把控制表单显隐的状态设为false即可。

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