feat(@aws-amplify/ui-components): Add ChatBot Component

[wlee221]

Issue #, if available:

Description of changes: This PR adds amplify-chatbot as part of the Amplify UI Component redesign.

Features:

• Add audioRecorder module for recording / encoding / playing audio and silence detection
• Implement state logic and send text / voice message with Interactions.send
• Add lex response waiting / listening animation
• Error handling with amplify-toast

Customization:

• Add slot for chatbot header
• Expose css variables for customization

Previous Components Improvements:

• Add icon variant to amplify-button
• Expose additional css variables in amplify-button, amplify-icon, and amplify-input.
• Add microphone and send icon SVG to amplify-icon.
• Remove span inside amplify-icon.

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[codecov]

Codecov Report

Merging #6563 into ui-components/main will not change coverage.
The diff coverage is n/a.

@@                 Coverage Diff                 @@
##           ui-components/main    #6563   +/-   ##
===================================================
  Coverage               73.30%   73.30%           
===================================================
  Files                     208      208           
  Lines                   12928    12928           
  Branches                 2433     2433           
===================================================
  Hits                     9477     9477           
  Misses                   3288     3288           
  Partials                  163      163           

Impacted Files	Coverage Δ
packages/interactions/src/Interactions.ts	94.23% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 46770e9...212d4a5. Read the comment docs.

[ashika01]

Some nits / non blocking suggestions.

[ashika01]

Could we not move this to a separate interactions-helpers

[wlee221]

hmmmm that's a good idea; I thought about it too, but I decided not to for now because both sendText and sendVoice have setState logic throughout them. I'll see how interactions-helpers would look after the preview release.

[ashika01]

@wlee221 Looks awesome 👏 Great work 🎉 🌮 Wondering if you already tested this cross browsers to see how UI is rendered and if all functionalities work across different browsers.?

[lgtm-com]

This pull request introduces 1 alert and fixes 1 when merging 0acd8f8 into 00d5e17 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

fixed alerts:

• 1 for Unused variable, import, function or class

[wlee221]

@wlee221 Looks awesome 👏 Great work 🎉 🌮 Wondering if you already tested this cross browsers to see how UI is rendered and if all functionalities work across different browsers.?

Thanks Ashika! I tested this on Firefox / Chrome with React and Vue. I'll test for Angular and safari.

[lgtm-com]

This pull request introduces 1 alert and fixes 1 when merging 378e921 into 00d5e17 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

fixed alerts:

• 1 for Unused variable, import, function or class

[wlee221]

Just tested for safari and it doesn't support promise based decodeAudioData, so I had to use the callback based one. Tested across chrome / safari / firefox and looks good! I'll get it merged if the test passes.

[lgtm-com]

This pull request introduces 1 alert and fixes 1 when merging 212d4a5 into 46770e9 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

fixed alerts:

• 1 for Unused variable, import, function or class

[github-actions]

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.