Merge pull request #419 from anujsingla/418-extraContent

Enhance Message Component to Support ReactNode in Content via extraContent Prop

Author: nicolethoen

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

@@ -19,6 +19,7 @@ propComponents:
     'FileDropZone',
     'PreviewAttachment',
     'Message',
+    'MessageExtraContent',
     'PreviewAttachment',
     'ActionProps',
     'SourcesCardProps',
@@ -165,6 +166,16 @@ Messages from users have a different background color to differentiate them from
 
 ```
 
+### Custom message content
+
+**Caution:** Take care when using this feature. It can cause you to stray from accessibility and design best practice standards. If you frequently need add the same component via custom message content, reach out to the PatternFly team. If there's a consistent need for a certain component, we can look into adding native support for additional features.
+
+You can add custom content to specific parts of a `<Message>` via the `extraContent` prop, including additional components (like timestamps, badges, or custom elements). This prop allows you to create dynamic and reusable elements for various use cases, without changing the default message layout.
+
+```js file="./UserMessageWithExtraContent.tsx"
+
+```
+
 ## File attachments
 
 ### Messages with attachments

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

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import userAvatar from './user_avatar.svg';
+import { Alert, Badge, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
+
+const UserActionEndContent = () => {
+  // eslint-disable-next-line no-console
+  const onClick = () => console.log('custom button click');
+  return (
+    <React.Fragment>
+      <Button variant="secondary" ouiaId="Secondary" onClick={onClick}>
+        End content button
+      </Button>
+      <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
+    </React.Fragment>
+  );
+};
+
+const CardInformationAfterMainContent = () => (
+  <Card ouiaId="BasicCard">
+    <CardTitle>This is content card after main content</CardTitle>
+    <CardBody>Body</CardBody>
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);
+
+const BeforeMainContent = () => (
+  <div>
+    <Badge key={1} isRead>
+      7
+    </Badge>
+    <Badge key={2} isRead>
+      24
+    </Badge>
+  </div>
+);
+
+export const UserMessageWithExtraContent: React.FunctionComponent = () => (
+  <>
+    <Message
+      avatar={userAvatar}
+      name="User"
+      role="user"
+      content="This is a main message."
+      timestamp="1 hour ago"
+      extraContent={{
+        beforeMainContent: <BeforeMainContent />,
+        afterMainContent: <CardInformationAfterMainContent />,
+        endContent: <UserActionEndContent />
+      }}
+    />
+  </>
+);

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

@@ -627,4 +627,118 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
     expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
   });
+  it('should render beforeMainContent with main content', () => {
+    const mainContent = 'Main message content';
+    const beforeMainContentText = 'Before main content';
+    const beforeMainContent = <div>{beforeMainContentText}</div>;
+
+    render(
+      <Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ beforeMainContent }} />
+    );
+
+    expect(screen.getByText(beforeMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+  it('should render afterMainContent with main content', () => {
+    const mainContent = 'Main message content';
+    const afterMainContentText = 'After main content';
+    const afterMainContent = <div>{afterMainContentText}</div>;
+
+    render(
+      <Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ afterMainContent }} />
+    );
+
+    expect(screen.getByText(afterMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+
+  it('should render endContent with main content', () => {
+    const mainContent = 'Main message content';
+    const endMainContentText = 'End content';
+    const endContent = <div>{endMainContentText}</div>;
+
+    render(<Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ endContent }} />);
+
+    expect(screen.getByText(endMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+  it('should render all parts of extraContent with main content', () => {
+    const beforeMainContent = <div>Before main content</div>;
+    const afterMainContent = <div>After main content</div>;
+    const endContent = <div>End content</div>;
+
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent, afterMainContent, endContent }}
+      />
+    );
+
+    expect(screen.getByText('Before main content')).toBeTruthy();
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.getByText('After main content')).toBeTruthy();
+    expect(screen.getByText('End content')).toBeTruthy();
+  });
+
+  it('should not render extraContent when not provided', () => {
+    render(<Message avatar="./img" role="user" name="User" content="Main message content" />);
+
+    // Ensure no extraContent is rendered
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.queryByText('Before main content')).toBeFalsy();
+    expect(screen.queryByText('After main content')).toBeFalsy();
+    expect(screen.queryByText('end message content')).toBeFalsy();
+  });
+
+  it('should handle undefined or null values in extraContent gracefully', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent: null, afterMainContent: undefined, endContent: null }}
+      />
+    );
+
+    // Ensure that no extraContent is rendered if they are null or undefined
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.queryByText('Before main content')).toBeFalsy();
+    expect(screen.queryByText('After main content')).toBeFalsy();
+    expect(screen.queryByText('end message content')).toBeFalsy();
+  });
+  it('should render JSX in extraContent correctly', () => {
+    const beforeMainContent = (
+      <div data-testid="before-main-content">
+        <strong>Bold before content</strong>
+      </div>
+    );
+    const afterMainContent = (
+      <div data-testid="after-main-content">
+        <strong>Bold after content</strong>
+      </div>
+    );
+    const endContent = (
+      <div data-testid="end-main-content">
+        <strong>Bold end content</strong>
+      </div>
+    );
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent, afterMainContent, endContent }}
+      />
+    );
+
+    // Check that the JSX is correctly rendered
+    expect(screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
+    expect(screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
+    expect(screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
+  });
 });

packages/module/src/Message/Message.tsx

@@ -2,7 +2,7 @@
 // Chatbot Main - Message
 // ============================================================================
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -56,13 +56,26 @@ export interface MessageAttachment {
   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<React.HTMLProps<HTMLDivElement>, 'role'> {
   /** Unique id for message */
   id?: string;
   /** Role of the user sending the message */
   role: 'user' | 'bot';
   /** Message content */
   content?: string;
+  /** Extra Message content */
+  extraContent?: MessageExtraContent;
   /** Name of the user */
   name?: string;
   /** Avatar src for the user */
@@ -123,6 +136,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
   role,
   content,
+  extraContent,
   name,
   avatar,
   timestamp,
@@ -145,6 +159,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   tableProps,
   ...props
 }: MessageProps) => {
+  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
   let avatarClassName;
   if (avatarProps && 'className' in avatarProps) {
     const { className, ...rest } = avatarProps;
@@ -189,40 +204,44 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
             {isLoading ? (
               <MessageLoading loadingWord={loadingWord} />
             ) : (
-              <Markdown
-                components={{
-                  p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
-                  code: ({ children, ...props }) => (
-                    <CodeBlockMessage {...props} {...codeBlockProps}>
-                      {children}
-                    </CodeBlockMessage>
-                  ),
-                  h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
-                  h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
-                  h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
-                  h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
-                  h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
-                  h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
-                  blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
-                  ul: (props) => <UnorderedListMessage {...props} />,
-                  ol: (props) => <OrderedListMessage {...props} />,
-                  li: (props) => <ListItemMessage {...props} />,
-                  table: (props) => <TableMessage {...props} {...tableProps} />,
-                  tbody: (props) => <TbodyMessage {...props} />,
-                  thead: (props) => <TheadMessage {...props} />,
-                  tr: (props) => <TrMessage {...props} />,
-                  td: (props) => {
-                    // Conflicts with Td type
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { width, ...rest } = props;
-                    return <TdMessage {...rest} />;
-                  },
-                  th: (props) => <ThMessage {...props} />
-                }}
-                remarkPlugins={[remarkGfm]}
-              >
-                {content}
-              </Markdown>
+              <>
+                {beforeMainContent && <>{beforeMainContent}</>}
+                <Markdown
+                  components={{
+                    p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+                    code: ({ children, ...props }) => (
+                      <CodeBlockMessage {...props} {...codeBlockProps}>
+                        {children}
+                      </CodeBlockMessage>
+                    ),
+                    h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+                    h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+                    h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+                    h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+                    h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+                    h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+                    blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+                    ul: (props) => <UnorderedListMessage {...props} />,
+                    ol: (props) => <OrderedListMessage {...props} />,
+                    li: (props) => <ListItemMessage {...props} />,
+                    table: (props) => <TableMessage {...props} {...tableProps} />,
+                    tbody: (props) => <TbodyMessage {...props} />,
+                    thead: (props) => <TheadMessage {...props} />,
+                    tr: (props) => <TrMessage {...props} />,
+                    td: (props) => {
+                      // Conflicts with Td type
+                      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                      const { width, ...rest } = props;
+                      return <TdMessage {...rest} />;
+                    },
+                    th: (props) => <ThMessage {...props} />
+                  }}
+                  remarkPlugins={[remarkGfm]}
+                >
+                  {content}
+                </Markdown>
+                {afterMainContent && <>{afterMainContent}</>}
+              </>
             )}
             {!isLoading && sources && <SourcesCard {...sources} />}
             {quickStarts && quickStarts.quickStart && (
@@ -264,6 +283,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
               ))}
             </div>
           )}
+          {!isLoading && endContent && <>{endContent}</>}
         </div>
       </div>
     </section>