search

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
905 stars 286 forks source link

Amplify Chatbot does not render response cards when deployed on web-site #3008

Closed aladevlearning closed 1 year ago

aladevlearning commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Interactions

Amplify Categories

interactions

Environment information

``` # Put output below this line System: OS: Windows 10 10.0.19042 CPU: (4) x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz Memory: 625.21 MB / 11.70 GB Binaries: Node: 14.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 7.21.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 95.0.4638.69 Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.40) Internet Explorer: 11.0.19041.1202 npmPackages: @aws-amplify/api: 4.0.22 => 4.0.22 @aws-amplify/auth: 4.3.12 => 4.3.12 @aws-amplify/core: 4.3.4 => 4.3.4 @aws-amplify/interactions: 4.0.22 => 4.0.22 @aws-amplify/storage: ^4.4.5 => 4.4.5 @aws-amplify/xr: ^3.0.22 => 3.0.22 @aws-sdk/client-cognito-identity: ^3.36.1 => 3.36.1 (3.6.1) @aws-sdk/client-s3: ^3.36.1 => 3.36.1 (3.6.1) @aws-sdk/s3-request-presigner: ^3.36.1 => 3.36.1 (3.6.1) @lourenci/react-kanban: ^2.1.0 => 2.1.0 @testing-library/jest-dom: ^5.14.1 => 5.14.1 @testing-library/react: ^12.0.0 => 12.0.0 @testing-library/user-event: ^13.2.1 => 13.2.1 @toast-ui/react-calendar: ^1.0.5 => 1.0.5 @vtaits/react-color-picker: ^0.1.1 => 0.1.1 apexcharts: 3.27.3 => 3.27.3 availity-reactstrap-validation: ^2.7.1 => 2.7.1 aws-amplify: 4.3.4 => 4.3.4 aws-amplify-react: 4.2.35 => 4.2.35 axios: ^0.21.1 => 0.21.4 axios-mock-adapter: ^1.20.0 => 1.20.0 bootstrap: ^5.1.0 => 5.1.0 chart.js: ^2.9.4 => 2.9.4 chartist: ^0.11.4 => 0.11.4 classnames: ^2.3.1 => 2.3.1 draft-js: ^0.11.7 => 0.11.7 echarts: ^4.9.0 => 4.9.0 echarts-for-react: ^3.0.1 => 3.0.1 eslint: ^7.29.0 => 7.29.0 eslint-config-standard-react: ^9.2.0 => 9.2.0 eslint-plugin-react: ^7.20.6 => 7.24.0 google-maps-react: ^2.0.6 => 2.0.6 i18next: ^20.3.1 => 20.3.2 i18next-browser-languagedetector: ^6.1.1 => 6.1.2 leaflet: ^1.7.1 => 1.7.1 metismenujs: ^1.3.0 => 1.3.0 moment: 2.29.1 => 2.29.1 node-sass: ^6.0.1 => 6.0.1 nouislider-react: ^3.4.0 => 3.4.0 prettier: ^2.1.1 => 2.3.2 prop-types: ^15.7.2 => 15.7.2 react: ^17.0.2 => 17.0.2 (16.14.0) react-apexcharts: ^1.3.9 => 1.3.9 react-auth-code-input: ^1.2.1 => 1.2.1 react-bootstrap-editable: ^0.8.2 => 0.8.2 react-bootstrap-sweetalert: ^5.2.0 => 5.2.0 react-bootstrap-table-next: ^4.0.3 => 4.0.3 react-bootstrap-table2-editor: ^1.4.0 => 1.4.0 react-bootstrap-table2-paginator: ^2.1.2 => 2.1.2 react-bootstrap-table2-toolkit: ^2.1.3 => 2.1.3 react-chartist: ^0.14.4 => 0.14.4 react-chartjs-2: ^2.11.1 => 2.11.2 react-color: ^2.19.3 => 2.19.3 react-countdown: ^2.3.2 => 2.3.2 react-datepicker: ^4.1.1 => 4.1.1 react-dom: ^17.0.2 => 17.0.2 react-draft-wysiwyg: ^1.14.7 => 1.14.7 react-drag-listview: ^0.1.8 => 0.1.8 react-drawer: ^1.3.4 => 1.3.4 react-dropzone: ^11.3.2 => 11.3.4 react-dual-listbox: ^2.1.2 => 2.2.0 react-facebook-login: ^4.1.1 => 4.1.1 react-flatpickr: ^3.10.7 => 3.10.7 react-google-login: ^5.2.2 => 5.2.2 react-i18next: ^11.10.0 => 11.11.0 react-image-lightbox: ^5.1.1 => 5.1.1 react-input-mask: ^2.0.4 => 2.0.4 react-jvectormap: ^0.0.16 => 0.0.16 react-leaflet: ^2.7.0 => 2.8.0 react-meta-tags: ^1.0.1 => 1.0.1 react-modal-video: ^1.2.7 => 1.2.8 react-native-inline-datepicker: ^1.2.0 => 1.2.0 react-perfect-scrollbar: ^1.5.8 => 1.5.8 react-rangeslider: ^2.2.0 => 2.2.0 react-rating: ^2.0.5 => 2.0.5 react-rating-tooltip: ^1.2.0 => 1.2.0 react-redux: ^7.2.4 => 7.2.4 react-responsive-carousel: ^3.2.18 => 3.2.19 react-router-dom: ^5.2.0 => 5.2.0 react-script: ^2.0.5 => 2.0.5 react-scripts: 4.0.3 => 4.0.3 react-select: ^4.3.1 => 4.3.1 react-sparklines: ^1.7.0 => 1.7.0 react-star-ratings: ^2.3.0 => 2.3.0 react-stepzilla: ^6.0.2 => 6.0.2 react-super-responsive-table: ^5.2.0 => 5.2.0 react-switch: ^6.0.0 => 6.0.0 react-table: ^7.7.0 => 7.7.0 react-time-picker: ^4.3.0 => 4.3.0 react-toast-notifications: ^2.4.4 => 2.4.4 react-toastr: ^3.0.0 => 3.0.0 react-twitter-auth: 0.0.13 => 0.0.13 reactstrap: ^8.9.0 => 8.9.0 recharts: ^2.0.9 => 2.0.9 redux: ^4.1.0 => 4.1.0 redux-form: ^8.3.7 => 8.3.7 redux-saga: ^1.1.3 => 1.1.3 redux-saga/effects: undefined () simplebar-react: ^2.3.5 => 2.3.5 styled-components: ^5.3.0 => 5.3.0 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () toastr: ^2.1.4 => 2.1.4 tui-date-picker-react: ^0.0.1-rebuild-3 => 0.0.1-rebuild-3 typescript: ^4.4.3 => 4.4.3 uuid: ^8.3.2 => 8.3.2 (3.4.0) webpack-bundle-analyzer: ^4.5.0 => 4.5.0 npmGlobalPackages: @angular/cli: 12.2.3 @aws-amplify/cli: 6.3.1 npm: 7.21.1 serverless: 2.64.1 ```

Describe the bug

I have configured a Lex bot version 1. When testing within the Amazon Console, I can see rendered response cards: image

When I use manual setup in Amplify and add the ChatBot React Component to a webapp, the response cards are not show, even thought response card data is returned from API: image

ChatBot is configured as standard:

<ChatBot
      title="My Bot"
      theme={myTheme}
      botName="<BOT-NAME>"
      welcomeMessage="Welcome, how can I help you today (Hint, say 'Book an appointment'?"
      onComplete={() => handleComplete()}
      clearOnComplete={true}
      conversationModeOn={false}
  />

Expected behavior

I would expect response cards to be rendered also in Amplify interaction ChatBot component.

Reproduction steps

  1. Create a Lex v1 Bot based on pre-existing Book an appointment intent
  2. Build and publish bot
  3. In a React project follow Manual setup section here: https://docs.amplify.aws/lib/interactions/getting-started/q/platform/js/
  4. Use the ChatBot in a React component as described here: https://docs.amplify.aws/ui-legacy/interactions/chatbot/q/framework/react/

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

ramit21 commented 2 years ago

Any update on this issue please? When will this be fixed?

stocaaro commented 1 year ago

The ChatBot component is a feature of the deprecated UI that doesn't currently have support in the new UI library. Redirection to the UI repo.

reesscot commented 1 year ago

The ChatBot component has been deprecated and is no longer supported.