Footnote with popover
A footnote can be placed in the chatbot footer to communicate any legal disclaimers or information about the chatbot. Footnotes can be static text or a button that opens a popover.
Message bar with speech recognition and file attachment
In Safari and Chrome, you will see a microphone button in the message bar if hasMicrophoneButton
is passed to <MessageBar>
. The button will only appear if 'SpeechRecognition'
or 'webkitSpeechRecognition'
are available in window
. This does not currently work in Firefox.
By default the message bar supports file uploads via an attach button. Setting hasAttachButton
to false
will disable that feature.
Message bar with attach menu appended to attach button
You can change the behavior of the attach button to open a menu, rather than the default file viewer for your operating system. This menu can display different actions related to attachments.
Attachments can also be added to the chatbot via drag and drop.
Footer with message bar and footnote
A simple footer with a message bar and footnote would have this code structure:
<ChatbotFooter>
<MessageBar ... />
<ChatbotFootnote .../>
</ChatbotFooter>
Props
ChatbotFooter
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Children for the Footer that supports MessageBar and FootNote components | |
className | string | Custom classname for the Footer component |
MessageBar
Name | Type | Default | Description |
---|---|---|---|
onSendMessagerequired | (message: string) => void | Callback to get the value of input message by user | |
alwayShowSendButton | boolean | Flag to always to show the send button. By default send button is shown when there is a message in the input field | |
attachMenuProps | MessageBarWithAttachMenuProps | Props to enable a menu that opens when the Attach button is clicked, instead of the attachment window | |
className | string | Class Name for the MessageBar component | |
handleAttach | (data: File[], event: DropEvent) => void | Callback function for when attach button is used to upload a file | |
hasAttachButton | boolean | true | Flag to disable/enable the Attach button |
hasMicrophoneButton | boolean | Flag to enable the Microphone button | |
isSendButtonDisabled | boolean | Flag to provide manual control over whether send button is disabled |
ChatbotFootnote
Name | Type | Default | Description |
---|---|---|---|
labelrequired | string | Label to show for the footnote | |
className | string | Custom classname for the Footnote component | |
popover | ChatbotFootnotePopover | Config for the popover which opens up when footnote is clicked |
ChatbotFootnotePopover
Name | Type | Default | Description |
---|---|---|---|
descriptionrequired | string | Description for the Footnote popover | |
titlerequired | string | Title for the Footnote popover | |
bannerImage | ChatbotFootnotePopoverBannerImage | Optional Banner Image that can be shown in the Footnote Popover | |
cta | ChatbotFootnotePopoverCTA | Optional CTA button that can be used to trigger an action and close the popover | |
link | ChatbotFootnotePopoverLink | Optional link that can be used to show and external link like **Learn More** | |
popoverProps | PopoverProps | Props for PF Popover |
ChatbotFootnotePopoverCTA
Name | Type | Default | Description |
---|---|---|---|
labelrequired | string | Label for the CTA | |
onClickrequired | () => void | Callback for the CTA |
ChatbotFootnotePopoverBannerImage
Name | Type | Default | Description |
---|---|---|---|
altrequired | string | Alternate text for the banner image | |
srcrequired | string | Source for the banner image |
ChatbotFootnotePopoverLink
Name | Type | Default | Description |
---|---|---|---|
labelrequired | string | Label for the Link | |
urlrequired | string | URL for the Link |
MessageBarWithAttachMenuProps
Name | Type | Default | Description |
---|---|---|---|
attachMenuItemsrequired | React.ReactNode | Items in menu | |
isAttachMenuOpenrequired | boolean | Flag to enable whether attach menu is open | |
onAttachMenuInputChangerequired | (value: string) => void | A callback for when the input value in the menu changes. | |
onAttachMenuToggleClickrequired | () => void | A callback for when the attachment menu toggle is clicked | |
setIsAttachMenuOpenrequired | (isOpen: boolean) => void | Callback to close attach menu | |
attachMenuInputPlaceholder | string | Placeholder for search input | |
onAttachMenuOnOpenChangeKeys | string[] | Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. | |
onAttachMenuOpenChange | (isOpen: boolean) => void | Callback to change the open state of the menu. Triggered by clicking outside of the menu. | |
onAttachMenuSelect | (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void | Function callback called when user selects item in menu. |
SourceDetailsMenuItem
Name | Type | Default | Description |
---|---|---|---|
iconrequired | React.ReactNode | Icon | |
namerequired | string | Name of source | |
type | string | Description of source |