如何在 BotFramework-WebChat 中实现反应按钮以将反应发送到 Azure 上的机器人

Question

我目前正在使用 NPM 包 BotFramework-WebChat 和 Typescript 开发聊天机器人。后端托管在 Azure 上。我遇到过一个场景，我想为 WebChat 中的每条消息实现反应按钮（如竖起大拇指、竖起大拇指等）。目标是允许用户将反应发送回机器人，类似于 Microsoft Teams 中的操作方式。 在探索 BotFramework-WebChat GitHub 文档和示例时，我发现了一个示例，表明这是可能的。然而，我面临着一些挑战：

1. 文档引用的类型似乎在当前版本的库中不存在。 （相关 GitHub 问题：3866、5246）
2. 示例中提供的模拟机器人无法按预期工作，导致难以理解其实现。

根据文档，应该可以创建这样的函数：

  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 在基于网络的聊天体验中完全实现？

Answer 1

不幸的是，我无法重现您在测试代码时收到的确切错误。但是，您的

handleUpvoteButton

实现与示例代码不一致。应该这样设置：

const addMessageReaction = helpful => {
  postActivity( {
    type: 'messageReaction',
    reactionsAdded: [ { type: helpful === 1 ? 'ThumbsUp' : 'ThumbsDown' } ],
    replyToId: activityID,
  } );
};

const handleUpvoteButton = useCallback( () => {
  addMessageReaction( 1 );
}, [ activityID, postActivity ] );

或者，如果您不想将

addMessageReaction

的代码外推到其自己的函数中，那么代码应如下所示：

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

这个实现对我有用，所以尝试一下，看看它是否适合你。