@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/src/Message/Message.tsx

@@ -3,14 +3,12 @@
 // ============================================================================
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import Markdown, { Options } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { Options } from 'react-markdown';
 import {
   AlertProps,
   Avatar,
   AvatarProps,
   ButtonProps,
-  ContentVariants,
   FormProps,
   Label,
   LabelGroupProps,
@@ -18,42 +16,25 @@ import {
   Truncate
 } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
-import CodeBlockMessage, { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
-import TextMessage from './TextMessage/TextMessage';
+import { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
 import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
 import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
 import SourcesCard, { SourcesCardProps } from '../SourcesCard';
-import ListItemMessage from './ListMessage/ListItemMessage';
-import UnorderedListMessage from './ListMessage/UnorderedListMessage';
-import OrderedListMessage from './ListMessage/OrderedListMessage';
 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 TableMessage from './TableMessage/TableMessage';
-import TrMessage from './TableMessage/TrMessage';
-import TdMessage from './TableMessage/TdMessage';
-import TbodyMessage from './TableMessage/TbodyMessage';
-import TheadMessage from './TableMessage/TheadMessage';
-import ThMessage from './TableMessage/ThMessage';
 import { TableProps } from '@patternfly/react-table';
-import ImageMessage from './ImageMessage/ImageMessage';
-import rehypeUnwrapImages from 'rehype-unwrap-images';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSanitize from 'rehype-sanitize';
-import rehypeHighlight from 'rehype-highlight';
 // see the full list of styles here: https://highlightjs.org/examples
 import 'highlight.js/styles/vs2015.css';
 import { PluggableList } from 'unified';
-import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
-import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 import ToolResponse, { ToolResponseProps } from '../ToolResponse';
 import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
-import SuperscriptMessage from './SuperscriptMessage/SuperscriptMessage';
 import ToolCall, { ToolCallProps } from '../ToolCall';
+import MarkdownContent from '../MarkdownContent';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -86,6 +67,8 @@ export interface MessageExtraContent {
 }
 
 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 */
@@ -97,17 +80,35 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** Name of the user */
   name?: string;
   /** Avatar src for the user */
-  avatar: string;
+  avatar?: string;
   /** 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 */
-  actions?: {
-    [key: string]: ActionProps;
-  };
+  /** 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;
   /** Sources for message */
   sources?: SourcesCardProps;
   /** Label for the English word "AI," used to tag messages with role "bot" */
@@ -189,9 +190,12 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   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;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
+  children,
   role,
   content,
   extraContent,
@@ -200,6 +204,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   timestamp,
   isLoading,
   actions,
+  persistActionSelection,
   sources,
   botWord = 'AI',
   loadingWord = 'Loading message',
@@ -236,6 +241,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   remarkGfmProps,
   toolCall,
   hasNoImagesInUserMessages = true,
+  isPrimary,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -245,14 +251,8 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   }, [content]);
 
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
-  if (openLinkInNewTab) {
-    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
-  }
-  if (additionalRehypePlugins) {
-    rehypePlugins.push(...additionalRehypePlugins);
-  }
-  let avatarClassName;
+
+  let avatarClassName: string | undefined;
   if (avatarProps && 'className' in avatarProps) {
     const { className, ...rest } = avatarProps;
     avatarClassName = className;
@@ -262,161 +262,26 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
-  const disallowedElements = role === 'user' && hasNoImagesInUserMessages ? ['img'] : [];
-  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
-    disallowedElements.push(...reactMarkdownProps.disallowedElements);
-  }
-
-  const handleMarkdown = () => {
-    if (isMarkdownDisabled) {
-      return (
-        <TextMessage component={ContentVariants.p} {...props}>
-          {messageText}
-        </TextMessage>
-      );
-    }
-    return (
-      <Markdown
-        components={{
-          section: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <section {...rest} className={`pf-chatbot__message-text ${rest?.className}`} />;
-          },
-          p: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.p} {...rest} />;
-          },
-          code: ({ children, ...props }) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...codeProps } = props;
-            return (
-              <CodeBlockMessage {...codeProps} {...codeBlockProps}>
-                {children}
-              </CodeBlockMessage>
-            );
-          },
-          h1: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h1} {...rest} />;
-          },
-          h2: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h2} {...rest} />;
-          },
-          h3: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h3} {...rest} />;
-          },
-          h4: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h4} {...rest} />;
-          },
-          h5: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h5} {...rest} />;
-          },
-          h6: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h6} {...rest} />;
-          },
-          blockquote: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.blockquote} {...rest} />;
-          },
-          ul: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <UnorderedListMessage {...rest} />;
-          },
-          ol: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <OrderedListMessage {...rest} />;
-          },
-          li: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <ListItemMessage {...rest} />;
-          },
-          // table requires node attribute for calculating headers for mobile breakpoint
-          table: (props) => <TableMessage {...props} {...tableProps} />,
-          tbody: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TbodyMessage {...rest} />;
-          },
-          thead: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TheadMessage {...rest} />;
-          },
-          tr: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TrMessage {...rest} />;
-          },
-          td: (props) => {
-            // Conflicts with Td type
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, width, ...rest } = props;
-            return <TdMessage {...rest} />;
-          },
-          th: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <ThMessage {...rest} />;
-          },
-          img: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <ImageMessage {...rest} />;
-          },
-          a: (props) => {
-            // node is just the details of the document structure - not needed
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return (
-              // some a types conflict with ButtonProps, but it's ok because we are using an a tag
-              // there are too many to handle manually
-              <LinkMessage {...(rest as any)} {...linkProps}>
-                {props.children}
-              </LinkMessage>
-            );
-          },
-          // used for footnotes
-          sup: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <SuperscriptMessage {...rest} />;
-          }
-        }}
-        remarkPlugins={[[remarkGfm, { ...remarkGfmProps }], ...additionalRemarkPlugins]}
-        rehypePlugins={rehypePlugins}
-        {...reactMarkdownProps}
-        remarkRehypeOptions={{
-          // removes sr-only class from footnote labels applied by default
-          footnoteLabelProperties: { className: [''] },
-          ...reactMarkdownProps?.remarkRehypeOptions
-        }}
-        disallowedElements={disallowedElements}
-      >
-        {messageText}
-      </Markdown>
-    );
-  };
+  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} />;
+      return <MessageLoading loadingWord={loadingWord} isPrimary={isPrimary} />;
     }
     if (isEditable) {
       return (
@@ -456,12 +321,14 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
       {...props}
     >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
-      <Avatar
-        className={`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`}
-        src={avatar}
-        alt=""
-        {...avatarProps}
-      />
+      {avatar && (
+        <Avatar
+          className={`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`}
+          src={avatar}
+          alt=""
+          {...avatarProps}
+        />
+      )}
       <div className="pf-chatbot__message-contents">
         <div className="pf-chatbot__message-meta">
           {name && (
@@ -477,57 +344,82 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
           <Timestamp date={date}>{timestamp}</Timestamp>
         </div>
         <div className="pf-chatbot__message-response">
-          <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 && <ResponseActions actions={actions} />}
-            {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}
+          {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="pf-chatbot__response-actions-groups">
+                        {actions.map((actionGroup, index) => (
+                          <ResponseActions
+                            key={index}
+                            actions={actionGroup.actions || actionGroup}
+                            persistActionSelection={persistActionSelection || actionGroup.persistActionSelection}
+                          />
+                        ))}
+                      </div>
+                    ) : (
+                      <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
+                    )}
+                  </>
+                )}
+                {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>
-              ))}
-            </div>
+              )}
+              {!isLoading && endContent && <>{endContent}</>}
+            </>
           )}
-          {!isLoading && endContent && <>{endContent}</>}
         </div>
       </div>
     </section>

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';

package/src/Message/MessageInput.tsx

@@ -22,7 +22,7 @@ export interface MessageInputProps extends FormProps {
   content?: string;
 }
 
-const MessageInput: FunctionComponent<MessageInputProps> = ({
+export const MessageInput: FunctionComponent<MessageInputProps> = ({
   editPlaceholder = 'Edit prompt message...',
   updateWord = 'Update',
   cancelWord = 'Cancel',