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
)
);
}
}