From c9a6600071b410335c7be94f37d2ed6a2156c5cb Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 3 Aug 2020 18:39:19 -0700 Subject: [PATCH 01/71] amplify-chatbot initial import --- .../amplify-ui-components/src/components.d.ts | 61 +++++++++++++ .../amplify-chatbot/amplify-chatbot.scss | 78 ++++++++++++++++ .../amplify-chatbot/amplify-chatbot.spec.tsx | 18 ++++ .../amplify-chatbot/amplify-chatbot.tsx | 91 +++++++++++++++++++ .../src/components/amplify-chatbot/readme.md | 35 +++++++ .../amplify-container.spec.ts | 9 +- .../components/amplify-icon-button/readme.md | 10 +- .../src/components/amplify-icon/icons.tsx | 16 ++++ .../src/components/amplify-icon/readme.md | 8 +- 9 files changed, 313 insertions(+), 13 deletions(-) create mode 100644 packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss create mode 100644 packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx create mode 100644 packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx create mode 100644 packages/amplify-ui-components/src/components/amplify-chatbot/readme.md diff --git a/packages/amplify-ui-components/src/components.d.ts b/packages/amplify-ui-components/src/components.d.ts index 60a8b78e6a6..b4e319ef899 100644 --- a/packages/amplify-ui-components/src/components.d.ts +++ b/packages/amplify-ui-components/src/components.d.ts @@ -76,6 +76,32 @@ export namespace Components { */ "variant": ButtonVariant; } + interface AmplifyChatbot { + /** + * Name of the bot + */ + "botName": string; + /** + * Text placed in the top header + */ + "botTitle": string; + /** + * Clear messages when conversation finishes + */ + "clearOnComplete": boolean; + /** + * Continue listening to users after they send the message + */ + "conversationModeOn": boolean; + /** + * Callback to be called after conversation finishes + */ + "onComplete": (err: string, data: object) => void; + /** + * Greeting message displayed to users + */ + "welcomeMessage": string; + } interface AmplifyCheckbox { /** * If `true`, the checkbox is selected. @@ -1116,6 +1142,12 @@ declare global { prototype: HTMLAmplifyButtonElement; new (): HTMLAmplifyButtonElement; }; + interface HTMLAmplifyChatbotElement extends Components.AmplifyChatbot, HTMLStencilElement { + } + var HTMLAmplifyChatbotElement: { + prototype: HTMLAmplifyChatbotElement; + new (): HTMLAmplifyChatbotElement; + }; interface HTMLAmplifyCheckboxElement extends Components.AmplifyCheckbox, HTMLStencilElement { } var HTMLAmplifyCheckboxElement: { @@ -1410,6 +1442,7 @@ declare global { "amplify-auth0-button": HTMLAmplifyAuth0ButtonElement; "amplify-authenticator": HTMLAmplifyAuthenticatorElement; "amplify-button": HTMLAmplifyButtonElement; + "amplify-chatbot": HTMLAmplifyChatbotElement; "amplify-checkbox": HTMLAmplifyCheckboxElement; "amplify-code-field": HTMLAmplifyCodeFieldElement; "amplify-confirm-sign-in": HTMLAmplifyConfirmSignInElement; @@ -1523,6 +1556,32 @@ declare namespace LocalJSX { */ "variant"?: ButtonVariant; } + interface AmplifyChatbot { + /** + * Name of the bot + */ + "botName"?: string; + /** + * Text placed in the top header + */ + "botTitle"?: string; + /** + * Clear messages when conversation finishes + */ + "clearOnComplete"?: boolean; + /** + * Continue listening to users after they send the message + */ + "conversationModeOn"?: boolean; + /** + * Callback to be called after conversation finishes + */ + "onComplete"?: (err: string, data: object) => void; + /** + * Greeting message displayed to users + */ + "welcomeMessage"?: string; + } interface AmplifyCheckbox { /** * If `true`, the checkbox is selected. @@ -2541,6 +2600,7 @@ declare namespace LocalJSX { "amplify-auth0-button": AmplifyAuth0Button; "amplify-authenticator": AmplifyAuthenticator; "amplify-button": AmplifyButton; + "amplify-chatbot": AmplifyChatbot; "amplify-checkbox": AmplifyCheckbox; "amplify-code-field": AmplifyCodeField; "amplify-confirm-sign-in": AmplifyConfirmSignIn; @@ -2600,6 +2660,7 @@ declare module "@stencil/core" { "amplify-auth0-button": LocalJSX.AmplifyAuth0Button & JSXBase.HTMLAttributes; "amplify-authenticator": LocalJSX.AmplifyAuthenticator & JSXBase.HTMLAttributes; "amplify-button": LocalJSX.AmplifyButton & JSXBase.HTMLAttributes; + "amplify-chatbot": LocalJSX.AmplifyChatbot & JSXBase.HTMLAttributes; "amplify-checkbox": LocalJSX.AmplifyCheckbox & JSXBase.HTMLAttributes; "amplify-code-field": LocalJSX.AmplifyCodeField & JSXBase.HTMLAttributes; "amplify-confirm-sign-in": LocalJSX.AmplifyConfirmSignIn & JSXBase.HTMLAttributes; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss new file mode 100644 index 00000000000..d18ee229616 --- /dev/null +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -0,0 +1,78 @@ +:host { + --header-color: var(--amplify-secondary-color); + --header-size: var(--amplify-text-lg); +} + +.amplify-chatbot { + position: relative; + background-color: var(--background-color); + display: inline-block; + border-radius: 6px; + box-shadow: 1px 0px 4px 0 rgba(0, 0, 0, 0.15); + box-sizing: border-box; + font-family: var(--amplify-font-family); + width: 460px; + max-width: 460px; + margin-bottom: 1rem; +} +.header { + margin-top: 20px; + color: var(--header-color); + font-size: var(--header-size); + font-weight: bold; + text-align: center; + margin-bottom: 24px; +} + +.body { + display: flex; + flex-direction: column; + height: 500px; + overflow: auto; +} + +.bubble { + max-width: 80%; + padding: 0.8em 1.4em; + clear: both; + word-wrap: break-word; + margin-bottom: 0.625rem; +} +.bot { + margin-left: 1rem; + margin-right: auto; + background-color: #dbdbdb; + color: black; + border-radius: 1.5rem 1.5rem 1.5rem 0; +} +.user { + margin-right: 1rem; + margin-left: auto; + background-color: #099ac8; // TODO: expose amplify blue color + color: var(--amplify-white); + border-radius: 1.5rem 1.5rem 0 1.5rem; +} + +.chatbot-control { + display: flex; + align-items: center; + border-top: 1px solid rgba(0, 0, 0, 0.05); + padding: 1rem; + input { + flex-grow: 1; + border: none; + &:focus { + outline: none; + } + } +} +.icon-button { + margin-left: 0.625rem; + cursor: pointer; +} + +.chatbot-footer { + position: absolute; + bottom: 0px; + height: 2rem; +} diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx new file mode 100644 index 00000000000..6534bcb2d46 --- /dev/null +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx @@ -0,0 +1,18 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { AmplifyChatbot } from './amplify-chatbot'; + +describe('amplify-chatbot', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [AmplifyChatbot], + html: ``, + }); + expect(page.root).toEqualHtml(` + + + + + + `); + }); +}); diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx new file mode 100644 index 00000000000..4606aa4b97d --- /dev/null +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -0,0 +1,91 @@ +import { Component, Host, h, Prop, State } from '@stencil/core'; + +type Message = { + content: string; + from: 'user' | 'bot'; +}; + +const messageJSX = (messages: Message[]) => { + return messages.map(message =>
{message.content}
); +}; + +@Component({ + tag: 'amplify-chatbot', + styleUrl: 'amplify-chatbot.scss', + shadow: true, +}) +export class AmplifyChatbot { + /** Name of the bot */ + @Prop() botName: string; + /** Clear messages when conversation finishes */ + @Prop() clearOnComplete: boolean = false; + /** Continue listening to users after they send the message */ + @Prop() conversationModeOn: boolean = false; + /** Greeting message displayed to users */ + @Prop() welcomeMessage: string; + /** Callback to be called after conversation finishes */ + @Prop() onComplete: (err: string, data: object) => void; + /** Text placed in the top header */ + @Prop() botTitle: string; + @State() messages: Message[] = []; + @State() text: string = ''; + + handleChange(event: Event) { + const target = event.target as HTMLInputElement; + this.text = target.value; + } + + send() { + if (this.text === '') return; + this.messages = [ + ...this.messages, + { + content: this.text, + from: 'user', + }, + { + content: 'echo: ' + this.text, + from: 'bot', + }, + ]; + this.text = ''; + } + + render() { + const testMessages: Message[] = [ + { content: 'Bot: hi', from: 'bot' }, + { content: 'User: hi', from: 'user' }, + { + content: + 'long mesageeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', + from: 'bot', + }, + ]; + if (this.messages.length === 0) this.messages.push(...testMessages); + return ( + +
+
+
{this.botTitle}
+
{messageJSX(this.messages)}
+
+
+ this.handleChange(e)} + /> + + + + this.send()}> + + +
+
+ + ); + } +} diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md new file mode 100644 index 00000000000..0a153c665ba --- /dev/null +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -0,0 +1,35 @@ +# amplify-chatbot + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ------------------------------------------------------- | ------------------------------------- | ----------- | +| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | +| `botTitle` | `bot-title` | Text placed in the top header | `string` | `undefined` | +| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | +| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | +| `onComplete` | -- | Callback to be called after conversation finishes | `(err: string, data: object) => void` | `undefined` | +| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | + + +## Dependencies + +### Depends on + +- [amplify-icon](../amplify-icon) + +### Graph +```mermaid +graph TD; + amplify-chatbot --> amplify-icon + style amplify-chatbot fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/amplify-ui-components/src/components/amplify-container/amplify-container.spec.ts b/packages/amplify-ui-components/src/components/amplify-container/amplify-container.spec.ts index 1633b42c140..60d8018ae1f 100644 --- a/packages/amplify-ui-components/src/components/amplify-container/amplify-container.spec.ts +++ b/packages/amplify-ui-components/src/components/amplify-container/amplify-container.spec.ts @@ -3,11 +3,10 @@ import { AmplifyContainer } from './amplify-container'; describe('amplify-container spec:', () => { describe('Component logic ->', () => { - let container; - - beforeEach(() => { - container = new AmplifyContainer(); - }); + // let container; + // beforeEach(() => { + // container = new AmplifyContainer(); + // }); }); describe('Render logic ->', () => { it('should render with an empty slot', async () => { diff --git a/packages/amplify-ui-components/src/components/amplify-icon-button/readme.md b/packages/amplify-ui-components/src/components/amplify-icon-button/readme.md index bfdb7363d23..a9159d1d3a5 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon-button/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-icon-button/readme.md @@ -5,11 +5,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `autoShowTooltip` | `auto-show-tooltip` | (Optional) Whether or not to show the tooltip automatically | `boolean` | `false` | -| `name` | `name` | The name of the icon used inside of the button | `"amazon" \| "auth0" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "minimize" \| "photoPlaceholder" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | -| `tooltip` | `tooltip` | (Optional) The tooltip that will show on hover of the button | `string` | `null` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `autoShowTooltip` | `auto-show-tooltip` | (Optional) Whether or not to show the tooltip automatically | `boolean` | `false` | +| `name` | `name` | The name of the icon used inside of the button | `"amazon" \| "auth0" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | +| `tooltip` | `tooltip` | (Optional) The tooltip that will show on hover of the button | `string` | `null` | ## Dependencies diff --git a/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx b/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx index 5d8752521b4..9df229c5929 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx +++ b/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx @@ -189,6 +189,22 @@ export const icons = { ); }, + + microphone() { + return ( + + + + ); + }, + + send() { + return ( + + + + ); + }, }; export type IconNameType = keyof typeof icons; diff --git a/packages/amplify-ui-components/src/components/amplify-icon/readme.md b/packages/amplify-ui-components/src/components/amplify-icon/readme.md index fde691c4ede..964e3bb28a2 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-icon/readme.md @@ -5,15 +5,16 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `name` | `name` | (Required) Name of icon used to determine the icon rendered | `"amazon" \| "auth0" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "minimize" \| "photoPlaceholder" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `name` | `name` | (Required) Name of icon used to determine the icon rendered | `"amazon" \| "auth0" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | ## Dependencies ### Used by + - [amplify-chatbot](../amplify-chatbot) - [amplify-icon-button](../amplify-icon-button) - [amplify-loading-spinner](../amplify-loading-spinner) - [amplify-photo-picker](../amplify-photo-picker) @@ -23,6 +24,7 @@ ### Graph ```mermaid graph TD; + amplify-chatbot --> amplify-icon amplify-icon-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-photo-picker --> amplify-icon From cc5d16b95afb14d004d4287455d1cb90f7410d11 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 3 Aug 2020 19:00:08 -0700 Subject: [PATCH 02/71] Use interface and comment out test --- .../amplify-chatbot/amplify-chatbot.spec.tsx | 31 ++++++++++--------- .../amplify-chatbot/amplify-chatbot.tsx | 4 +-- .../amplify-icon-button.spec.ts.snap | 28 +++++++++++++++++ .../__snapshots__/amplify-icon.spec.ts.snap | 20 ++++++++++++ 4 files changed, 67 insertions(+), 16 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx index 6534bcb2d46..b26b5c150a6 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx @@ -1,18 +1,21 @@ -import { newSpecPage } from '@stencil/core/testing'; -import { AmplifyChatbot } from './amplify-chatbot'; +// import { newSpecPage } from '@stencil/core/testing'; +// import { AmplifyChatbot } from './amplify-chatbot'; describe('amplify-chatbot', () => { - it('renders', async () => { - const page = await newSpecPage({ - components: [AmplifyChatbot], - html: ``, - }); - expect(page.root).toEqualHtml(` - - - - - - `); + // it('renders', async () => { + // const page = await newSpecPage({ + // components: [AmplifyChatbot], + // html: ``, + // }); + // expect(page.root).toEqualHtml(` + // + // + // + // + // + // `); + // }); + it('Test not yet implemented', () => { + return expect(true).toBe(true); }); }); diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 4606aa4b97d..02f572b2ea0 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -1,9 +1,9 @@ import { Component, Host, h, Prop, State } from '@stencil/core'; -type Message = { +interface Message { content: string; from: 'user' | 'bot'; -}; +} const messageJSX = (messages: Message[]) => { return messages.map(message =>
{message.content}
); diff --git a/packages/amplify-ui-components/src/components/amplify-icon-button/__snapshots__/amplify-icon-button.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-icon-button/__snapshots__/amplify-icon-button.spec.ts.snap index f3918328753..7aaf30195aa 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon-button/__snapshots__/amplify-icon-button.spec.ts.snap +++ b/packages/amplify-ui-components/src/components/amplify-icon-button/__snapshots__/amplify-icon-button.spec.ts.snap @@ -112,6 +112,20 @@ exports[`amplify-icon-button spec: Render logic -> renders maximize icon button `; +exports[`amplify-icon-button spec: Render logic -> renders microphone icon button correctly 1`] = ` + + + + + + + + + +`; + exports[`amplify-icon-button spec: Render logic -> renders minimize icon button correctly 1`] = ` @@ -140,6 +154,20 @@ exports[`amplify-icon-button spec: Render logic -> renders photoPlaceholder icon `; +exports[`amplify-icon-button spec: Render logic -> renders send icon button correctly 1`] = ` + + + + + + + + + +`; + exports[`amplify-icon-button spec: Render logic -> renders sound icon button correctly 1`] = ` diff --git a/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap index f8f2f730998..6e03f4edddd 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap +++ b/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap @@ -106,6 +106,16 @@ exports[`amplify-icon spec: Render logic -> renders maximize correctly 1`] = ` `; +exports[`amplify-icon spec: Render logic -> renders microphone correctly 1`] = ` + + + + + + + +`; + exports[`amplify-icon spec: Render logic -> renders minimize correctly 1`] = ` @@ -130,6 +140,16 @@ exports[`amplify-icon spec: Render logic -> renders photoPlaceholder correctly 1 `; +exports[`amplify-icon spec: Render logic -> renders send correctly 1`] = ` + + + + + + + +`; + exports[`amplify-icon spec: Render logic -> renders sound correctly 1`] = ` From 143441405e9b1e87ac903f9202ad21853562c74e Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 4 Aug 2020 13:39:22 -0700 Subject: [PATCH 03/71] Expose additional css variables and add icon variant to button --- .../src/common/types/ui-types.ts | 2 +- .../amplify-ui-components/src/components.d.ts | 10 +++- .../amplify-authenticator/readme.md | 1 + .../amplify-button/amplify-button.scss | 17 ++++++- .../amplify-button/amplify-button.tsx | 4 ++ .../src/components/amplify-button/readme.md | 20 +++++--- .../amplify-chatbot/amplify-chatbot.scss | 46 ++++++++++++------- .../amplify-chatbot/amplify-chatbot.tsx | 44 ++++++++++-------- .../src/components/amplify-chatbot/readme.md | 7 ++- .../amplify-confirm-sign-in/readme.md | 1 + .../amplify-confirm-sign-up/readme.md | 1 + .../amplify-federated-sign-in/readme.md | 1 + .../amplify-forgot-password/readme.md | 1 + .../components/amplify-form-section/readme.md | 1 + .../components/amplify-greetings/readme.md | 1 + .../components/amplify-icon/amplify-icon.scss | 7 ++- .../components/amplify-icon/amplify-icon.tsx | 4 +- .../src/components/amplify-icon/icons.tsx | 4 +- .../src/components/amplify-icon/readme.md | 4 +- .../amplify-input/amplify-input.scss | 6 ++- .../src/components/amplify-input/readme.md | 2 + .../components/amplify-photo-picker/readme.md | 1 + .../src/components/amplify-picker/readme.md | 1 + .../amplify-require-new-password/readme.md | 1 + .../src/components/amplify-s3-album/readme.md | 1 + .../amplify-s3-image-picker/readme.md | 1 + .../amplify-s3-text-picker/readme.md | 1 + .../amplify-select-mfa-type/readme.md | 1 + .../src/components/amplify-sign-in/readme.md | 1 + .../src/components/amplify-sign-out/readme.md | 1 + .../src/components/amplify-sign-up/readme.md | 1 + .../components/amplify-totp-setup/readme.md | 1 + .../amplify-verify-contact/readme.md | 1 + .../src/Interactions/ChatBot.tsx | 1 - 34 files changed, 141 insertions(+), 56 deletions(-) diff --git a/packages/amplify-ui-components/src/common/types/ui-types.ts b/packages/amplify-ui-components/src/common/types/ui-types.ts index 46702a06a09..d1bd541a86d 100644 --- a/packages/amplify-ui-components/src/common/types/ui-types.ts +++ b/packages/amplify-ui-components/src/common/types/ui-types.ts @@ -1,4 +1,4 @@ export interface InputEvent extends Event {} export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time'; export type ButtonTypes = 'button' | 'submit' | 'reset'; -export type ButtonVariant = 'button' | 'anchor'; +export type ButtonVariant = 'button' | 'anchor' | 'icon'; diff --git a/packages/amplify-ui-components/src/components.d.ts b/packages/amplify-ui-components/src/components.d.ts index 3aa899bfb61..962e9f41b62 100644 --- a/packages/amplify-ui-components/src/components.d.ts +++ b/packages/amplify-ui-components/src/components.d.ts @@ -8,9 +8,9 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { AuthState, AuthStateHandler, CognitoUserInterface, FederatedConfig, MFATypesInterface, UsernameAliasStrings } from "./common/types/auth-types"; import { FormFieldTypes } from "./components/amplify-auth-fields/amplify-auth-fields-interface"; import { ButtonTypes, ButtonVariant, InputEvent, TextFieldTypes } from "./common/types/ui-types"; +import { IconNameType } from "./components/amplify-icon/icons"; import { FunctionalComponent } from "@stencil/core"; import { CountryCodeDialOptions } from "./components/amplify-country-dial-code/amplify-country-dial-code-interface"; -import { IconNameType } from "./components/amplify-icon/icons"; import { AccessLevel, StorageObject } from "./common/types/storage-types"; import { SelectOptionsNumber, SelectOptionsString } from "./components/amplify-select/amplify-select-interface"; export namespace Components { @@ -67,6 +67,10 @@ export namespace Components { * (Optional) Callback called when a user clicks on the button */ "handleButtonClick": (evt: Event) => void; + /** + * Name of icon to be placed inside the button + */ + "icon"?: IconNameType; /** * Type of the button: 'button', 'submit' or 'reset' */ @@ -1551,6 +1555,10 @@ declare namespace LocalJSX { * (Optional) Callback called when a user clicks on the button */ "handleButtonClick"?: (evt: Event) => void; + /** + * Name of icon to be placed inside the button + */ + "icon"?: IconNameType; /** * Type of the button: 'button', 'submit' or 'reset' */ diff --git a/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md b/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md index 2d3d39849cc..34b4f27a621 100644 --- a/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md @@ -45,6 +45,7 @@ graph TD; amplify-sign-in --> amplify-strike amplify-sign-in --> amplify-auth-fields amplify-sign-in --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner diff --git a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss index 29a344182e7..5714b87b3d1 100644 --- a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss +++ b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss @@ -10,6 +10,9 @@ --link-hover: var(--amplify-primary-tint); --link-active: var(--amplify-primary-shade); --text-transform: uppercase; + --icon-color: var(--amplify-primary-color); + --icon-height: 1.25rem; + --padding: 1rem; width: 100%; text-align: center; @@ -35,7 +38,7 @@ user-select: none; background-image: none; color: var(--color); - padding: 1rem; + padding: var(--padding); letter-spacing: 0.75px; text-transform: var(--text-transform); background-color: var(--background-color); @@ -59,6 +62,18 @@ } } +.icon { + background-color: inherit; + border: none; + font: inherit; + cursor: pointer; + padding: var(--padding); + amplify-icon { + --icon-fill-color: var(--icon-color); + --height: var(--icon-height); + } +} + .anchor { color: var(--link-color); background-color: inherit; diff --git a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.tsx b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.tsx index 2cf30064cb4..bd77d663e07 100644 --- a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.tsx +++ b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.tsx @@ -1,6 +1,7 @@ import { Element, Component, Prop, h } from '@stencil/core'; import { ButtonTypes, ButtonVariant } from '../../common/types/ui-types'; import { hasShadowDom } from '../../common/helpers'; +import { IconNameType } from '../amplify-icon/icons'; @Component({ tag: 'amplify-button', @@ -17,6 +18,8 @@ export class AmplifyButton { @Prop() handleButtonClick: (evt: Event) => void; /** Disabled state of the button */ @Prop() disabled?: boolean = false; + /** Name of icon to be placed inside the button */ + @Prop() icon?: IconNameType; private handleClick = (ev: Event) => { if (this.handleButtonClick) { @@ -55,6 +58,7 @@ export class AmplifyButton { disabled={this.disabled} onClick={this.handleClick} > + {this.variant === 'icon' && } ); diff --git a/packages/amplify-ui-components/src/components/amplify-button/readme.md b/packages/amplify-ui-components/src/components/amplify-button/readme.md index b22405cb80c..a09e725d372 100644 --- a/packages/amplify-ui-components/src/components/amplify-button/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-button/readme.md @@ -5,18 +5,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | ---------- | ----------------------------------------------------------- | --------------------------------- | ----------- | -| `disabled` | `disabled` | Disabled state of the button | `boolean` | `false` | -| `handleButtonClick` | -- | (Optional) Callback called when a user clicks on the button | `(evt: Event) => void` | `undefined` | -| `type` | `type` | Type of the button: 'button', 'submit' or 'reset' | `"button" \| "reset" \| "submit"` | `'button'` | -| `variant` | `variant` | Variant of a button: 'button' \| 'anchor' | `"anchor" \| "button"` | `'button'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | ---------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `disabled` | `disabled` | Disabled state of the button | `boolean` | `false` | +| `handleButtonClick` | -- | (Optional) Callback called when a user clicks on the button | `(evt: Event) => void` | `undefined` | +| `icon` | `icon` | Name of icon to be placed inside the button | `"amazon" \| "auth0" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | +| `type` | `type` | Type of the button: 'button', 'submit' or 'reset' | `"button" \| "reset" \| "submit"` | `'button'` | +| `variant` | `variant` | Variant of a button: 'button' \| 'anchor' | `"anchor" \| "button" \| "icon"` | `'button'` | ## Dependencies ### Used by + - [amplify-chatbot](../amplify-chatbot) - [amplify-confirm-sign-in](../amplify-confirm-sign-in) - [amplify-confirm-sign-up](../amplify-confirm-sign-up) - [amplify-forgot-password](../amplify-forgot-password) @@ -29,9 +31,15 @@ - [amplify-sign-up](../amplify-sign-up) - [amplify-verify-contact](../amplify-verify-contact) +### Depends on + +- [amplify-icon](../amplify-icon) + ### Graph ```mermaid graph TD; + amplify-button --> amplify-icon + amplify-chatbot --> amplify-button amplify-confirm-sign-in --> amplify-button amplify-confirm-sign-up --> amplify-button amplify-forgot-password --> amplify-button diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index d18ee229616..6fce906b36e 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -2,17 +2,14 @@ --header-color: var(--amplify-secondary-color); --header-size: var(--amplify-text-lg); } - .amplify-chatbot { - position: relative; - background-color: var(--background-color); display: inline-block; + background-color: var(--background-color); border-radius: 6px; box-shadow: 1px 0px 4px 0 rgba(0, 0, 0, 0.15); box-sizing: border-box; font-family: var(--amplify-font-family); width: 460px; - max-width: 460px; margin-bottom: 1rem; } .header { @@ -21,16 +18,16 @@ font-size: var(--header-size); font-weight: bold; text-align: center; - margin-bottom: 24px; + padding-bottom: 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } - .body { + padding-top: 2rem; display: flex; flex-direction: column; height: 500px; overflow: auto; } - .bubble { max-width: 80%; padding: 0.8em 1.4em; @@ -52,25 +49,40 @@ color: var(--amplify-white); border-radius: 1.5rem 1.5rem 0 1.5rem; } - .chatbot-control { display: flex; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.05); - padding: 1rem; - input { - flex-grow: 1; - border: none; - &:focus { - outline: none; - } + padding-right: 0.625rem; + amplify-input { + --border: none; + --margin: 0; } + // input { + // padding: 1.25rem; + // flex-grow: 1; + // border: none; + // &:focus { + // outline: none; + // } + // } } + .icon-button { - margin-left: 0.625rem; - cursor: pointer; + --icon-height: 1.25rem; + --icon-color: var(--amplify-primary-color); + --padding: 0.625rem; } +// .amplify-icon-button { +// margin-right: 0.625rem; +// cursor: pointer; + +// amplify-icon { +// --height: 1.25rem; +// --icon-fill-color: var(--amplify-primary-color); +// } +// } .chatbot-footer { position: absolute; bottom: 0px; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 02f572b2ea0..6a39004b3de 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -1,14 +1,10 @@ -import { Component, Host, h, Prop, State } from '@stencil/core'; +import { Component, Host, h, Prop, State, Listen } from '@stencil/core'; interface Message { content: string; from: 'user' | 'bot'; } -const messageJSX = (messages: Message[]) => { - return messages.map(message =>
{message.content}
); -}; - @Component({ tag: 'amplify-chatbot', styleUrl: 'amplify-chatbot.scss', @@ -27,9 +23,19 @@ export class AmplifyChatbot { @Prop() onComplete: (err: string, data: object) => void; /** Text placed in the top header */ @Prop() botTitle: string; + @State() messages: Message[] = []; @State() text: string = ''; + @Listen('formSubmit') + submitHandler(_event: CustomEvent) { + this.send(); + } + + messageJSX = (messages: Message[]) => { + return messages.map(message =>
{message.content}
); + }; + handleChange(event: Event) { const target = event.target as HTMLInputElement; this.text = target.value; @@ -53,7 +59,7 @@ export class AmplifyChatbot { render() { const testMessages: Message[] = [ - { content: 'Bot: hi', from: 'bot' }, + { content: 'hi', from: 'bot' }, { content: 'User: hi', from: 'user' }, { content: @@ -65,24 +71,26 @@ export class AmplifyChatbot { return (
-
-
{this.botTitle}
-
{messageJSX(this.messages)}
-
+
{this.botTitle}
+
{this.messageJSX(this.messages)}
- this.handleChange(e)} - /> - - - - this.send()}> - - + /> */} + + this.handleChange(evt)} + value={this.text} + > + + this.send()} />
diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md index 0a153c665ba..67dae60faf3 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -21,12 +21,15 @@ ### Depends on -- [amplify-icon](../amplify-icon) +- [amplify-input](../amplify-input) +- [amplify-button](../amplify-button) ### Graph ```mermaid graph TD; - amplify-chatbot --> amplify-icon + amplify-chatbot --> amplify-input + amplify-chatbot --> amplify-button + amplify-button --> amplify-icon style amplify-chatbot fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/amplify-ui-components/src/components/amplify-confirm-sign-in/readme.md b/packages/amplify-ui-components/src/components/amplify-confirm-sign-in/readme.md index 2532deafb6b..704aca3d27e 100644 --- a/packages/amplify-ui-components/src/components/amplify-confirm-sign-in/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-confirm-sign-in/readme.md @@ -36,6 +36,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-auth-fields --> amplify-username-field amplify-auth-fields --> amplify-password-field diff --git a/packages/amplify-ui-components/src/components/amplify-confirm-sign-up/readme.md b/packages/amplify-ui-components/src/components/amplify-confirm-sign-up/readme.md index f0aeea45dad..c4bb9494f30 100644 --- a/packages/amplify-ui-components/src/components/amplify-confirm-sign-up/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-confirm-sign-up/readme.md @@ -34,6 +34,7 @@ graph TD; amplify-confirm-sign-up --> amplify-button amplify-confirm-sign-up --> amplify-form-section amplify-confirm-sign-up --> amplify-auth-fields + amplify-button --> amplify-icon amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner diff --git a/packages/amplify-ui-components/src/components/amplify-federated-sign-in/readme.md b/packages/amplify-ui-components/src/components/amplify-federated-sign-in/readme.md index 5a533fdfbeb..327164f9c40 100644 --- a/packages/amplify-ui-components/src/components/amplify-federated-sign-in/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-federated-sign-in/readme.md @@ -28,6 +28,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-federated-buttons --> amplify-google-button amplify-federated-buttons --> amplify-facebook-button diff --git a/packages/amplify-ui-components/src/components/amplify-forgot-password/readme.md b/packages/amplify-ui-components/src/components/amplify-forgot-password/readme.md index 2c91f148281..ec2cab7812a 100644 --- a/packages/amplify-ui-components/src/components/amplify-forgot-password/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-forgot-password/readme.md @@ -38,6 +38,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-auth-fields --> amplify-username-field amplify-auth-fields --> amplify-password-field diff --git a/packages/amplify-ui-components/src/components/amplify-form-section/readme.md b/packages/amplify-ui-components/src/components/amplify-form-section/readme.md index c374954fcca..678b18142f6 100644 --- a/packages/amplify-ui-components/src/components/amplify-form-section/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-form-section/readme.md @@ -42,6 +42,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-confirm-sign-in --> amplify-form-section amplify-confirm-sign-up --> amplify-form-section diff --git a/packages/amplify-ui-components/src/components/amplify-greetings/readme.md b/packages/amplify-ui-components/src/components/amplify-greetings/readme.md index 8334c78b76f..fd238fe5f56 100644 --- a/packages/amplify-ui-components/src/components/amplify-greetings/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-greetings/readme.md @@ -27,6 +27,7 @@ graph TD; amplify-greetings --> amplify-nav amplify-greetings --> amplify-sign-out amplify-sign-out --> amplify-button + amplify-button --> amplify-icon style amplify-greetings fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss index 1e3390f5434..69106f5c362 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss +++ b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss @@ -1,7 +1,12 @@ :host { + display: inline-block; --icon-fill-color: var(--amplify-white); + --width: auto; + height: var(--height); } -.icon { +svg { fill: var(--icon-fill-color); + width: var(--width); + height: 100%; } diff --git a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.tsx b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.tsx index 31859a8a2c7..1b3e11ae5d8 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.tsx +++ b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, Watch, h } from '@stencil/core'; +import { Component, Prop, Watch } from '@stencil/core'; import { icons, IconNameType } from './icons'; @Component({ @@ -20,6 +20,6 @@ export class AmplifyIcon { // https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes render() { - return {icons[this.name]()}; + return icons[this.name](); } } diff --git a/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx b/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx index 9df229c5929..4542c124ede 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx +++ b/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx @@ -192,7 +192,7 @@ export const icons = { microphone() { return ( - + ); @@ -200,7 +200,7 @@ export const icons = { send() { return ( - + ); diff --git a/packages/amplify-ui-components/src/components/amplify-icon/readme.md b/packages/amplify-ui-components/src/components/amplify-icon/readme.md index 964e3bb28a2..03fc37511ed 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-icon/readme.md @@ -14,7 +14,7 @@ ### Used by - - [amplify-chatbot](../amplify-chatbot) + - [amplify-button](../amplify-button) - [amplify-icon-button](../amplify-icon-button) - [amplify-loading-spinner](../amplify-loading-spinner) - [amplify-photo-picker](../amplify-photo-picker) @@ -24,7 +24,7 @@ ### Graph ```mermaid graph TD; - amplify-chatbot --> amplify-icon + amplify-button --> amplify-icon amplify-icon-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-photo-picker --> amplify-icon diff --git a/packages/amplify-ui-components/src/components/amplify-input/amplify-input.scss b/packages/amplify-ui-components/src/components/amplify-input/amplify-input.scss index af47aec08ba..5f460f7559f 100644 --- a/packages/amplify-ui-components/src/components/amplify-input/amplify-input.scss +++ b/packages/amplify-ui-components/src/components/amplify-input/amplify-input.scss @@ -3,6 +3,8 @@ --background-color: var(--amplify-secondary-contrast); --border-color: var(--amplify-light-grey); --border-color-focus: var(--amplify-primary-color); + --border: 1px solid var(--border-color); + --margin: 0 0 0.625rem 0; } .input-host { @@ -17,10 +19,10 @@ color: var(--color); background-color: var(--background-color); background-image: none; - border: 1px solid var(--border-color); + border: var(--border); border-radius: 3px; box-sizing: border-box; - margin: 0 0 0.625rem 0; + margin: var(--margin); height: 3.125rem; line-height: 1.1; diff --git a/packages/amplify-ui-components/src/components/amplify-input/readme.md b/packages/amplify-ui-components/src/components/amplify-input/readme.md index ec9c74c03ba..167b7efa99e 100644 --- a/packages/amplify-ui-components/src/components/amplify-input/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-input/readme.md @@ -29,6 +29,7 @@ ### Used by + - [amplify-chatbot](../amplify-chatbot) - [amplify-form-field](../amplify-form-field) - [amplify-phone-field](../amplify-phone-field) - [amplify-verify-contact](../amplify-verify-contact) @@ -36,6 +37,7 @@ ### Graph ```mermaid graph TD; + amplify-chatbot --> amplify-input amplify-form-field --> amplify-input amplify-phone-field --> amplify-input amplify-verify-contact --> amplify-input diff --git a/packages/amplify-ui-components/src/components/amplify-photo-picker/readme.md b/packages/amplify-ui-components/src/components/amplify-photo-picker/readme.md index 1bbfd5be7a9..973a8e794d7 100644 --- a/packages/amplify-ui-components/src/components/amplify-photo-picker/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-photo-picker/readme.md @@ -36,6 +36,7 @@ graph TD; amplify-photo-picker --> amplify-icon amplify-photo-picker --> amplify-button amplify-picker --> amplify-button + amplify-button --> amplify-icon amplify-s3-image-picker --> amplify-photo-picker style amplify-photo-picker fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/amplify-ui-components/src/components/amplify-picker/readme.md b/packages/amplify-ui-components/src/components/amplify-picker/readme.md index 1c30bc85bfb..9b3c57e8181 100644 --- a/packages/amplify-ui-components/src/components/amplify-picker/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-picker/readme.md @@ -28,6 +28,7 @@ ```mermaid graph TD; amplify-picker --> amplify-button + amplify-button --> amplify-icon amplify-photo-picker --> amplify-picker amplify-s3-album --> amplify-picker amplify-s3-text-picker --> amplify-picker diff --git a/packages/amplify-ui-components/src/components/amplify-require-new-password/readme.md b/packages/amplify-ui-components/src/components/amplify-require-new-password/readme.md index 6eec979c3c7..4bcbaf41897 100644 --- a/packages/amplify-ui-components/src/components/amplify-require-new-password/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-require-new-password/readme.md @@ -36,6 +36,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-auth-fields --> amplify-username-field amplify-auth-fields --> amplify-password-field diff --git a/packages/amplify-ui-components/src/components/amplify-s3-album/readme.md b/packages/amplify-ui-components/src/components/amplify-s3-album/readme.md index f19d6c07d4f..675314ffc95 100644 --- a/packages/amplify-ui-components/src/components/amplify-s3-album/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-s3-album/readme.md @@ -36,6 +36,7 @@ graph TD; amplify-s3-album --> amplify-s3-image amplify-s3-album --> amplify-picker amplify-picker --> amplify-button + amplify-button --> amplify-icon style amplify-s3-album fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/amplify-ui-components/src/components/amplify-s3-image-picker/readme.md b/packages/amplify-ui-components/src/components/amplify-s3-image-picker/readme.md index 81943228183..c5d8ef319fa 100644 --- a/packages/amplify-ui-components/src/components/amplify-s3-image-picker/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-s3-image-picker/readme.md @@ -36,6 +36,7 @@ graph TD; amplify-photo-picker --> amplify-icon amplify-photo-picker --> amplify-button amplify-picker --> amplify-button + amplify-button --> amplify-icon style amplify-s3-image-picker fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/amplify-ui-components/src/components/amplify-s3-text-picker/readme.md b/packages/amplify-ui-components/src/components/amplify-s3-text-picker/readme.md index 2c7bc987edb..d62c09969ad 100644 --- a/packages/amplify-ui-components/src/components/amplify-s3-text-picker/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-s3-text-picker/readme.md @@ -31,6 +31,7 @@ graph TD; amplify-s3-text-picker --> amplify-s3-text amplify-s3-text-picker --> amplify-picker amplify-picker --> amplify-button + amplify-button --> amplify-icon style amplify-s3-text-picker fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/amplify-ui-components/src/components/amplify-select-mfa-type/readme.md b/packages/amplify-ui-components/src/components/amplify-select-mfa-type/readme.md index 2f399a8600c..1126d910ec4 100644 --- a/packages/amplify-ui-components/src/components/amplify-select-mfa-type/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-select-mfa-type/readme.md @@ -29,6 +29,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-radio-button --> amplify-label amplify-totp-setup --> amplify-form-section diff --git a/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md b/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md index 71516df407f..e267528a813 100644 --- a/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md @@ -51,6 +51,7 @@ graph TD; amplify-sign-in --> amplify-strike amplify-sign-in --> amplify-auth-fields amplify-sign-in --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner diff --git a/packages/amplify-ui-components/src/components/amplify-sign-out/readme.md b/packages/amplify-ui-components/src/components/amplify-sign-out/readme.md index 699179dced8..bf48b2f601b 100644 --- a/packages/amplify-ui-components/src/components/amplify-sign-out/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-sign-out/readme.md @@ -25,6 +25,7 @@ ```mermaid graph TD; amplify-sign-out --> amplify-button + amplify-button --> amplify-icon amplify-greetings --> amplify-sign-out style amplify-sign-out fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md b/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md index c50d5986663..10d274d1734 100644 --- a/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md @@ -51,6 +51,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-auth-fields --> amplify-username-field amplify-auth-fields --> amplify-password-field diff --git a/packages/amplify-ui-components/src/components/amplify-totp-setup/readme.md b/packages/amplify-ui-components/src/components/amplify-totp-setup/readme.md index f5d828d179c..3ef1ec2c38f 100644 --- a/packages/amplify-ui-components/src/components/amplify-totp-setup/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-totp-setup/readme.md @@ -33,6 +33,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-form-field --> amplify-label amplify-form-field --> amplify-input diff --git a/packages/amplify-ui-components/src/components/amplify-verify-contact/readme.md b/packages/amplify-ui-components/src/components/amplify-verify-contact/readme.md index 64e4800ace0..a75b06031f4 100644 --- a/packages/amplify-ui-components/src/components/amplify-verify-contact/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-verify-contact/readme.md @@ -35,6 +35,7 @@ graph TD; amplify-form-section --> amplify-section amplify-form-section --> amplify-button amplify-form-section --> amplify-loading-spinner + amplify-button --> amplify-icon amplify-loading-spinner --> amplify-icon amplify-authenticator --> amplify-verify-contact style amplify-verify-contact fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/aws-amplify-react/src/Interactions/ChatBot.tsx b/packages/aws-amplify-react/src/Interactions/ChatBot.tsx index aa156b4c8d7..b2a6f812816 100644 --- a/packages/aws-amplify-react/src/Interactions/ChatBot.tsx +++ b/packages/aws-amplify-react/src/Interactions/ChatBot.tsx @@ -97,7 +97,6 @@ export class ChatBot extends React.Component { constructor(props) { super(props); - if (this.props.voiceEnabled) { require('./aws-lex-audio'); // @ts-ignore From 49f7e36a2749e8a6696c2f46759c058a1bd02843 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 4 Aug 2020 13:58:15 -0700 Subject: [PATCH 04/71] Update snapshot --- .../__snapshots__/amplify-icon.spec.ts.snap | 184 ++++++++---------- 1 file changed, 77 insertions(+), 107 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap index 6e03f4edddd..88e775a427f 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap +++ b/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap @@ -2,188 +2,158 @@ exports[`amplify-icon spec: Render logic -> renders amazon correctly 1`] = ` - - - - - - - + + + + + `; exports[`amplify-icon spec: Render logic -> renders auth0 correctly 1`] = ` - - - - - + + + `; exports[`amplify-icon spec: Render logic -> renders enter-vr correctly 1`] = ` - - - - - - + + + + - - + + `; exports[`amplify-icon spec: Render logic -> renders exit-vr correctly 1`] = ` - - - - - - + + + + - - + + `; exports[`amplify-icon spec: Render logic -> renders facebook correctly 1`] = ` - - - - - - + + + + - - + + `; exports[`amplify-icon spec: Render logic -> renders google correctly 1`] = ` - - - - - - - - + + + + + + `; exports[`amplify-icon spec: Render logic -> renders loading correctly 1`] = ` - - - - - - - - + + + + + + - - + + `; exports[`amplify-icon spec: Render logic -> renders maximize correctly 1`] = ` - - - - - - - + + + + + `; exports[`amplify-icon spec: Render logic -> renders microphone correctly 1`] = ` - - - - - + + + `; exports[`amplify-icon spec: Render logic -> renders minimize correctly 1`] = ` - - - - - - - + + + + + `; exports[`amplify-icon spec: Render logic -> renders photoPlaceholder correctly 1`] = ` - - - - - - - + + + + + `; exports[`amplify-icon spec: Render logic -> renders send correctly 1`] = ` - - - - - + + + `; exports[`amplify-icon spec: Render logic -> renders sound correctly 1`] = ` - - - - - - - + + + + + `; exports[`amplify-icon spec: Render logic -> renders sound-mute correctly 1`] = ` - - - - - - - + + + + + `; exports[`amplify-icon spec: Render logic -> renders warning correctly 1`] = ` - - - - - - + + + + - - + + `; From 6c357285ff095351769eebfb99459f890aa6e044 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 4 Aug 2020 15:12:05 -0700 Subject: [PATCH 05/71] Clean up code --- .../amplify-chatbot/amplify-chatbot.scss | 19 ------------------- .../amplify-chatbot/amplify-chatbot.tsx | 8 -------- 2 files changed, 27 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 6fce906b36e..dc75538fbc7 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -58,31 +58,12 @@ --border: none; --margin: 0; } - // input { - // padding: 1.25rem; - // flex-grow: 1; - // border: none; - // &:focus { - // outline: none; - // } - // } } - .icon-button { --icon-height: 1.25rem; --icon-color: var(--amplify-primary-color); --padding: 0.625rem; } - -// .amplify-icon-button { -// margin-right: 0.625rem; -// cursor: pointer; - -// amplify-icon { -// --height: 1.25rem; -// --icon-fill-color: var(--amplify-primary-color); -// } -// } .chatbot-footer { position: absolute; bottom: 0px; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 6a39004b3de..d0e65b2aa6b 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -74,14 +74,6 @@ export class AmplifyChatbot {
{this.botTitle}
{this.messageJSX(this.messages)}
- {/* this.handleChange(e)} - /> */} - Date: Tue, 4 Aug 2020 15:52:16 -0700 Subject: [PATCH 06/71] Remove unused test case --- .../components/amplify-container/amplify-container.spec.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-container/amplify-container.spec.ts b/packages/amplify-ui-components/src/components/amplify-container/amplify-container.spec.ts index 60d8018ae1f..21a0a71352a 100644 --- a/packages/amplify-ui-components/src/components/amplify-container/amplify-container.spec.ts +++ b/packages/amplify-ui-components/src/components/amplify-container/amplify-container.spec.ts @@ -2,12 +2,6 @@ import { newSpecPage } from '@stencil/core/testing'; import { AmplifyContainer } from './amplify-container'; describe('amplify-container spec:', () => { - describe('Component logic ->', () => { - // let container; - // beforeEach(() => { - // container = new AmplifyContainer(); - // }); - }); describe('Render logic ->', () => { it('should render with an empty slot', async () => { const page = await newSpecPage({ From 5f404e8e904c9efbf313e621b7262a5129466a17 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 11 Aug 2020 11:42:55 -0700 Subject: [PATCH 07/71] Add snapshot testing --- .../amplify-chatbot.spec.tsx.snap | 17 +++++++++++++ .../amplify-chatbot/amplify-chatbot.spec.tsx | 25 ++++++------------- .../amplify-chatbot/amplify-chatbot.tsx | 16 +++--------- 3 files changed, 28 insertions(+), 30 deletions(-) create mode 100644 packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap new file mode 100644 index 00000000000..6e5c67a069a --- /dev/null +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`amplify-chatbot renders chatbot 1`] = ` + + +
+
+
+
+ + + +
+
+ + +`; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx index b26b5c150a6..9f9840ae35d 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.spec.tsx @@ -1,21 +1,12 @@ -// import { newSpecPage } from '@stencil/core/testing'; -// import { AmplifyChatbot } from './amplify-chatbot'; +import { newSpecPage } from '@stencil/core/testing'; +import { AmplifyChatbot } from './amplify-chatbot'; describe('amplify-chatbot', () => { - // it('renders', async () => { - // const page = await newSpecPage({ - // components: [AmplifyChatbot], - // html: ``, - // }); - // expect(page.root).toEqualHtml(` - // - // - // - // - // - // `); - // }); - it('Test not yet implemented', () => { - return expect(true).toBe(true); + it('renders chatbot', async () => { + const page = await newSpecPage({ + components: [AmplifyChatbot], + html: ``, + }); + expect(page.root).toMatchSnapshot(); }); }); diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index d0e65b2aa6b..aa8fe5532a3 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -29,7 +29,7 @@ export class AmplifyChatbot { @Listen('formSubmit') submitHandler(_event: CustomEvent) { - this.send(); + this.sendText(); } messageJSX = (messages: Message[]) => { @@ -41,7 +41,7 @@ export class AmplifyChatbot { this.text = target.value; } - send() { + sendText() { if (this.text === '') return; this.messages = [ ...this.messages, @@ -58,16 +58,6 @@ export class AmplifyChatbot { } render() { - const testMessages: Message[] = [ - { content: 'hi', from: 'bot' }, - { content: 'User: hi', from: 'user' }, - { - content: - 'long mesageeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', - from: 'bot', - }, - ]; - if (this.messages.length === 0) this.messages.push(...testMessages); return (
@@ -82,7 +72,7 @@ export class AmplifyChatbot { value={this.text} > - this.send()} /> + this.sendText()} />
From b09348f9f1b4ba77acfbdaafcd0fb0802426a1fc Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 11 Aug 2020 17:56:05 -0700 Subject: [PATCH 08/71] Apply comments from @ashika01 --- .../amplify-button/amplify-button.scss | 2 +- .../amplify-chatbot/amplify-chatbot.scss | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss index 5714b87b3d1..2d047f461e1 100644 --- a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss +++ b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss @@ -10,7 +10,7 @@ --link-hover: var(--amplify-primary-tint); --link-active: var(--amplify-primary-shade); --text-transform: uppercase; - --icon-color: var(--amplify-primary-color); + --icon-color: var(--amplify-white); --icon-height: 1.25rem; --padding: 1rem; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index dc75538fbc7..7abfd1c524a 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -5,27 +5,27 @@ .amplify-chatbot { display: inline-block; background-color: var(--background-color); - border-radius: 6px; - box-shadow: 1px 0px 4px 0 rgba(0, 0, 0, 0.15); + border-radius: 0.375rem; + box-shadow: 0.0625rem 0rem 0.25rem 0 rgba(0, 0, 0, 0.15); box-sizing: border-box; font-family: var(--amplify-font-family); - width: 460px; + width: 28.75rem; margin-bottom: 1rem; } .header { - margin-top: 20px; + margin-top: 1.25rem; color: var(--header-color); font-size: var(--header-size); font-weight: bold; text-align: center; - padding-bottom: 24px; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); + padding-bottom: 1.5rem; + border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.05); } .body { padding-top: 2rem; display: flex; flex-direction: column; - height: 500px; + height: 31.25rem; overflow: auto; } .bubble { @@ -52,7 +52,7 @@ .chatbot-control { display: flex; align-items: center; - border-top: 1px solid rgba(0, 0, 0, 0.05); + border-top: 0.062rem solid rgba(0, 0, 0, 0.05); padding-right: 0.625rem; amplify-input { --border: none; @@ -66,6 +66,6 @@ } .chatbot-footer { position: absolute; - bottom: 0px; + bottom: 0rem; height: 2rem; } From a865263fdea8554b40e8ac3bc6f28c4b329c99fb Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 12 Aug 2020 11:09:22 -0700 Subject: [PATCH 09/71] Rename --icon-color to --icon-fill --- .../src/components/amplify-button/amplify-button.scss | 4 ++-- .../src/components/amplify-icon/amplify-icon.scss | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss index 2d047f461e1..46b5593b4ce 100644 --- a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss +++ b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss @@ -10,7 +10,7 @@ --link-hover: var(--amplify-primary-tint); --link-active: var(--amplify-primary-shade); --text-transform: uppercase; - --icon-color: var(--amplify-white); + --icon-fill: var(--amplify-white); --icon-height: 1.25rem; --padding: 1rem; @@ -69,7 +69,7 @@ cursor: pointer; padding: var(--padding); amplify-icon { - --icon-fill-color: var(--icon-color); + --icon-fill-color: var(--icon-fill); --height: var(--icon-height); } } diff --git a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss index 69106f5c362..fd274ccb3c9 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss +++ b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss @@ -1,7 +1,8 @@ :host { display: inline-block; - --icon-fill-color: var(--amplify-white); --width: auto; + --height: 1.25rem; + --icon-fill-color: var(--amplify-white); height: var(--height); } From 82155ff262aa4a12d0dbfdf5c6ac8c908b5feb0c Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 12 Aug 2020 11:09:33 -0700 Subject: [PATCH 10/71] Remove unused class css --- .../src/components/amplify-chatbot/amplify-chatbot.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 7abfd1c524a..fd21344cd49 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -61,11 +61,6 @@ } .icon-button { --icon-height: 1.25rem; - --icon-color: var(--amplify-primary-color); + --icon-fill: var(--amplify-primary-color); --padding: 0.625rem; } -.chatbot-footer { - position: absolute; - bottom: 0rem; - height: 2rem; -} From d504ff8399a0df4369c08cd66c00982a358224cb Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 12 Aug 2020 14:08:00 -0700 Subject: [PATCH 11/71] Update css for compatibility with existing components --- .../src/components/amplify-icon/amplify-icon.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss index fd274ccb3c9..b61ee492ed2 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss +++ b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.scss @@ -1,13 +1,11 @@ :host { - display: inline-block; --width: auto; - --height: 1.25rem; + --height: auto; --icon-fill-color: var(--amplify-white); - height: var(--height); } svg { fill: var(--icon-fill-color); width: var(--width); - height: 100%; + height: var(--height); } From e686aa3244ca850c80e68bc60ee0312716d49aa9 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 12 Aug 2020 14:08:25 -0700 Subject: [PATCH 12/71] Set default height --- .../src/components/amplify-icon/icons.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx b/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx index 4542c124ede..50d6567f26c 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx +++ b/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx @@ -192,7 +192,7 @@ export const icons = { microphone() { return ( - + ); @@ -200,7 +200,7 @@ export const icons = { send() { return ( - + ); From dc4dbb10258467026445bb22d6004c6bb1214942 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 12 Aug 2020 14:09:12 -0700 Subject: [PATCH 13/71] Integrate Interactions text message --- .../src/common/constants.ts | 2 + .../amplify-ui-components/src/components.d.ts | 16 ++++ .../amplify-chatbot/amplify-chatbot.tsx | 96 +++++++++++++++---- .../src/components/amplify-chatbot/readme.md | 2 + .../amplify-ui-components/stencil.config.ts | 8 +- 5 files changed, 103 insertions(+), 21 deletions(-) diff --git a/packages/amplify-ui-components/src/common/constants.ts b/packages/amplify-ui-components/src/common/constants.ts index ee2718ad19e..3830d9da945 100644 --- a/packages/amplify-ui-components/src/common/constants.ts +++ b/packages/amplify-ui-components/src/common/constants.ts @@ -20,6 +20,8 @@ export const AUTHENTICATOR_AUTHSTATE = 'amplify-authenticator-authState'; export const PHONE_EMPTY_ERROR_MESSAGE = 'Phone number can not be empty'; export const NO_AUTH_MODULE_FOUND = 'No Auth module found, please ensure @aws-amplify/auth is imported'; export const NO_STORAGE_MODULE_FOUND = 'No Storage module found, please ensure @aws-amplify/storage is imported'; +export const NO_Interactions_MODULE_FOUND = + 'No Interactions module found, please ensure @aws-amplify/interactions is imported'; // TOTP Messages export const SETUP_TOTP = 'SETUP_TOTP'; diff --git a/packages/amplify-ui-components/src/components.d.ts b/packages/amplify-ui-components/src/components.d.ts index 962e9f41b62..c4ac45201b3 100644 --- a/packages/amplify-ui-components/src/components.d.ts +++ b/packages/amplify-ui-components/src/components.d.ts @@ -101,6 +101,14 @@ export namespace Components { * Callback to be called after conversation finishes */ "onComplete": (err: string, data: object) => void; + /** + * Whether text chat is enabled + */ + "textEnabled": boolean; + /** + * Whether voice chat is enabled + */ + "voiceEnabled": boolean; /** * Greeting message displayed to users */ @@ -1589,6 +1597,14 @@ declare namespace LocalJSX { * Callback to be called after conversation finishes */ "onComplete"?: (err: string, data: object) => void; + /** + * Whether text chat is enabled + */ + "textEnabled"?: boolean; + /** + * Whether voice chat is enabled + */ + "voiceEnabled"?: boolean; /** * Greeting message displayed to users */ diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index aa8fe5532a3..c675f716f1c 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -1,10 +1,15 @@ import { Component, Host, h, Prop, State, Listen } from '@stencil/core'; +import { Interactions } from '@aws-amplify/interactions'; +import { JSXBase } from '@stencil/core/internal'; +type Agent = 'user' | 'bot'; interface Message { content: string; - from: 'user' | 'bot'; + from: Agent; } +type AppState = 'initial' | 'listening' | 'sending' | 'speaking'; + @Component({ tag: 'amplify-chatbot', styleUrl: 'amplify-chatbot.scss', @@ -23,9 +28,16 @@ export class AmplifyChatbot { @Prop() onComplete: (err: string, data: object) => void; /** Text placed in the top header */ @Prop() botTitle: string; + /** Whether voice chat is enabled */ + @Prop() voiceEnabled: boolean = false; + /** Whether text chat is enabled */ + @Prop() textEnabled: boolean = true; + /** Messages in current session */ @State() messages: Message[] = []; + /** Value of the text */ @State() text: string = ''; + @State() state: AppState = 'initial'; @Listen('formSubmit') submitHandler(_event: CustomEvent) { @@ -41,39 +53,83 @@ export class AmplifyChatbot { this.text = target.value; } - sendText() { - if (this.text === '') return; + appendMessage(content: string, from: Agent) { this.messages = [ ...this.messages, { - content: this.text, - from: 'user', - }, - { - content: 'echo: ' + this.text, - from: 'bot', + content, + from, }, ]; + } + + async sendText() { + if (this.text.length === 0 || this.state !== 'initial') return; + + const text = this.text; this.text = ''; + this.appendMessage(text, 'user'); + this.state = 'sending'; + + const response = await Interactions.send(this.botName, text); + this.appendMessage(response.message, 'bot'); + this.state = 'initial'; + } + + async componentWillLoad() { + // TODO: check if interactions is avaialable + if (this.messages.length === 0 && this.welcomeMessage && this.welcomeMessage.length > 0) { + this.messages.push({ + content: this.welcomeMessage, + from: 'bot', + }); + } + } + + footerJSX(): JSXBase.IntrinsicElements[] { + const textInput = ( + this.handleChange(evt)} + value={this.text} + /> + ); + const micButton = ( + + ); + const sendButton = ( + this.sendText()} + disabled={this.state !== 'initial'} + /> + ); + // TODO: clever way to handle this logic? + console.log(this.voiceEnabled && this.textEnabled); + if (this.voiceEnabled && this.textEnabled) { + return [textInput, micButton, sendButton]; + } else if (this.voiceEnabled) { + return [textInput, micButton]; + } else if (this.textEnabled) { + return [textInput, sendButton]; + } else { + // TODO: throw an warning that at least one should be enabled. + return [textInput, sendButton]; + } } render() { + console.log(this.voiceEnabled); return (
{this.botTitle}
{this.messageJSX(this.messages)}
-
- this.handleChange(evt)} - value={this.text} - > - - this.sendText()} /> -
+
{this.footerJSX()}
); diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md index 67dae60faf3..926101d3858 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -14,6 +14,8 @@ | `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | | `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | | `onComplete` | -- | Callback to be called after conversation finishes | `(err: string, data: object) => void` | `undefined` | +| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | +| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | | `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | diff --git a/packages/amplify-ui-components/stencil.config.ts b/packages/amplify-ui-components/stencil.config.ts index 6e449aaf5c8..6e17326c604 100644 --- a/packages/amplify-ui-components/stencil.config.ts +++ b/packages/amplify-ui-components/stencil.config.ts @@ -14,7 +14,13 @@ export const config: Config = { plugins: [ externals({ // deps to include in externals (default: []) - include: ['@aws-amplify/auth', '@aws-amplify/core', '@aws-amplify/storage', '@aws-amplify/xr'], + include: [ + '@aws-amplify/auth', + '@aws-amplify/core', + '@aws-amplify/storage', + '@aws-amplify/xr', + '@aws-amplify/interactions', + ], }), nodePolyfills(), sass({ From 2a8d0525d0962f1984e031dd7482d519374aa9ed Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 12 Aug 2020 14:14:04 -0700 Subject: [PATCH 14/71] Update snapshots --- .../__snapshots__/amplify-chatbot.spec.tsx.snap | 1 - .../amplify-icon/__snapshots__/amplify-icon.spec.ts.snap | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap index 6e5c67a069a..06c5f559ba3 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap @@ -8,7 +8,6 @@ exports[`amplify-chatbot renders chatbot 1`] = `
-
diff --git a/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap index 88e775a427f..c4b2e31a5f1 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap +++ b/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap @@ -92,7 +92,7 @@ exports[`amplify-icon spec: Render logic -> renders maximize correctly 1`] = ` exports[`amplify-icon spec: Render logic -> renders microphone correctly 1`] = ` - + @@ -120,7 +120,7 @@ exports[`amplify-icon spec: Render logic -> renders photoPlaceholder correctly 1 exports[`amplify-icon spec: Render logic -> renders send correctly 1`] = ` - + From 0189195aa2fe496604222d82ebfc3ba8c1cdbc02 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 12 Aug 2020 14:26:43 -0700 Subject: [PATCH 15/71] Simplify code --- .../amplify-chatbot/amplify-chatbot.tsx | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index c675f716f1c..91adad8af13 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -96,10 +96,10 @@ export class AmplifyChatbot { value={this.text} /> ); - const micButton = ( + const micButton = this.voiceEnabled && ( ); - const sendButton = ( + const sendButton = this.textEnabled && ( ); - // TODO: clever way to handle this logic? - console.log(this.voiceEnabled && this.textEnabled); - if (this.voiceEnabled && this.textEnabled) { - return [textInput, micButton, sendButton]; - } else if (this.voiceEnabled) { - return [textInput, micButton]; - } else if (this.textEnabled) { - return [textInput, sendButton]; - } else { - // TODO: throw an warning that at least one should be enabled. - return [textInput, sendButton]; - } + return [textInput, micButton, sendButton]; } render() { From 5d8e16cdf85f03d8953c723131468ea4e4037a33 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 13 Aug 2020 12:04:19 -0700 Subject: [PATCH 16/71] Add audiorecorder and integrate voice chat --- .../src/common/audio-control/helper.ts | 86 ++++++++++ .../src/common/audio-control/recorder.ts | 150 ++++++++++++++++++ .../src/common/constants.ts | 2 +- .../src/common/types/interactions-types.ts | 4 + .../amplify-ui-components/src/components.d.ts | 9 +- .../amplify-chatbot/amplify-chatbot.tsx | 113 +++++++++++-- .../src/components/amplify-chatbot/readme.md | 26 +-- 7 files changed, 359 insertions(+), 31 deletions(-) create mode 100644 packages/amplify-ui-components/src/common/audio-control/helper.ts create mode 100644 packages/amplify-ui-components/src/common/audio-control/recorder.ts create mode 100644 packages/amplify-ui-components/src/common/types/interactions-types.ts diff --git a/packages/amplify-ui-components/src/common/audio-control/helper.ts b/packages/amplify-ui-components/src/common/audio-control/helper.ts new file mode 100644 index 00000000000..5658086eab1 --- /dev/null +++ b/packages/amplify-ui-components/src/common/audio-control/helper.ts @@ -0,0 +1,86 @@ +export const exportBuffer = ( + recBuffer: Float32Array[], + recLength: number, + recordSampleRate: number, + exportSampleRate: number, +) => { + const mergedBuffers = mergeBuffers(recBuffer, recLength); + const downsampledBuffer = downsampleBuffer(mergedBuffers, recordSampleRate, exportSampleRate); + const encodedWav = encodeWAV(downsampledBuffer, exportSampleRate); + const audioBlob = new Blob([encodedWav], { + type: 'application/octet-stream', + }); + return audioBlob; +}; + +const mergeBuffers = (bufferArray: Float32Array[], recLength: number) => { + const result = new Float32Array(recLength); + let offset = 0; + for (let i = 0; i < bufferArray.length; i++) { + result.set(bufferArray[i], offset); + offset += bufferArray[i].length; + } + return result; +}; + +const downsampleBuffer = (buffer: Float32Array, recordSampleRate: number, exportSampleRate: number) => { + if (exportSampleRate === recordSampleRate) { + return buffer; + } + const sampleRateRatio = recordSampleRate / exportSampleRate; + const newLength = Math.round(buffer.length / sampleRateRatio); + const result = new Float32Array(newLength); + let offsetResult = 0; + let offsetBuffer = 0; + while (offsetResult < result.length) { + const nextOffsetBuffer = Math.round((offsetResult + 1) * sampleRateRatio); + let accum = 0, + count = 0; + for (let i = offsetBuffer; i < nextOffsetBuffer && i < buffer.length; i++) { + accum += buffer[i]; + count++; + } + result[offsetResult] = accum / count; + offsetResult++; + offsetBuffer = nextOffsetBuffer; + } + return result; +}; + +const floatTo16BitPCM = (output: DataView, offset: number, input: Float32Array) => { + let byteOffset = offset; + for (let i = 0; i < input.length; i++, byteOffset += 2) { + const s = Math.max(-1, Math.min(1, input[i])); + output.setInt16(byteOffset, s < 0 ? s * 0x8000 : s * 0x7fff, true); + } +}; + +const writeString = (view: DataView, offset: number, string: string) => { + for (let i = 0; i < string.length; i++) { + view.setUint8(offset + i, string.charCodeAt(i)); + } +}; + +const encodeWAV = (samples: Float32Array, exportSampleRate: number) => { + const buffer = new ArrayBuffer(44 + samples.length * 2); + const view = new DataView(buffer); + writeString(view, 0, 'RIFF'); + view.setUint32(4, 32 + samples.length * 2, true); + writeString(view, 8, 'WAVE'); + + // fmt subchunk + writeString(view, 12, 'fmt '); + view.setUint32(16, 16, true); + view.setUint16(20, 1, true); + view.setUint16(22, 1, true); + view.setUint32(24, exportSampleRate, true); + view.setUint32(28, exportSampleRate * 2, true); + view.setUint16(32, 2, true); + view.setUint16(34, 16, true); + + // data subchunk + writeString(view, 36, 'data'); + view.setUint32(40, samples.length * 2, true); + floatTo16BitPCM(view, 44, samples); + return view; +}; diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts new file mode 100644 index 00000000000..737ffa97723 --- /dev/null +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -0,0 +1,150 @@ +import { exportBuffer } from './helper'; + +type SilenceDetectionConfig = { + time: number; + amplitude: number; +}; + +export class AudioRecorder { + private options: SilenceDetectionConfig; + private audioContext: AudioContext; + private audioSupported: boolean; + + private analyserNode: AnalyserNode; + private onSilence: Function; + + // input mic stream is stored in a buffer + private streamBuffer: Float32Array[] = []; + private streamBufferLength = 0; + + // recording props + private start: number; + private recording = false; + + constructor(options: SilenceDetectionConfig) { + this.options = options; + this.init(); + } + + private init() { + window.AudioContext = window.AudioContext || (window as any).webkitAudioContext; + this.audioContext = new AudioContext(); + navigator.mediaDevices + .getUserMedia({ audio: true }) + .then(stream => { + this.audioSupported = true; + this.setupAudioNodes(stream); + }) + .catch(() => { + this.audioSupported = false; + }); + } + + private async setupAudioNodes(stream: MediaStream) { + console.log(this.audioContext); + + await this.audioContext + .resume() + .then(() => console.log('resumed')) + .catch(() => console.error('what?')); + const sourceNode = this.audioContext.createMediaStreamSource(stream); + const processorNode = this.audioContext.createScriptProcessor(4096, 1, 1); + + processorNode.onaudioprocess = audioProcessingEvent => { + if (!this.recording) return; + const stream = audioProcessingEvent.inputBuffer.getChannelData(0); + console.log(stream); + this.streamBuffer.push(new Float32Array(stream)); // set to a copy of the stream + this.streamBufferLength += stream.length; + this.analyse(); + }; + + const analyserNode = this.audioContext.createAnalyser(); + analyserNode.minDecibels = -90; + analyserNode.maxDecibels = -10; + analyserNode.smoothingTimeConstant = 0.85; + + sourceNode.connect(analyserNode); + analyserNode.connect(processorNode); + processorNode.connect(sourceNode.context.destination); + + this.analyserNode = analyserNode; + } + + public startRecording(onSilence?: Function) { + const silenceHandler = onSilence || function() {}; + this.onSilence = silenceHandler; + if (this.recording || !this.audioSupported) return; + + const context = this.audioContext; + context.resume().then(() => { + this.start = Date.now(); + this.recording = true; + }); + } + + public stopRecording() { + if (!this.audioSupported) return; + this.recording = false; + } + + public clear() { + this.stopRecording(); + this.streamBufferLength = 0; + this.streamBuffer = []; + } + + public play(buffer: Uint8Array, callback: Function) { + if (!buffer) return; + const myBlob = new Blob([buffer]); + + const fileReader = new FileReader(); + fileReader.onload = () => { + const playbackSource = this.audioContext.createBufferSource(); + this.audioContext.decodeAudioData(fileReader.result as ArrayBuffer, buf => { + playbackSource.buffer = buf; + playbackSource.connect(this.audioContext.destination); + playbackSource.onended = function(_event) { + if (typeof callback === 'function') { + callback(); + } + }; + playbackSource.start(0); + }); + }; + fileReader.readAsArrayBuffer(myBlob); + } + + private analyse() { + const analyser = this.analyserNode; + analyser.fftSize = 2048; + + const bufferLength = analyser.fftSize; + const dataArray = new Uint8Array(bufferLength); + const amplitude = this.options.amplitude; + const time = this.options.time; + + analyser.getByteTimeDomainData(dataArray); + + for (let i = 0; i < bufferLength; i++) { + // Normalize between -1 and 1. + const curr_value_time = dataArray[i] / 128 - 1.0; + if (curr_value_time > amplitude || curr_value_time < -1 * amplitude) { + this.start = Date.now(); + } + } + const newtime = Date.now(); + const elapsedTime = newtime - this.start; + if (elapsedTime > time) { + this.onSilence(); + } + } + + public exportWAV(callback: Function, exportSampleRate: number = 16000) { + if (!this.audioSupported) return; + const recordSampleRate = this.audioContext.sampleRate; + const blob = exportBuffer(this.streamBuffer, this.streamBufferLength, recordSampleRate, exportSampleRate); + callback(blob); + this.clear(); + } +} diff --git a/packages/amplify-ui-components/src/common/constants.ts b/packages/amplify-ui-components/src/common/constants.ts index 3830d9da945..23416affef4 100644 --- a/packages/amplify-ui-components/src/common/constants.ts +++ b/packages/amplify-ui-components/src/common/constants.ts @@ -20,7 +20,7 @@ export const AUTHENTICATOR_AUTHSTATE = 'amplify-authenticator-authState'; export const PHONE_EMPTY_ERROR_MESSAGE = 'Phone number can not be empty'; export const NO_AUTH_MODULE_FOUND = 'No Auth module found, please ensure @aws-amplify/auth is imported'; export const NO_STORAGE_MODULE_FOUND = 'No Storage module found, please ensure @aws-amplify/storage is imported'; -export const NO_Interactions_MODULE_FOUND = +export const NO_INTERACTIONS_MODULE_FOUND = 'No Interactions module found, please ensure @aws-amplify/interactions is imported'; // TOTP Messages diff --git a/packages/amplify-ui-components/src/common/types/interactions-types.ts b/packages/amplify-ui-components/src/common/types/interactions-types.ts new file mode 100644 index 00000000000..ce8eefc0b7c --- /dev/null +++ b/packages/amplify-ui-components/src/common/types/interactions-types.ts @@ -0,0 +1,4 @@ +export interface ChatResult { + data?: object; + err?: string; +} diff --git a/packages/amplify-ui-components/src/components.d.ts b/packages/amplify-ui-components/src/components.d.ts index c4ac45201b3..f81584c28d0 100644 --- a/packages/amplify-ui-components/src/components.d.ts +++ b/packages/amplify-ui-components/src/components.d.ts @@ -9,6 +9,7 @@ import { AuthState, AuthStateHandler, CognitoUserInterface, FederatedConfig, MFA import { FormFieldTypes } from "./components/amplify-auth-fields/amplify-auth-fields-interface"; import { ButtonTypes, ButtonVariant, InputEvent, TextFieldTypes } from "./common/types/ui-types"; import { IconNameType } from "./components/amplify-icon/icons"; +import { ChatResult } from "./common/types/interactions-types"; import { FunctionalComponent } from "@stencil/core"; import { CountryCodeDialOptions } from "./components/amplify-country-dial-code/amplify-country-dial-code-interface"; import { AccessLevel, StorageObject } from "./common/types/storage-types"; @@ -97,10 +98,6 @@ export namespace Components { * Continue listening to users after they send the message */ "conversationModeOn": boolean; - /** - * Callback to be called after conversation finishes - */ - "onComplete": (err: string, data: object) => void; /** * Whether text chat is enabled */ @@ -1594,9 +1591,9 @@ declare namespace LocalJSX { */ "conversationModeOn"?: boolean; /** - * Callback to be called after conversation finishes + * Event emitted when conversation is completed */ - "onComplete"?: (err: string, data: object) => void; + "onChatCompleted"?: (event: CustomEvent) => void; /** * Whether text chat is enabled */ diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 91adad8af13..a7f7565693c 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -1,6 +1,9 @@ -import { Component, Host, h, Prop, State, Listen } from '@stencil/core'; +import { Component, Host, h, Prop, State, Listen, Event, EventEmitter } from '@stencil/core'; import { Interactions } from '@aws-amplify/interactions'; import { JSXBase } from '@stencil/core/internal'; +import { AudioRecorder } from '../../common/audio-control/recorder'; +import { ChatResult } from '../../common/types/interactions-types'; +import { NO_INTERACTIONS_MODULE_FOUND } from '../../common/constants'; type Agent = 'user' | 'bot'; interface Message { @@ -24,8 +27,6 @@ export class AmplifyChatbot { @Prop() conversationModeOn: boolean = false; /** Greeting message displayed to users */ @Prop() welcomeMessage: string; - /** Callback to be called after conversation finishes */ - @Prop() onComplete: (err: string, data: object) => void; /** Text placed in the top header */ @Prop() botTitle: string; /** Whether voice chat is enabled */ @@ -35,15 +36,22 @@ export class AmplifyChatbot { /** Messages in current session */ @State() messages: Message[] = []; - /** Value of the text */ + /** Text input box value */ @State() text: string = ''; + /** Current app state */ @State() state: AppState = 'initial'; + private audioRecorder: AudioRecorder; + private audioInput: Blob; + @Listen('formSubmit') submitHandler(_event: CustomEvent) { this.sendText(); } + /** Event emitted when conversation is completed */ + @Event() chatCompleted: EventEmitter; + messageJSX = (messages: Message[]) => { return messages.map(message =>
{message.content}
); }; @@ -63,26 +71,97 @@ export class AmplifyChatbot { ]; } + reset() { + this.state = 'initial'; + this.text = ''; + this.audioRecorder && this.audioRecorder.clear(); + } + + micButtonHandler() { + if (this.state !== 'initial') return; + this.state = 'listening'; + this.audioRecorder.startRecording(() => this.onSilenceHandler()); + } + + onSilenceHandler() { + this.state = 'sending'; + this.audioRecorder.stopRecording(); + this.audioRecorder.exportWAV(blob => { + this.audioInput = blob; + this.lexResponseHandler(); + }); + } + + async lexResponseHandler() { + this.state = 'speaking'; + if (!Interactions || typeof Interactions.send !== 'function') { + throw new Error(NO_INTERACTIONS_MODULE_FOUND); + } + const interactionsMessage = { + content: this.audioInput, + options: { + messageType: 'voice', + }, + }; + const response = await Interactions.send(this.botName, interactionsMessage); + if ((response as any).inputTranscript === '') { + this.appendMessage('⠀', 'user'); + } else { + this.appendMessage((response as any).inputTranscript, 'user'); + } + this.appendMessage((response as any).message, 'bot'); + this.playTranscript((response as any).audioStream); + } + + playTranscript(audioStream: Uint8Array) { + this.audioRecorder.play(audioStream, () => { + this.state = 'initial'; + }); + } + async sendText() { if (this.text.length === 0 || this.state !== 'initial') return; - const text = this.text; this.text = ''; this.appendMessage(text, 'user'); this.state = 'sending'; const response = await Interactions.send(this.botName, text); - this.appendMessage(response.message, 'bot'); + if (response.message) { + this.appendMessage(response.message, 'bot'); + } this.state = 'initial'; } - async componentWillLoad() { - // TODO: check if interactions is avaialable - if (this.messages.length === 0 && this.welcomeMessage && this.welcomeMessage.length > 0) { - this.messages.push({ - content: this.welcomeMessage, - from: 'bot', + connectedCallback() { + if (this.voiceEnabled) { + this.audioRecorder = new AudioRecorder({ + time: 1500, + amplitude: 0.2, }); + console.log(this.audioRecorder); + } + } + + componentWillLoad() { + if (this.messages.length === 0 && this.welcomeMessage && this.welcomeMessage.length > 0) { + this.appendMessage(this.welcomeMessage, 'bot'); + } + if (this.botName) { + if (!Interactions || typeof Interactions.onComplete !== 'function') { + throw new Error(NO_INTERACTIONS_MODULE_FOUND); + } + const onComplete = (err: string, data: object) => { + console.log({ err, data }); + this.chatCompleted.emit({ + data, + err, + }); + if (this.clearOnComplete) { + this.messages = []; + } + }; + Interactions.onComplete(this.botName, onComplete); } } @@ -97,7 +176,13 @@ export class AmplifyChatbot { /> ); const micButton = this.voiceEnabled && ( - + this.micButtonHandler()} + class="icon-button" + variant="icon" + icon="microphone" + disabled={this.state !== 'initial'} + /> ); const sendButton = this.textEnabled && (
diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md index 926101d3858..e9003a0c482 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -7,16 +7,22 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------------- | ------------------------------------------------------- | ------------------------------------- | ----------- | -| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | -| `botTitle` | `bot-title` | Text placed in the top header | `string` | `undefined` | -| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | -| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | -| `onComplete` | -- | Callback to be called after conversation finishes | `(err: string, data: object) => void` | `undefined` | -| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | -| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | -| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ------------------------------------------------------- | --------- | ----------- | +| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | +| `botTitle` | `bot-title` | Text placed in the top header | `string` | `undefined` | +| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | +| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | +| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | +| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | +| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | + + +## Events + +| Event | Description | Type | +| --------------- | -------------------------------------------- | ------------------------- | +| `chatCompleted` | Event emitted when conversation is completed | `CustomEvent` | ## Dependencies From 7aadabc5b34e76a99cb528b87de12fd3b1416a78 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 13 Aug 2020 12:09:22 -0700 Subject: [PATCH 17/71] Use interface over type --- .../src/common/audio-control/recorder.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 737ffa97723..557df76dcfc 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -1,9 +1,9 @@ import { exportBuffer } from './helper'; -type SilenceDetectionConfig = { +interface SilenceDetectionConfig { time: number; amplitude: number; -}; +} export class AudioRecorder { private options: SilenceDetectionConfig; From 1a07f47c631c66e410d4b3c9534e253af58d820e Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 13 Aug 2020 12:23:22 -0700 Subject: [PATCH 18/71] Reorder functions and add byte descriptions --- .../src/common/audio-control/helper.ts | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/helper.ts b/packages/amplify-ui-components/src/common/audio-control/helper.ts index 5658086eab1..7fee46f7f19 100644 --- a/packages/amplify-ui-components/src/common/audio-control/helper.ts +++ b/packages/amplify-ui-components/src/common/audio-control/helper.ts @@ -1,18 +1,3 @@ -export const exportBuffer = ( - recBuffer: Float32Array[], - recLength: number, - recordSampleRate: number, - exportSampleRate: number, -) => { - const mergedBuffers = mergeBuffers(recBuffer, recLength); - const downsampledBuffer = downsampleBuffer(mergedBuffers, recordSampleRate, exportSampleRate); - const encodedWav = encodeWAV(downsampledBuffer, exportSampleRate); - const audioBlob = new Blob([encodedWav], { - type: 'application/octet-stream', - }); - return audioBlob; -}; - const mergeBuffers = (bufferArray: Float32Array[], recLength: number) => { const result = new Float32Array(recLength); let offset = 0; @@ -65,22 +50,37 @@ const encodeWAV = (samples: Float32Array, exportSampleRate: number) => { const buffer = new ArrayBuffer(44 + samples.length * 2); const view = new DataView(buffer); writeString(view, 0, 'RIFF'); - view.setUint32(4, 32 + samples.length * 2, true); + view.setUint32(4, 32 + samples.length * 2, true); // chunk size writeString(view, 8, 'WAVE'); // fmt subchunk writeString(view, 12, 'fmt '); - view.setUint32(16, 16, true); - view.setUint16(20, 1, true); - view.setUint16(22, 1, true); - view.setUint32(24, exportSampleRate, true); - view.setUint32(28, exportSampleRate * 2, true); - view.setUint16(32, 2, true); - view.setUint16(34, 16, true); + view.setUint32(16, 16, true); // subchunk size + view.setUint16(20, 1, true); // audio format, pcm = 1 + view.setUint16(22, 1, true); // number of channels + view.setUint32(24, exportSampleRate, true); // sample rate + view.setUint32(28, exportSampleRate * 2, true); // byte rate + view.setUint16(32, 2, true); // block align, # of bytes per sample + view.setUint16(34, 16, true); // bits per sample // data subchunk writeString(view, 36, 'data'); - view.setUint32(40, samples.length * 2, true); - floatTo16BitPCM(view, 44, samples); + view.setUint32(40, samples.length * 2, true); // subchunk size + floatTo16BitPCM(view, 44, samples); // pcm values here return view; }; + +export const exportBuffer = ( + recBuffer: Float32Array[], + recLength: number, + recordSampleRate: number, + exportSampleRate: number, +) => { + const mergedBuffers = mergeBuffers(recBuffer, recLength); + const downsampledBuffer = downsampleBuffer(mergedBuffers, recordSampleRate, exportSampleRate); + const encodedWav = encodeWAV(downsampledBuffer, exportSampleRate); + const audioBlob = new Blob([encodedWav], { + type: 'application/octet-stream', + }); + return audioBlob; +}; From 346a4ccdcf2f73750b765d04025007c445c49331 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 17 Aug 2020 13:54:32 -0700 Subject: [PATCH 19/71] Add loading animation --- .../src/common/audio-control/recorder.ts | 1 - .../amplify-chatbot/amplify-chatbot.scss | 68 ++++++++++++++++++- .../amplify-chatbot/amplify-chatbot.tsx | 30 ++++---- 3 files changed, 83 insertions(+), 16 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 557df76dcfc..660a0ef81c7 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -53,7 +53,6 @@ export class AudioRecorder { processorNode.onaudioprocess = audioProcessingEvent => { if (!this.recording) return; const stream = audioProcessingEvent.inputBuffer.getChannelData(0); - console.log(stream); this.streamBuffer.push(new Float32Array(stream)); // set to a copy of the stream this.streamBufferLength += stream.length; this.analyse(); diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index fd21344cd49..16d2b34865c 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -38,7 +38,7 @@ .bot { margin-left: 1rem; margin-right: auto; - background-color: #dbdbdb; + background-color: rgb(230, 230, 230); color: black; border-radius: 1.5rem 1.5rem 1.5rem 0; } @@ -64,3 +64,69 @@ --icon-fill: var(--amplify-primary-color); --padding: 0.625rem; } +/** + * Loading animation adapted from: https://github.com/nzbin/three-dots. + */ +.dot-flashing { + position: relative; + margin-left: 15px; + margin-right: 15px; + margin-top: 0.3rem; + margin-bottom: 0.3rem; + width: 10px; + height: 10px; + border-radius: 5px; + background-color: rgba(0, 0, 0, 0.65); + // background-color: var(--amplify-primary-color); + // color: var(--amplify-primary-color); + -webkit-animation: dot-flashing 1s infinite linear alternate; + animation: dot-flashing 1s infinite linear alternate; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} +.dot-flashing::before, +.dot-flashing::after { + content: ''; + position: absolute; + top: 0; + background-color: rgba(0, 0, 0, 0.65); + // background-color: var(--amplify-primary-color); +} +.dot-flashing::before { + left: -15px; + width: 10px; + height: 10px; + border-radius: 5px; + -webkit-animation: dot-flashing 1s infinite alternate; + animation: dot-flashing 1s infinite alternate; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.dot-flashing::after { + left: 15px; + width: 10px; + height: 10px; + border-radius: 5px; + -webkit-animation: dot-flashing 1s infinite alternate; + animation: dot-flashing 1s infinite alternate; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} +@-webkit-keyframes dot-flashing { + 0% { + background-color: #9880ff; + } + 50%, + 100% { + background-color: #ebe6ff; + } +} +@keyframes dot-flashing { + 0% { + background-color: rgba(0, 0, 0, 0.65); + } + 50%, + 100% { + background-color: rgba(0, 0, 0, 0.1); + } +} diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index a7f7565693c..f0f2479b421 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -52,10 +52,6 @@ export class AmplifyChatbot { /** Event emitted when conversation is completed */ @Event() chatCompleted: EventEmitter; - messageJSX = (messages: Message[]) => { - return messages.map(message =>
{message.content}
); - }; - handleChange(event: Event) { const target = event.target as HTMLInputElement; this.text = target.value; @@ -93,7 +89,6 @@ export class AmplifyChatbot { } async lexResponseHandler() { - this.state = 'speaking'; if (!Interactions || typeof Interactions.send !== 'function') { throw new Error(NO_INTERACTIONS_MODULE_FOUND); } @@ -104,13 +99,10 @@ export class AmplifyChatbot { }, }; const response = await Interactions.send(this.botName, interactionsMessage); - if ((response as any).inputTranscript === '') { - this.appendMessage('⠀', 'user'); - } else { - this.appendMessage((response as any).inputTranscript, 'user'); - } - this.appendMessage((response as any).message, 'bot'); - this.playTranscript((response as any).audioStream); + this.state = 'speaking'; + if (response.inputTranscript) this.appendMessage(response.inputTranscript, 'user'); + this.appendMessage(response.message, 'bot'); + this.playTranscript(response.audioStream); } playTranscript(audioStream: Uint8Array) { @@ -139,7 +131,6 @@ export class AmplifyChatbot { time: 1500, amplitude: 0.2, }); - console.log(this.audioRecorder); } } @@ -152,7 +143,6 @@ export class AmplifyChatbot { throw new Error(NO_INTERACTIONS_MODULE_FOUND); } const onComplete = (err: string, data: object) => { - console.log({ err, data }); this.chatCompleted.emit({ data, err, @@ -196,6 +186,18 @@ export class AmplifyChatbot { return [textInput, micButton, sendButton]; } + private messageJSX = (messages: Message[]) => { + const messageList = messages.map(message =>
{message.content}
); + if (this.state === 'sending') { + messageList.push( +
+
+
, + ); + } + return messageList; + }; + render() { console.log(this.state); return ( From 7b0e4cb40662d25bb89c476a95737c9b01f497a8 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 17 Aug 2020 13:54:40 -0700 Subject: [PATCH 20/71] Update interaction types --- packages/interactions/src/Interactions.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/interactions/src/Interactions.ts b/packages/interactions/src/Interactions.ts index 01a402118d6..b5c6e269d56 100644 --- a/packages/interactions/src/Interactions.ts +++ b/packages/interactions/src/Interactions.ts @@ -104,11 +104,14 @@ export class InteractionsClass { botname: string, message: InteractionsMessage ): Promise; - public async send(botname: string, message: object): Promise; + public async send( + botname: string, + message: object + ): Promise; public async send( botname: string, message: string | object - ): Promise { + ): Promise { if (!this._options.bots || !this._options.bots[botname]) { throw new Error('Bot ' + botname + ' does not exist'); } From 9e9163f05f1ce6f156bf65da03531e625f15559e Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 17 Aug 2020 15:16:22 -0700 Subject: [PATCH 21/71] Scroll to bottom --- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index f0f2479b421..507ee48e714 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -1,4 +1,4 @@ -import { Component, Host, h, Prop, State, Listen, Event, EventEmitter } from '@stencil/core'; +import { Component, Host, h, Prop, State, Listen, Event, EventEmitter, Element } from '@stencil/core'; import { Interactions } from '@aws-amplify/interactions'; import { JSXBase } from '@stencil/core/internal'; import { AudioRecorder } from '../../common/audio-control/recorder'; @@ -41,6 +41,8 @@ export class AmplifyChatbot { /** Current app state */ @State() state: AppState = 'initial'; + @Element() private element: HTMLElement; + private audioRecorder: AudioRecorder; private audioInput: Blob; @@ -155,6 +157,11 @@ export class AmplifyChatbot { } } + componentDidRender() { + const body = this.element.shadowRoot.querySelector('.body'); + body.scrollTop = body.scrollHeight; + } + footerJSX(): JSXBase.IntrinsicElements[] { const textInput = ( Date: Mon, 17 Aug 2020 15:53:53 -0700 Subject: [PATCH 22/71] set methods private --- .../amplify-chatbot/amplify-chatbot.tsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 507ee48e714..1920c5b79f2 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -41,7 +41,7 @@ export class AmplifyChatbot { /** Current app state */ @State() state: AppState = 'initial'; - @Element() private element: HTMLElement; + @Element() element: HTMLAmplifyChatbotElement; private audioRecorder: AudioRecorder; private audioInput: Blob; @@ -54,12 +54,12 @@ export class AmplifyChatbot { /** Event emitted when conversation is completed */ @Event() chatCompleted: EventEmitter; - handleChange(event: Event) { + private handleChange(event: Event) { const target = event.target as HTMLInputElement; this.text = target.value; } - appendMessage(content: string, from: Agent) { + private appendMessage(content: string, from: Agent) { this.messages = [ ...this.messages, { @@ -69,19 +69,19 @@ export class AmplifyChatbot { ]; } - reset() { + private reset() { this.state = 'initial'; this.text = ''; this.audioRecorder && this.audioRecorder.clear(); } - micButtonHandler() { + private micButtonHandler() { if (this.state !== 'initial') return; this.state = 'listening'; this.audioRecorder.startRecording(() => this.onSilenceHandler()); } - onSilenceHandler() { + private onSilenceHandler() { this.state = 'sending'; this.audioRecorder.stopRecording(); this.audioRecorder.exportWAV(blob => { @@ -90,7 +90,7 @@ export class AmplifyChatbot { }); } - async lexResponseHandler() { + private async lexResponseHandler() { if (!Interactions || typeof Interactions.send !== 'function') { throw new Error(NO_INTERACTIONS_MODULE_FOUND); } @@ -107,13 +107,13 @@ export class AmplifyChatbot { this.playTranscript(response.audioStream); } - playTranscript(audioStream: Uint8Array) { + private playTranscript(audioStream: Uint8Array) { this.audioRecorder.play(audioStream, () => { this.state = 'initial'; }); } - async sendText() { + private async sendText() { if (this.text.length === 0 || this.state !== 'initial') return; const text = this.text; this.text = ''; @@ -151,6 +151,7 @@ export class AmplifyChatbot { }); if (this.clearOnComplete) { this.messages = []; + this.reset(); } }; Interactions.onComplete(this.botName, onComplete); @@ -162,7 +163,7 @@ export class AmplifyChatbot { body.scrollTop = body.scrollHeight; } - footerJSX(): JSXBase.IntrinsicElements[] { + private footerJSX(): JSXBase.IntrinsicElements[] { const textInput = ( Date: Mon, 17 Aug 2020 15:55:54 -0700 Subject: [PATCH 23/71] Rename css class --- .../src/components/amplify-chatbot/amplify-chatbot.scss | 2 +- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 16d2b34865c..6981c240633 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -49,7 +49,7 @@ color: var(--amplify-white); border-radius: 1.5rem 1.5rem 0 1.5rem; } -.chatbot-control { +.footer { display: flex; align-items: center; border-top: 0.062rem solid rgba(0, 0, 0, 0.05); diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 1920c5b79f2..5ad7a2e533b 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -213,7 +213,7 @@ export class AmplifyChatbot {
{this.botTitle}
{this.messageJSX(this.messages)}
-
{this.footerJSX()}
+
{this.footerJSX()}
); From f59e7eae69e199051f5660033bf01c3de9ecca7b Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 17 Aug 2020 15:56:57 -0700 Subject: [PATCH 24/71] Update snapshot --- .../amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap index 06c5f559ba3..a2e247a447d 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap @@ -6,7 +6,7 @@ exports[`amplify-chatbot renders chatbot 1`] = `
-
+
From 52e73ee0e2ab9943ae1e471cc5fd4e3136dd1493 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 18 Aug 2020 15:10:29 -0700 Subject: [PATCH 25/71] Add error handling and reorder functions --- .../amplify-chatbot/amplify-chatbot.tsx | 130 ++++++++++-------- .../src/components/amplify-chatbot/readme.md | 21 +-- .../src/components/amplify-toast/readme.md | 2 + 3 files changed, 90 insertions(+), 63 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 5ad7a2e533b..6ba5300c7da 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -11,7 +11,7 @@ interface Message { from: Agent; } -type AppState = 'initial' | 'listening' | 'sending' | 'speaking'; +type AppState = 'initial' | 'listening' | 'sending' | 'speaking' | 'error'; @Component({ tag: 'amplify-chatbot', @@ -28,7 +28,7 @@ export class AmplifyChatbot { /** Greeting message displayed to users */ @Prop() welcomeMessage: string; /** Text placed in the top header */ - @Prop() botTitle: string; + @Prop() botTitle: string = 'ChatBot Lex'; /** Whether voice chat is enabled */ @Prop() voiceEnabled: boolean = false; /** Whether text chat is enabled */ @@ -40,6 +40,8 @@ export class AmplifyChatbot { @State() text: string = ''; /** Current app state */ @State() state: AppState = 'initial'; + /** Toast error message */ + @State() error: string; @Element() element: HTMLAmplifyChatbotElement; @@ -48,18 +50,58 @@ export class AmplifyChatbot { @Listen('formSubmit') submitHandler(_event: CustomEvent) { - this.sendText(); + this.sendTextMessage(); } /** Event emitted when conversation is completed */ @Event() chatCompleted: EventEmitter; + connectedCallback() { + if (this.voiceEnabled) { + this.audioRecorder = new AudioRecorder({ + time: 1500, + amplitude: 0.2, + }); + } + } + + componentWillLoad() { + if (this.messages.length === 0 && this.welcomeMessage && this.welcomeMessage.length > 0) { + this.appendToChat(this.welcomeMessage, 'bot'); + } + if (this.botName) { + if (!Interactions || typeof Interactions.onComplete !== 'function') { + throw new Error(NO_INTERACTIONS_MODULE_FOUND); + } + const onComplete = (err: string, data: object) => { + this.chatCompleted.emit({ + data, + err, + }); + if (this.clearOnComplete) { + this.messages = []; + this.reset(); + } + }; + Interactions.onComplete(this.botName, onComplete); + } else { + this.state = 'error'; + this.error = 'Error: Bot Name must be provided to ChatBot'; + } + } + + componentDidRender() { + // scroll to the bottom of messages if necessary + const body = this.element.shadowRoot.querySelector('.body'); + body.scrollTop = body.scrollHeight; + } + private handleChange(event: Event) { const target = event.target as HTMLInputElement; this.text = target.value; } - private appendMessage(content: string, from: Agent) { + private appendToChat(content: string, from: Agent) { this.messages = [ ...this.messages, { @@ -72,6 +114,7 @@ export class AmplifyChatbot { private reset() { this.state = 'initial'; this.text = ''; + this.error = undefined; this.audioRecorder && this.audioRecorder.clear(); } @@ -86,11 +129,11 @@ export class AmplifyChatbot { this.audioRecorder.stopRecording(); this.audioRecorder.exportWAV(blob => { this.audioInput = blob; - this.lexResponseHandler(); + this.sendVoiceMessage(); }); } - private async lexResponseHandler() { + private async sendVoiceMessage() { if (!Interactions || typeof Interactions.send !== 'function') { throw new Error(NO_INTERACTIONS_MODULE_FOUND); } @@ -102,8 +145,8 @@ export class AmplifyChatbot { }; const response = await Interactions.send(this.botName, interactionsMessage); this.state = 'speaking'; - if (response.inputTranscript) this.appendMessage(response.inputTranscript, 'user'); - this.appendMessage(response.message, 'bot'); + if (response.inputTranscript) this.appendToChat(response.inputTranscript, 'user'); + this.appendToChat(response.message, 'bot'); this.playTranscript(response.audioStream); } @@ -113,56 +156,20 @@ export class AmplifyChatbot { }); } - private async sendText() { - if (this.text.length === 0 || this.state !== 'initial') return; + private async sendTextMessage() { + if (this.text.length === 0 || this.state !== 'initial' || typeof this.error !== undefined) return; const text = this.text; this.text = ''; - this.appendMessage(text, 'user'); + this.appendToChat(text, 'user'); this.state = 'sending'; const response = await Interactions.send(this.botName, text); if (response.message) { - this.appendMessage(response.message, 'bot'); + this.appendToChat(response.message, 'bot'); } this.state = 'initial'; } - connectedCallback() { - if (this.voiceEnabled) { - this.audioRecorder = new AudioRecorder({ - time: 1500, - amplitude: 0.2, - }); - } - } - - componentWillLoad() { - if (this.messages.length === 0 && this.welcomeMessage && this.welcomeMessage.length > 0) { - this.appendMessage(this.welcomeMessage, 'bot'); - } - if (this.botName) { - if (!Interactions || typeof Interactions.onComplete !== 'function') { - throw new Error(NO_INTERACTIONS_MODULE_FOUND); - } - const onComplete = (err: string, data: object) => { - this.chatCompleted.emit({ - data, - err, - }); - if (this.clearOnComplete) { - this.messages = []; - this.reset(); - } - }; - Interactions.onComplete(this.botName, onComplete); - } - } - - componentDidRender() { - const body = this.element.shadowRoot.querySelector('.body'); - body.scrollTop = body.scrollHeight; - } - private footerJSX(): JSXBase.IntrinsicElements[] { const textInput = ( this.handleChange(evt)} value={this.text} + disabled={this.state === 'error'} /> ); const micButton = this.voiceEnabled && ( @@ -179,7 +187,7 @@ export class AmplifyChatbot { class="icon-button" variant="icon" icon="microphone" - disabled={this.state !== 'initial'} + disabled={this.state === 'error' || this.state !== 'initial'} /> ); const sendButton = this.textEnabled && ( @@ -187,8 +195,8 @@ export class AmplifyChatbot { class="icon-button" variant="icon" icon="send" - handleButtonClick={() => this.sendText()} - disabled={this.state !== 'initial'} + handleButtonClick={() => this.sendTextMessage()} + disabled={this.state === 'error' || this.state !== 'initial'} /> ); return [textInput, micButton, sendButton]; @@ -211,9 +219,23 @@ export class AmplifyChatbot { return (
-
{this.botTitle}
-
{this.messageJSX(this.messages)}
-
{this.footerJSX()}
+
+ {this.botTitle} +
+
+ {this.messageJSX(this.messages)} +
+
+ {this.footerJSX()} +
+ {this.error ? ( + { + this.error = undefined; + }} + /> + ) : null}
); diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md index e9003a0c482..181a6f1ea78 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -7,15 +7,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------------- | ------------------------------------------------------- | --------- | ----------- | -| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | -| `botTitle` | `bot-title` | Text placed in the top header | `string` | `undefined` | -| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | -| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | -| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | -| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | -| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ------------------------------------------------------- | --------- | --------------- | +| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | +| `botTitle` | `bot-title` | Text placed in the top header | `string` | `'ChatBot Lex'` | +| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | +| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | +| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | +| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | +| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | ## Events @@ -31,13 +31,16 @@ - [amplify-input](../amplify-input) - [amplify-button](../amplify-button) +- [amplify-toast](../amplify-toast) ### Graph ```mermaid graph TD; amplify-chatbot --> amplify-input amplify-chatbot --> amplify-button + amplify-chatbot --> amplify-toast amplify-button --> amplify-icon + amplify-toast --> amplify-icon style amplify-chatbot fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/amplify-ui-components/src/components/amplify-toast/readme.md b/packages/amplify-ui-components/src/components/amplify-toast/readme.md index 06f011d9227..eb7b50adffb 100644 --- a/packages/amplify-ui-components/src/components/amplify-toast/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-toast/readme.md @@ -16,6 +16,7 @@ ### Used by - [amplify-authenticator](../amplify-authenticator) + - [amplify-chatbot](../amplify-chatbot) ### Depends on @@ -26,6 +27,7 @@ graph TD; amplify-toast --> amplify-icon amplify-authenticator --> amplify-toast + amplify-chatbot --> amplify-toast style amplify-toast fill:#f9f,stroke:#333,stroke-width:4px ``` From ce066a1d7be857cbf56493f75f346cc1f10cf106 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 18 Aug 2020 15:34:53 -0700 Subject: [PATCH 26/71] Refactor error handling --- .../amplify-chatbot/amplify-chatbot.tsx | 77 +++++++++++-------- 1 file changed, 44 insertions(+), 33 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 6ba5300c7da..c16e7d41093 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -56,38 +56,41 @@ export class AmplifyChatbot { /** Event emitted when conversation is completed */ @Event() chatCompleted: EventEmitter; - connectedCallback() { + componentWillLoad() { + // Check props and Interactions + if (!this.voiceEnabled && !this.textEnabled) { + this.setError('Error: you must enable voice or text for the chatbot'); + } else if (!this.botName) { + this.setError('Error: Bot Name must be provided to ChatBot'); + } else if (!Interactions || typeof Interactions.onComplete !== 'function') { + this.setError(NO_INTERACTIONS_MODULE_FOUND); + } + + // Initialize AudioRecorder if voice is enabled if (this.voiceEnabled) { this.audioRecorder = new AudioRecorder({ time: 1500, amplitude: 0.2, }); } - } - componentWillLoad() { + // Set welcome message if (this.messages.length === 0 && this.welcomeMessage && this.welcomeMessage.length > 0) { this.appendToChat(this.welcomeMessage, 'bot'); } - if (this.botName) { - if (!Interactions || typeof Interactions.onComplete !== 'function') { - throw new Error(NO_INTERACTIONS_MODULE_FOUND); + + // Callback function to be called after chat is completed + const onComplete = (err: string, data: object) => { + this.chatCompleted.emit({ + data, + err, + }); + if (this.clearOnComplete) { + this.reset(); } - const onComplete = (err: string, data: object) => { - this.chatCompleted.emit({ - data, - err, - }); - if (this.clearOnComplete) { - this.messages = []; - this.reset(); - } - }; + Interactions.onComplete(this.botName, onComplete); - } else { - this.state = 'error'; - this.error = 'Error: Bot Name must be provided to ChatBot'; - } + }; } componentDidRender() { @@ -115,6 +118,7 @@ export class AmplifyChatbot { this.state = 'initial'; this.text = ''; this.error = undefined; + this.messages = this.welcomeMessage ? this.messages.slice(0, 1) : []; this.audioRecorder && this.audioRecorder.clear(); } @@ -147,11 +151,7 @@ export class AmplifyChatbot { this.state = 'speaking'; if (response.inputTranscript) this.appendToChat(response.inputTranscript, 'user'); this.appendToChat(response.message, 'bot'); - this.playTranscript(response.audioStream); - } - - private playTranscript(audioStream: Uint8Array) { - this.audioRecorder.play(audioStream, () => { + this.audioRecorder.play(response.audioStream, () => { this.state = 'initial'; }); } @@ -170,6 +170,11 @@ export class AmplifyChatbot { this.state = 'initial'; } + private setError(message: string) { + this.state = 'error'; + this.error = message; + } + private footerJSX(): JSXBase.IntrinsicElements[] { const textInput = ( { + this.error = undefined; + }} + /> + ) + ); + } + render() { console.log(this.state); return ( @@ -228,14 +246,7 @@ export class AmplifyChatbot {
{this.footerJSX()}
- {this.error ? ( - { - this.error = undefined; - }} - /> - ) : null} + {this.errorToast()}
); From 5a9a0f8e739961eeb27fe70f39401d913cbc5670 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 18 Aug 2020 19:24:13 -0700 Subject: [PATCH 27/71] Refactor chatbot functions --- .../amplify-chatbot.spec.tsx.snap | 13 +- .../amplify-chatbot/amplify-chatbot.tsx | 169 ++++++++++-------- 2 files changed, 102 insertions(+), 80 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap index a2e247a447d..2de385fa782 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap @@ -4,12 +4,15 @@ exports[`amplify-chatbot renders chatbot 1`] = `
-
-
-
- - +
+ ChatBot Lex
+
+
+ + +
+
diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index c16e7d41093..b443215c8be 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -46,8 +46,8 @@ export class AmplifyChatbot { @Element() element: HTMLAmplifyChatbotElement; private audioRecorder: AudioRecorder; - private audioInput: Blob; + // Occurs when user presses enter in input box @Listen('formSubmit') submitHandler(_event: CustomEvent) { this.sendTextMessage(); @@ -56,15 +56,30 @@ export class AmplifyChatbot { /** Event emitted when conversation is completed */ @Event() chatCompleted: EventEmitter; + /** + * Lifecycle functions + */ + componentWillLoad() { - // Check props and Interactions + if (!Interactions || typeof Interactions.onComplete !== 'function') { + throw new Error(NO_INTERACTIONS_MODULE_FOUND); + } + this.updateProps(); + } + + componentDidRender() { + // scroll to the bottom of messages if necessary + const body = this.element.shadowRoot.querySelector('.body'); + body.scrollTop = body.scrollHeight; + } + + private updateProps() { if (!this.voiceEnabled && !this.textEnabled) { this.setError('Error: you must enable voice or text for the chatbot'); } else if (!this.botName) { this.setError('Error: Bot Name must be provided to ChatBot'); - } else if (!Interactions || typeof Interactions.onComplete !== 'function') { - this.setError(NO_INTERACTIONS_MODULE_FOUND); } + this.reset(); // Initialize AudioRecorder if voice is enabled if (this.voiceEnabled) { @@ -74,11 +89,6 @@ export class AmplifyChatbot { }); } - // Set welcome message - if (this.messages.length === 0 && this.welcomeMessage && this.welcomeMessage.length > 0) { - this.appendToChat(this.welcomeMessage, 'bot'); - } - // Callback function to be called after chat is completed const onComplete = (err: string, data: object) => { this.chatCompleted.emit({ @@ -88,61 +98,58 @@ export class AmplifyChatbot { if (this.clearOnComplete) { this.reset(); } - - Interactions.onComplete(this.botName, onComplete); }; + try { + Interactions.onComplete(this.botName, onComplete); + } catch (err) { + this.setError(err); + } } - componentDidRender() { - // scroll to the bottom of messages if necessary - const body = this.element.shadowRoot.querySelector('.body'); - body.scrollTop = body.scrollHeight; - } - - private handleChange(event: Event) { - const target = event.target as HTMLInputElement; - this.text = target.value; - } - - private appendToChat(content: string, from: Agent) { - this.messages = [ - ...this.messages, - { - content, - from, - }, - ]; - } - - private reset() { - this.state = 'initial'; - this.text = ''; - this.error = undefined; - this.messages = this.welcomeMessage ? this.messages.slice(0, 1) : []; - this.audioRecorder && this.audioRecorder.clear(); - } + /** + * Handlers + */ - private micButtonHandler() { + private handleMicButton() { if (this.state !== 'initial') return; this.state = 'listening'; - this.audioRecorder.startRecording(() => this.onSilenceHandler()); + this.audioRecorder.startRecording(() => this.handleSilence()); } - private onSilenceHandler() { + private handleSilence() { this.state = 'sending'; this.audioRecorder.stopRecording(); this.audioRecorder.exportWAV(blob => { - this.audioInput = blob; - this.sendVoiceMessage(); + this.sendVoiceMessage(blob); }); } - private async sendVoiceMessage() { - if (!Interactions || typeof Interactions.send !== 'function') { - throw new Error(NO_INTERACTIONS_MODULE_FOUND); + private handleTextChange(event: Event) { + const target = event.target as HTMLInputElement; + this.text = target.value; + } + + /** + * Interactions helpers + */ + + private async sendTextMessage() { + if (this.text.length === 0 || this.state !== 'initial') return; + const text = this.text; + this.text = ''; + this.appendToChat(text, 'user'); + this.state = 'sending'; + + const response = await Interactions.send(this.botName, text); + if (response.message) { + this.appendToChat(response.message, 'bot'); } + this.state = 'initial'; + } + + private async sendVoiceMessage(audioInput: Blob) { const interactionsMessage = { - content: this.audioInput, + content: audioInput, options: { messageType: 'voice', }, @@ -156,39 +163,64 @@ export class AmplifyChatbot { }); } - private async sendTextMessage() { - if (this.text.length === 0 || this.state !== 'initial' || typeof this.error !== undefined) return; - const text = this.text; - this.text = ''; - this.appendToChat(text, 'user'); - this.state = 'sending'; - - const response = await Interactions.send(this.botName, text); - if (response.message) { - this.appendToChat(response.message, 'bot'); - } - this.state = 'initial'; + private appendToChat(content: string, from: Agent) { + this.messages = [ + ...this.messages, + { + content, + from, + }, + ]; } + /** + * State control functions + */ + private setError(message: string) { this.state = 'error'; this.error = message; } + private reset() { + this.state = 'initial'; + this.text = ''; + this.error = undefined; + this.messages = []; + if (this.welcomeMessage) this.appendToChat(this.welcomeMessage, 'bot'); + this.audioRecorder && this.audioRecorder.clear(); + } + + /** + * Rendering related methods + */ + + private messageJSX = (messages: Message[]) => { + const messageList = messages.map(message =>
{message.content}
); + if (this.state === 'sending') { + messageList.push( +
+
+
, + ); + } + return messageList; + }; + private footerJSX(): JSXBase.IntrinsicElements[] { const textInput = ( this.handleChange(evt)} + handleInputChange={evt => this.handleTextChange(evt)} value={this.text} disabled={this.state === 'error'} /> ); const micButton = this.voiceEnabled && ( this.micButtonHandler()} + handleButtonClick={() => this.handleMicButton()} class="icon-button" variant="icon" icon="microphone" @@ -207,18 +239,6 @@ export class AmplifyChatbot { return [textInput, micButton, sendButton]; } - private messageJSX = (messages: Message[]) => { - const messageList = messages.map(message =>
{message.content}
); - if (this.state === 'sending') { - messageList.push( -
-
-
, - ); - } - return messageList; - }; - private errorToast() { return ( this.error && ( @@ -233,7 +253,6 @@ export class AmplifyChatbot { } render() { - console.log(this.state); return (
From 399dc3b92a98f5e90ce4185bccbc5263e5e3861f Mon Sep 17 00:00:00 2001 From: wlee221 Date: Tue, 18 Aug 2020 23:41:51 -0700 Subject: [PATCH 28/71] Cleanup --- .../amplify-chatbot/amplify-chatbot.scss | 6 +++--- .../components/amplify-chatbot/amplify-chatbot.tsx | 14 ++++++-------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 6981c240633..98e1b69d298 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -31,7 +31,7 @@ .bubble { max-width: 80%; padding: 0.8em 1.4em; - clear: both; + text-align: left; word-wrap: break-word; margin-bottom: 0.625rem; } @@ -114,11 +114,11 @@ } @-webkit-keyframes dot-flashing { 0% { - background-color: #9880ff; + background-color: rgba(0, 0, 0, 0.65); } 50%, 100% { - background-color: #ebe6ff; + background-color: rgba(0, 0, 0, 0.1); } } @keyframes dot-flashing { diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index b443215c8be..7ec2e21ff11 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -59,7 +59,6 @@ export class AmplifyChatbot { /** * Lifecycle functions */ - componentWillLoad() { if (!Interactions || typeof Interactions.onComplete !== 'function') { throw new Error(NO_INTERACTIONS_MODULE_FOUND); @@ -75,12 +74,12 @@ export class AmplifyChatbot { private updateProps() { if (!this.voiceEnabled && !this.textEnabled) { - this.setError('Error: you must enable voice or text for the chatbot'); + this.setError('Error: Either voice or text must be enabled for the chatbot'); } else if (!this.botName) { this.setError('Error: Bot Name must be provided to ChatBot'); } - this.reset(); + if (this.welcomeMessage) this.appendToChat(this.welcomeMessage, 'bot'); // Initialize AudioRecorder if voice is enabled if (this.voiceEnabled) { this.audioRecorder = new AudioRecorder({ @@ -99,6 +98,7 @@ export class AmplifyChatbot { this.reset(); } }; + try { Interactions.onComplete(this.botName, onComplete); } catch (err) { @@ -109,7 +109,6 @@ export class AmplifyChatbot { /** * Handlers */ - private handleMicButton() { if (this.state !== 'initial') return; this.state = 'listening'; @@ -119,7 +118,7 @@ export class AmplifyChatbot { private handleSilence() { this.state = 'sending'; this.audioRecorder.stopRecording(); - this.audioRecorder.exportWAV(blob => { + this.audioRecorder.exportWAV((blob: Blob) => { this.sendVoiceMessage(blob); }); } @@ -132,7 +131,6 @@ export class AmplifyChatbot { /** * Interactions helpers */ - private async sendTextMessage() { if (this.text.length === 0 || this.state !== 'initial') return; const text = this.text; @@ -176,7 +174,6 @@ export class AmplifyChatbot { /** * State control functions */ - private setError(message: string) { this.state = 'error'; this.error = message; @@ -194,7 +191,6 @@ export class AmplifyChatbot { /** * Rendering related methods */ - private messageJSX = (messages: Message[]) => { const messageList = messages.map(message =>
{message.content}
); if (this.state === 'sending') { @@ -220,6 +216,7 @@ export class AmplifyChatbot { ); const micButton = this.voiceEnabled && ( this.handleMicButton()} class="icon-button" variant="icon" @@ -229,6 +226,7 @@ export class AmplifyChatbot { ); const sendButton = this.textEnabled && ( Date: Tue, 18 Aug 2020 23:43:37 -0700 Subject: [PATCH 29/71] Update snapshot --- .../amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap index 2de385fa782..336f9d6e9a7 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap @@ -10,7 +10,7 @@ exports[`amplify-chatbot renders chatbot 1`] = `
- +
From 41aca35bb50af90800aece13b59814306e317409 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 19 Aug 2020 00:24:44 -0700 Subject: [PATCH 30/71] Expose width css variable from amplify-button --- .../src/components/amplify-button/amplify-button.scss | 3 ++- .../src/components/amplify-chatbot/amplify-chatbot.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss index 46b5593b4ce..5df4cd71ddc 100644 --- a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss +++ b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.scss @@ -13,8 +13,9 @@ --icon-fill: var(--amplify-white); --icon-height: 1.25rem; --padding: 1rem; + --width: 100%; - width: 100%; + width: var(--width); text-align: center; @include md { diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 98e1b69d298..25b85eeed1b 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -63,6 +63,7 @@ --icon-height: 1.25rem; --icon-fill: var(--amplify-primary-color); --padding: 0.625rem; + --width: inherit; } /** * Loading animation adapted from: https://github.com/nzbin/three-dots. From 8eb2a4446a234e56f138f9cf17afa1010a0cde08 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 19 Aug 2020 00:27:35 -0700 Subject: [PATCH 31/71] px to rem --- .../amplify-chatbot/amplify-chatbot.scss | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 25b85eeed1b..0434519fd0d 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -70,13 +70,13 @@ */ .dot-flashing { position: relative; - margin-left: 15px; - margin-right: 15px; + margin-left: 1rem; + margin-right: 1rem; margin-top: 0.3rem; margin-bottom: 0.3rem; - width: 10px; - height: 10px; - border-radius: 5px; + width: 0.625rem; + height: 0.625rem; + border-radius: 10rem; background-color: rgba(0, 0, 0, 0.65); // background-color: var(--amplify-primary-color); // color: var(--amplify-primary-color); @@ -94,20 +94,20 @@ // background-color: var(--amplify-primary-color); } .dot-flashing::before { - left: -15px; - width: 10px; - height: 10px; - border-radius: 5px; + left: -1rem; + width: 0.625rem; + height: 0.625rem; + border-radius: 10rem; -webkit-animation: dot-flashing 1s infinite alternate; animation: dot-flashing 1s infinite alternate; -webkit-animation-delay: 0s; animation-delay: 0s; } .dot-flashing::after { - left: 15px; - width: 10px; - height: 10px; - border-radius: 5px; + left: 1rem; + width: 0.625rem; + height: 0.625rem; + border-radius: 10rem; -webkit-animation: dot-flashing 1s infinite alternate; animation: dot-flashing 1s infinite alternate; -webkit-animation-delay: 1s; From 9271bb1704ded58bc89211333b325d39aa85e6c7 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 19 Aug 2020 00:55:31 -0700 Subject: [PATCH 32/71] Expose width and height variable; Control height at top level --- .../components/amplify-chatbot/amplify-chatbot.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 0434519fd0d..6a76d675e31 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -1,16 +1,23 @@ :host { --header-color: var(--amplify-secondary-color); --header-size: var(--amplify-text-lg); + --width: 28.75rem; + --height: 37.5rem; } .amplify-chatbot { - display: inline-block; + display: inline-flex; + flex-direction: column; background-color: var(--background-color); border-radius: 0.375rem; box-shadow: 0.0625rem 0rem 0.25rem 0 rgba(0, 0, 0, 0.15); box-sizing: border-box; font-family: var(--amplify-font-family); - width: 28.75rem; margin-bottom: 1rem; + width: 95%; + height: var(--height); + @include md { + width: var(--width); + } } .header { margin-top: 1.25rem; @@ -24,8 +31,8 @@ .body { padding-top: 2rem; display: flex; + flex-grow: 1; flex-direction: column; - height: 31.25rem; overflow: auto; } .bubble { From 9389a64c105cf271d663b035eec446df0e2fad6e Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 19 Aug 2020 01:04:07 -0700 Subject: [PATCH 33/71] Add header slot --- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 7ec2e21ff11..c7133dd6952 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -254,9 +254,11 @@ export class AmplifyChatbot { return (
-
- {this.botTitle} -
+ +
+ {this.botTitle} +
+
{this.messageJSX(this.messages)}
From 2dfb93e0bbd78acfe43643996076011648857355 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 19 Aug 2020 17:01:31 -0700 Subject: [PATCH 34/71] Add listening animation --- .../src/common/audio-control/recorder.ts | 10 ++- .../src/components/amplify-button/readme.md | 14 +-- .../amplify-chatbot.spec.tsx.snap | 8 +- .../amplify-chatbot/amplify-chatbot.scss | 12 ++- .../amplify-chatbot/amplify-chatbot.tsx | 88 +++++++++++++++++-- .../src/components/amplify-chatbot/readme.md | 4 +- .../amplify-icon-button.spec.ts.snap | 14 +++ .../components/amplify-icon-button/readme.md | 10 +-- .../__snapshots__/amplify-icon.spec.ts.snap | 8 ++ .../src/components/amplify-icon/icons.tsx | 8 ++ .../src/components/amplify-icon/readme.md | 6 +- 11 files changed, 150 insertions(+), 32 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 660a0ef81c7..601985250a1 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -5,6 +5,8 @@ interface SilenceDetectionConfig { amplitude: number; } +type Visualizer = (dataArray: Uint8Array, bufferLength: number) => void; + export class AudioRecorder { private options: SilenceDetectionConfig; private audioContext: AudioContext; @@ -12,6 +14,7 @@ export class AudioRecorder { private analyserNode: AnalyserNode; private onSilence: Function; + private visualizer: Visualizer; // input mic stream is stored in a buffer private streamBuffer: Float32Array[] = []; @@ -70,9 +73,10 @@ export class AudioRecorder { this.analyserNode = analyserNode; } - public startRecording(onSilence?: Function) { + public startRecording(onSilence?: Function, visualizer?: Visualizer) { const silenceHandler = onSilence || function() {}; this.onSilence = silenceHandler; + this.visualizer = visualizer; if (this.recording || !this.audioSupported) return; const context = this.audioContext; @@ -125,6 +129,10 @@ export class AudioRecorder { analyser.getByteTimeDomainData(dataArray); + if (this.visualizer) { + this.visualizer(dataArray, bufferLength); + } + for (let i = 0; i < bufferLength; i++) { // Normalize between -1 and 1. const curr_value_time = dataArray[i] / 128 - 1.0; diff --git a/packages/amplify-ui-components/src/components/amplify-button/readme.md b/packages/amplify-ui-components/src/components/amplify-button/readme.md index a09e725d372..966c26956bd 100644 --- a/packages/amplify-ui-components/src/components/amplify-button/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-button/readme.md @@ -5,13 +5,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | ---------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `disabled` | `disabled` | Disabled state of the button | `boolean` | `false` | -| `handleButtonClick` | -- | (Optional) Callback called when a user clicks on the button | `(evt: Event) => void` | `undefined` | -| `icon` | `icon` | Name of icon to be placed inside the button | `"amazon" \| "auth0" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | -| `type` | `type` | Type of the button: 'button', 'submit' or 'reset' | `"button" \| "reset" \| "submit"` | `'button'` | -| `variant` | `variant` | Variant of a button: 'button' \| 'anchor' | `"anchor" \| "button" \| "icon"` | `'button'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | ---------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `disabled` | `disabled` | Disabled state of the button | `boolean` | `false` | +| `handleButtonClick` | -- | (Optional) Callback called when a user clicks on the button | `(evt: Event) => void` | `undefined` | +| `icon` | `icon` | Name of icon to be placed inside the button | `"amazon" \| "auth0" \| "ban" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | +| `type` | `type` | Type of the button: 'button', 'submit' or 'reset' | `"button" \| "reset" \| "submit"` | `'button'` | +| `variant` | `variant` | Variant of a button: 'button' \| 'anchor' | `"anchor" \| "button" \| "icon"` | `'button'` | ## Dependencies diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap index 336f9d6e9a7..376ee73beaa 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap @@ -4,9 +4,11 @@ exports[`amplify-chatbot renders chatbot 1`] = `
-
- ChatBot Lex -
+ +
+ ChatBot Lex +
+
diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 6a76d675e31..ebbec9efa74 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -26,9 +26,9 @@ font-weight: bold; text-align: center; padding-bottom: 1.5rem; - border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.05); } .body { + border-top: 0.0625rem solid rgba(0, 0, 0, 0.05); padding-top: 2rem; display: flex; flex-grow: 1; @@ -64,8 +64,15 @@ amplify-input { --border: none; --margin: 0; + flex-grow: 1; } } +canvas { + margin-left: 0.625rem; + margin-right: 0.625rem; + flex-grow: 1; + height: 3.125rem; +} .icon-button { --icon-height: 1.25rem; --icon-fill: var(--amplify-primary-color); @@ -85,8 +92,6 @@ height: 0.625rem; border-radius: 10rem; background-color: rgba(0, 0, 0, 0.65); - // background-color: var(--amplify-primary-color); - // color: var(--amplify-primary-color); -webkit-animation: dot-flashing 1s infinite linear alternate; animation: dot-flashing 1s infinite linear alternate; -webkit-animation-delay: 0.5s; @@ -98,7 +103,6 @@ position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.65); - // background-color: var(--amplify-primary-color); } .dot-flashing::before { left: -1rem; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index c7133dd6952..2557118a32f 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -41,7 +41,7 @@ export class AmplifyChatbot { /** Current app state */ @State() state: AppState = 'initial'; /** Toast error message */ - @State() error: string; + @State() errorMessage: string; @Element() element: HTMLAmplifyChatbotElement; @@ -112,7 +112,10 @@ export class AmplifyChatbot { private handleMicButton() { if (this.state !== 'initial') return; this.state = 'listening'; - this.audioRecorder.startRecording(() => this.handleSilence()); + this.audioRecorder.startRecording( + () => this.handleSilence(), + (data, length) => this.visualizer(data, length), + ); } private handleSilence() { @@ -128,6 +131,61 @@ export class AmplifyChatbot { this.text = target.value; } + private cancelButtonHandler() { + this.state = 'initial'; + this.audioRecorder.stopRecording(); + } + + /** + * Visualization + */ + private visualizer(dataArray: Uint8Array, bufferLength: number) { + const canvas = this.element.shadowRoot.querySelector('canvas'); + if (!canvas) return; + const { width, height } = canvas.getBoundingClientRect(); + + // need to update the default canvas width and height + canvas.width = width; + canvas.height = height; + + const canvasCtx = canvas.getContext('2d'); + let animationId: number; + + canvasCtx.fillStyle = 'white'; + canvasCtx.clearRect(0, 0, width, height); + + const draw = () => { + if (this.state !== 'listening') return; + + canvasCtx.fillRect(0, 0, width, height); + canvasCtx.lineWidth = 1; + canvasCtx.strokeStyle = '#099ac8'; + canvasCtx.beginPath(); + + const sliceWidth = (width * 1.0) / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + const value = dataArray[i] / 128.0; + const y = (value * height) / 2; + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); + }; + + // Register our draw function with requestAnimationFrame. + if (typeof animationId === 'undefined') { + animationId = requestAnimationFrame(draw); + } + } + /** * Interactions helpers */ @@ -176,13 +234,13 @@ export class AmplifyChatbot { */ private setError(message: string) { this.state = 'error'; - this.error = message; + this.errorMessage = message; } private reset() { this.state = 'initial'; this.text = ''; - this.error = undefined; + this.errorMessage = undefined; this.messages = []; if (this.welcomeMessage) this.appendToChat(this.welcomeMessage, 'bot'); this.audioRecorder && this.audioRecorder.clear(); @@ -203,7 +261,23 @@ export class AmplifyChatbot { return messageList; }; + private listeningFooterJSX(): JSXBase.IntrinsicElements[] { + const visualization = ; + + const cancelButton = this.state === 'listening' && ( + this.cancelButtonHandler()} + class="icon-button" + variant="icon" + icon="ban" + /> + ); + return [visualization, cancelButton]; + } + private footerJSX(): JSXBase.IntrinsicElements[] { + if (this.state === 'listening') return this.listeningFooterJSX(); const textInput = ( { - this.error = undefined; + this.errorMessage = undefined; }} /> ) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md index 181a6f1ea78..c28ed94a7a1 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -29,15 +29,15 @@ ### Depends on -- [amplify-input](../amplify-input) - [amplify-button](../amplify-button) +- [amplify-input](../amplify-input) - [amplify-toast](../amplify-toast) ### Graph ```mermaid graph TD; - amplify-chatbot --> amplify-input amplify-chatbot --> amplify-button + amplify-chatbot --> amplify-input amplify-chatbot --> amplify-toast amplify-button --> amplify-icon amplify-toast --> amplify-icon diff --git a/packages/amplify-ui-components/src/components/amplify-icon-button/__snapshots__/amplify-icon-button.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-icon-button/__snapshots__/amplify-icon-button.spec.ts.snap index 7aaf30195aa..377e91ef6c2 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon-button/__snapshots__/amplify-icon-button.spec.ts.snap +++ b/packages/amplify-ui-components/src/components/amplify-icon-button/__snapshots__/amplify-icon-button.spec.ts.snap @@ -28,6 +28,20 @@ exports[`amplify-icon-button spec: Render logic -> renders auth0 icon button cor `; +exports[`amplify-icon-button spec: Render logic -> renders ban icon button correctly 1`] = ` + + + + + + + + + +`; + exports[`amplify-icon-button spec: Render logic -> renders enter-vr icon button correctly 1`] = ` diff --git a/packages/amplify-ui-components/src/components/amplify-icon-button/readme.md b/packages/amplify-ui-components/src/components/amplify-icon-button/readme.md index a9159d1d3a5..f7b0cdba2a9 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon-button/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-icon-button/readme.md @@ -5,11 +5,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `autoShowTooltip` | `auto-show-tooltip` | (Optional) Whether or not to show the tooltip automatically | `boolean` | `false` | -| `name` | `name` | The name of the icon used inside of the button | `"amazon" \| "auth0" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | -| `tooltip` | `tooltip` | (Optional) The tooltip that will show on hover of the button | `string` | `null` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `autoShowTooltip` | `auto-show-tooltip` | (Optional) Whether or not to show the tooltip automatically | `boolean` | `false` | +| `name` | `name` | The name of the icon used inside of the button | `"amazon" \| "auth0" \| "ban" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | +| `tooltip` | `tooltip` | (Optional) The tooltip that will show on hover of the button | `string` | `null` | ## Dependencies diff --git a/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap index c4b2e31a5f1..d64b1e08809 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap +++ b/packages/amplify-ui-components/src/components/amplify-icon/__snapshots__/amplify-icon.spec.ts.snap @@ -18,6 +18,14 @@ exports[`amplify-icon spec: Render logic -> renders auth0 correctly 1`] = ` `; +exports[`amplify-icon spec: Render logic -> renders ban correctly 1`] = ` + + + + + +`; + exports[`amplify-icon spec: Render logic -> renders enter-vr correctly 1`] = ` diff --git a/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx b/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx index 50d6567f26c..c6f8efce1b3 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx +++ b/packages/amplify-ui-components/src/components/amplify-icon/icons.tsx @@ -205,6 +205,14 @@ export const icons = { ); }, + + ban() { + return ( + + + + ); + }, }; export type IconNameType = keyof typeof icons; diff --git a/packages/amplify-ui-components/src/components/amplify-icon/readme.md b/packages/amplify-ui-components/src/components/amplify-icon/readme.md index 03fc37511ed..06dade8549a 100644 --- a/packages/amplify-ui-components/src/components/amplify-icon/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-icon/readme.md @@ -5,9 +5,9 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `name` | `name` | (Required) Name of icon used to determine the icon rendered | `"amazon" \| "auth0" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `name` | `name` | (Required) Name of icon used to determine the icon rendered | `"amazon" \| "auth0" \| "ban" \| "enter-vr" \| "exit-vr" \| "facebook" \| "google" \| "loading" \| "maximize" \| "microphone" \| "minimize" \| "photoPlaceholder" \| "send" \| "sound" \| "sound-mute" \| "warning"` | `undefined` | ## Dependencies From 3c59258cb84342b8eaa4d572e114e42ac78aeb89 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 19 Aug 2020 17:14:03 -0700 Subject: [PATCH 35/71] Cleanup --- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 2557118a32f..08ad232706c 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -181,7 +181,7 @@ export class AmplifyChatbot { }; // Register our draw function with requestAnimationFrame. - if (typeof animationId === 'undefined') { + if (!animationId) { animationId = requestAnimationFrame(draw); } } @@ -263,7 +263,6 @@ export class AmplifyChatbot { private listeningFooterJSX(): JSXBase.IntrinsicElements[] { const visualization = ; - const cancelButton = this.state === 'listening' && ( Date: Wed, 19 Aug 2020 17:16:12 -0700 Subject: [PATCH 36/71] Update angular module --- packages/amplify-ui-angular/src/amplify-module.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/amplify-ui-angular/src/amplify-module.ts b/packages/amplify-ui-angular/src/amplify-module.ts index e251759d55c..370b7826c5a 100644 --- a/packages/amplify-ui-angular/src/amplify-module.ts +++ b/packages/amplify-ui-angular/src/amplify-module.ts @@ -7,6 +7,7 @@ import { AmplifyAuthenticator, AmplifyAuthFields, AmplifyButton, + AmplifyChatbot, AmplifyCheckbox, AmplifyCodeField, AmplifyConfirmSignIn, @@ -65,6 +66,7 @@ const DECLARATIONS = [ AmplifyAuthenticator, AmplifyAuthFields, AmplifyButton, + AmplifyChatbot, AmplifyCheckbox, AmplifyCodeField, AmplifyConfirmSignIn, From ad464d7ea15cce8b9a5a90e7e9c89d97f739626d Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 19 Aug 2020 17:41:55 -0700 Subject: [PATCH 37/71] Move visualization to helper and downsample data array --- .../src/common/audio-control/visualizer.ts | 44 ++++++++++++++++++ .../amplify-chatbot/amplify-chatbot.tsx | 45 +------------------ 2 files changed, 46 insertions(+), 43 deletions(-) create mode 100644 packages/amplify-ui-components/src/common/audio-control/visualizer.ts diff --git a/packages/amplify-ui-components/src/common/audio-control/visualizer.ts b/packages/amplify-ui-components/src/common/audio-control/visualizer.ts new file mode 100644 index 00000000000..b6c201bde9a --- /dev/null +++ b/packages/amplify-ui-components/src/common/audio-control/visualizer.ts @@ -0,0 +1,44 @@ +export const visualize = (dataArray: Uint8Array, bufferLength: number, canvas: HTMLCanvasElement) => { + if (!canvas) return; + const { width, height } = canvas.getBoundingClientRect(); + + // need to update the default canvas width and height + canvas.width = width; + canvas.height = height; + + const canvasCtx = canvas.getContext('2d'); + let animationId: number; + + canvasCtx.fillStyle = 'white'; + canvasCtx.clearRect(0, 0, width, height); + + const draw = () => { + canvasCtx.fillRect(0, 0, width, height); + canvasCtx.lineWidth = 1; + const color = getComputedStyle(document.documentElement).getPropertyValue('--amplify-primary-color'); + canvasCtx.strokeStyle = !color || color === '' ? '#099ac8' : color; + canvasCtx.beginPath(); + + const sliceWidth = (width * 1.0) / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength || i % 3 === 0; i++) { + const value = dataArray[i] / 128.0; + const y = (value * height) / 2; + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); + }; + + // Register our draw function with requestAnimationFrame. + if (!animationId) { + animationId = requestAnimationFrame(draw); + } +}; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 08ad232706c..6860d38584d 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -3,6 +3,7 @@ import { Interactions } from '@aws-amplify/interactions'; import { JSXBase } from '@stencil/core/internal'; import { AudioRecorder } from '../../common/audio-control/recorder'; import { ChatResult } from '../../common/types/interactions-types'; +import { visualize } from '../../common/audio-control/visualizer'; import { NO_INTERACTIONS_MODULE_FOUND } from '../../common/constants'; type Agent = 'user' | 'bot'; @@ -141,49 +142,7 @@ export class AmplifyChatbot { */ private visualizer(dataArray: Uint8Array, bufferLength: number) { const canvas = this.element.shadowRoot.querySelector('canvas'); - if (!canvas) return; - const { width, height } = canvas.getBoundingClientRect(); - - // need to update the default canvas width and height - canvas.width = width; - canvas.height = height; - - const canvasCtx = canvas.getContext('2d'); - let animationId: number; - - canvasCtx.fillStyle = 'white'; - canvasCtx.clearRect(0, 0, width, height); - - const draw = () => { - if (this.state !== 'listening') return; - - canvasCtx.fillRect(0, 0, width, height); - canvasCtx.lineWidth = 1; - canvasCtx.strokeStyle = '#099ac8'; - canvasCtx.beginPath(); - - const sliceWidth = (width * 1.0) / bufferLength; - let x = 0; - - for (let i = 0; i < bufferLength; i++) { - const value = dataArray[i] / 128.0; - const y = (value * height) / 2; - if (i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } - x += sliceWidth; - } - - canvasCtx.lineTo(canvas.width, canvas.height / 2); - canvasCtx.stroke(); - }; - - // Register our draw function with requestAnimationFrame. - if (!animationId) { - animationId = requestAnimationFrame(draw); - } + visualize(dataArray, bufferLength, canvas); } /** From 2eab9bc1cecfc81e71d1369e29d765ba046d6d24 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Wed, 19 Aug 2020 17:49:57 -0700 Subject: [PATCH 38/71] Separate animation scss --- .../amplify-chatbot/amplify-chatbot.scss | 64 +------------------ .../components/amplify-chatbot/animation.scss | 53 +++++++++++++++ 2 files changed, 54 insertions(+), 63 deletions(-) create mode 100644 packages/amplify-ui-components/src/components/amplify-chatbot/animation.scss diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index ebbec9efa74..c71cb4e1e96 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -1,3 +1,4 @@ +@import 'animation.scss'; :host { --header-color: var(--amplify-secondary-color); --header-size: var(--amplify-text-lg); @@ -79,66 +80,3 @@ canvas { --padding: 0.625rem; --width: inherit; } -/** - * Loading animation adapted from: https://github.com/nzbin/three-dots. - */ -.dot-flashing { - position: relative; - margin-left: 1rem; - margin-right: 1rem; - margin-top: 0.3rem; - margin-bottom: 0.3rem; - width: 0.625rem; - height: 0.625rem; - border-radius: 10rem; - background-color: rgba(0, 0, 0, 0.65); - -webkit-animation: dot-flashing 1s infinite linear alternate; - animation: dot-flashing 1s infinite linear alternate; - -webkit-animation-delay: 0.5s; - animation-delay: 0.5s; -} -.dot-flashing::before, -.dot-flashing::after { - content: ''; - position: absolute; - top: 0; - background-color: rgba(0, 0, 0, 0.65); -} -.dot-flashing::before { - left: -1rem; - width: 0.625rem; - height: 0.625rem; - border-radius: 10rem; - -webkit-animation: dot-flashing 1s infinite alternate; - animation: dot-flashing 1s infinite alternate; - -webkit-animation-delay: 0s; - animation-delay: 0s; -} -.dot-flashing::after { - left: 1rem; - width: 0.625rem; - height: 0.625rem; - border-radius: 10rem; - -webkit-animation: dot-flashing 1s infinite alternate; - animation: dot-flashing 1s infinite alternate; - -webkit-animation-delay: 1s; - animation-delay: 1s; -} -@-webkit-keyframes dot-flashing { - 0% { - background-color: rgba(0, 0, 0, 0.65); - } - 50%, - 100% { - background-color: rgba(0, 0, 0, 0.1); - } -} -@keyframes dot-flashing { - 0% { - background-color: rgba(0, 0, 0, 0.65); - } - 50%, - 100% { - background-color: rgba(0, 0, 0, 0.1); - } -} diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/animation.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/animation.scss new file mode 100644 index 00000000000..1fb908d8456 --- /dev/null +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/animation.scss @@ -0,0 +1,53 @@ +/** + * Loading animation adapted from: https://github.com/nzbin/three-dots. + */ +.dot-flashing { + position: relative; + margin-left: 1rem; + margin-right: 1rem; + margin-top: 0.3rem; + margin-bottom: 0.3rem; + width: 0.625rem; + height: 0.625rem; + border-radius: 10rem; + background-color: rgba(0, 0, 0, 0.65); + -webkit-animation: dot-flashing 1s infinite linear alternate; + animation: dot-flashing 1s infinite linear alternate; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + + &::before, + &::after { + content: ''; + position: absolute; + top: 0; + background-color: rgba(0, 0, 0, 0.65); + } + + &::before { + left: -1rem; + width: 0.625rem; + height: 0.625rem; + border-radius: 10rem; + animation: dot-flashing 1s infinite alternate; + animation-delay: 0s; + } + + &::after { + left: 1rem; + width: 0.625rem; + height: 0.625rem; + border-radius: 10rem; + animation: dot-flashing 1s infinite alternate; + animation-delay: 1s; + } +} +@keyframes dot-flashing { + 0% { + background-color: rgba(0, 0, 0, 0.65); + } + 50%, + 100% { + background-color: rgba(0, 0, 0, 0.1); + } +} From 8fe2de1d16feb7253b0c8b7d9d961d252a226b79 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 12:24:46 -0700 Subject: [PATCH 39/71] Remove console.logs --- .../src/common/audio-control/recorder.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 601985250a1..704a2494fcf 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -44,12 +44,7 @@ export class AudioRecorder { } private async setupAudioNodes(stream: MediaStream) { - console.log(this.audioContext); - - await this.audioContext - .resume() - .then(() => console.log('resumed')) - .catch(() => console.error('what?')); + await this.audioContext.resume(); const sourceNode = this.audioContext.createMediaStreamSource(stream); const processorNode = this.audioContext.createScriptProcessor(4096, 1, 1); From 499bdb9169f2838d24163e982a1233bcce65ffd6 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 13:44:28 -0700 Subject: [PATCH 40/71] Control width / height at host; expose message colors --- .../amplify-chatbot/amplify-chatbot.scss | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index c71cb4e1e96..f2484edcd07 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -2,8 +2,19 @@ :host { --header-color: var(--amplify-secondary-color); --header-size: var(--amplify-text-lg); + --bot-background-color: rgb(230, 230, 230); + --bot-text-color: black; + --user-background-color: #099ac8; + --user-text-color: var(--amplify-white); --width: 28.75rem; --height: 37.5rem; + + width: 95%; + height: var(--height); + @include md { + width: var(--width); + } + max-width: var(--width); } .amplify-chatbot { display: inline-flex; @@ -14,11 +25,8 @@ box-sizing: border-box; font-family: var(--amplify-font-family); margin-bottom: 1rem; - width: 95%; - height: var(--height); - @include md { - width: var(--width); - } + width: 100%; + height: 100%; } .header { margin-top: 1.25rem; @@ -37,7 +45,7 @@ overflow: auto; } .bubble { - max-width: 80%; + max-width: 100%; padding: 0.8em 1.4em; text-align: left; word-wrap: break-word; @@ -46,15 +54,15 @@ .bot { margin-left: 1rem; margin-right: auto; - background-color: rgb(230, 230, 230); - color: black; + background-color: var(--bot-background-color); + color: var(--bot-text-color); border-radius: 1.5rem 1.5rem 1.5rem 0; } .user { margin-right: 1rem; margin-left: auto; - background-color: #099ac8; // TODO: expose amplify blue color - color: var(--amplify-white); + background-color: var(--user-background-color); + color: var(--user-text-color); border-radius: 1.5rem 1.5rem 0 1.5rem; } .footer { @@ -78,5 +86,5 @@ canvas { --icon-height: 1.25rem; --icon-fill: var(--amplify-primary-color); --padding: 0.625rem; - --width: inherit; + --width: auto; } From 9579c7eb18ecf315610569618bcee4bb3c4b2cbb Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 13:54:53 -0700 Subject: [PATCH 41/71] Use I18n with strings --- .../src/common/Translations.ts | 2 ++ .../amplify-chatbot/amplify-chatbot.tsx | 8 +++++--- .../src/components/amplify-chatbot/readme.md | 18 +++++++++--------- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/amplify-ui-components/src/common/Translations.ts b/packages/amplify-ui-components/src/common/Translations.ts index f1b3afbdfbd..33ea38fc003 100644 --- a/packages/amplify-ui-components/src/common/Translations.ts +++ b/packages/amplify-ui-components/src/common/Translations.ts @@ -4,6 +4,7 @@ export enum AuthStrings { BACK_TO_SIGN_IN = 'Back to Sign In', CHANGE_PASSWORD_ACTION = 'Change', CHANGE_PASSWORD = 'Change Password', + CHATBOT_TITLE = 'Chatbot Lex', CODE_LABEL = 'Verification code', CODE_PLACEHOLDER = 'Enter code', CONFIRM_SIGN_UP_CODE_LABEL = 'Confirmation Code', @@ -105,6 +106,7 @@ export enum AuthStrings { IMAGE_PICKER_BUTTON_TEXT = 'Upload', PICKER_TEXT = 'Pick a file', TEXT_FALLBACK_CONTENT = 'Fallback Content', + TEXT_INPUT_PLACEHOLDER = 'Write a message', } type Translations = AuthErrorStrings | AuthStrings; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 6860d38584d..a4f11dbbaae 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -1,10 +1,12 @@ import { Component, Host, h, Prop, State, Listen, Event, EventEmitter, Element } from '@stencil/core'; +import { I18n } from '@aws-amplify/core'; import { Interactions } from '@aws-amplify/interactions'; import { JSXBase } from '@stencil/core/internal'; import { AudioRecorder } from '../../common/audio-control/recorder'; import { ChatResult } from '../../common/types/interactions-types'; import { visualize } from '../../common/audio-control/visualizer'; import { NO_INTERACTIONS_MODULE_FOUND } from '../../common/constants'; +import { Translations } from '../../common/Translations'; type Agent = 'user' | 'bot'; interface Message { @@ -29,7 +31,7 @@ export class AmplifyChatbot { /** Greeting message displayed to users */ @Prop() welcomeMessage: string; /** Text placed in the top header */ - @Prop() botTitle: string = 'ChatBot Lex'; + @Prop() botTitle: string = Translations.CHATBOT_TITLE; /** Whether voice chat is enabled */ @Prop() voiceEnabled: boolean = false; /** Whether text chat is enabled */ @@ -238,7 +240,7 @@ export class AmplifyChatbot { if (this.state === 'listening') return this.listeningFooterJSX(); const textInput = ( this.handleTextChange(evt)} @@ -288,7 +290,7 @@ export class AmplifyChatbot {
- {this.botTitle} + {I18n.get(this.botTitle)}
diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md index c28ed94a7a1..9841f135a85 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -7,15 +7,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------------- | ------------------------------------------------------- | --------- | --------------- | -| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | -| `botTitle` | `bot-title` | Text placed in the top header | `string` | `'ChatBot Lex'` | -| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | -| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | -| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | -| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | -| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ------------------------------------------------------- | --------- | ---------------------------- | +| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | +| `botTitle` | `bot-title` | Text placed in the top header | `string` | `Translations.CHATBOT_TITLE` | +| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | +| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | +| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | +| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | +| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | ## Events From b4b42e32beb4004811b1ca107a35ac8e81277abd Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 13:56:25 -0700 Subject: [PATCH 42/71] Fix typo --- packages/amplify-ui-components/src/common/Translations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/common/Translations.ts b/packages/amplify-ui-components/src/common/Translations.ts index 33ea38fc003..9087fa93faa 100644 --- a/packages/amplify-ui-components/src/common/Translations.ts +++ b/packages/amplify-ui-components/src/common/Translations.ts @@ -4,7 +4,7 @@ export enum AuthStrings { BACK_TO_SIGN_IN = 'Back to Sign In', CHANGE_PASSWORD_ACTION = 'Change', CHANGE_PASSWORD = 'Change Password', - CHATBOT_TITLE = 'Chatbot Lex', + CHATBOT_TITLE = 'ChatBot Lex', CODE_LABEL = 'Verification code', CODE_PLACEHOLDER = 'Enter code', CONFIRM_SIGN_UP_CODE_LABEL = 'Confirmation Code', From 8869e2660a51197203b6c83925078fbacfb8ab3c Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 21:29:28 -0700 Subject: [PATCH 43/71] Use enum for chat state --- .../amplify-chatbot/amplify-chatbot.tsx | 54 ++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index a4f11dbbaae..c437f9268b6 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -14,7 +14,13 @@ interface Message { from: Agent; } -type AppState = 'initial' | 'listening' | 'sending' | 'speaking' | 'error'; +enum ChatState { + Initial, + Listening, + Sending, + Speaking, + Error, +} @Component({ tag: 'amplify-chatbot', @@ -42,7 +48,7 @@ export class AmplifyChatbot { /** Text input box value */ @State() text: string = ''; /** Current app state */ - @State() state: AppState = 'initial'; + @State() chatState: ChatState = ChatState.Initial; /** Toast error message */ @State() errorMessage: string; @@ -70,7 +76,7 @@ export class AmplifyChatbot { } componentDidRender() { - // scroll to the bottom of messages if necessary + // scroll to the bottom if necessary const body = this.element.shadowRoot.querySelector('.body'); body.scrollTop = body.scrollHeight; } @@ -113,8 +119,8 @@ export class AmplifyChatbot { * Handlers */ private handleMicButton() { - if (this.state !== 'initial') return; - this.state = 'listening'; + if (this.chatState !== ChatState.Initial) return; + this.chatState = ChatState.Listening; this.audioRecorder.startRecording( () => this.handleSilence(), (data, length) => this.visualizer(data, length), @@ -122,7 +128,7 @@ export class AmplifyChatbot { } private handleSilence() { - this.state = 'sending'; + this.chatState = ChatState.Sending; this.audioRecorder.stopRecording(); this.audioRecorder.exportWAV((blob: Blob) => { this.sendVoiceMessage(blob); @@ -134,9 +140,9 @@ export class AmplifyChatbot { this.text = target.value; } - private cancelButtonHandler() { - this.state = 'initial'; - this.audioRecorder.stopRecording(); + private handleCancelButton() { + this.audioRecorder.clear(); + this.chatState = ChatState.Initial; } /** @@ -151,17 +157,17 @@ export class AmplifyChatbot { * Interactions helpers */ private async sendTextMessage() { - if (this.text.length === 0 || this.state !== 'initial') return; + if (this.text.length === 0 || this.chatState !== ChatState.Initial) return; const text = this.text; this.text = ''; this.appendToChat(text, 'user'); - this.state = 'sending'; + this.chatState = ChatState.Sending; const response = await Interactions.send(this.botName, text); if (response.message) { this.appendToChat(response.message, 'bot'); } - this.state = 'initial'; + this.chatState = ChatState.Initial; } private async sendVoiceMessage(audioInput: Blob) { @@ -172,11 +178,11 @@ export class AmplifyChatbot { }, }; const response = await Interactions.send(this.botName, interactionsMessage); - this.state = 'speaking'; + this.chatState = ChatState.Speaking; if (response.inputTranscript) this.appendToChat(response.inputTranscript, 'user'); this.appendToChat(response.message, 'bot'); this.audioRecorder.play(response.audioStream, () => { - this.state = 'initial'; + this.chatState = ChatState.Initial; }); } @@ -194,12 +200,12 @@ export class AmplifyChatbot { * State control functions */ private setError(message: string) { - this.state = 'error'; + this.chatState = ChatState.Error; this.errorMessage = message; } private reset() { - this.state = 'initial'; + this.chatState = ChatState.Initial; this.text = ''; this.errorMessage = undefined; this.messages = []; @@ -208,11 +214,11 @@ export class AmplifyChatbot { } /** - * Rendering related methods + * Rendering methods */ private messageJSX = (messages: Message[]) => { const messageList = messages.map(message =>
{message.content}
); - if (this.state === 'sending') { + if (this.chatState === ChatState.Sending) { messageList.push(
@@ -224,10 +230,10 @@ export class AmplifyChatbot { private listeningFooterJSX(): JSXBase.IntrinsicElements[] { const visualization = ; - const cancelButton = this.state === 'listening' && ( + const cancelButton = ( this.cancelButtonHandler()} + handleButtonClick={() => this.handleCancelButton()} class="icon-button" variant="icon" icon="ban" @@ -237,7 +243,7 @@ export class AmplifyChatbot { } private footerJSX(): JSXBase.IntrinsicElements[] { - if (this.state === 'listening') return this.listeningFooterJSX(); + if (this.chatState === ChatState.Listening) return this.listeningFooterJSX(); const textInput = ( this.handleTextChange(evt)} value={this.text} - disabled={this.state === 'error'} + disabled={this.chatState === ChatState.Error} /> ); const micButton = this.voiceEnabled && ( @@ -255,7 +261,7 @@ export class AmplifyChatbot { class="icon-button" variant="icon" icon="microphone" - disabled={this.state === 'error' || this.state !== 'initial'} + disabled={this.chatState === ChatState.Error || this.chatState !== ChatState.Initial} /> ); const sendButton = this.textEnabled && ( @@ -265,7 +271,7 @@ export class AmplifyChatbot { variant="icon" icon="send" handleButtonClick={() => this.sendTextMessage()} - disabled={this.state === 'error' || this.state !== 'initial'} + disabled={this.chatState === ChatState.Error || this.chatState !== ChatState.Initial} /> ); return [textInput, micButton, sendButton]; From 3fa948d221f8fcd957a657d176c115311456cf12 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 21:34:12 -0700 Subject: [PATCH 44/71] Revert width back to 100% --- .../src/components/amplify-chatbot/amplify-chatbot.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index f2484edcd07..8c76d86106e 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -9,7 +9,7 @@ --width: 28.75rem; --height: 37.5rem; - width: 95%; + width: 100%; height: var(--height); @include md { width: var(--width); From 93baeb8e720b5064150101f3c7f0201e69d50dd3 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 21:44:42 -0700 Subject: [PATCH 45/71] Rename updateProps to validateProps --- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index c437f9268b6..41544eac313 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -72,7 +72,7 @@ export class AmplifyChatbot { if (!Interactions || typeof Interactions.onComplete !== 'function') { throw new Error(NO_INTERACTIONS_MODULE_FOUND); } - this.updateProps(); + this.validateProps(); } componentDidRender() { @@ -81,7 +81,7 @@ export class AmplifyChatbot { body.scrollTop = body.scrollHeight; } - private updateProps() { + private validateProps() { if (!this.voiceEnabled && !this.textEnabled) { this.setError('Error: Either voice or text must be enabled for the chatbot'); } else if (!this.botName) { From 3f7a81c60f03c23f538b300044a4ae8dd2a8e82f Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 21:50:12 -0700 Subject: [PATCH 46/71] Separate out interaction enum strings --- .../amplify-ui-components/src/common/Translations.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/amplify-ui-components/src/common/Translations.ts b/packages/amplify-ui-components/src/common/Translations.ts index 9087fa93faa..d72da511b68 100644 --- a/packages/amplify-ui-components/src/common/Translations.ts +++ b/packages/amplify-ui-components/src/common/Translations.ts @@ -4,7 +4,6 @@ export enum AuthStrings { BACK_TO_SIGN_IN = 'Back to Sign In', CHANGE_PASSWORD_ACTION = 'Change', CHANGE_PASSWORD = 'Change Password', - CHATBOT_TITLE = 'ChatBot Lex', CODE_LABEL = 'Verification code', CODE_PLACEHOLDER = 'Enter code', CONFIRM_SIGN_UP_CODE_LABEL = 'Confirmation Code', @@ -106,8 +105,12 @@ export enum AuthStrings { IMAGE_PICKER_BUTTON_TEXT = 'Upload', PICKER_TEXT = 'Pick a file', TEXT_FALLBACK_CONTENT = 'Fallback Content', +} + +export enum InteractionsStrings { + CHATBOT_TITLE = 'ChatBot Lex', TEXT_INPUT_PLACEHOLDER = 'Write a message', } -type Translations = AuthErrorStrings | AuthStrings; -export const Translations = { ...AuthStrings, ...AuthErrorStrings }; +type Translations = AuthErrorStrings | AuthStrings | InteractionsStrings; +export const Translations = { ...AuthStrings, ...AuthErrorStrings, ...InteractionsStrings }; From 89e1260236ad4eb51d39d40398607cfef7b75d77 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 22:55:07 -0700 Subject: [PATCH 47/71] Move MIME type string to constants file --- .../amplify-ui-components/src/common/audio-control/helper.ts | 4 +++- packages/amplify-ui-components/src/common/constants.ts | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/helper.ts b/packages/amplify-ui-components/src/common/audio-control/helper.ts index 7fee46f7f19..4203f491a31 100644 --- a/packages/amplify-ui-components/src/common/audio-control/helper.ts +++ b/packages/amplify-ui-components/src/common/audio-control/helper.ts @@ -1,3 +1,5 @@ +import { RECORDER_EXPORT_MIME_TYPE } from '../constants'; + const mergeBuffers = (bufferArray: Float32Array[], recLength: number) => { const result = new Float32Array(recLength); let offset = 0; @@ -80,7 +82,7 @@ export const exportBuffer = ( const downsampledBuffer = downsampleBuffer(mergedBuffers, recordSampleRate, exportSampleRate); const encodedWav = encodeWAV(downsampledBuffer, exportSampleRate); const audioBlob = new Blob([encodedWav], { - type: 'application/octet-stream', + type: RECORDER_EXPORT_MIME_TYPE, }); return audioBlob; }; diff --git a/packages/amplify-ui-components/src/common/constants.ts b/packages/amplify-ui-components/src/common/constants.ts index 23416affef4..f6889927e8a 100644 --- a/packages/amplify-ui-components/src/common/constants.ts +++ b/packages/amplify-ui-components/src/common/constants.ts @@ -39,3 +39,6 @@ export const AUTH_CHANNEL = 'auth'; export const UI_AUTH_CHANNEL = 'UI Auth'; export const TOAST_AUTH_ERROR_EVENT = 'ToastAuthError'; export const AUTH_STATE_CHANGE_EVENT = 'AuthStateChange'; + +// AudioRecorder export MIME type +export const RECORDER_EXPORT_MIME_TYPE = 'application/octet-stream'; From 1b394de726c2a900e339784ba632ee06ffbf17d4 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 22:55:20 -0700 Subject: [PATCH 48/71] Use async/await pattern in recorder.ts --- .../src/common/audio-control/recorder.ts | 46 +++++++++++-------- .../amplify-chatbot/amplify-chatbot.tsx | 4 +- 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 704a2494fcf..748a504b9c8 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -29,10 +29,10 @@ export class AudioRecorder { this.init(); } - private init() { + private async init() { window.AudioContext = window.AudioContext || (window as any).webkitAudioContext; this.audioContext = new AudioContext(); - navigator.mediaDevices + await navigator.mediaDevices .getUserMedia({ audio: true }) .then(stream => { this.audioSupported = true; @@ -92,25 +92,31 @@ export class AudioRecorder { this.streamBuffer = []; } - public play(buffer: Uint8Array, callback: Function) { + public play(buffer: Uint8Array) { if (!buffer) return; const myBlob = new Blob([buffer]); - const fileReader = new FileReader(); - fileReader.onload = () => { - const playbackSource = this.audioContext.createBufferSource(); - this.audioContext.decodeAudioData(fileReader.result as ArrayBuffer, buf => { - playbackSource.buffer = buf; - playbackSource.connect(this.audioContext.destination); - playbackSource.onended = function(_event) { - if (typeof callback === 'function') { - callback(); - } - }; - playbackSource.start(0); - }); - }; - fileReader.readAsArrayBuffer(myBlob); + return new Promise((res, rej) => { + const fileReader = new FileReader(); + fileReader.onload = () => { + const playbackSource = this.audioContext.createBufferSource(); + this.audioContext + .decodeAudioData(fileReader.result as ArrayBuffer) + .then(buf => { + playbackSource.buffer = buf; + playbackSource.connect(this.audioContext.destination); + playbackSource.onended = () => { + return res(); + }; + playbackSource.start(0); + }) + .catch(err => { + return rej(err); + }); + }; + fileReader.onerror = () => rej(); + fileReader.readAsArrayBuffer(myBlob); + }); } private analyse() { @@ -142,11 +148,11 @@ export class AudioRecorder { } } - public exportWAV(callback: Function, exportSampleRate: number = 16000) { + public async exportWAV(exportSampleRate: number = 16000) { if (!this.audioSupported) return; const recordSampleRate = this.audioContext.sampleRate; const blob = exportBuffer(this.streamBuffer, this.streamBufferLength, recordSampleRate, exportSampleRate); - callback(blob); this.clear(); + return blob; } } diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 41544eac313..2fee75f597a 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -130,7 +130,7 @@ export class AmplifyChatbot { private handleSilence() { this.chatState = ChatState.Sending; this.audioRecorder.stopRecording(); - this.audioRecorder.exportWAV((blob: Blob) => { + this.audioRecorder.exportWAV().then(blob => { this.sendVoiceMessage(blob); }); } @@ -181,7 +181,7 @@ export class AmplifyChatbot { this.chatState = ChatState.Speaking; if (response.inputTranscript) this.appendToChat(response.inputTranscript, 'user'); this.appendToChat(response.message, 'bot'); - this.audioRecorder.play(response.audioStream, () => { + this.audioRecorder.play(response.audioStream).then(() => { this.chatState = ChatState.Initial; }); } From cfdfd20c9eec1ce76e9ba0768d096fe38f33ab7b Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 23:29:51 -0700 Subject: [PATCH 49/71] Check isBrowser and add silence props --- .../src/common/audio-control/recorder.ts | 33 ++++++++++++------- .../src/common/audio-control/visualizer.ts | 5 ++- .../amplify-ui-components/src/components.d.ts | 16 +++++++++ .../amplify-chatbot/amplify-chatbot.tsx | 10 ++++-- .../src/components/amplify-chatbot/readme.md | 20 ++++++----- 5 files changed, 59 insertions(+), 25 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 748a504b9c8..79c798eac91 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -1,4 +1,5 @@ import { exportBuffer } from './helper'; +import { browserOrNode } from '@aws-amplify/core'; interface SilenceDetectionConfig { time: number; @@ -26,21 +27,29 @@ export class AudioRecorder { constructor(options: SilenceDetectionConfig) { this.options = options; - this.init(); + this.init().catch(err => { + throw new Error(err); + }); } private async init() { - window.AudioContext = window.AudioContext || (window as any).webkitAudioContext; - this.audioContext = new AudioContext(); - await navigator.mediaDevices - .getUserMedia({ audio: true }) - .then(stream => { - this.audioSupported = true; - this.setupAudioNodes(stream); - }) - .catch(() => { - this.audioSupported = false; - }); + if (browserOrNode().isBrowser) { + window.AudioContext = window.AudioContext || (window as any).webkitAudioContext; + this.audioContext = new AudioContext(); + await navigator.mediaDevices + .getUserMedia({ audio: true }) + .then(stream => { + this.audioSupported = true; + this.setupAudioNodes(stream); + }) + .catch(() => { + this.audioSupported = false; + return Promise.reject('Audio is not supported'); + }); + } else { + this.audioSupported = false; + return Promise.reject('Audio is not supported'); + } } private async setupAudioNodes(stream: MediaStream) { diff --git a/packages/amplify-ui-components/src/common/audio-control/visualizer.ts b/packages/amplify-ui-components/src/common/audio-control/visualizer.ts index b6c201bde9a..4e325ca529a 100644 --- a/packages/amplify-ui-components/src/common/audio-control/visualizer.ts +++ b/packages/amplify-ui-components/src/common/audio-control/visualizer.ts @@ -1,5 +1,8 @@ +import { browserOrNode } from '@aws-amplify/core'; + export const visualize = (dataArray: Uint8Array, bufferLength: number, canvas: HTMLCanvasElement) => { if (!canvas) return; + if (!browserOrNode().isBrowser) throw new Error('Visualization is not supported on non-browsers.'); const { width, height } = canvas.getBoundingClientRect(); // need to update the default canvas width and height @@ -16,7 +19,7 @@ export const visualize = (dataArray: Uint8Array, bufferLength: number, canvas: H canvasCtx.fillRect(0, 0, width, height); canvasCtx.lineWidth = 1; const color = getComputedStyle(document.documentElement).getPropertyValue('--amplify-primary-color'); - canvasCtx.strokeStyle = !color || color === '' ? '#099ac8' : color; + canvasCtx.strokeStyle = !color || color === '' ? '#ff9900' : color; // TODO: try separate css variable canvasCtx.beginPath(); const sliceWidth = (width * 1.0) / bufferLength; diff --git a/packages/amplify-ui-components/src/components.d.ts b/packages/amplify-ui-components/src/components.d.ts index f81584c28d0..2ff6d9e62c0 100644 --- a/packages/amplify-ui-components/src/components.d.ts +++ b/packages/amplify-ui-components/src/components.d.ts @@ -98,6 +98,14 @@ export namespace Components { * Continue listening to users after they send the message */ "conversationModeOn": boolean; + /** + * Noise threshold between -1 and 1. Anything below is considered a silence. + */ + "silenceThreshold": number; + /** + * Amount of silence (in ms) to wait for + */ + "silenceTime": number; /** * Whether text chat is enabled */ @@ -1594,6 +1602,14 @@ declare namespace LocalJSX { * Event emitted when conversation is completed */ "onChatCompleted"?: (event: CustomEvent) => void; + /** + * Noise threshold between -1 and 1. Anything below is considered a silence. + */ + "silenceThreshold"?: number; + /** + * Amount of silence (in ms) to wait for + */ + "silenceTime"?: number; /** * Whether text chat is enabled */ diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 2fee75f597a..72cd3dfaecd 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -3,8 +3,8 @@ import { I18n } from '@aws-amplify/core'; import { Interactions } from '@aws-amplify/interactions'; import { JSXBase } from '@stencil/core/internal'; import { AudioRecorder } from '../../common/audio-control/recorder'; -import { ChatResult } from '../../common/types/interactions-types'; import { visualize } from '../../common/audio-control/visualizer'; +import { ChatResult } from '../../common/types/interactions-types'; import { NO_INTERACTIONS_MODULE_FOUND } from '../../common/constants'; import { Translations } from '../../common/Translations'; @@ -42,6 +42,10 @@ export class AmplifyChatbot { @Prop() voiceEnabled: boolean = false; /** Whether text chat is enabled */ @Prop() textEnabled: boolean = true; + /** Amount of silence (in ms) to wait for */ + @Prop() silenceTime: number = 1500; + /** Noise threshold between -1 and 1. Anything below is considered a silence. */ + @Prop() silenceThreshold: number = 0.2; /** Messages in current session */ @State() messages: Message[] = []; @@ -92,8 +96,8 @@ export class AmplifyChatbot { // Initialize AudioRecorder if voice is enabled if (this.voiceEnabled) { this.audioRecorder = new AudioRecorder({ - time: 1500, - amplitude: 0.2, + time: this.silenceTime, + amplitude: this.silenceThreshold, }); } diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md index 9841f135a85..3c5e98666dd 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -7,15 +7,17 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------------- | ------------------------------------------------------- | --------- | ---------------------------- | -| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | -| `botTitle` | `bot-title` | Text placed in the top header | `string` | `Translations.CHATBOT_TITLE` | -| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | -| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | -| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | -| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | -| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ------------------------------------------------------------------------- | --------- | ---------------------------- | +| `botName` | `bot-name` | Name of the bot | `string` | `undefined` | +| `botTitle` | `bot-title` | Text placed in the top header | `string` | `Translations.CHATBOT_TITLE` | +| `clearOnComplete` | `clear-on-complete` | Clear messages when conversation finishes | `boolean` | `false` | +| `conversationModeOn` | `conversation-mode-on` | Continue listening to users after they send the message | `boolean` | `false` | +| `silenceThreshold` | `silence-threshold` | Noise threshold between -1 and 1. Anything below is considered a silence. | `number` | `0.2` | +| `silenceTime` | `silence-time` | Amount of silence (in ms) to wait for | `number` | `1500` | +| `textEnabled` | `text-enabled` | Whether text chat is enabled | `boolean` | `true` | +| `voiceEnabled` | `voice-enabled` | Whether voice chat is enabled | `boolean` | `false` | +| `welcomeMessage` | `welcome-message` | Greeting message displayed to users | `string` | `undefined` | ## Events From a5ebb9f8cd4a80d2d327ddddaa5a45e2f38ff29e Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 23:35:51 -0700 Subject: [PATCH 50/71] Separate init from recorder for async control --- .../src/common/audio-control/recorder.ts | 12 +++++------- .../components/amplify-chatbot/amplify-chatbot.tsx | 3 +++ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 79c798eac91..6101da7b3e5 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -27,12 +27,9 @@ export class AudioRecorder { constructor(options: SilenceDetectionConfig) { this.options = options; - this.init().catch(err => { - throw new Error(err); - }); } - private async init() { + async init() { if (browserOrNode().isBrowser) { window.AudioContext = window.AudioContext || (window as any).webkitAudioContext; this.audioContext = new AudioContext(); @@ -78,10 +75,10 @@ export class AudioRecorder { } public startRecording(onSilence?: Function, visualizer?: Visualizer) { + if (this.recording || !this.audioSupported) return; const silenceHandler = onSilence || function() {}; this.onSilence = silenceHandler; this.visualizer = visualizer; - if (this.recording || !this.audioSupported) return; const context = this.audioContext; context.resume().then(() => { @@ -91,7 +88,7 @@ export class AudioRecorder { } public stopRecording() { - if (!this.audioSupported) return; + if (!this.audioSupported || !this.audioSupported) return; this.recording = false; } @@ -102,7 +99,7 @@ export class AudioRecorder { } public play(buffer: Uint8Array) { - if (!buffer) return; + if (!buffer || !this.audioSupported) return; const myBlob = new Blob([buffer]); return new Promise((res, rej) => { @@ -129,6 +126,7 @@ export class AudioRecorder { } private analyse() { + if (!this.audioSupported) return; const analyser = this.analyserNode; analyser.fftSize = 2048; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 72cd3dfaecd..3cb49432bfc 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -99,6 +99,9 @@ export class AmplifyChatbot { time: this.silenceTime, amplitude: this.silenceThreshold, }); + this.audioRecorder.init().catch(err => { + this.setError(err); + }); } // Callback function to be called after chat is completed From d0618e2e355f733b2a239ce72793d0f791f1d332 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 23:38:20 -0700 Subject: [PATCH 51/71] Remove fieldId --- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 3cb49432bfc..5a7008cfefb 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -254,7 +254,6 @@ export class AmplifyChatbot { const textInput = ( this.handleTextChange(evt)} value={this.text} From bd89fa8cb19c0a1dde5d0069701f13c4ddbc72c9 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 23:45:16 -0700 Subject: [PATCH 52/71] Add try catch around Interactions.send --- .../amplify-chatbot/amplify-chatbot.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 5a7008cfefb..7b45a097696 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -7,6 +7,7 @@ import { visualize } from '../../common/audio-control/visualizer'; import { ChatResult } from '../../common/types/interactions-types'; import { NO_INTERACTIONS_MODULE_FOUND } from '../../common/constants'; import { Translations } from '../../common/Translations'; +import { InteractionsResponse } from '@aws-amplify/interactions/lib-esm/types'; type Agent = 'user' | 'bot'; interface Message { @@ -170,7 +171,12 @@ export class AmplifyChatbot { this.appendToChat(text, 'user'); this.chatState = ChatState.Sending; - const response = await Interactions.send(this.botName, text); + let response: InteractionsResponse; + try { + response = await Interactions.send(this.botName, text); + } catch (err) { + this.setError(err); + } if (response.message) { this.appendToChat(response.message, 'bot'); } @@ -184,13 +190,19 @@ export class AmplifyChatbot { messageType: 'voice', }, }; - const response = await Interactions.send(this.botName, interactionsMessage); + + let response: InteractionsResponse; + try { + response = await Interactions.send(this.botName, interactionsMessage); + } catch (err) { + this.setError(err); + } this.chatState = ChatState.Speaking; + if (response.inputTranscript) this.appendToChat(response.inputTranscript, 'user'); this.appendToChat(response.message, 'bot'); - this.audioRecorder.play(response.audioStream).then(() => { - this.chatState = ChatState.Initial; - }); + await this.audioRecorder.play(response.audioStream).catch(err => this.setError(err)); + this.chatState = ChatState.Initial; } private appendToChat(content: string, from: Agent) { From 84199c7abcb446dab286d10376213da25f63e3d3 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 23:48:49 -0700 Subject: [PATCH 53/71] Remove requestId --- .../src/common/audio-control/visualizer.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/visualizer.ts b/packages/amplify-ui-components/src/common/audio-control/visualizer.ts index 4e325ca529a..d7a8c13f734 100644 --- a/packages/amplify-ui-components/src/common/audio-control/visualizer.ts +++ b/packages/amplify-ui-components/src/common/audio-control/visualizer.ts @@ -10,7 +10,6 @@ export const visualize = (dataArray: Uint8Array, bufferLength: number, canvas: H canvas.height = height; const canvasCtx = canvas.getContext('2d'); - let animationId: number; canvasCtx.fillStyle = 'white'; canvasCtx.clearRect(0, 0, width, height); @@ -41,7 +40,5 @@ export const visualize = (dataArray: Uint8Array, bufferLength: number, canvas: H }; // Register our draw function with requestAnimationFrame. - if (!animationId) { - animationId = requestAnimationFrame(draw); - } + requestAnimationFrame(draw); }; From 185e7ab86a0fd90508c51abe33a20bde24a9adc6 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Thu, 20 Aug 2020 23:51:32 -0700 Subject: [PATCH 54/71] Update snapshot --- .../amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap index 376ee73beaa..7990b856fed 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap @@ -11,7 +11,7 @@ exports[`amplify-chatbot renders chatbot 1`] = `
- +
From ac6d02e3073e0484c1e5b0719fe21cdc0b3f79ea Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 00:13:22 -0700 Subject: [PATCH 55/71] Expose Interactions types --- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 2 +- packages/interactions/src/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 7b45a097696..a28c7201e7f 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -7,7 +7,7 @@ import { visualize } from '../../common/audio-control/visualizer'; import { ChatResult } from '../../common/types/interactions-types'; import { NO_INTERACTIONS_MODULE_FOUND } from '../../common/constants'; import { Translations } from '../../common/Translations'; -import { InteractionsResponse } from '@aws-amplify/interactions/lib-esm/types'; +import { InteractionsResponse } from '@aws-amplify/interactions'; type Agent = 'user' | 'bot'; interface Message { diff --git a/packages/interactions/src/index.ts b/packages/interactions/src/index.ts index c5cea4961cf..06d7057e430 100644 --- a/packages/interactions/src/index.ts +++ b/packages/interactions/src/index.ts @@ -17,6 +17,7 @@ import { Interactions } from './Interactions'; */ export default Interactions; +export * from './types'; export * from './Providers/AWSLexProvider'; export { Interactions }; From e5a1d88a1b57aabba43f48e0a729eb7877b0c85c Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 00:13:34 -0700 Subject: [PATCH 56/71] Remove duplicate logic --- .../amplify-ui-components/src/common/audio-control/recorder.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 6101da7b3e5..52e9acf16d7 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -88,7 +88,7 @@ export class AudioRecorder { } public stopRecording() { - if (!this.audioSupported || !this.audioSupported) return; + if (!this.audioSupported) return; this.recording = false; } From aee7e65178efdc735fcf0bbf8ef1bdca0ba4ed3b Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 00:17:31 -0700 Subject: [PATCH 57/71] Use enum to describe where the message is from --- .../amplify-chatbot/amplify-chatbot.tsx | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index a28c7201e7f..5ab8d17d98e 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -9,10 +9,13 @@ import { NO_INTERACTIONS_MODULE_FOUND } from '../../common/constants'; import { Translations } from '../../common/Translations'; import { InteractionsResponse } from '@aws-amplify/interactions'; -type Agent = 'user' | 'bot'; +enum MessageFrom { + Bot, + User, +} interface Message { content: string; - from: Agent; + from: MessageFrom; } enum ChatState { @@ -93,7 +96,7 @@ export class AmplifyChatbot { this.setError('Error: Bot Name must be provided to ChatBot'); } - if (this.welcomeMessage) this.appendToChat(this.welcomeMessage, 'bot'); + if (this.welcomeMessage) this.appendToChat(this.welcomeMessage, MessageFrom.Bot); // Initialize AudioRecorder if voice is enabled if (this.voiceEnabled) { this.audioRecorder = new AudioRecorder({ @@ -168,7 +171,7 @@ export class AmplifyChatbot { if (this.text.length === 0 || this.chatState !== ChatState.Initial) return; const text = this.text; this.text = ''; - this.appendToChat(text, 'user'); + this.appendToChat(text, MessageFrom.User); this.chatState = ChatState.Sending; let response: InteractionsResponse; @@ -178,7 +181,7 @@ export class AmplifyChatbot { this.setError(err); } if (response.message) { - this.appendToChat(response.message, 'bot'); + this.appendToChat(response.message, MessageFrom.Bot); } this.chatState = ChatState.Initial; } @@ -199,13 +202,13 @@ export class AmplifyChatbot { } this.chatState = ChatState.Speaking; - if (response.inputTranscript) this.appendToChat(response.inputTranscript, 'user'); - this.appendToChat(response.message, 'bot'); + if (response.inputTranscript) this.appendToChat(response.inputTranscript, MessageFrom.User); + this.appendToChat(response.message, MessageFrom.Bot); await this.audioRecorder.play(response.audioStream).catch(err => this.setError(err)); this.chatState = ChatState.Initial; } - private appendToChat(content: string, from: Agent) { + private appendToChat(content: string, from: MessageFrom) { this.messages = [ ...this.messages, { @@ -228,7 +231,7 @@ export class AmplifyChatbot { this.text = ''; this.errorMessage = undefined; this.messages = []; - if (this.welcomeMessage) this.appendToChat(this.welcomeMessage, 'bot'); + if (this.welcomeMessage) this.appendToChat(this.welcomeMessage, MessageFrom.Bot); this.audioRecorder && this.audioRecorder.clear(); } From 2e5acc50c06f8b69b0fc5faa4a614d845db11388 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 00:27:10 -0700 Subject: [PATCH 58/71] Clean up css and set enum value --- .../src/components/amplify-chatbot/amplify-chatbot.scss | 8 +++----- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 4 ++-- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 8c76d86106e..32dc690fa0c 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -29,16 +29,16 @@ height: 100%; } .header { - margin-top: 1.25rem; + padding: 1.25rem 0.375rem 1.25rem 0.375rem; color: var(--header-color); font-size: var(--header-size); font-weight: bold; text-align: center; - padding-bottom: 1.5rem; + word-wrap: break-word; } .body { border-top: 0.0625rem solid rgba(0, 0, 0, 0.05); - padding-top: 2rem; + padding: 1.5rem 1rem 0 1rem; display: flex; flex-grow: 1; flex-direction: column; @@ -52,14 +52,12 @@ margin-bottom: 0.625rem; } .bot { - margin-left: 1rem; margin-right: auto; background-color: var(--bot-background-color); color: var(--bot-text-color); border-radius: 1.5rem 1.5rem 1.5rem 0; } .user { - margin-right: 1rem; margin-left: auto; background-color: var(--user-background-color); color: var(--user-text-color); diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 5ab8d17d98e..0e31418d898 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -10,8 +10,8 @@ import { Translations } from '../../common/Translations'; import { InteractionsResponse } from '@aws-amplify/interactions'; enum MessageFrom { - Bot, - User, + Bot = 'bot', + User = 'user', } interface Message { content: string; From 29ef5080b92be86e6cb4041203312f5187a2f4c9 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 00:34:10 -0700 Subject: [PATCH 59/71] Add slot description --- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 4 +++- .../src/components/amplify-chatbot/readme.md | 7 +++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 0e31418d898..34c1bef1aa2 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -17,7 +17,6 @@ interface Message { content: string; from: MessageFrom; } - enum ChatState { Initial, Listening, @@ -26,6 +25,9 @@ enum ChatState { Error, } +/** + * @slot header - title content placed at the top + */ @Component({ tag: 'amplify-chatbot', styleUrl: 'amplify-chatbot.scss', diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md index 3c5e98666dd..f05102b015b 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md @@ -27,6 +27,13 @@ | `chatCompleted` | Event emitted when conversation is completed | `CustomEvent` | +## Slots + +| Slot | Description | +| ---------- | ------------------------------- | +| `"header"` | title content placed at the top | + + ## Dependencies ### Depends on From 4bed1dbeae98a0b91da4fc5d1332b8bed2e4bf67 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 01:12:44 -0700 Subject: [PATCH 60/71] Simplify import --- .../src/common/audio-control/index.ts | 3 +++ .../src/components/amplify-chatbot/amplify-chatbot.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 packages/amplify-ui-components/src/common/audio-control/index.ts diff --git a/packages/amplify-ui-components/src/common/audio-control/index.ts b/packages/amplify-ui-components/src/common/audio-control/index.ts new file mode 100644 index 00000000000..80bcda15afb --- /dev/null +++ b/packages/amplify-ui-components/src/common/audio-control/index.ts @@ -0,0 +1,3 @@ +export * from './recorder'; +export * from './helper'; +export * from './visualizer'; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 34c1bef1aa2..c10b44dca33 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -2,8 +2,7 @@ import { Component, Host, h, Prop, State, Listen, Event, EventEmitter, Element } import { I18n } from '@aws-amplify/core'; import { Interactions } from '@aws-amplify/interactions'; import { JSXBase } from '@stencil/core/internal'; -import { AudioRecorder } from '../../common/audio-control/recorder'; -import { visualize } from '../../common/audio-control/visualizer'; +import { AudioRecorder, visualize } from '../../common/audio-control'; import { ChatResult } from '../../common/types/interactions-types'; import { NO_INTERACTIONS_MODULE_FOUND } from '../../common/constants'; import { Translations } from '../../common/Translations'; @@ -221,9 +220,10 @@ export class AmplifyChatbot { } /** - * State control functions + * State control methods */ - private setError(message: string) { + private setError(error: string | Error) { + const message = typeof error === 'string' ? error : error.message; this.chatState = ChatState.Error; this.errorMessage = message; } From 4eb9e9af2509b184edb5faaa8cdd1b7de8507a71 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 01:23:41 -0700 Subject: [PATCH 61/71] Default noop to visualizer --- .../src/common/audio-control/recorder.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 52e9acf16d7..877e42785bc 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -6,6 +6,7 @@ interface SilenceDetectionConfig { amplitude: number; } +type SilenceHandler = () => void; type Visualizer = (dataArray: Uint8Array, bufferLength: number) => void; export class AudioRecorder { @@ -14,7 +15,7 @@ export class AudioRecorder { private audioSupported: boolean; private analyserNode: AnalyserNode; - private onSilence: Function; + private onSilence: SilenceHandler; private visualizer: Visualizer; // input mic stream is stored in a buffer @@ -74,11 +75,10 @@ export class AudioRecorder { this.analyserNode = analyserNode; } - public startRecording(onSilence?: Function, visualizer?: Visualizer) { + public startRecording(onSilence?: SilenceHandler, visualizer?: Visualizer) { if (this.recording || !this.audioSupported) return; - const silenceHandler = onSilence || function() {}; - this.onSilence = silenceHandler; - this.visualizer = visualizer; + this.onSilence = onSilence || function() {}; + this.visualizer = visualizer || function() {}; const context = this.audioContext; context.resume().then(() => { @@ -136,10 +136,7 @@ export class AudioRecorder { const time = this.options.time; analyser.getByteTimeDomainData(dataArray); - - if (this.visualizer) { - this.visualizer(dataArray, bufferLength); - } + this.visualizer(dataArray, bufferLength); for (let i = 0; i < bufferLength; i++) { // Normalize between -1 and 1. From aa55a32298bee825b394b0979c25c799fab09278 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 12:32:40 -0700 Subject: [PATCH 62/71] Comment AudioRecorder and separate constants --- .../src/common/audio-control/helper.ts | 73 ++++++++++++++----- .../src/common/audio-control/recorder.ts | 49 +++++++++++-- .../src/common/audio-control/settings.ts | 8 ++ .../src/common/constants.ts | 3 - 4 files changed, 108 insertions(+), 25 deletions(-) create mode 100644 packages/amplify-ui-components/src/common/audio-control/settings.ts diff --git a/packages/amplify-ui-components/src/common/audio-control/helper.ts b/packages/amplify-ui-components/src/common/audio-control/helper.ts index 4203f491a31..fd47a4aa1eb 100644 --- a/packages/amplify-ui-components/src/common/audio-control/helper.ts +++ b/packages/amplify-ui-components/src/common/audio-control/helper.ts @@ -1,5 +1,8 @@ -import { RECORDER_EXPORT_MIME_TYPE } from '../constants'; +import { RECORDER_EXPORT_MIME_TYPE } from './settings'; +/** + * Merges multiple buffers into one. + */ const mergeBuffers = (bufferArray: Float32Array[], recLength: number) => { const result = new Float32Array(recLength); let offset = 0; @@ -10,6 +13,9 @@ const mergeBuffers = (bufferArray: Float32Array[], recLength: number) => { return result; }; +/** + * Downsamples audio to desired export sample rate. + */ const downsampleBuffer = (buffer: Float32Array, recordSampleRate: number, exportSampleRate: number) => { if (exportSampleRate === recordSampleRate) { return buffer; @@ -34,6 +40,9 @@ const downsampleBuffer = (buffer: Float32Array, recordSampleRate: number, export return result; }; +/** + * converts raw audio values to 16 bit pcm. + */ const floatTo16BitPCM = (output: DataView, offset: number, input: Float32Array) => { let byteOffset = offset; for (let i = 0; i < input.length; i++, byteOffset += 2) { @@ -42,36 +51,66 @@ const floatTo16BitPCM = (output: DataView, offset: number, input: Float32Array) } }; +/** + * Write given strings in big-endian order. + */ const writeString = (view: DataView, offset: number, string: string) => { for (let i = 0; i < string.length; i++) { view.setUint8(offset + i, string.charCodeAt(i)); } }; -const encodeWAV = (samples: Float32Array, exportSampleRate: number) => { - const buffer = new ArrayBuffer(44 + samples.length * 2); +/** + * Enocdes raw pcm audio into a wav file. + */ +const encodeWAV = (samples: Float32Array, exportSampleRate?: number) => { + /** + * WAV file consists of three parts: RIFF header, WAVE subchunk, and data subchunk. We precompute the size of them. + */ + + const audioSize = samples.length * 2; // We use 16-bit samples, so we have (2 * sampleLength) bytes. + const fmtSize = 24; // Byte size of the fmt subchunk: 24 bytes that the audio information that we'll set below. + const dataSize = 8 + audioSize; // Byte size of the data subchunk: raw sound data plus 8 bytes for the subchunk descriptions. + + const totalByteSize = 12 + fmtSize + dataSize; // Byte size of the whole file, including the chunk header / descriptor. + + // create DataView object to write byte values into + const buffer = new ArrayBuffer(totalByteSize); // buffer to write the chunk values in. const view = new DataView(buffer); - writeString(view, 0, 'RIFF'); - view.setUint32(4, 32 + samples.length * 2, true); // chunk size - writeString(view, 8, 'WAVE'); + + /** + * Start writing the .wav file. We write top to bottom, so byte offset (first numeric argument) increases strictly. + */ + // RIFF header + writeString(view, 0, 'RIFF'); // At offset 0, write the letters "RIFF" + view.setUint32(4, fmtSize + dataSize, true); // At offset 4, write the size of fmt and data chunk size combined. + writeString(view, 8, 'WAVE'); // At offset 8, write the format type "WAVE" // fmt subchunk - writeString(view, 12, 'fmt '); - view.setUint32(16, 16, true); // subchunk size - view.setUint16(20, 1, true); // audio format, pcm = 1 - view.setUint16(22, 1, true); // number of channels - view.setUint32(24, exportSampleRate, true); // sample rate - view.setUint32(28, exportSampleRate * 2, true); // byte rate - view.setUint16(32, 2, true); // block align, # of bytes per sample - view.setUint16(34, 16, true); // bits per sample + writeString(view, 12, 'fmt '); //chunkdId 'fmt ' + view.setUint32(16, fmtSize - 8, true); // fmt subchunk size below this value. We set 8 bytes already, so subtract 8 bytes from fmtSize. + view.setUint16(20, 1, true); // Audiio format code, which is 1 for PCM. + view.setUint16(22, 1, true); // Number of audio channels. We use mono, ie 1. + view.setUint32(24, exportSampleRate, true); // Sample rate of the audio file. + view.setUint32(28, exportSampleRate * 2, true); // Data rate, or # of data bytes per second. Since each sample is 2 bytes, this is 2 * sampleRate. + view.setUint16(32, 2, true); // block align, # of bytes per sample including all channels, ie. 2 bytes. + view.setUint16(34, 16, true); // bits per sample, ie. 16 bits // data subchunk - writeString(view, 36, 'data'); - view.setUint32(40, samples.length * 2, true); // subchunk size - floatTo16BitPCM(view, 44, samples); // pcm values here + writeString(view, 36, 'data'); // write the chunkId 'data' + view.setUint32(40, audioSize, true); // Audio byte size + floatTo16BitPCM(view, 44, samples); // raw pcm values then go here. return view; }; +/** + * Given arrays of raw pcm audio, downsamples the audio to desired sample rate and encodes it to a wav audio file. + * + * @param recBuffer {Float32Array[]} - 2d float array containing the recorded raw audio + * @param recLength {number} - total length of recorded audio + * @param recordSampleRate {number} - sample rate of the recorded audio + * @param exportSampleRate {number} - desired sample rate of the exported file + */ export const exportBuffer = ( recBuffer: Float32Array[], recLength: number, diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 877e42785bc..f567e5dc5db 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -1,5 +1,12 @@ import { exportBuffer } from './helper'; import { browserOrNode } from '@aws-amplify/core'; +import { + DEFAULT_EXPORT_SAMPLE_RATE, + FFT_MAX_DECIBELS, + FFT_MIN_DECIBELS, + FFT_SIZE, + FFT_SMOOTHING_TIME_CONSTANT, +} from './settings'; interface SilenceDetectionConfig { time: number; @@ -30,6 +37,10 @@ export class AudioRecorder { this.options = options; } + /** + * This must be called first to enable audio context and request microphone access. + * Once access granted, it connects all the necessary audio nodes to the context so that it can begin recording or playing. + */ async init() { if (browserOrNode().isBrowser) { window.AudioContext = window.AudioContext || (window as any).webkitAudioContext; @@ -50,6 +61,9 @@ export class AudioRecorder { } } + /** + * Setup audio nodes after successful `init`. + */ private async setupAudioNodes(stream: MediaStream) { await this.audioContext.resume(); const sourceNode = this.audioContext.createMediaStreamSource(stream); @@ -64,9 +78,9 @@ export class AudioRecorder { }; const analyserNode = this.audioContext.createAnalyser(); - analyserNode.minDecibels = -90; - analyserNode.maxDecibels = -10; - analyserNode.smoothingTimeConstant = 0.85; + analyserNode.minDecibels = FFT_MIN_DECIBELS; + analyserNode.maxDecibels = FFT_MAX_DECIBELS; + analyserNode.smoothingTimeConstant = FFT_SMOOTHING_TIME_CONSTANT; sourceNode.connect(analyserNode); analyserNode.connect(processorNode); @@ -75,6 +89,12 @@ export class AudioRecorder { this.analyserNode = analyserNode; } + /** + * Start recording audio and listen for silence. + * + * @param onSilence {SilenceHandler} - called whenever silence is detected + * @param visualizer {Visualizer} - called with audio data on each audio process to be used for visualization. + */ public startRecording(onSilence?: SilenceHandler, visualizer?: Visualizer) { if (this.recording || !this.audioSupported) return; this.onSilence = onSilence || function() {}; @@ -87,17 +107,28 @@ export class AudioRecorder { }); } + /** + * Pause recording + */ public stopRecording() { if (!this.audioSupported) return; this.recording = false; } + /** + * Pause recording and clear audio buffer + */ public clear() { this.stopRecording(); this.streamBufferLength = 0; this.streamBuffer = []; } + /** + * Plays given audioStream with audioContext + * + * @param buffer {Uint8Array} - audioStream to be played + */ public play(buffer: Uint8Array) { if (!buffer || !this.audioSupported) return; const myBlob = new Blob([buffer]); @@ -125,10 +156,13 @@ export class AudioRecorder { }); } + /** + * Called after each audioProcess. Check for silence and give fft time domain data to visualizer. + */ private analyse() { if (!this.audioSupported) return; const analyser = this.analyserNode; - analyser.fftSize = 2048; + analyser.fftSize = FFT_SIZE; const bufferLength = analyser.fftSize; const dataArray = new Uint8Array(bufferLength); @@ -152,7 +186,12 @@ export class AudioRecorder { } } - public async exportWAV(exportSampleRate: number = 16000) { + /** + * Encodes recorded buffer to a wav file and exports it to a blob. + * + * @param exportSampleRate {number} - desired sample rate of the exported buffer + */ + public async exportWAV(exportSampleRate: number = DEFAULT_EXPORT_SAMPLE_RATE) { if (!this.audioSupported) return; const recordSampleRate = this.audioContext.sampleRate; const blob = exportBuffer(this.streamBuffer, this.streamBufferLength, recordSampleRate, exportSampleRate); diff --git a/packages/amplify-ui-components/src/common/audio-control/settings.ts b/packages/amplify-ui-components/src/common/audio-control/settings.ts new file mode 100644 index 00000000000..ab6075b9104 --- /dev/null +++ b/packages/amplify-ui-components/src/common/audio-control/settings.ts @@ -0,0 +1,8 @@ +// AudioRecorder settings +export const RECORDER_EXPORT_MIME_TYPE = 'application/octet-stream'; +export const DEFAULT_EXPORT_SAMPLE_RATE = 16000; + +export const FFT_SIZE = 2048; // window size in samples for Fast Fourier Transform (FFT) +export const FFT_MAX_DECIBELS = -10; // maximum power value in the scaling range for the FFT analysis data +export const FFT_MIN_DECIBELS = -90; // minimum power value in the scaling range for the FFT analysis data +export const FFT_SMOOTHING_TIME_CONSTANT = 0.85; // averaging constant with the last analysis frame diff --git a/packages/amplify-ui-components/src/common/constants.ts b/packages/amplify-ui-components/src/common/constants.ts index f6889927e8a..23416affef4 100644 --- a/packages/amplify-ui-components/src/common/constants.ts +++ b/packages/amplify-ui-components/src/common/constants.ts @@ -39,6 +39,3 @@ export const AUTH_CHANNEL = 'auth'; export const UI_AUTH_CHANNEL = 'UI Auth'; export const TOAST_AUTH_ERROR_EVENT = 'ToastAuthError'; export const AUTH_STATE_CHANGE_EVENT = 'AuthStateChange'; - -// AudioRecorder export MIME type -export const RECORDER_EXPORT_MIME_TYPE = 'application/octet-stream'; From 9d2afab0fbf533e8b1976d417c98c46b453feb97 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Fri, 21 Aug 2020 12:33:55 -0700 Subject: [PATCH 63/71] Update snapshot --- .../amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap index 7990b856fed..be50990def8 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/__snapshots__/amplify-chatbot.spec.tsx.snap @@ -14,7 +14,7 @@ exports[`amplify-chatbot renders chatbot 1`] = `
- +
From 7cbbf86027765b8b58cb05688c79cd871d2d8c6f Mon Sep 17 00:00:00 2001 From: wlee221 Date: Sun, 23 Aug 2020 01:44:50 -0700 Subject: [PATCH 64/71] Reorder css --- .../src/components/amplify-chatbot/amplify-chatbot.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss index 32dc690fa0c..903c763cd44 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.scss @@ -1,13 +1,13 @@ @import 'animation.scss'; :host { + --width: 28.75rem; + --height: 37.5rem; --header-color: var(--amplify-secondary-color); --header-size: var(--amplify-text-lg); --bot-background-color: rgb(230, 230, 230); --bot-text-color: black; --user-background-color: #099ac8; --user-text-color: var(--amplify-white); - --width: 28.75rem; - --height: 37.5rem; width: 100%; height: var(--height); From 3bbd620d62e3585e7376e6a932b8d37b798191c4 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 24 Aug 2020 13:00:28 -0700 Subject: [PATCH 65/71] Enable conversationModeOn prop --- .../components/amplify-chatbot/amplify-chatbot.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index c10b44dca33..8b10c4fe948 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -203,10 +203,20 @@ export class AmplifyChatbot { } this.chatState = ChatState.Speaking; + const dialogState = response.dialogState; if (response.inputTranscript) this.appendToChat(response.inputTranscript, MessageFrom.User); this.appendToChat(response.message, MessageFrom.Bot); - await this.audioRecorder.play(response.audioStream).catch(err => this.setError(err)); - this.chatState = ChatState.Initial; + + await this.audioRecorder + .play(response.audioStream) + .then(() => { + this.chatState = ChatState.Initial; + if (this.conversationModeOn && dialogState !== 'Fulfilled' && dialogState !== 'Failed') { + // if session is not finished, resume listening to mic + this.handleMicButton(); + } + }) + .catch(err => this.setError(err)); } private appendToChat(content: string, from: MessageFrom) { From 0acd8f835b6a075e109be122cb96d2c51d146c9d Mon Sep 17 00:00:00 2001 From: William Lee <43682783+wlee221@users.noreply.github.com> Date: Mon, 24 Aug 2020 14:51:32 -0700 Subject: [PATCH 66/71] Update packages/amplify-ui-components/src/common/audio-control/helper.ts Co-authored-by: Ashika <35131273+ashika01@users.noreply.github.com> --- .../amplify-ui-components/src/common/audio-control/helper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/helper.ts b/packages/amplify-ui-components/src/common/audio-control/helper.ts index fd47a4aa1eb..94f3c96fca2 100644 --- a/packages/amplify-ui-components/src/common/audio-control/helper.ts +++ b/packages/amplify-ui-components/src/common/audio-control/helper.ts @@ -61,7 +61,7 @@ const writeString = (view: DataView, offset: number, string: string) => { }; /** - * Enocdes raw pcm audio into a wav file. + * Encodes raw pcm audio into a wav file. */ const encodeWAV = (samples: Float32Array, exportSampleRate?: number) => { /** From 3d058f6dde15591292b7235183b493cba37b0c2c Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 24 Aug 2020 15:02:30 -0700 Subject: [PATCH 67/71] Move error strings to translations --- packages/amplify-ui-components/src/common/Translations.ts | 2 ++ .../src/components/amplify-chatbot/amplify-chatbot.tsx | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/amplify-ui-components/src/common/Translations.ts b/packages/amplify-ui-components/src/common/Translations.ts index d72da511b68..3f4e6d88598 100644 --- a/packages/amplify-ui-components/src/common/Translations.ts +++ b/packages/amplify-ui-components/src/common/Translations.ts @@ -110,6 +110,8 @@ export enum AuthStrings { export enum InteractionsStrings { CHATBOT_TITLE = 'ChatBot Lex', TEXT_INPUT_PLACEHOLDER = 'Write a message', + CHAT_DISABLED_ERROR = 'Error: Either voice or text must be enabled for the chatbot', + NO_BOT_NAME_ERROR = 'Error: Bot Name must be provided to ChatBot', } type Translations = AuthErrorStrings | AuthStrings | InteractionsStrings; diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index 8b10c4fe948..dd621e0a5e2 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -92,9 +92,9 @@ export class AmplifyChatbot { private validateProps() { if (!this.voiceEnabled && !this.textEnabled) { - this.setError('Error: Either voice or text must be enabled for the chatbot'); + this.setError(Translations.CHAT_DISABLED_ERROR); } else if (!this.botName) { - this.setError('Error: Bot Name must be provided to ChatBot'); + this.setError(Translations.NO_BOT_NAME_ERROR); } if (this.welcomeMessage) this.appendToChat(this.welcomeMessage, MessageFrom.Bot); @@ -314,7 +314,7 @@ export class AmplifyChatbot { return ( this.errorMessage && ( { this.errorMessage = undefined; }} From bd8d6ddab7b04524cf090300b3ba67d748eed91d Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 24 Aug 2020 15:07:23 -0700 Subject: [PATCH 68/71] Remove trailing comma --- .../src/components/amplify-chatbot/amplify-chatbot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx index dd621e0a5e2..f957cdec5b5 100644 --- a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx +++ b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx @@ -256,7 +256,7 @@ export class AmplifyChatbot { messageList.push(
-
, +
); } return messageList; From cf3ef0ffbaa9ee41f22e8c2ebf200fb2b06735f6 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 24 Aug 2020 15:18:17 -0700 Subject: [PATCH 69/71] Wrap audioContext resume with error logger --- .../src/common/audio-control/recorder.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index f567e5dc5db..64092a97fba 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -1,5 +1,5 @@ import { exportBuffer } from './helper'; -import { browserOrNode } from '@aws-amplify/core'; +import { browserOrNode, Logger } from '@aws-amplify/core'; import { DEFAULT_EXPORT_SAMPLE_RATE, FFT_MAX_DECIBELS, @@ -15,6 +15,7 @@ interface SilenceDetectionConfig { type SilenceHandler = () => void; type Visualizer = (dataArray: Uint8Array, bufferLength: number) => void; +const logger = new Logger('AudioRecorder'); export class AudioRecorder { private options: SilenceDetectionConfig; @@ -65,7 +66,7 @@ export class AudioRecorder { * Setup audio nodes after successful `init`. */ private async setupAudioNodes(stream: MediaStream) { - await this.audioContext.resume(); + await this.audioContext.resume().catch(logger.error); const sourceNode = this.audioContext.createMediaStreamSource(stream); const processorNode = this.audioContext.createScriptProcessor(4096, 1, 1); @@ -104,7 +105,7 @@ export class AudioRecorder { context.resume().then(() => { this.start = Date.now(); this.recording = true; - }); + }).catch(logger.error); } /** From c073c3fdf76b55994a2321f26fe7650e5cd31975 Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 24 Aug 2020 15:27:39 -0700 Subject: [PATCH 70/71] Try catch `resume` and make startRecording async --- .../src/common/audio-control/recorder.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 64092a97fba..8157facd409 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -66,7 +66,11 @@ export class AudioRecorder { * Setup audio nodes after successful `init`. */ private async setupAudioNodes(stream: MediaStream) { - await this.audioContext.resume().catch(logger.error); + try { + await this.audioContext.resume(); + } catch (err) { + logger.error(err); + } const sourceNode = this.audioContext.createMediaStreamSource(stream); const processorNode = this.audioContext.createScriptProcessor(4096, 1, 1); @@ -96,16 +100,19 @@ export class AudioRecorder { * @param onSilence {SilenceHandler} - called whenever silence is detected * @param visualizer {Visualizer} - called with audio data on each audio process to be used for visualization. */ - public startRecording(onSilence?: SilenceHandler, visualizer?: Visualizer) { + public async startRecording(onSilence?: SilenceHandler, visualizer?: Visualizer) { if (this.recording || !this.audioSupported) return; this.onSilence = onSilence || function() {}; this.visualizer = visualizer || function() {}; const context = this.audioContext; - context.resume().then(() => { - this.start = Date.now(); - this.recording = true; - }).catch(logger.error); + try { + await context.resume(); + } catch (err) { + logger.error(err); + } + this.start = Date.now(); + this.recording = true; } /** From 212d4a596bacb99d4bf7d7a3cba561767911de6d Mon Sep 17 00:00:00 2001 From: wlee221 Date: Mon, 24 Aug 2020 15:46:45 -0700 Subject: [PATCH 71/71] Use callback based decode for safari --- .../src/common/audio-control/recorder.ts | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/amplify-ui-components/src/common/audio-control/recorder.ts b/packages/amplify-ui-components/src/common/audio-control/recorder.ts index 8157facd409..75c1cd4c8b9 100644 --- a/packages/amplify-ui-components/src/common/audio-control/recorder.ts +++ b/packages/amplify-ui-components/src/common/audio-control/recorder.ts @@ -145,19 +145,20 @@ export class AudioRecorder { const fileReader = new FileReader(); fileReader.onload = () => { const playbackSource = this.audioContext.createBufferSource(); - this.audioContext - .decodeAudioData(fileReader.result as ArrayBuffer) - .then(buf => { - playbackSource.buffer = buf; - playbackSource.connect(this.audioContext.destination); - playbackSource.onended = () => { - return res(); - }; - playbackSource.start(0); - }) - .catch(err => { - return rej(err); - }); + + const successCallback = (buf: AudioBuffer) => { + playbackSource.buffer = buf; + playbackSource.connect(this.audioContext.destination); + playbackSource.onended = () => { + return res(); + }; + playbackSource.start(0); + }; + const errorCallback = err => { + return rej(err); + }; + + this.audioContext.decodeAudioData(fileReader.result as ArrayBuffer, successCallback, errorCallback); }; fileReader.onerror = () => rej(); fileReader.readAsArrayBuffer(myBlob);