Chatbot

Description

A reusable chat bubble component that integrates AI-powered conversations across Bayer applications. Provides assistantId prop, which allow to reach several assistants within MyGenAssist.

See live demos on storybook

Storybook Chatbot Demos

Install from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-chatbot @element/themes

Notes

A reusable chat bubble component that integrates AI-powered conversations across Bayer applications. By using assistantId prop, chatbot can reach custom assistants with public access available on MyGenAssist.

Props

| Prop | Type | Required | Description | | ------------- | ------ | -------- | ------------------------------------------------------------------ | | assistantId | string | Yes | The unique identifier of the MyGenAssist assistant you want to use |

Events

| Event | Description | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | onAuth | Custom event enabling end developers to implement their own authorization flow. Returns an auth token, that is passed directly to the component. | | onChatClose | Custom event which allows to create custom method for clearing authorization state inside component when chat is closed. |

Usage

Use the assistantId prop to specify which MyGenAssist assistant you want to connect

// Example with Elle assistant ID
<Chatbot assistantId='e5ca8a9a-1739-4b93-8e6c-62932026cd21' />

In the default flow, the auth token for authorization with MyGenAssist should be pasted directly in the chat, but if you want to customize the authorization flow with SSO or custom token management, you should use onAuth that allows you to create custom authorization. If the authorization flow require high level of complexity, the onAuth should be used only to return correct auth token, which will be passed directly to component and encrypted inside.

The onChatClose event should be used for customizing of clearing auth state inside component when chat is closed. In default flow, closing chat clears the session and auth token, but if you using complex auth flow that could store token in some cookies or states, you should use also onChatClose event that clears custom auth state.

// Example with custom onAuth
<Chatbot assistantId="e5ca8a9a-1739-4b93-8e6c-62932026cd21"
         onAuth={() => {
            return authToken;
         }}
         onChatClose={() => clearAuthState();}
/>

Chatbot Props

| Name | Type | Default | Required | Description | | ----------- | ------ | --------- | -------- | ---------------------------------------------------------------- | | assistantId | string | undefined | false | Allows to reach several assistants within MyGenAssist | | className | string | undefined | false | The css class name to be passed through to the component markup. |

Chatbot Events

| Name | Default | Required | Params | Description | | ----------- | ------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | | onAuth | null | false | | Custom event enabling end developers to implement their own authorization flow. Returns an auth token, that is passed directly to the component. | | onChatClose | null | false | | Custom event which allows to create custom method for clearing authorization state inside component when chat is closed. |

Chatbot Message Props

| Name | Type | Default | Required | Description | | --------- | ------ | --------- | -------- | ---------------------------------------------------------------- | | className | string | undefined | false | The css class name to be passed through to the component markup. |