feat(Messages): allowed more composable structures

Author: thatblindgeye

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

@@ -19,6 +19,10 @@ propComponents:
     'FileDropZone',
     'PreviewAttachment',
     'Message',
+    'MessageAndActionsProps',
+    'MessageAttachmentsContainerProps',
+    'MessageAttachmentProps',
+    'ResponseActionsGroupsProps',
     'MessageExtraContent',
     'PreviewAttachment',
     'ActionProps',

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

packages/module/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');
+});

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

@@ -0,0 +1,25 @@
+// ============================================================================
+// Message And Actions - Container for message content and actions
+// ============================================================================
+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;

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

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

packages/module/src/Message/MessageAttachment/MessageAttachment.tsx

@@ -0,0 +1,24 @@
+// ============================================================================
+// 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> {
+  /** 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 }) => (
+  <div className={css('pf-chatbot__message-attachment', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default MessageAttachment;

packages/module/src/Message/MessageAttachmentsContainer/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');
+});

packages/module/src/Message/MessageAttachmentsContainer/MessageAttachmentsContainer.tsx

@@ -0,0 +1,28 @@
+// ============================================================================
+// Message Attachments Container - Container for message attachments
+// ============================================================================
+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;

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

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

packages/module/src/Message/ResponseActionsGroups/ResponseActionsGroups.tsx

@@ -0,0 +1,28 @@
+// ============================================================================
+// Response Actions Groups - Container for multiple action groups
+// ============================================================================
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container for grouping multiple related ResponseActions components, typically used for having different persistence states amongst groups.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface ResponseActionsGroupsProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside the response actions groups container */
+  children: ReactNode;
+  /** Additional classes applied to the response actions groups container. */
+  className?: string;
+}
+
+export const ResponseActionsGroups: FunctionComponent<ResponseActionsGroupsProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css('pf-chatbot__response-actions-groups', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default ResponseActionsGroups;