Renamed MessageAttachments, added tests for Loading, moved Action groups

Author: thatblindgeye

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -12,24 +12,35 @@ source: react
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 propComponents:
   [
+    'ActionProps',
     'AttachMenu',
     'AttachmentEdit',
     'FileDetailsProps',
     'FileDetailsLabelProps',
     'FileDropZone',
-    'PreviewAttachment',
     'Message',
-    'MessageAndActionsProps',
-    'MessageAttachmentsContainerProps',
-    'MessageAttachmentProps',
-    'ResponseActionsGroupsProps',
+    'MessageAndActions',
+    'ResponseActionsGroups',
+    'ResponseActions',
+    'MessageAttachmentsContainer',
+    'MessageAttachmentItem',
     'MessageExtraContent',
+    'MessageInput',
+    'MessageLoading',
+    'ErrorMessage',
     'PreviewAttachment',
-    'ActionProps',
-    'SourcesCardProps',
+    'QuickResponse',
+    'QuickStartTile',
+    'QuickStart',
+    'QuickStartAction',
+    'DeepThinking',
+    'ToolCall',
+    'ToolResponse',
+    'SourcesCard',
+    'UserFeedback',
+    'UserFeedbackComplete',
     'UserFeedbackProps',
-    'UserFeedbackCompleteProps',
-    'QuickResponseProps'
+    'UserFeedbackCompleteProps'
   ]
 sortValue: 3
 ---

packages/module/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;

packages/module/src/Message/MessageAndActions/MessageAndActions.tsx

@@ -1,6 +1,3 @@
-// ============================================================================
-// Message And Actions - Container for message content and actions
-// ============================================================================
 import { FunctionComponent, HTMLProps, ReactNode } from 'react';
 import { css } from '@patternfly/react-styles';
 

…ageAttachment/MessageAttachment.test.tsx …tachments/MessageAttachmentItem.test.tsxpackages/module/src/Message/MessageAttachment/MessageAttachment.test.tsx renamed to packages/module/src/Message/MessageAttachments/MessageAttachmentItem.test.tsx packages/module/src/Message/MessageAttachment/MessageAttachment.test.tsx renamed to packages/module/src/Message/MessageAttachments/MessageAttachmentItem.test.tsx

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

…/MessageAttachment/MessageAttachment.tsx …ageAttachments/MessageAttachmentItem.tsxpackages/module/src/Message/MessageAttachment/MessageAttachment.tsx renamed to packages/module/src/Message/MessageAttachments/MessageAttachmentItem.tsx packages/module/src/Message/MessageAttachment/MessageAttachment.tsx renamed to packages/module/src/Message/MessageAttachments/MessageAttachmentItem.tsx

@@ -1,24 +1,25 @@
-// ============================================================================
-// Message Attachment - Container for a single message attachment
-// ============================================================================
 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 MessageAttachmentProps extends HTMLProps<HTMLDivElement> {
+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 MessageAttachment: FunctionComponent<MessageAttachmentProps> = ({ children, className, ...props }) => (
+export const MessageAttachmentItem: FunctionComponent<MessageAttachmentItemProps> = ({
+  children,
+  className,
+  ...props
+}) => (
   <div className={css('pf-chatbot__message-attachment', className)} {...props}>
     {children}
   </div>
 );
 
-export default MessageAttachment;
+export default MessageAttachmentItem;

…ner/MessageAttachmentsContainer.test.tsx …nts/MessageAttachmentsContainer.test.tsxpackages/module/src/Message/MessageAttachmentsContainer/MessageAttachmentsContainer.test.tsx renamed to packages/module/src/Message/MessageAttachments/MessageAttachmentsContainer.test.tsx packages/module/src/Message/MessageAttachmentsContainer/MessageAttachmentsContainer.test.tsx renamed to packages/module/src/Message/MessageAttachments/MessageAttachmentsContainer.test.tsx

@@ -1,6 +1,3 @@
-// ============================================================================
-// Message Attachments Container - Container for message attachments
-// ============================================================================
 import { FunctionComponent, HTMLProps, ReactNode } from 'react';
 import { css } from '@patternfly/react-styles';
 

…ontainer/MessageAttachmentsContainer.tsx …achments/MessageAttachmentsContainer.tsxpackages/module/src/Message/MessageAttachmentsContainer/MessageAttachmentsContainer.tsx renamed to packages/module/src/Message/MessageAttachments/MessageAttachmentsContainer.tsx packages/module/src/Message/MessageAttachmentsContainer/MessageAttachmentsContainer.tsx renamed to packages/module/src/Message/MessageAttachments/MessageAttachmentsContainer.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');
+});

packages/module/src/Message/MessageLoading.test.tsx

@@ -2,8 +2,23 @@
 // Chatbot Main - Message - Processing
 // ============================================================================
 
-const MessageLoading = ({ loadingWord, isPrimary }) => (
-  <div className={`pf-chatbot__message-loading ${isPrimary ? 'pf-m-primary' : ''}`}>
+import { FunctionComponent } from 'react';
+import type { HTMLProps } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * MessageLoading displays a loading animation for messages.
+ * Use this component when passing children to Message to show a loading state.
+ */
+export interface MessageLoadingProps extends HTMLProps<HTMLDivElement> {
+  /** Text announced to screen readers during loading. */
+  loadingWord?: string;
+  /** Flag indicating whether primary styling is applied */
+  isPrimary?: boolean;
+}
+
+const MessageLoading: FunctionComponent<MessageLoadingProps> = ({ loadingWord, isPrimary, ...props }) => (
+  <div className={css('pf-chatbot__message-loading', isPrimary && 'pf-m-primary')} {...props}>
     <span className="pf-chatbot__message-loading-dots">
       <span className="pf-v6-screen-reader">{loadingWord}</span>
     </span>

packages/module/src/Message/MessageLoading.tsx

@@ -1,17 +1,5 @@
 export { default } from './Message';
+
 export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
 
 export * from './Message';
-
-// Sub-component containers for flexible message composition
-export { default as MessageAndActions } from './MessageAndActions/MessageAndActions';
-export * from './MessageAndActions/MessageAndActions';
-
-export { default as MessageAttachmentsContainer } from './MessageAttachmentsContainer/MessageAttachmentsContainer';
-export * from './MessageAttachmentsContainer/MessageAttachmentsContainer';
-
-export { default as MessageAttachment } from './MessageAttachment/MessageAttachment';
-export * from './MessageAttachment/MessageAttachment';
-
-export { default as ResponseActionsGroups } from './ResponseActionsGroups/ResponseActionsGroups';
-export * from './ResponseActionsGroups/ResponseActionsGroups';