@patternfly/chatbot 1.0.0

package/src/MarkdownContent/MarkdownContent.tsx

@@ -0,0 +1,269 @@
+// ============================================================================
+// 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';
+
+/**
+ * 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 content to render. Supports markdown formatting by default, or plain text when isMarkdownDisabled is true. */
+  content?: string;
+  /** Disables markdown parsing, allowing only plain 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

@@ -0,0 +1,108 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Code Block
+// ============================================================================
+.pf-chatbot__message-code-block {
+  width: 100%;
+  background-color: var(--pf-t--color--gray--80); // same in light + dark theme
+  color: var(--pf-t--color--white); // same in light + dark theme
+  border-radius: var(--pf-t--global--border--radius--small);
+
+  // Code block
+  .pf-v6-c-code-block {
+    --pf-t--global--border--color--default: var(--pf-t--global--border--color--default);
+    background-color: inherit;
+  }
+
+  // Code block header
+  .pf-v6-c-code-block__header {
+    --pf-v6-c-code-block__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-code-block__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-code-block__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-code-block__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+    color: var(--pf-t--color--white); // same in light + dark theme
+
+    .pf-v6-c-code-block__actions {
+      width: 100%;
+    }
+
+    .pf-chatbot__message-code-block-language {
+      text-transform: uppercase;
+      font-family: var(--pf-t--global--font--family--body);
+    }
+
+    // we are overriding some default PatternFly positioning here - it's only necessary for the first two items
+    .pf-chatbot__message-code-block-default-action {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      font-size: var(--pf-t--global--font--size--sm);
+      font-weight: var(--pf-t--global--font--weight--body--bold);
+    }
+
+    .pf-v6-c-code-block__actions-item > .pf-v6-c-button.pf-m-plain {
+      color: var(--pf-t--color--white); // same in light + dark theme
+
+      &:hover,
+      &:focus {
+        color: var(--pf-t--color--white); // same in light + dark theme
+      }
+    }
+  }
+
+  // Code block content
+  .pf-v6-c-code-block__content {
+    --pf-v6-c-code-block__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-code-block__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-code-block__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-code-block__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+    font-size: var(--pf-t--global--font--size--sm);
+
+    pre,
+    pre:hover {
+      overflow: hidden;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+    pre code {
+      display: block;
+      overflow: hidden;
+      font-size: var(--pf-t--global--font--size--sm);
+    }
+
+    .pf-v6-c-code-block__code > div {
+      padding: 0 !important;
+      overflow: hidden !important;
+    }
+  }
+
+  &.pf-m-markdown .pf-v6-c-code-block__code {
+    font-size: inherit;
+  }
+}
+
+.pf-chatbot__message-inline-code {
+  --pf-chatbot-message-text-inline-code-font-size: var(--pf-t--global--font--size--body--default);
+
+  background-color: var(--pf-t--global--background--color--tertiary--default);
+  font-size: var(--pf-chatbot-message-text-inline-code-font-size);
+  border: var(--pf-t--global--border--width--high-contrast--regular) solid
+    var(--pf-t--global--border--color--high-contrast);
+  border-radius: var(--pf-t--global--border--radius--small);
+  padding-block-start: var(--pf-t--global--spacer--xs);
+  padding-block-end: var(--pf-t--global--spacer--xs);
+  padding-inline-start: var(--pf-t--global--spacer--xs);
+  padding-inline-end: var(--pf-t--global--spacer--xs);
+  word-break: break-word;
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--secondary--default);
+  }
+}
+
+.pf-chatbot__message-code-toggle {
+  .pf-v6-c-button.pf-m-link {
+    --pf-v6-c-button--m-link--Color: var(--pf-t--global--color--nonstatus--blue--default);
+    --pf-v6-c-button--hover--Color: var(--pf-t--global--color--nonstatus--blue--hover);
+  }
+}

package/src/Message/CodeBlockMessage/CodeBlockMessage.test.tsx

@@ -0,0 +1,171 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CodeBlockMessage from './CodeBlockMessage';
+
+// Mock clipboard API
+Object.assign(navigator, {
+  clipboard: {
+    writeText: jest.fn()
+  }
+});
+
+describe('CodeBlockMessage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render inline code for single-line content', () => {
+    render(<CodeBlockMessage className="language-javascript">const x = 5;</CodeBlockMessage>);
+    const code = screen.getByText('const x = 5;');
+    expect(code.tagName).toBe('CODE');
+    expect(code).toHaveClass('pf-chatbot__message-inline-code');
+  });
+
+  it('should render code block for multi-line content', () => {
+    const multilineCode = 'const x = 5;\nconst y = 10;';
+    const { container } = render(<CodeBlockMessage className="language-javascript">{multilineCode}</CodeBlockMessage>);
+    const codeElement = container.querySelector('code');
+    expect(codeElement?.textContent).toBe(multilineCode);
+  });
+
+  it('should display language label', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage className="language-javascript">{code}</CodeBlockMessage>);
+    expect(screen.getByText('javascript')).toBeInTheDocument();
+  });
+
+  it('should render copy button', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage>{code}</CodeBlockMessage>);
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeInTheDocument();
+  });
+
+  it('should copy plain string content to clipboard', async () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage>{code}</CodeBlockMessage>);
+
+    const copyButton = screen.getByRole('button', { name: 'Copy code' });
+    await userEvent.click(copyButton);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(code);
+  });
+
+  it('should extract text content from React elements when copying', async () => {
+    // Simulate what happens with syntax highlighting - children become React elements
+    const { container } = render(
+      <CodeBlockMessage className="language-javascript">
+        <span className="hljs-keyword">const</span> x = 5;{'\n'}
+        <span className="hljs-keyword">const</span> y = 10;
+      </CodeBlockMessage>
+    );
+
+    const copyButton = screen.getByRole('button', { name: 'Copy code' });
+    await userEvent.click(copyButton);
+
+    // Should extract actual text content from DOM, not "[object Object]"
+    const codeElement = container.querySelector('code');
+    const expectedText = codeElement?.textContent || '';
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(expectedText);
+    expect(expectedText).not.toContain('[object Object]');
+  });
+
+  it('should show check icon after copying', async () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage>{code}</CodeBlockMessage>);
+
+    const copyButton = screen.getByRole('button', { name: 'Copy code' });
+    await userEvent.click(copyButton);
+
+    // Check icon should be visible (we can verify by checking if CopyIcon is not present)
+    const svgElement = copyButton.querySelector('svg');
+    expect(svgElement).toBeInTheDocument();
+  });
+
+  it('should render expandable section when isExpandable is true', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage isExpandable>{code}</CodeBlockMessage>);
+
+    expect(screen.getByRole('button', { name: 'Show more' })).toBeInTheDocument();
+  });
+
+  it('should toggle expandable section', async () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage isExpandable>{code}</CodeBlockMessage>);
+
+    const toggleButton = screen.getByRole('button', { name: 'Show more' });
+    await userEvent.click(toggleButton);
+
+    expect(screen.getByRole('button', { name: 'Show less' })).toBeInTheDocument();
+  });
+
+  it('should use custom expanded/collapsed text', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(
+      <CodeBlockMessage isExpandable expandedText="Hide" collapsedText="Reveal">
+        {code}
+      </CodeBlockMessage>
+    );
+
+    expect(screen.getByRole('button', { name: 'Reveal' })).toBeInTheDocument();
+  });
+
+  it('should pass through expandableSectionProps', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    const { container } = render(
+      <CodeBlockMessage isExpandable expandableSectionProps={{ className: 'custom-expandable-class' }}>
+        {code}
+      </CodeBlockMessage>
+    );
+
+    const expandableSection = container.querySelector('.pf-v6-c-expandable-section.custom-expandable-class');
+    expect(expandableSection).toBeInTheDocument();
+  });
+
+  it('should render custom actions', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    const customAction = <button aria-label="Custom action">Custom</button>;
+    render(<CodeBlockMessage customActions={customAction}>{code}</CodeBlockMessage>);
+
+    expect(screen.getByRole('button', { name: 'Custom action' })).toBeInTheDocument();
+  });
+
+  it('should apply isPrimary class to inline code', () => {
+    render(<CodeBlockMessage isPrimary>const x = 5;</CodeBlockMessage>);
+    const code = screen.getByText('const x = 5;');
+    expect(code).toHaveClass('pf-m-primary');
+  });
+
+  it('should apply shouldRetainStyles class to code block', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    const { container } = render(<CodeBlockMessage shouldRetainStyles>{code}</CodeBlockMessage>);
+
+    const codeBlockDiv = container.querySelector('.pf-chatbot__message-code-block');
+    expect(codeBlockDiv).toHaveClass('pf-m-markdown');
+  });
+
+  it('should use custom aria-label for copy button', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage aria-label="Copy this code">{code}</CodeBlockMessage>);
+
+    expect(screen.getByRole('button', { name: 'Copy this code' })).toBeInTheDocument();
+  });
+
+  it('should prioritize data-expanded-text over expandedText prop', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+
+    render(
+      <CodeBlockMessage isExpandable expandedText="Custom Expanded" data-expanded-text="Data Expanded">
+        {code}
+      </CodeBlockMessage>
+    );
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'Message:',
+      expect.stringContaining('data-expanded-text or data-collapsed-text will override')
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+});