React中使用AmplifyChatbot组件时响应卡片不显示问题求助

问题诊断与修复方案 #

1. 确认Lex版本与组件兼容性 #

如果你的Lex机器人是V2版本，当前使用的@aws-amplify/ui-react/legacy下的AmplifyChatbot组件对V2响应卡片的支持有限。可以选择升级到新版Amplify UI组件，或者调整Lambda返回格式适配Lex V1规范。

2. 修正Lambda响应格式 #

Lex控制台能识别卡片，但Amplify需要严格的格式才能解析渲染。替换Lambda中原有elicitSlot的调用逻辑，确保卡片数据嵌入正确的responseCard字段：

// 替换原有的callback代码
callback({
  sessionAttributes: intentRequest.sessionAttributes,
  dialogAction: {
    type: 'ElicitSlot',
    intentName: intentRequest.currentIntent.name,
    slots: slots,
    slotToElicit: 'DomainName',
    message: {
      contentType: 'PlainText',
      content: `${domainN} is already taken, Try a different name `
    },
    responseCard: {
      version: 1,
      contentType: 'application/vnd.amazonaws.card.generic',
      genericAttachments: [
        {
          title: options.title,
          subTitle: options.subTitle,
          imageUrl: options.imageUrl,
          buttons: options.buttons.map(btn => ({
            text: btn.text,
            value: btn.value
          }))
        }
      ]
    }
  }
});

核心是将卡片数据放入responseCard.genericAttachments数组中，这是Amplify解析卡片的必要结构。

3. 修复Amplify配置冲突 #

当前代码中两次调用Amplify.configure会导致配置覆盖，合并为一次配置即可：

Amplify.configure({
  ...awsconfig,
  Interactions: {
    bots: {
      MySurvey: {
        name: "MySurvey",
        alias: "mySurvey",
        region: "us-east-1",
      },
      OrderFlowers_dev: {
        name: "OrderFlowers_dev",
        alias: "$LATEST",
        region: "us-east-1",
      }
    },
  },
});

4. 升级依赖版本（可选） #

当前使用的aws-amplify@4.3.37和@aws-amplify/ui-react@3.5.7版本较旧，可能存在兼容性问题。可以升级到稳定版：

{
  "dependencies": {
    "@aws-amplify/ui-react": "^4.6.0",
    "aws-amplify": "^5.3.11"
  }
}

升级后，将AmplifyChatbot的导入路径改为import { AmplifyChatbot } from "@aws-amplify/ui-react"（移除/legacy），新版组件对Lex V2的支持更完善。

5. 前端调试确认响应 #

在React组件中添加监听，验证Amplify获取到的Lex响应是否包含卡片数据：

import { Interactions } from 'aws-amplify';

function App() {
  React.useEffect(() => {
    Interactions.onComplete('MySurvey', (response) => {
      console.log('Lex返回的响应:', response);
    });
  }, []);

  // 原有组件代码...
}

打开浏览器控制台查看输出，确认响应中是否存在responseCard或messageGroups字段，确保卡片数据已正确传递到前端。

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