## Usage

<FilterContent framework="react">

```jsx
import React from "react";
import { Amplify } from "aws-amplify";
import {AmplifyChatbot} from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

const App = () => (
  <AmplifyChatbot
    botName="yourBotName"
    botTitle="My ChatBot"
    welcomeMessage="Hello, how can I help you?"
  />
);
```

</FilterContent>

<FilterContent framework="angular">

import all0 from "/src/fragments/ui/angular/configure-module.mdx";

<Fragments fragments={{all: all0}} />

_app.component.html_

```html
<amplify-chatbot
  bot-name="yourBotName"
  bot-title="My ChatBot"
  welcome-message="Hello, how can I help you?"
></amplify-chatbot>
```

</FilterContent>

<FilterContent framework="vue">

import all2 from "/src/fragments/ui/vue/configure-app.mdx";

<Fragments fragments={{all: all2}} />

_App.vue_

```html
<template>
  <amplify-chatbot
    bot-name="yourBotName"
    bot-title="My ChatBot"
    welcome-message="Hello, how can I help you?"
  />
</template>
```

</FilterContent>

<UiComponentProps tag="amplify-chatbot" propType="attr" useTableHeaders></UiComponentProps>

## Use Cases

### Setting Up Voice Chat

In order for voice input to work with Amazon Lex, you may have to enable output voice in [AWS Management Console](https://console.aws.amazon.com/console/home). Under the Amazon Lex service, click on your configured Lex chatbot and go to settings -> General and pick your desired output voice.

### Listening to Chat Fulfillment

Once a conversation session is finished, `amplify-chatbot` emits a custom event `chatCompleted` that your app can listen to:

<FilterContent framework="react">

```js
function App() {
  const handleChatComplete = (event) => {
    const {data, err} = event.detail;
    if (data) console.log("Chat fulfilled!", JSON.stringify(data));
    if (err) console.error("Chat failed:", err);
  };

  useEffect(() => {
    const chatbotElement = document.querySelector("amplify-chatbot");
    chatbotElement.addEventListener("chatCompleted", handleChatComplete);
    return function cleanup() {
      chatbotElement.removeEventListener("chatCompleted", handleChatComplete);
    };
  }, []);
}
```

</FilterContent>

<FilterContent framework="vue">

<BlockSwitcher>
<Block name="Vue 3">

```html
<script>
  const handleChatComplete = (event) => {
    const {data, err} = event.detail;
    if (data) alert("success!\n" + JSON.stringify(data));
    if (err) alert(err);
  };

  export default {
    name: "App",
    mounted() {
      const chatbotElement = this.$el.querySelector("amplify-chatbot");
      chatbotElement.addEventListener("chatCompleted", handleChatComplete);
    },
    beforeUnmount() {
      const chatbotElement = this.$el.querySelector("amplify-chatbot");
      chatbotElement.removeEventListener("chatCompleted", handleChatComplete);
    },
  };
</script>
```

</Block>
<Block name="Vue 2">

```html
<script>
  const handleChatComplete = (event) => {
    const {data, err} = event.detail;
    if (data) alert("success!\n" + JSON.stringify(data));
    if (err) alert(err);
  };

  export default {
    name: "App",
    mounted() {
      const chatbotElement = this.$el.querySelector("amplify-chatbot");
      chatbotElement.addEventListener("chatCompleted", handleChatComplete);
    },
    beforeDestroy() {
      const chatbotElement = this.$el.querySelector("amplify-chatbot");
      chatbotElement.removeEventListener("chatCompleted", handleChatComplete);
    },
  };
</script>
```

</Block>
</BlockSwitcher>

</FilterContent>

<FilterContent framework="angular">

```js
const handleChatComplete = (event: Event) => {
  const { data, err } = (event as any).detail;
  if (data) console.log('Chat fulfilled!', JSON.stringify(data));
  if (err) console.error('Chat failed:', err);
};

export class AppComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    const chatbotElement = document.querySelector('amplify-chatbot');
    chatbotElement.addEventListener('chatCompleted', handleChatComplete);
  }
  ngOnDestroy(): void {
    const chatbotElement = document.querySelector('amplify-chatbot');
    chatbotElement.removeEventListener('chatCompleted', handleChatComplete);
  }
}
```

</FilterContent>