1

Trying to implement Amazon lex bot in my website(reactjs) using AmplifyChatbot

AmplifyChatbot Docs:https://ui.docs.amplify.aws/react/legacy-components/chatbot

Response card is displaying fine on amazon lex but in website its not displaying

this is my react js code

import * as React from "react";
import { Amplify } from "aws-amplify";
import { AmplifyChatbot } from "@aws-amplify/ui-react/legacy";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

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

function App() {
  React.useEffect(() => {
    console.log(Amplify);
  });

  return (
    <div>
      <AmplifyChatbot
        botName="MySurvey"
        botTitle="myBot"
        welcomeMessage="Hello, how can I help you?"
      />
      </div>
  );
}

export default App;

this is my package.json

{
  "name": "amazon-lex-integration",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/cli": "^10.2.3",
    "@aws-amplify/ui-react": "^3.5.7",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^4.3.37",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

and below is the part of my lambda func if you need it

  function getButtons(options){
      console.log('im in getButtons')
      // console.log('button',typeof options[0].domain);
      var buttons = [];
      
      for(let i = 0; buttons.length < 2; i++){
        //   console.log('in for loop',await checkAvail(options[i].domain).then(res => res.data.available));
            if(true){
                buttons.push({
                    text: options[i].domain,
                    value: options[i].domain
                })
            }
        console.log('end line foor button', buttons);
        
      
      }
      console.log('buttons in outer foreach loop ',buttons);
      return buttons;
    }

    function getOptions(title, types) {
      return {
        title: title,
        subTitle: 'subttile',
        imageUrl: 'https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/featured-what-is-domain.png',
        buttons: getButtons(types)
      };
    }
    
    
    
    
    // if(intentRequest.invocationSource === 'DialogCodeHook'){
        console.log('im in dialog');
        
        if(!avail){
          
            var options = getOptions('Check out these alternate names', opt)
            slots['DomainName'] = null;
            if(options){
                callback(
                elicitSlot(
                    intentRequest.sessionAttributes,
                    intentRequest.currentIntent.name,
                    slots,
                    'DomainName',
                    {'contentType': 'PlainText', 'content': `${domainN} is already taken, Try a different name `},
                    options.title,
                    options.subTitle,
                    options.imageUrl,
                    options.buttons
                )
            );
            }
        }
VazzCode
  • 11
  • 1
  • AmplifyChatbot does not yet support response card. I'd suggest opening up a feature request in amplify-ui repo (https://github.com/aws-amplify/amplify-ui/issues/new/choose). But for the time being, you would need to implement your own ui component. – William Lee Oct 14 '22 at 10:52

0 Answers0