The PatternFly ChatBot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via the ChatBot toggle.

The <Chatbot> component is the container that encompasses the ChatBot experience. It adapts to various display modes (overlay/default, docked, fullscreen, and embedded) and supports both light and dark themes.

The "embedded" display mode is meant to be used within a PatternFly page or other container within your product.

To introduce users to the ChatBot experience, display a welcome message before they input their first message. This brief message should follow our conversation design guidelines to welcome users to the ChatBot experience and encourage them to interact.

This message can be dismissed once a user sends their first message. To change the arrangement of the message within the message box, specify the position in the <MessageBox> component.

To provide users with a more specific direction, you can also include optional welcome prompts.

To provide page context, we recommend using a "Skip to chatbot" button. This allows you to skip past other content on the page, directly to the ChatBot content, using a PatternFly skip to content component. To display this button, you must tab into the main window.

When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the default, embedded, and fullscreen ChatBot and the embedded ChatBot.

To allow users to open and close the ChatBot window as needed, add a toggle.

A custom icon can be passed to the toggle. To ensure the icon is visible in both light and dark themes, use an SVG image and set fill="currentColor".

A custom shape can be set for the toggle. To override the default circle shape, set isRound to false. This will set the toggle to a square shape, but you can pass in additional classes to further customize the shape.

By default, <HeaderTitle> renders any children that are passed in. Optionally, you can pass in a displayMode, showOnEmbedded, showOnDocked, showOnFullScreen, and/or showOnDefault to render content conditionally.

There are a variety of options and customizations you can make to the header, to adjust how information is displayed, or to add additional controls.

In this example, select the respective checkbox to toggle these features:

• Menu: Users can select the menu toggle to open a menu of additional options or actions.
• Left-aligned logo
• Centered logo
• Selector dropdown: Users can choose from preselected options in a dropdown menu. For example, they can toggle between AI models.
• Options dropdown: Users can select ChatBot options from a menu. For example, they can switch between ChatBot display modes.

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.

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.

Speech recognition defaults to en-US. You can update the locale as needed. Locale codes are a combination of the ISO 639-1 language code and the ISO 3166-1 country code, separated by a hyphen.

In this example, the locale is set to to ja-JP. You can try it out by saying "hajimemashite" (初めまして).

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>

If you are using streaming, you can add a stop button to the message bar that allows users to stop a response from a ChatBot.

To enable the stop button, set hasStopButton to true and pass in a handleStopButton callback function. You can use this callback to trigger an AbortController configured as part of your API call.

In the conversation history drawer, users can search previous ChatBot conversations via an input field. To customize the placeholder text, use searchInputPlaceholder. Provide an aria label via searchInputAriaLabel.

They can also start new conversations via a "New chat" button. To customize the button label, use newChatButtonText.

Both the search input field and "New chat" buttons are optional. The reverseButtonOrder prop allows you to invert the positions of the Close and "New chat" buttons within the drawer when set to true.

Actions can be added to conversations with menuItems. Optionally, you can also add a className to the menu via menuClassName, change the default aria-label and tooltip content via label, or add an onSelect callback for when a user selects an item.

Based on the PatternFly modal, this modal adapts to the ChatBot display mode and accepts components typically used in a modal. It is primarily used and tested in the context of the attachment modals, but you can customize this modal to adapt it to other use cases as needed. The modal will overlay the ChatBot in default and docked modes, and will behave more like a traditional PatternFly modal in fullscreen and embedded modes.