@patternfly/chatbot 6.5.0-prerelease.21 → 6.5.0-prerelease.23

package/src/MarkdownContent/MarkdownContent.test.tsx

@@ -0,0 +1,207 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MarkdownContent from './MarkdownContent';
+import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+
+const BOLD_TEXT = '**Bold text**';
+const ITALIC_TEXT = '*Italic text*';
+const INLINE_CODE = 'Here is inline code: `const x = 5`';
+const CODE_BLOCK = `\`\`\`javascript
+function hello() {
+  console.log('Hello, world!');
+}
+\`\`\``;
+const HEADING = '# Heading 1';
+const LINK = '[PatternFly](https://www.patternfly.org/)';
+const UNORDERED_LIST = `
+* Item 1
+* Item 2
+* Item 3
+`;
+const ORDERED_LIST = `
+1. First item
+2. Second item
+3. Third item
+`;
+const TABLE = `
+| Column 1 | Column 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+`;
+const BLOCKQUOTE = '> This is a blockquote';
+const IMAGE = '![Alt text](https://example.com/image.png)';
+
+describe('MarkdownContent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render bold text correctly', () => {
+    const { container } = render(<MarkdownContent content={BOLD_TEXT} />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold text')).toBeTruthy();
+  });
+
+  it('should render italic text correctly', () => {
+    const { container } = render(<MarkdownContent content={ITALIC_TEXT} />);
+    expect(container.querySelector('em')).toBeTruthy();
+    expect(screen.getByText('Italic text')).toBeTruthy();
+  });
+
+  it('should render inline code correctly', () => {
+    render(<MarkdownContent content={INLINE_CODE} />);
+    expect(screen.getByText(/const x = 5/)).toBeTruthy();
+  });
+
+  it('should render code blocks correctly', () => {
+    render(<MarkdownContent content={CODE_BLOCK} />);
+
+    expect(screen.getByText(/function hello/)).toBeVisible();
+    expect(screen.getByText(/console.log/)).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeVisible();
+  });
+
+  it('should render headings correctly', () => {
+    render(<MarkdownContent content={HEADING} />);
+    expect(screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+  });
+
+  it('should render links correctly', () => {
+    render(<MarkdownContent content={LINK} />);
+    expect(screen.getByRole('link', { name: /PatternFly/i })).toBeTruthy();
+  });
+
+  it('should render unordered lists correctly', () => {
+    render(<MarkdownContent content={UNORDERED_LIST} />);
+    expect(screen.getByText('Item 1')).toBeTruthy();
+    expect(screen.getByText('Item 2')).toBeTruthy();
+    expect(screen.getByText('Item 3')).toBeTruthy();
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+  });
+
+  it('should render ordered lists correctly', () => {
+    render(<MarkdownContent content={ORDERED_LIST} />);
+    expect(screen.getByText('First item')).toBeTruthy();
+    expect(screen.getByText('Second item')).toBeTruthy();
+    expect(screen.getByText('Third item')).toBeTruthy();
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+  });
+
+  it('should render tables correctly', () => {
+    render(<MarkdownContent content={TABLE} tableProps={{ 'aria-label': 'Test table' }} />);
+    expect(screen.getByRole('grid', { name: /Test table/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+  });
+
+  it('should render blockquotes correctly', () => {
+    render(<MarkdownContent content={BLOCKQUOTE} />);
+
+    const quote = screen.getByText(/This is a blockquote/);
+    expect(quote).toBeVisible();
+    expect(quote.closest('.pf-v6-c-content--blockquote')?.tagName).toBe('BLOCKQUOTE');
+  });
+
+  it('should render images when hasNoImages is false', () => {
+    render(<MarkdownContent content={IMAGE} hasNoImages={false} />);
+    expect(screen.getByRole('img', { name: /Alt text/i })).toBeTruthy();
+  });
+
+  it('should not render images when hasNoImages is true', () => {
+    render(<MarkdownContent content={IMAGE} hasNoImages />);
+    expect(screen.queryByRole('img', { name: /Alt text/i })).toBeFalsy();
+  });
+
+  it('should disable markdown rendering when isMarkdownDisabled is true', () => {
+    render(<MarkdownContent content={BOLD_TEXT} isMarkdownDisabled />);
+    expect(screen.getByText('**Bold text**')).toBeTruthy();
+  });
+
+  it('should render text component when isMarkdownDisabled is true and textComponent is provided', () => {
+    const textComponent = <div data-testid="custom-text">Custom text component</div>;
+    render(<MarkdownContent content={BOLD_TEXT} isMarkdownDisabled textComponent={textComponent} />);
+    expect(screen.getByTestId('custom-text')).toBeTruthy();
+    expect(screen.getByText('Custom text component')).toBeTruthy();
+  });
+
+  it('should apply isPrimary prop to elements', () => {
+    const { container } = render(<MarkdownContent content={INLINE_CODE} isPrimary />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+
+  it('should apply shouldRetainStyles prop to elements', () => {
+    const { container } = render(<MarkdownContent content={BOLD_TEXT} shouldRetainStyles />);
+    expect(container.querySelector('.pf-m-markdown')).toBeTruthy();
+  });
+
+  it('should pass codeBlockProps to code blocks', () => {
+    render(<MarkdownContent content={CODE_BLOCK} codeBlockProps={{ 'aria-label': 'Custom code block' }} />);
+    expect(screen.getByRole('button', { name: /Custom code block/i })).toBeTruthy();
+  });
+
+  it('should pass tableProps to tables', () => {
+    render(<MarkdownContent content={TABLE} tableProps={{ 'aria-label': 'Custom table label' }} />);
+    expect(screen.getByRole('grid', { name: /Custom table label/i })).toBeTruthy();
+  });
+
+  it('should open links in new tab when openLinkInNewTab is true', () => {
+    render(<MarkdownContent content={LINK} openLinkInNewTab />);
+    expect(rehypeExternalLinks).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not open links in new tab when openLinkInNewTab is false', () => {
+    render(<MarkdownContent content={LINK} openLinkInNewTab={false} />);
+    expect(rehypeExternalLinks).not.toHaveBeenCalled();
+  });
+
+  it('should pass linkProps to links', async () => {
+    const onClick = jest.fn();
+    render(<MarkdownContent content={LINK} linkProps={{ onClick }} />);
+    const link = screen.getByRole('link', { name: /PatternFly/i });
+    link.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle reactMarkdownProps.disallowedElements', () => {
+    render(<MarkdownContent content={CODE_BLOCK} reactMarkdownProps={{ disallowedElements: ['code'] }} />);
+    // Code block should not render when disallowed
+    expect(screen.queryByRole('button', { name: /Copy code/i })).toBeFalsy();
+  });
+
+  it('should render plain text when no markdown is present', () => {
+    render(<MarkdownContent content="Plain text without markdown" />);
+    expect(screen.getByText('Plain text without markdown')).toBeTruthy();
+  });
+
+  it('should handle empty content', () => {
+    const { container } = render(<MarkdownContent content="" />);
+    expect(container.textContent).toBe('');
+  });
+
+  it('should handle undefined content', () => {
+    const { container } = render(<MarkdownContent />);
+    expect(container.textContent).toBe('');
+  });
+
+  it('should render multiple markdown elements together', () => {
+    const content = `# Heading
+
+**Bold text** and *italic text*
+
+\`\`\`javascript
+const x = 5;
+\`\`\`
+
+[Link](https://example.com)`;
+
+    render(<MarkdownContent content={content} />);
+    expect(screen.getByRole('heading', { name: /Heading/i })).toBeTruthy();
+    expect(screen.getByText('Bold text')).toBeTruthy();
+    expect(screen.getByText('italic text')).toBeTruthy();
+    expect(screen.getByText(/const x = 5/)).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Link/i })).toBeTruthy();
+  });
+});

package/src/MarkdownContent/MarkdownContent.tsx

@@ -0,0 +1,264 @@
+// ============================================================================
+// Markdown Content - Shared component for rendering markdown
+// ============================================================================
+import { type FunctionComponent, ReactNode } from 'react';
+import Markdown, { Options } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { ContentVariants } from '@patternfly/react-core';
+import CodeBlockMessage, { CodeBlockMessageProps } from '../Message/CodeBlockMessage/CodeBlockMessage';
+import TextMessage from '../Message/TextMessage/TextMessage';
+import ListItemMessage from '../Message/ListMessage/ListItemMessage';
+import UnorderedListMessage from '../Message/ListMessage/UnorderedListMessage';
+import OrderedListMessage from '../Message/ListMessage/OrderedListMessage';
+import TableMessage from '../Message/TableMessage/TableMessage';
+import TrMessage from '../Message/TableMessage/TrMessage';
+import TdMessage from '../Message/TableMessage/TdMessage';
+import TbodyMessage from '../Message/TableMessage/TbodyMessage';
+import TheadMessage from '../Message/TableMessage/TheadMessage';
+import ThMessage from '../Message/TableMessage/ThMessage';
+import { TableProps } from '@patternfly/react-table';
+import ImageMessage from '../Message/ImageMessage/ImageMessage';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
+import 'highlight.js/styles/vs2015.css';
+import { PluggableList } from 'unified';
+import LinkMessage from '../Message/LinkMessage/LinkMessage';
+import { rehypeMoveImagesOutOfParagraphs } from '../Message/Plugins/rehypeMoveImagesOutOfParagraphs';
+import SuperscriptMessage from '../Message/SuperscriptMessage/SuperscriptMessage';
+import { ButtonProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+
+export interface MarkdownContentProps {
+  /** The markdown content to render */
+  content?: string;
+  /** Disables markdown parsing, allowing only text input */
+  isMarkdownDisabled?: boolean;
+  /** Props for code blocks */
+  codeBlockProps?: CodeBlockMessageProps;
+  /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+  tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+  /** Additional rehype plugins passed from the consumer */
+  additionalRehypePlugins?: PluggableList;
+  /** Additional remark plugins passed from the consumer */
+  additionalRemarkPlugins?: PluggableList;
+  /** Whether to open links in message in new tab. */
+  openLinkInNewTab?: boolean;
+  /** Props for links */
+  linkProps?: ButtonProps;
+  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+  reactMarkdownProps?: Options;
+  /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+  remarkGfmProps?: Options;
+  /** Whether to strip out images in markdown */
+  hasNoImages?: boolean;
+  /** Sets background colors to be appropriate on primary chatbot background */
+  isPrimary?: boolean;
+  /** Custom component to render when markdown is disabled */
+  textComponent?: ReactNode;
+  /** Flag indicating whether content should retain various styles of its context (typically font-size and text color). */
+  shouldRetainStyles?: boolean;
+}
+
+export const MarkdownContent: FunctionComponent<MarkdownContentProps> = ({
+  content,
+  isMarkdownDisabled,
+  codeBlockProps,
+  tableProps,
+  openLinkInNewTab = true,
+  additionalRehypePlugins = [],
+  additionalRemarkPlugins = [],
+  linkProps,
+  reactMarkdownProps,
+  remarkGfmProps,
+  hasNoImages = false,
+  isPrimary,
+  textComponent,
+  shouldRetainStyles
+}: MarkdownContentProps) => {
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
+  if (openLinkInNewTab) {
+    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
+  }
+  if (additionalRehypePlugins) {
+    rehypePlugins.push(...additionalRehypePlugins);
+  }
+
+  const disallowedElements = hasNoImages ? ['img'] : [];
+  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
+    disallowedElements.push(...reactMarkdownProps.disallowedElements);
+  }
+
+  if (isMarkdownDisabled) {
+    if (textComponent) {
+      return <>{textComponent}</>;
+    }
+    return (
+      <TextMessage component={ContentVariants.p} isPrimary={isPrimary}>
+        {content}
+      </TextMessage>
+    );
+  }
+
+  return (
+    <Markdown
+      components={{
+        section: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return (
+            <section
+              {...rest}
+              className={css('pf-chatbot__message-text', shouldRetainStyles && 'pf-m-markdown', rest?.className)}
+            />
+          );
+        },
+        p: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return (
+            <TextMessage
+              shouldRetainStyles={shouldRetainStyles}
+              component={ContentVariants.p}
+              {...rest}
+              isPrimary={isPrimary}
+            />
+          );
+        },
+        code: ({ children, ...props }) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...codeProps } = props;
+          return (
+            <CodeBlockMessage
+              {...codeProps}
+              {...codeBlockProps}
+              isPrimary={isPrimary}
+              shouldRetainStyles={shouldRetainStyles}
+            >
+              {children}
+            </CodeBlockMessage>
+          );
+        },
+        h1: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h1} {...rest} />;
+        },
+        h2: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h2} {...rest} />;
+        },
+        h3: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h3} {...rest} />;
+        },
+        h4: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h4} {...rest} />;
+        },
+        h5: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h5} {...rest} />;
+        },
+        h6: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h6} {...rest} />;
+        },
+        blockquote: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return (
+            <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.blockquote} {...rest} />
+          );
+        },
+        ul: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <UnorderedListMessage shouldRetainStyles={shouldRetainStyles} {...rest} />;
+        },
+        ol: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <OrderedListMessage shouldRetainStyles={shouldRetainStyles} {...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 shouldRetainStyles={shouldRetainStyles} {...props} {...tableProps} isPrimary={isPrimary} />
+        ),
+        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 shouldRetainStyles={shouldRetainStyles} {...(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}
+    >
+      {content}
+    </Markdown>
+  );
+};
+
+export default MarkdownContent;

package/src/MarkdownContent/index.ts

@@ -0,0 +1,2 @@
+export { default } from './MarkdownContent';
+export * from './MarkdownContent';

package/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -75,6 +75,10 @@
       overflow: hidden !important;
     }
   }
+
+  &.pf-m-markdown .pf-v6-c-code-block__code {
+    font-size: inherit;
+  }
 }
 
 .pf-chatbot__message-inline-code {

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -19,6 +19,7 @@ import {
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import { css } from '@patternfly/react-styles';
 
 export interface CodeBlockMessageProps {
   /** Content rendered in code block */
@@ -41,6 +42,8 @@ export interface CodeBlockMessageProps {
   customActions?: React.ReactNode;
   /** Sets background colors to be appropriate on primary chatbot background */
   isPrimary?: boolean;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
 }
 
 const DEFAULT_EXPANDED_TEXT = 'Show less';
@@ -57,6 +60,7 @@ const CodeBlockMessage = ({
   collapsedText = DEFAULT_COLLAPSED_TEXT,
   customActions,
   isPrimary,
+  shouldRetainStyles,
   ...props
 }: CodeBlockMessageProps) => {
   const [copied, setCopied] = useState(false);
@@ -138,7 +142,7 @@ const CodeBlockMessage = ({
   );
 
   return (
-    <div className="pf-chatbot__message-code-block" ref={codeBlockRef}>
+    <div className={css('pf-chatbot__message-code-block', shouldRetainStyles && 'pf-m-markdown')} ref={codeBlockRef}>
       <CodeBlock actions={actions}>
         <CodeBlockCode>
           <>

package/src/Message/LinkMessage/LinkMessage.scss

@@ -0,0 +1,5 @@
+.pf-v6-c-button.pf-m-link.pf-m-inline {
+  &.pf-m-markdown {
+    font-size: inherit;
+  }
+}

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -5,8 +5,21 @@
 import { Button, ButtonProps } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 import { ExtraProps } from 'react-markdown';
+import { css } from '@patternfly/react-styles';
 
-const LinkMessage = ({ children, target, href, id, ...props }: ButtonProps & ExtraProps) => {
+export interface LinkMessageProps {
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
+}
+
+const LinkMessage = ({
+  children,
+  target,
+  href,
+  id,
+  shouldRetainStyles,
+  ...props
+}: LinkMessageProps & ButtonProps & ExtraProps) => {
   if (target === '_blank') {
     return (
       <Button
@@ -20,6 +33,7 @@ const LinkMessage = ({ children, target, href, id, ...props }: ButtonProps & Ext
         // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
         id={id}
         {...props}
+        className={css(shouldRetainStyles && 'pf-m-markdown', props?.className)}
       >
         {children}
       </Button>
@@ -28,7 +42,15 @@ const LinkMessage = ({ children, target, href, id, ...props }: ButtonProps & Ext
 
   return (
     // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
-    <Button isInline component="a" href={href} variant="link" id={id} {...props}>
+    <Button
+      isInline
+      component="a"
+      href={href}
+      variant="link"
+      id={id}
+      {...props}
+      className={css(shouldRetainStyles && 'pf-m-markdown', props?.className)}
+    >
       {children}
     </Button>
   );

package/src/Message/ListMessage/ListMessage.scss

@@ -13,6 +13,14 @@
   li {
     font-size: var(--pf-t--global--font--size--md);
   }
+
+  &.pf-m-markdown {
+    .pf-v6-c-list,
+    ul,
+    li {
+      font-size: inherit;
+    }
+  }
 }
 
 .pf-chatbot__message--user {

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -4,9 +4,23 @@
 
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
-const OrderedListMessage = ({ children, start }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
-  <div className="pf-chatbot__message-ordered-list">
+export interface OrderedListMessageProps {
+  /** The ordered list content */
+  children?: React.ReactNode;
+  /** The number to start the ordered list at. */
+  start?: number;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
+}
+
+const OrderedListMessage = ({
+  children,
+  start,
+  shouldRetainStyles
+}: OrderedListMessageProps & JSX.IntrinsicElements['ol'] & ExtraProps) => (
+  <div className={css('pf-chatbot__message-ordered-list', shouldRetainStyles && 'pf-m-markdown')}>
     <List component={ListComponent.ol} type={OrderType.number} start={start}>
       {children}
     </List>

package/src/Message/ListMessage/UnorderedListMessage.tsx

@@ -4,9 +4,19 @@
 
 import { ExtraProps } from 'react-markdown';
 import { List } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+export interface UnrderedListMessageProps {
+  /** The ordered list content */
+  children?: React.ReactNode;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
+}
 
-const UnorderedListMessage = ({ children }: JSX.IntrinsicElements['ul'] & ExtraProps) => (
-  <div className="pf-chatbot__message-unordered-list">
+const UnorderedListMessage = ({
+  children,
+  shouldRetainStyles
+}: UnrderedListMessageProps & JSX.IntrinsicElements['ul'] & ExtraProps) => (
+  <div className={css('pf-chatbot__message-unordered-list', shouldRetainStyles && 'pf-m-markdown')}>
     <List>{children}</List>
   </div>
 );