如何在BotFramework-WebChat中实现向Azure机器人发送消息反应按钮

我正在用TypeScript结合BotFramework-WebChat开发聊天机器人，后端部署在Azure上，想给WebChat里的每条消息加反应按钮（比如点赞、点踩），让用户能给机器人发消息反应，功能类似Microsoft Teams。

查了BotFramework-WebChat的GitHub文档和示例，知道这个功能可行，但遇到两个问题：

• 文档里引用的类型在当前版本库中不存在（相关GitHub问题：3866、5246）；
• 示例里的模拟机器人没法正常工作，搞不懂实现逻辑。

按照文档写了如下函数：

const postActivity = usePostActivity();

const handleUpvoteButton = useCallback(() => {
  postActivity({
    type: 'messageReaction',
    reactionsAdded: [{ activityID, helpful: 1 }],
  });
}, [activityID, postActivity]);

但碰到两个类型错误：

Type '"messageReaction"' is not assignable to type '"event" | "conversationUpdate" | "invoke" | "message" | "typing"'

'reactionsAdded' does not exist in type 'WebChatActivity'

我的问题：

1. 能不能在BotFramework-WebChat里实现向Azure机器人发送消息反应的按钮？
2. 如果可行，能不能给正确的实现指导或示例？
3. 这个功能是不是只能在Microsoft Teams用，还是能在基于WebChat的网页聊天里完全实现？

问题1：是否可行？ #

完全可以实现，BotFramework-WebChat支持自定义消息组件，并且Azure Bot Service可以接收自定义的消息反应活动，只是当前版本的WebChat类型定义没有包含messageReaction相关类型，需要手动扩展。

问题2：正确实现指导与示例 #

步骤1：扩展WebChat的类型定义

在项目中创建一个类型声明文件（比如webchat-extensions.d.ts），补充缺失的类型：

import type { WebChatActivity } from 'botframework-webchat';

declare module 'botframework-webchat' {
  interface WebChatActivity {
    type: typeof ActivityTypes | 'messageReaction';
    reactionsAdded?: Array<{ activityID: string; helpful: number }>;
    reactionsRemoved?: Array<{ activityID: string; helpful: number }>;
  }

  export const ActivityTypes: {
    messageReaction: 'messageReaction';
  } & typeof ActivityTypes;
}

步骤2：自定义消息气泡组件，添加反应按钮

使用WebChat的自定义组件能力，给每条消息挂载点赞/点踩按钮：

import React, { useCallback } from 'react';
import { usePostActivity, Message, createCustomStyleSet, WebChat } from 'botframework-webchat';

const CustomMessage = (props) => {
  const { activity } = props;
  const postActivity = usePostActivity();
  const activityID = activity.id;

  const handleUpvote = useCallback(() => {
    postActivity({
      type: 'messageReaction',
      reactionsAdded: [{ activityID, helpful: 1 }],
      conversation: activity.conversation,
      from: activity.recipient,
      recipient: activity.from
    } as any);
  }, [activityID, postActivity, activity]);

  const handleDownvote = useCallback(() => {
    postActivity({
      type: 'messageReaction',
      reactionsAdded: [{ activityID, helpful: -1 }],
      conversation: activity.conversation,
      from: activity.recipient,
      recipient: activity.from
    } as any);
  }, [activityID, postActivity, activity]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginBottom: '8px' }}>
      <Message {...props} />
      <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
        <button onClick={handleUpvote} style={{ padding: '4px 8px', border: '1px solid #e0e0e0', borderRadius: '4px', cursor: 'pointer' }}>
          👍 点赞
        </button>
        <button onClick={handleDownvote} style={{ padding: '4px 8px', border: '1px solid #e0e0e0', borderRadius: '4px', cursor: 'pointer' }}>
          👎 点踩
        </button>
      </div>
    </div>
  );
};

// 应用自定义组件到WebChat
const styleSet = createCustomStyleSet();

export const ChatComponent = ({ directLine }) => {
  return (
    <WebChat
      directLine={directLine}
      styleSet={styleSet}
      components={{
        Message: CustomMessage
      }}
    />
  );
};

步骤3：后端Azure机器人接收消息反应

在Azure Bot的代码中，添加messageReaction类型活动的处理逻辑：

Node.js示例：

this.onMessageReaction(async (context, next) => {
  const reaction = context.activity.reactionsAdded?.[0];
  if (reaction) {
    const feedbackType = reaction.helpful === 1 ? '点赞' : '点踩';
    await context.sendActivity(`已收到你的${feedbackType}，感谢你的反馈！`);
    // 这里可以扩展逻辑，比如将反应记录到数据库、关联原消息等
  }
  await next();
});

问题3：是否仅限Teams使用？ #

这个功能不局限于Microsoft Teams，完全可以在基于WebChat的网页聊天体验中完整实现。Teams只是BotFramework支持的渠道之一，WebChat作为独立渠道，通过自定义组件和类型扩展，能实现从前端发送反应到后端接收处理的完整流程。

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