@patternfly/chatbot 1.0.0

package/src/Message/Message.tsx

@@ -0,0 +1,487 @@
+// ============================================================================
+// Chatbot Main - Message
+// ============================================================================
+import { forwardRef, ReactNode, useEffect, useState } from 'react';
+import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { Options } from 'react-markdown';
+import {
+  AlertProps,
+  Avatar,
+  AvatarProps,
+  ButtonProps,
+  FormProps,
+  Label,
+  LabelGroupProps,
+  Timestamp,
+  Truncate
+} from '@patternfly/react-core';
+import MessageLoading from './MessageLoading';
+import { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
+import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
+import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
+import SourcesCard, { SourcesCardProps } from '../SourcesCard';
+import QuickStartTile from './QuickStarts/QuickStartTile';
+import { QuickStart, QuickstartAction } from './QuickStarts/types';
+import QuickResponse from './QuickResponse/QuickResponse';
+import UserFeedback, { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import UserFeedbackComplete, { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
+import { TableProps } from '@patternfly/react-table';
+// see the full list of styles here: https://highlightjs.org/examples
+import 'highlight.js/styles/vs2015.css';
+import { PluggableList } from 'unified';
+import ErrorMessage from './ErrorMessage/ErrorMessage';
+import MessageInput from './MessageInput';
+import ToolResponse, { ToolResponseProps } from '../ToolResponse';
+import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
+import ToolCall, { ToolCallProps } from '../ToolCall';
+import MarkdownContent from '../MarkdownContent';
+import { css } from '@patternfly/react-styles';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
+
+export interface MessageAttachment {
+  /** Name of file attached to the message */
+  name: string;
+  /** Unique identifier of file attached to the message */
+  id?: string | number;
+  /** Callback for when attachment label is clicked */
+  onClick?: (event: React.MouseEvent, name: string, id?: string | number) => void;
+  /** Callback for when attachment label is closed */
+  onClose?: (event: React.MouseEvent, name: string, id?: string | number) => void;
+  /** Whether file is loading */
+  isLoading?: boolean;
+  /** Aria label for attachment close button */
+  closeButtonAriaLabel?: string;
+  /** Custom test id for the language in the attachment component */
+  languageTestId?: string;
+  /** Custom test id for the loading spinner in the attachment component */
+  spinnerTestId?: string;
+}
+
+export interface MessageExtraContent {
+  /** Content to display before the main content */
+  beforeMainContent?: ReactNode;
+
+  /** Content to display after the main content */
+  afterMainContent?: ReactNode;
+
+  /** Content to display at the end */
+  endContent?: ReactNode;
+}
+
+export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
+  /** Children to render instead of the default message structure, allowing more fine-tuned message control. When provided, this will override the default rendering of content, toolResponse, deepThinking, toolCall, sources, quickStarts, actions, etc. */
+  children?: ReactNode;
+  /** Unique id for message */
+  id?: string;
+  /** Role of the user sending the message */
+  role: 'user' | 'bot';
+  /** Whether the message is aligned at the horizontal start or end of the message container. */
+  alignment?: 'start' | 'end';
+  /** Flag indicating whether message metadata (user name and timestamp) are visible. */
+  isMetadataVisible?: boolean;
+  /** Message content */
+  content?: string;
+  /** Extra Message content */
+  extraContent?: MessageExtraContent;
+  /** Name of the user */
+  name?: string;
+  /** Avatar for the user. Pass a string for an image src, or a ReactNode for custom content like an svg or icon. Avatars for Messages with role="bot" are pre-defined and not customizable. */
+  avatar?: string | ReactNode;
+  /** Flag indicating whether the avatar is hidden */
+  isAvatarHidden?: boolean;
+  /** Timestamp for the message */
+  timestamp?: string;
+  /** Set this to true if message is being loaded */
+  isLoading?: boolean;
+  /** Array of attachments attached to a message */
+  attachments?: MessageAttachment[];
+  /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen.
+   * Can be a single actions object or an array of action group objects. When passing an array, you can pass an object of actions or
+   * an object that contains an actions property for finer control of selection persistence.
+   */
+  actions?:
+    | {
+        [key: string]: ActionProps;
+      }
+    | {
+        [key: string]: ActionProps;
+      }[]
+    | {
+        actions: {
+          [key: string]: ActionProps;
+        };
+        persistActionSelection?: boolean;
+      }[];
+  /** When true, the selected action will persist even when clicking outside the component.
+   * When false (default), clicking outside or clicking another action will deselect the current selection.
+   * For finer control of multiple action groups, use persistActionSelection on each group.
+   */
+  persistActionSelection?: boolean;
+  /** Flag indicating whether the actions container is only visible when a message is hovered or an action would receive focus. Note
+   * that setting this to true will append tooltips inline instead of the document.body.
+   */
+  showActionsOnInteraction?: boolean;
+  /** Sources for message */
+  sources?: SourcesCardProps;
+  /** Label for the English word "AI," used to tag messages with role "bot" */
+  botWord?: string;
+  /** Label for the English "Loading message," displayed to screenreaders when loading a message */
+  loadingWord?: string;
+  /** Props for code blocks */
+  codeBlockProps?: CodeBlockMessageProps;
+  /** Props for quick responses */
+  quickResponses?: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Props for user feedback card */
+  userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
+  /** Props for user feedback response */
+  userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
+  /** Whether avatar is round */
+  hasRoundAvatar?: boolean;
+  /** Any additional props applied to the avatar, for additional customization  */
+  avatarProps?: Omit<AvatarProps, 'alt'>;
+  /** Props for QuickStart card */
+  quickStarts?: {
+    quickStart: QuickStart;
+    onSelectQuickStart: (id?: string) => void;
+    minuteWord?: string;
+    minuteWordPlural?: string;
+    prerequisiteWord?: string;
+    prerequisiteWordPlural?: string;
+    quickStartButtonAriaLabel?: string;
+    className?: string;
+    onClick?: () => void;
+    action?: QuickstartAction;
+  };
+  /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
+  isLiveRegion?: boolean;
+  /** Ref applied to message  */
+  innerRef?: Ref<HTMLDivElement>;
+  /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+  tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+  /** Additional rehype plugins passed from the consumer */
+  additionalRehypePlugins?: PluggableList;
+  /** Additional remark plugins passed from the consumer */
+  additionalRemarkPlugins?: PluggableList;
+  /** Whether to open links in message in new tab. */
+  openLinkInNewTab?: boolean;
+  /** Optional inline error message that can be displayed in the message */
+  error?: AlertProps;
+  /** Props for links */
+  linkProps?: ButtonProps;
+  /** Whether message is in edit mode */
+  isEditable?: boolean;
+  /** Placeholder for edit input */
+  editPlaceholder?: string;
+  /** Label for the English word "Update" used in edit mode. */
+  updateWord?: string;
+  /** Label for the English word "Cancel" used in edit mode. */
+  cancelWord?: string;
+  /** Callback function for when edit mode update button is clicked */
+  onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Callback functionf or when edit cancel update button is clicked */
+  onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Ref applied to editable message input */
+  inputRef?: Ref<HTMLTextAreaElement>;
+  /** Props for edit form */
+  editFormProps?: FormProps;
+  /** Sets message to compact styling. */
+  isCompact?: boolean;
+  /** Disables markdown parsing for message, allowing only text input */
+  isMarkdownDisabled?: boolean;
+  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+  reactMarkdownProps?: Options;
+  /** Props for tool response card */
+  toolResponse?: ToolResponseProps;
+  /** Props for deep thinking card */
+  deepThinking?: DeepThinkingProps;
+  /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+  remarkGfmProps?: Options;
+  /** Props for a tool call message */
+  toolCall?: ToolCallProps;
+  /** Whether user messages default to stripping out images in markdown */
+  hasNoImagesInUserMessages?: boolean;
+  /** Sets background colors to be appropriate on primary chatbot background */
+  isPrimary?: boolean;
+  /** When true, automatically swaps to filled icon variants when predefined actions are clicked. */
+  useFilledIconsOnClick?: boolean;
+}
+
+export const MessageBase: FunctionComponent<MessageProps> = ({
+  children,
+  role,
+  alignment = 'start',
+  isMetadataVisible = true,
+  content,
+  extraContent,
+  name,
+  avatar,
+  isAvatarHidden = false,
+  timestamp,
+  isLoading,
+  actions,
+  persistActionSelection,
+  showActionsOnInteraction = false,
+  sources,
+  botWord = 'AI',
+  loadingWord = 'Loading message',
+  codeBlockProps,
+  quickResponses,
+  quickResponseContainerProps = { numLabels: 5 },
+  attachments,
+  hasRoundAvatar = true,
+  avatarProps,
+  quickStarts,
+  userFeedbackForm,
+  userFeedbackComplete,
+  isLiveRegion = true,
+  innerRef,
+  tableProps,
+  openLinkInNewTab = true,
+  additionalRehypePlugins = [],
+  additionalRemarkPlugins = [],
+  linkProps,
+  error,
+  isEditable,
+  editPlaceholder = 'Edit prompt message...',
+  updateWord = 'Update',
+  cancelWord = 'Cancel',
+  onEditUpdate,
+  onEditCancel,
+  inputRef,
+  editFormProps,
+  isCompact,
+  isMarkdownDisabled,
+  reactMarkdownProps,
+  toolResponse,
+  deepThinking,
+  remarkGfmProps,
+  toolCall,
+  hasNoImagesInUserMessages = true,
+  isPrimary,
+  useFilledIconsOnClick,
+  ...props
+}: MessageProps) => {
+  const [messageText, setMessageText] = useState(content);
+
+  useEffect(() => {
+    setMessageText(content);
+  }, [content]);
+
+  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
+
+  let avatarClassName: string | undefined;
+  if (avatarProps && 'className' in avatarProps) {
+    const { className, ...rest } = avatarProps;
+    avatarClassName = className;
+    avatarProps = { ...rest };
+  }
+  // Keep timestamps consistent between Timestamp component and aria-label
+  const date = new Date();
+  const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
+  const handleMarkdown = () => (
+    <MarkdownContent
+      content={messageText}
+      isMarkdownDisabled={isMarkdownDisabled}
+      codeBlockProps={codeBlockProps}
+      tableProps={tableProps}
+      openLinkInNewTab={openLinkInNewTab}
+      additionalRehypePlugins={additionalRehypePlugins}
+      additionalRemarkPlugins={additionalRemarkPlugins}
+      linkProps={linkProps}
+      reactMarkdownProps={reactMarkdownProps}
+      remarkGfmProps={remarkGfmProps}
+      hasNoImages={role === 'user' && hasNoImagesInUserMessages}
+      isPrimary={isPrimary}
+    />
+  );
+
+  const renderMessage = () => {
+    if (isLoading) {
+      return <MessageLoading loadingWord={loadingWord} isPrimary={isPrimary} />;
+    }
+    if (isEditable) {
+      return (
+        <>
+          {beforeMainContent && <>{beforeMainContent}</>}
+          <MessageInput
+            content={messageText}
+            editPlaceholder={editPlaceholder}
+            updateWord={updateWord}
+            cancelWord={cancelWord}
+            onEditUpdate={(event: ReactMouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {
+              onEditUpdate && onEditUpdate(event);
+              setMessageText(value);
+            }}
+            onEditCancel={onEditCancel}
+            inputRef={inputRef}
+            {...editFormProps}
+          />
+        </>
+      );
+    }
+    return (
+      <>
+        {beforeMainContent && <>{beforeMainContent}</>}
+        {error ? <ErrorMessage {...error} /> : handleMarkdown()}
+      </>
+    );
+  };
+
+  const avatarClasses = css(
+    `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`
+  );
+
+  /* We are using an empty alt tag intentionally in order to reduce noise on screen readers */
+  const botAvatar = (
+    <Avatar className={avatarClasses} alt="" isBordered {...avatarProps} src={undefined} initials={undefined}>
+      <RhUiAiChatbotIcon />
+    </Avatar>
+  );
+
+  let _avatar: ReactNode | undefined;
+
+  if (!isAvatarHidden) {
+    if (role === 'bot') {
+      _avatar = botAvatar;
+    } else if (avatar) {
+      _avatar =
+        typeof avatar === 'string' ? (
+          <Avatar className={avatarClasses} src={avatar} alt="" {...avatarProps} />
+        ) : (
+          <Avatar className={avatarClasses} alt="" {...avatarProps}>
+            {avatar}
+          </Avatar>
+        );
+    } else if (avatarProps?.initials) {
+      _avatar = <Avatar className={avatarClasses} alt="" {...avatarProps} />;
+    }
+  }
+
+  return (
+    <section
+      aria-label={`Message from ${role} - ${dateString}`}
+      className={css(`pf-chatbot__message pf-chatbot__message--${role}`, alignment === 'end' && 'pf-m-end')}
+      aria-live={isLiveRegion ? 'polite' : undefined}
+      aria-atomic={isLiveRegion ? false : undefined}
+      ref={innerRef}
+      {...props}
+    >
+      {_avatar && _avatar}
+      <div className="pf-chatbot__message-contents">
+        {isMetadataVisible && (
+          <div className="pf-chatbot__message-meta">
+            {name && (
+              <span className="pf-chatbot__message-name">
+                <Truncate content={name} />
+              </span>
+            )}
+            {role === 'bot' && (
+              <Label variant="outline" isCompact>
+                {botWord}
+              </Label>
+            )}
+            <Timestamp date={date}>{timestamp}</Timestamp>
+          </div>
+        )}
+        <div className="pf-chatbot__message-response">
+          {children ? (
+            <>{children}</>
+          ) : (
+            <>
+              <div className="pf-chatbot__message-and-actions">
+                {renderMessage()}
+                {afterMainContent && <>{afterMainContent}</>}
+                {toolResponse && <ToolResponse {...toolResponse} />}
+                {deepThinking && <DeepThinking {...deepThinking} />}
+                {toolCall && <ToolCall {...toolCall} />}
+                {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
+                {quickStarts && quickStarts.quickStart && (
+                  <QuickStartTile
+                    quickStart={quickStarts.quickStart}
+                    onSelectQuickStart={quickStarts.onSelectQuickStart}
+                    minuteWord={quickStarts.minuteWord}
+                    minuteWordPlural={quickStarts.minuteWordPlural}
+                    prerequisiteWord={quickStarts.prerequisiteWord}
+                    prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
+                    quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+                    isCompact={isCompact}
+                  />
+                )}
+                {!isLoading && !isEditable && actions && (
+                  <>
+                    {Array.isArray(actions) ? (
+                      <div
+                        className={css(
+                          'pf-chatbot__response-actions-groups',
+                          showActionsOnInteraction && 'pf-m-visible-interaction'
+                        )}
+                      >
+                        {actions.map((actionGroup, index) => (
+                          <ResponseActions
+                            key={index}
+                            actions={actionGroup.actions || actionGroup}
+                            persistActionSelection={persistActionSelection || actionGroup.persistActionSelection}
+                            useFilledIconsOnClick={useFilledIconsOnClick}
+                          />
+                        ))}
+                      </div>
+                    ) : (
+                      <ResponseActions
+                        actions={actions}
+                        persistActionSelection={persistActionSelection}
+                        useFilledIconsOnClick={useFilledIconsOnClick}
+                        showActionsOnInteraction={showActionsOnInteraction}
+                      />
+                    )}
+                  </>
+                )}
+                {userFeedbackForm && (
+                  <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />
+                )}
+                {userFeedbackComplete && (
+                  <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
+                )}
+                {!isLoading && quickResponses && (
+                  <QuickResponse
+                    quickResponses={quickResponses}
+                    quickResponseContainerProps={quickResponseContainerProps}
+                    isCompact={isCompact}
+                  />
+                )}
+              </div>
+              {attachments && (
+                <div className="pf-chatbot__message-attachments-container">
+                  {attachments.map((attachment) => (
+                    <div key={attachment.id ?? attachment.name} className="pf-chatbot__message-attachment">
+                      <FileDetailsLabel
+                        fileName={attachment.name}
+                        fileId={attachment.id}
+                        onClose={attachment.onClose}
+                        onClick={attachment.onClick}
+                        isLoading={attachment.isLoading}
+                        closeButtonAriaLabel={attachment.closeButtonAriaLabel}
+                        languageTestId={attachment.languageTestId}
+                        spinnerTestId={attachment.spinnerTestId}
+                        variant={isPrimary ? 'outline' : undefined}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+              {!isLoading && endContent && <>{endContent}</>}
+            </>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const Message = forwardRef((props: MessageProps, ref: Ref<HTMLDivElement>) => (
+  <MessageBase innerRef={ref} {...props} />
+));
+
+export default Message;

package/src/Message/MessageAndActions/MessageAndActions.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageAndActions from './MessageAndActions';
+
+test('Renders with children', () => {
+  render(<MessageAndActions>Test content</MessageAndActions>);
+  expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+
+test('Renders with pf-chatbot__message-and-actions class by default', () => {
+  render(<MessageAndActions>Test content</MessageAndActions>);
+  expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__message-and-actions', { exact: true });
+});
+
+test('Renders with custom className', () => {
+  render(<MessageAndActions className="custom-class">Test content</MessageAndActions>);
+  expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+
+test('Spreads additional props', () => {
+  render(<MessageAndActions id="test-id">Test content</MessageAndActions>);
+  expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

package/src/Message/MessageAndActions/MessageAndActions.tsx

@@ -0,0 +1,22 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container that wraps the primary message content and inline actions, such as ToolCall, ToolResponse, DeepThinking, ResponseActions, etc.
+ * Attachments should not be rendered inside this container.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MessageAndActionsProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside the message and actions container. */
+  children: ReactNode;
+  /** Additional classes applied to the message and actions container. */
+  className?: string;
+}
+
+export const MessageAndActions: FunctionComponent<MessageAndActionsProps> = ({ children, className, ...props }) => (
+  <div className={css('pf-chatbot__message-and-actions', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default MessageAndActions;

package/src/Message/MessageAndActions/index.ts

@@ -0,0 +1 @@
+export * from './MessageAndActions';

package/src/Message/MessageAttachments/MessageAttachmentItem.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageAttachmentItem from './MessageAttachmentItem';
+
+test('Renders with children', () => {
+  render(<MessageAttachmentItem>Test content</MessageAttachmentItem>);
+  expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+
+test('Renders with pf-chatbot__message-attachment class by default', () => {
+  render(<MessageAttachmentItem>Test content</MessageAttachmentItem>);
+  expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__message-attachment', { exact: true });
+});
+
+test('Renders with custom className', () => {
+  render(<MessageAttachmentItem className="custom-class">Test content</MessageAttachmentItem>);
+  expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+
+test('Spreads additional props', () => {
+  render(<MessageAttachmentItem id="test-id">Test content</MessageAttachmentItem>);
+  expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

package/src/Message/MessageAttachments/MessageAttachmentItem.tsx

@@ -0,0 +1,25 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container for a single message attachment item, typically the FileDetailsLabel component. You must wrap any attachment components in this container.
+ * Use this component within MessageAttachmentsContainer when passing children to Message to customize its structure.
+ */
+export interface MessageAttachmentItemProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside a single attachment container */
+  children: ReactNode;
+  /** Additional classes applied to the attachment container. */
+  className?: string;
+}
+
+export const MessageAttachmentItem: FunctionComponent<MessageAttachmentItemProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css('pf-chatbot__message-attachment', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default MessageAttachmentItem;

package/src/Message/MessageAttachments/MessageAttachmentsContainer.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageAttachmentsContainer from './MessageAttachmentsContainer';
+
+test('Renders with children', () => {
+  render(<MessageAttachmentsContainer>Test content</MessageAttachmentsContainer>);
+  expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+
+test('Renders with pf-chatbot__message-attachments-container class by default', () => {
+  render(<MessageAttachmentsContainer>Test content</MessageAttachmentsContainer>);
+  expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__message-attachments-container', { exact: true });
+});
+
+test('Renders with custom className', () => {
+  render(<MessageAttachmentsContainer className="custom-class">Test content</MessageAttachmentsContainer>);
+  expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+
+test('Spreads additional props', () => {
+  render(<MessageAttachmentsContainer id="test-id">Test content</MessageAttachmentsContainer>);
+  expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

package/src/Message/MessageAttachments/MessageAttachmentsContainer.tsx

@@ -0,0 +1,25 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container to wrap MessageAttachment components. You must wrap any MessageAttachment components in this container.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MessageAttachmentsContainerProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside the attachments container */
+  children: ReactNode;
+  /** Additional classes applied to the attachments container. */
+  className?: string;
+}
+
+export const MessageAttachmentsContainer: FunctionComponent<MessageAttachmentsContainerProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css('pf-chatbot__message-attachments-container', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default MessageAttachmentsContainer;

package/src/Message/MessageAttachments/index.ts

@@ -0,0 +1,2 @@
+export * from './MessageAttachmentItem';
+export * from './MessageAttachmentsContainer';