Chatbot footer

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.

A simple footer with a message bar and footnote would have this code structure:

<ChatbotFooter>
  <MessageBar ... />
  <ChatbotFootnote .../>
</ChatbotFooter>

Props

ChatbotFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodeChildren for the Footer that supports MessageBar and FootNote components
classNamestringCustom classname for the Footer component

MessageBar

*required
NameTypeDefaultDescription
onSendMessagerequired(message: string) => voidCallback to get the value of input message by user
alwayShowSendButtonbooleanFlag to always to show the send button. By default send button is shown when there is a message in the input field
attachMenuPropsMessageBarWithAttachMenuPropsProps to enable a menu that opens when the Attach button is clicked, instead of the attachment window
classNamestringClass Name for the MessageBar component
handleAttach(data: File[], event: DropEvent) => voidCallback function for when attach button is used to upload a file
hasAttachButtonbooleantrueFlag to disable/enable the Attach button
hasMicrophoneButtonbooleanFlag to enable the Microphone button
isSendButtonDisabledbooleanFlag to provide manual control over whether send button is disabled

ChatbotFootnote

*required
NameTypeDefaultDescription
labelrequiredstringLabel to show for the footnote
classNamestringCustom classname for the Footnote component
popoverChatbotFootnotePopoverConfig for the popover which opens up when footnote is clicked

ChatbotFootnotePopover

*required
NameTypeDefaultDescription
descriptionrequiredstringDescription for the Footnote popover
titlerequiredstringTitle for the Footnote popover
bannerImageChatbotFootnotePopoverBannerImageOptional Banner Image that can be shown in the Footnote Popover
ctaChatbotFootnotePopoverCTAOptional CTA button that can be used to trigger an action and close the popover
linkChatbotFootnotePopoverLinkOptional link that can be used to show and external link like **Learn More**
popoverPropsPopoverPropsProps for PF Popover

ChatbotFootnotePopoverCTA

*required
NameTypeDefaultDescription
labelrequiredstringLabel for the CTA
onClickrequired() => voidCallback for the CTA

ChatbotFootnotePopoverBannerImage

*required
NameTypeDefaultDescription
altrequiredstringAlternate text for the banner image
srcrequiredstringSource for the banner image
*required
NameTypeDefaultDescription
labelrequiredstringLabel for the Link
urlrequiredstringURL for the Link

MessageBarWithAttachMenuProps

*required
NameTypeDefaultDescription
attachMenuItemsrequiredReact.ReactNodeItems in menu
isAttachMenuOpenrequiredbooleanFlag to enable whether attach menu is open
onAttachMenuInputChangerequired(value: string) => voidA callback for when the input value in the menu changes.
onAttachMenuToggleClickrequired() => voidA callback for when the attachment menu toggle is clicked
setIsAttachMenuOpenrequired(isOpen: boolean) => voidCallback to close attach menu
attachMenuInputPlaceholderstringPlaceholder for search input
onAttachMenuOnOpenChangeKeysstring[]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) => voidCallback to change the open state of the menu. Triggered by clicking outside of the menu.
onAttachMenuSelect(event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => voidFunction callback called when user selects item in menu.

SourceDetailsMenuItem

*required
NameTypeDefaultDescription
iconrequiredReact.ReactNodeIcon
namerequiredstringName of source
typestringDescription of source