Chatbot footer

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.

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

*required
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

*required
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

*required
Name	Type	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

*required
Name	Type	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

*required
Name	Type	Default	Description
labelrequired	string		Label for the CTA
onClickrequired	() => void		Callback for the CTA

ChatbotFootnotePopoverBannerImage

*required
Name	Type	Default	Description
altrequired	string		Alternate text for the banner image
srcrequired	string		Source for the banner image

ChatbotFootnotePopoverLink

*required
Name	Type	Default	Description
labelrequired	string		Label for the Link
urlrequired	string		URL for the Link

MessageBarWithAttachMenuProps

*required
Name	Type	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

*required
Name	Type	Description
iconrequired	React.ReactNode	Icon
namerequired	string	Name of source
type	string	Description of source

View source on GitHub