@patternfly/chatbot 6.5.0-prerelease.27 → 6.5.0-prerelease.28

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomStructure.tsx

@@ -0,0 +1,102 @@
+import { FunctionComponent } from 'react';
+import Message, {
+  ErrorMessage,
+  MessageAndActions,
+  MessageAttachmentItem,
+  MessageAttachmentsContainer,
+  MessageLoading
+} from '@patternfly/chatbot/dist/dynamic/Message';
+import MarkdownContent from '@patternfly/chatbot/dist/dynamic/MarkdownContent';
+import ToolCall from '@patternfly/chatbot/dist/dynamic/ToolCall';
+import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
+import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
+import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist/dynamic/ResponseActions';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import userAvatar from './user_avatar.svg';
+
+const handlePositiveResponse = () => {
+  // Handle positive response
+};
+
+const handleNegativeResponse = () => {
+  // Handle negative response
+};
+
+const handleCopy = () => {
+  // Handle copy action
+};
+
+const handleDownload = () => {
+  // Handle download action
+};
+
+const handleListen = () => {
+  // Handle listen action
+};
+
+export const MessageWithCustomStructure: FunctionComponent = () => (
+  <>
+    <Message name="Bot" role="bot" avatar={patternflyAvatar}>
+      <MessageAndActions>
+        <MarkdownContent
+          content={`This is a basic message with a more custom, fine-tuned structure. You can pass markdown to the MarkdownContent component, such as **bold content with double asterisks** or _italic content with single underscores_.`}
+        />
+        <ToolCall titleText="Calling 'awesome_tool'" loadingText="Loading 'awesome_tool'" isLoading={true} />
+        <ToolResponse
+          toggleContent="Tool response: fetch_user_data"
+          subheading="Executed in 0.3 seconds"
+          body="Successfully retrieved user data from the database."
+          cardTitle="User Data Response"
+          cardBody="The tool returned 150 user records matching the specified criteria."
+        />
+        <ErrorMessage title="An issue placed within this custom structure." />
+        <MarkdownContent
+          isMarkdownDisabled
+          textComponent={`You can also pass plain text without markdown to the MarkdownContent component by passing the isMarkdownDisabled prop. Optionally, you can also use the textComponent prop instead of content.`}
+        />
+        <ToolCall titleText="Calling 'more_awesome_tool'" loadingText="Loading 'more_awesome_tool'" isLoading={true} />
+        <ToolCall titleText="Calling 'even_more_awesome_tool'" loadingText="Loading 'even_more_awesome_tool'" />
+        <MarkdownContent content={`You can even place a message loading state in the middle of a message:`} />
+        <MessageLoading loadingWord="Loading something in the middle of a custom structured message" />
+        <ResponseActionsGroups>
+          <ResponseActions
+            actions={{
+              positive: { onClick: handlePositiveResponse, ariaLabel: 'Good response' },
+              negative: { onClick: handleNegativeResponse, ariaLabel: 'Bad response' }
+            }}
+            persistActionSelection={true}
+          />
+          <ResponseActions
+            actions={{
+              copy: { onClick: handleCopy, ariaLabel: 'Copy' },
+              download: { onClick: handleDownload, ariaLabel: 'Download' }
+            }}
+            persistActionSelection={false}
+          />
+          <ResponseActions
+            actions={{
+              listen: { onClick: handleListen, ariaLabel: 'Listen' }
+            }}
+            persistActionSelection={true}
+          />
+        </ResponseActionsGroups>
+      </MessageAndActions>
+    </Message>
+    <Message name="User" role="user" avatar={userAvatar}>
+      <MessageAndActions>
+        <MarkdownContent content="This message is in the MessageAndActions container, and the file attachments below are in their own separate MessageAttachmentsContainer!" />
+      </MessageAndActions>
+      <MessageAttachmentsContainer>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="project-report.pdf" />
+        </MessageAttachmentItem>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="data-analysis.csv" />
+        </MessageAttachmentItem>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="presentation-slides.pptx" />
+        </MessageAttachmentItem>
+      </MessageAttachmentsContainer>
+    </Message>
+  </>
+);

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -14,24 +14,40 @@ propComponents:
   [
     'AttachMenu',
     'AttachmentEdit',
-    'FileDetailsProps',
-    'FileDetailsLabelProps',
     'FileDropZone',
-    'PreviewAttachment',
     'Message',
-    'MessageExtraContent',
-    'PreviewAttachment',
+    'ErrorMessage',
+    'MessageLoadingProps',
+    'MessageInputProps',
+    'MessageAndActionsProps',
+    'MarkdownContent',
+    'QuickResponseProps',
+    'QuickStartTileProps',
+    'UserFeedback',
+    'UserFeedbackComplete',
+    'DeepThinking',
+    'ToolCall',
+    'ToolResponse',
+    'SourcesCard',
+    'ResponseActionsGroupsProps',
+    'ResponseActionProps',
     'ActionProps',
-    'SourcesCardProps',
-    'UserFeedbackProps',
-    'UserFeedbackCompleteProps',
-    'QuickResponseProps'
+    'MessageAttachmentsContainerProps',
+    'MessageAttachmentItemProps',
+    'FileDetailsProps',
+    'FileDetailsLabelProps',
+    'MessageExtraContent',
+    'PreviewAttachment'
   ]
 sortValue: 3
 ---
 
-import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import Message, { ErrorMessage, MessageAndActions, MessageLoading, MessageAttachmentItem, MessageAttachmentsContainer } from '@patternfly/chatbot/dist/dynamic/Message';
+import MarkdownContent from '@patternfly/chatbot/dist/dynamic/MarkdownContent';
 import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
+import ToolCall from '@patternfly/chatbot/dist/dynamic/ToolCall';
+import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist/dynamic/ResponseActions';
+import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons';
@@ -271,6 +287,35 @@ You can add custom content to specific parts of a `<Message>` via the `extraCont
 
 ```
 
+### Custom message structure
+
+For more advanced use cases, you can build completely custom message structures by passing children directly to `<Message>`. This approach is useful when you need to customize the order or structure of message elements beyond what the standard props allow.
+
+When creating custom message structures, you must follow an intended composable structure.
+
+1. **Message content and actions:** Wrap in `<MessageAndActions>`. This includes, but is not limited to:
+
+   - `<MarkdownContent>`: For rendering markdown or plain text content
+   - `<ErrorMessage>`
+   - `<MessageLoading>`
+   - `<MessageInput>`
+   - `<ToolCall>`
+   - `<ToolResponse>`
+   - `<DeepThinking>`
+   - `<QuickResponse>`
+   - `<QuickStartTile>`
+   - `<UserFeedback>` and `<UserFeedbackComplete>`
+   - `<SourcesCard>`
+   - `<ResponseActionsGroups>` and `<ResponseActions>`
+
+2. **File attachments:** Placed outside `<MessageAndActions>` and wrapped in attachment containers:
+   - `<MessageAttachmentsContainer>`: Container for all attachments
+   - `<MessageAttachmentItem>`: Individual attachment wrapper (contains `<FileDetailsLabel>` or other attachment components)
+
+```ts file="./MessageWithCustomStructure.tsx"
+
+```
+
 ## File attachments
 
 ### Messages with attachments

package/src/MarkdownContent/MarkdownContent.tsx

@@ -30,10 +30,15 @@ import SuperscriptMessage from '../Message/SuperscriptMessage/SuperscriptMessage
 import { ButtonProps } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 
+/**
+ * MarkdownContent renders content either as plain text or with content with markdown support.
+ *
+ * Use this component when passing children to Message to customize its structure.
+ */
 export interface MarkdownContentProps {
-  /** The markdown content to render */
+  /** The content to render. Supports markdown formatting by default, or plain text when isMarkdownDisabled is true. */
   content?: string;
-  /** Disables markdown parsing, allowing only text input */
+  /** Disables markdown parsing, allowing only plain text input */
   isMarkdownDisabled?: boolean;
   /** Props for code blocks */
   codeBlockProps?: CodeBlockMessageProps;

package/src/Message/ErrorMessage/ErrorMessage.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ErrorMessage from './ErrorMessage';
+
+test('Renders with title', () => {
+  render(<ErrorMessage title="Error occurred" />);
+
+  expect(screen.getByText('Error occurred')).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<ErrorMessage title="Error occurred">This is the error message body</ErrorMessage>);
+
+  expect(screen.getByText('This is the error message body')).toBeVisible();
+});
+
+test('Renders with action links', () => {
+  const actionLinks = (
+    <a href="#retry" data-testid="retry-link">
+      Retry action link
+    </a>
+  );
+  render(<ErrorMessage title="Error occurred" actionLinks={actionLinks} />);
+
+  expect(screen.getByText('Retry action link')).toBeVisible();
+});
+
+test('Renders with custom className', () => {
+  render(<ErrorMessage title="Error occurred" className="custom-error-class" />);
+
+  expect(screen.getByText('Error occurred').parentElement).toHaveClass('custom-error-class');
+});
+
+test('Renders with spread props', () => {
+  render(<ErrorMessage title="Error occurred" id="test-error-id" />);
+
+  expect(screen.getByText('Error occurred').parentElement).toHaveAttribute('id', 'test-error-id');
+});

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -4,8 +4,23 @@
 
 import { Alert, AlertProps } from '@patternfly/react-core';
 
-const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (
-  <Alert isInline variant="danger" title={title} actionLinks={actionLinks} {...props}>
+/**
+ * ErrorMessage displays an inline danger alert for error states in messages.
+ * Use this component when passing children to Message to display error information.
+ */
+export interface ErrorMessageProps extends Partial<AlertProps> {
+  /** Content to display in the error alert body */
+  children?: React.ReactNode;
+  /** Additional classes for the error alert */
+  className?: string;
+  /** Title of the error alert */
+  title?: React.ReactNode;
+  /** Action links to display in the alert footer */
+  actionLinks?: React.ReactNode;
+}
+
+export const ErrorMessage = ({ title, actionLinks, children, className, ...props }: ErrorMessageProps) => (
+  <Alert isInline variant="danger" title={title} actionLinks={actionLinks} className={className} {...props}>
     {children}
   </Alert>
 );

package/src/Message/Message.tsx

@@ -67,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 */
@@ -193,6 +195,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
+  children,
   role,
   content,
   extraContent,
@@ -341,74 +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 && (
-              <>
-                {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} />
+          {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} />
                 )}
-              </>
-            )}
-            {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}
+                {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',

package/src/Message/MessageLoading.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageLoading from './MessageLoading';
+
+test('Renders with pf-chatbot__message-loading class by default', () => {
+  render(<MessageLoading data-testid="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveClass('pf-chatbot__message-loading', { exact: true });
+});
+
+test('Renders with pf-m-primary class when isPrimary is true', () => {
+  render(<MessageLoading data-testid="test-id" isPrimary />);
+  expect(screen.getByTestId('test-id')).toHaveClass('pf-chatbot__message-loading pf-m-primary');
+});
+
+test('Renders loading word when loadingWord is passed', () => {
+  render(<MessageLoading loadingWord="Loading message" />);
+  expect(screen.getByText('Loading message')).toBeInTheDocument();
+});
+
+test('Spreads additional props', () => {
+  render(<MessageLoading data-testid="test-id" id="custom-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'custom-id');
+});