Bot Framework React Web Chat渲染含Action.Execute的Adaptive Card问题咨询

核心结论 #

v4.15.2版本的Web Chat确实支持Adaptive Cards v1.5 schema，包括Action.Execute，但该动作不属于Web Chat默认处理的类型，需要手动添加自定义处理逻辑才能正常触发执行并发送消息。

问题原因解析 #

1. 报错根源：Web Chat默认的AdaptiveCardRenderer仅内置了Action.OpenUrl和Action.Submit的处理逻辑，未包含Action.Execute，因此点击按钮时会抛出Web Chat: received unknown action from Adaptive Cards错误。
2. 版本提示矛盾：Adaptive Card设计器的版本支持提示是未更新的旧信息，以Web Chat官方GitHub FAQ的说明为准，v4.15.2默认适配Adaptive Cards v1.5 schema。

解决步骤 #

要让Action.Execute按钮正常工作，需要通过自定义中间件注册该动作的处理函数，实现点击时发送消息给Bot：

• 定义Action.Execute的处理函数：负责解析动作参数，并构造要发送给Bot的消息内容。
• 创建Adaptive Card中间件：将处理函数注册到Web Chat的中间件中，让渲染器识别并处理Action.Execute类型。

代码示例（React版本） #

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

// 初始化Direct Line连接
const directLine = createDirectLine({ token: '你的Direct Line令牌' });

// 处理Action.Execute的逻辑
const handleExecuteAction = (action, card, sendMessage) => {
  // 构造发送给Bot的消息，可根据Action的参数自定义内容
  const executePayload = {
    type: 'message',
    text: '触发了Action.Execute动作',
    value: { ...action } // 将Action的完整参数附带，方便Bot解析处理
  };
  sendMessage(executePayload);
};

// 创建适配Action.Execute的中间件
const adaptiveCardMiddleware = createAdaptiveCardMiddleware({
  cardActionHandlers: {
    'Action.Execute': handleExecuteAction
  }
});

export default function WebChatComponent() {
  return (
    <WebChat
      directLine={directLine}
      middleware={[adaptiveCardMiddleware]}
    />
  );
}

补充说明 #

• 自定义处理函数中，你可以根据action对象的data等参数，构造更贴合业务需求的消息内容，Bot端需要对应解析该消息并处理后续逻辑。
• 如果使用的是非React版本的Web Chat，可通过renderAdaptiveCard方法扩展动作处理逻辑，核心思路一致：注册Action.Execute的处理回调。

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