Chatbot messages

The content prop of the <Message> component is passed to a <Markdown> component (from react-markdown), which is configured to translate plain text strings into PatternFly <Content> components and code blocks into PatternFly <CodeBlock> components.

Bot messages

Messages from the chatbot will be marked with an "AI" label to clearly communicate the use of AI to users. The chatbot can display different content types, including plain text, code, or a loading animation (via isLoading).

By default, a date and timestamp is displayed with each message. You can update timestamp with a different date and time format as needed.

BotAI1 hour ago

Example content with updated timestamp text

BotAI10/31/2024, 2:42:13 PM

Here is some YAML code:

yaml
apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
  name: azure-sample-repo0oooo00ooo
spec:
  connectionConfig:
  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs

Here is some JavaScript code:

js
import React from 'react';

const MessageLoading = () => (
  <div className="pf-chatbot__message-loading">
    <span className="pf-chatbot__message-loading-dots">
      <span className="pf-v6-screen-reader">Loading message</span>
    </span>
  </div>
);

export default MessageLoading;

BotAI10/31/2024, 2:42:14 PM

User messages

Messages from users have a different background color to differentiate them from bot messages. You can also display a custom avatar that is uploaded by the user.

User1 hour ago

Example content with updated timestamp text

User10/31/2024, 2:42:14 PM

A paragraph with emphasis and strong importance.

A block quote with ~~strikethrough~~ and a URL: https://reactjs.org.

Here is an inline code - () => void

Messages with attachments

When attachments are shared and displayed in the chatbot window, users will see a selectable and dismissible message that contains file details in a label. Selecting the file label can open a preview modal, which allows users to view or make edits to the file contents.

The <PreviewAttachment> component displays a modal with a read-only view of the attached file's contents. Selecting the "edit" button will open the <AttachmentEdit> component, which provides an interactive environment where users can make changes to the file.

If a displayMode is not passed to <PreviewAttachment> or <AttachmentEdit>, they both default to overlaying the default displayMode of the <Chatbot> component.

Note: This example does not actually apply any edits to the attached file. That logic depends on the implementation.

User10/31/2024, 2:42:14 PM

Here is an uploaded file

Messages actions

You can add actions to a message, to allow users to interact with the message content. These actions can include:

Feedback responses that allow users to rate a message as "good" or "bad".
Copy and share controls that allow users to share the message content with others.
A listen action, that will read the message content out loud.

Note: The logic for the actions is not built into the component and must be implemented by the consuming application.

BotAI1 hour ago

Example content with updated timestamp text

Messages with sources

If you are using Retrieval-Augmented Generation, you may want to display sources in a message. Passing sources to <Message> allows you to paginate between the sources you provide.

The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. The title is limited to 1 line and the body is limited to 2 lines.

BotAI10/31/2024, 2:42:14 PM

Example with sources

3 sources

Getting started with Red Hat OpenShift

Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...

BotAI10/31/2024, 2:42:14 PM

Example with very long sources

2 sources

Getting started with Red Hat OpenShift AI and other products

Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...

BotAI10/31/2024, 2:42:14 PM

Example with only one source

1 source

Getting started with Red Hat OpenShift

Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...

BotAI10/31/2024, 2:42:14 PM

Example with sources that include a title and link

3 sources

Getting started with Red Hat OpenShift

BotAI10/31/2024, 2:42:14 PM

Example with link-only sources (not recommended)

3 sources

Source 1

Props

Message

*required
Name	Type	Description
contentrequired	string	Message content
rolerequired	'user' \| 'bot'	Role of the user sending the message
actions	{ positive?: ActionProps; negative?: ActionProps; copy?: ActionProps; share?: ActionProps; listen?: ActionProps; }	Props for message actions, such as feedback (positive or negative), copy button, share, and listen
attachmentId	string	Unique identifier of file attached to the message
attachmentName	string	Name of file attached to the message
avatar	string	Avatar src for the user
id	string	Unique id for message
isLoading	boolean	Set this to true if message is being loaded
name	string	Name of the user
onAttachmentClick	() => void	Callback for when attachment label is clicked
onAttachmentClose	(attachmentId: string) => void	Callback for when attachment label is closed
sources	SourcesCardProps
timestamp	string	Timestamp for the message

PreviewAttachment

*required
Name	Type	Default	Description
coderequired	string		Text shown in code editor
fileNamerequired	string		Filename, including extension, of file shown in modal
handleModalTogglerequired	(event: React.MouseEvent \| MouseEvent \| KeyboardEvent) => void		Function called when modal is toggled
isModalOpenrequired	boolean		Whether modal is open
onEditrequired	(event: React.MouseEvent \| MouseEvent \| KeyboardEvent) => void		Function called when edit button is clicked
displayMode	ChatbotDisplayMode	ChatbotDisplayMode.default	Display mode for the Chatbot parent; this influences the styles applied
onDismiss	(event: React.MouseEvent \| MouseEvent \| KeyboardEvent) => void	undefined	Function called when dismiss button is clicked
title	string	'Preview attachment'	Title of modal

AttachmentEdit

*required
Name	Type	Default	Description
coderequired	string		Text shown in code editor
fileNamerequired	string		Filename, including extension, of file shown in editor
handleModalTogglerequired	(event: React.MouseEvent \| MouseEvent \| KeyboardEvent) => void		Function that opens and closes modal
isModalOpenrequired	boolean		Whether modal is open
onCancelrequired	(event: React.MouseEvent \| MouseEvent \| KeyboardEvent) => void		Function that runs when cancel button is clicked
onSaverequired	(event: React.MouseEvent \| MouseEvent \| KeyboardEvent, code: string) => void		Function that runs when save button is clicked; allows consumers to use the edited code string
displayMode	ChatbotDisplayMode	ChatbotDisplayMode.default	Display mode for the Chatbot parent; this influences the styles applied
title	string	'Edit attachment'	Title of modal

ActionProps

*required
Name	Type	Description
ariaLabel	string	Aria-label for the button
className	string	Class name for the button
isDisabled	boolean	Props to control if the attach button should be disabled
onClick	((event: MouseEvent \| React.MouseEvent<Element, MouseEvent> \| KeyboardEvent) => void) \| undefined	On-click handler for the button
tooltipContent	string	Content shown in the tooltip
tooltipProps	TooltipProps	Props to control the PF Tooltip component

SourcesCardProps

*required
Name	Type	Description
sourcesrequired	{ title?: string; link: string; body?: React.ReactNode \| string }[]	Content rendered inside the paginated card
className	string	Additional classes for the pagination navigation container.
isDisabled	boolean	Flag indicating if the pagination is disabled.
ofWord	string	Label for the English word "of".
onNextClick	(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void	Function called when user clicks to navigate to next page.
onPreviousClick	(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void	Function called when user clicks to navigate to previous page.
onSetPage	(event: React.MouseEvent \| React.KeyboardEvent \| MouseEvent, newPage: number) => void	Function called when page is changed.
paginationAriaLabel	string	Accessible label for the pagination component.
sourceWord	string	Label for the English word "source"
sourceWordPlural	string	Plural for sourceWord
toNextPageAriaLabel	string	Accessible label for the button which moves to the next page.
toPreviousPageAriaLabel	string	Accessible label for the button which moves to the previous page.

View source on GitHub