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

package/src/Message/Message.tsx

@@ -3,14 +3,12 @@
 // ============================================================================
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import Markdown, { Options } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { Options } from 'react-markdown';
 import {
   AlertProps,
   Avatar,
   AvatarProps,
   ButtonProps,
-  ContentVariants,
   FormProps,
   Label,
   LabelGroupProps,
@@ -18,42 +16,25 @@ import {
   Truncate
 } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
-import CodeBlockMessage, { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
-import TextMessage from './TextMessage/TextMessage';
+import { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
 import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
 import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
 import SourcesCard, { SourcesCardProps } from '../SourcesCard';
-import ListItemMessage from './ListMessage/ListItemMessage';
-import UnorderedListMessage from './ListMessage/UnorderedListMessage';
-import OrderedListMessage from './ListMessage/OrderedListMessage';
 import QuickStartTile from './QuickStarts/QuickStartTile';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
 import QuickResponse from './QuickResponse/QuickResponse';
 import UserFeedback, { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import UserFeedbackComplete, { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
-import TableMessage from './TableMessage/TableMessage';
-import TrMessage from './TableMessage/TrMessage';
-import TdMessage from './TableMessage/TdMessage';
-import TbodyMessage from './TableMessage/TbodyMessage';
-import TheadMessage from './TableMessage/TheadMessage';
-import ThMessage from './TableMessage/ThMessage';
 import { TableProps } from '@patternfly/react-table';
-import ImageMessage from './ImageMessage/ImageMessage';
-import rehypeUnwrapImages from 'rehype-unwrap-images';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSanitize from 'rehype-sanitize';
-import rehypeHighlight from 'rehype-highlight';
 // see the full list of styles here: https://highlightjs.org/examples
 import 'highlight.js/styles/vs2015.css';
 import { PluggableList } from 'unified';
-import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
-import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 import ToolResponse, { ToolResponseProps } from '../ToolResponse';
 import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
-import SuperscriptMessage from './SuperscriptMessage/SuperscriptMessage';
 import ToolCall, { ToolCallProps } from '../ToolCall';
+import MarkdownContent from '../MarkdownContent';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -267,14 +248,8 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   }, [content]);
 
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
-  if (openLinkInNewTab) {
-    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
-  }
-  if (additionalRehypePlugins) {
-    rehypePlugins.push(...additionalRehypePlugins);
-  }
-  let avatarClassName;
+
+  let avatarClassName: string | undefined;
   if (avatarProps && 'className' in avatarProps) {
     const { className, ...rest } = avatarProps;
     avatarClassName = className;
@@ -284,157 +259,22 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
-  const disallowedElements = role === 'user' && hasNoImagesInUserMessages ? ['img'] : [];
-  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
-    disallowedElements.push(...reactMarkdownProps.disallowedElements);
-  }
-
-  const handleMarkdown = () => {
-    if (isMarkdownDisabled) {
-      return (
-        <TextMessage component={ContentVariants.p} {...props}>
-          {messageText}
-        </TextMessage>
-      );
-    }
-    return (
-      <Markdown
-        components={{
-          section: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <section {...rest} className={`pf-chatbot__message-text ${rest?.className}`} />;
-          },
-          p: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage 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}>
-                {children}
-              </CodeBlockMessage>
-            );
-          },
-          h1: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h1} {...rest} />;
-          },
-          h2: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h2} {...rest} />;
-          },
-          h3: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h3} {...rest} />;
-          },
-          h4: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h4} {...rest} />;
-          },
-          h5: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h5} {...rest} />;
-          },
-          h6: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h6} {...rest} />;
-          },
-          blockquote: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.blockquote} {...rest} />;
-          },
-          ul: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <UnorderedListMessage {...rest} />;
-          },
-          ol: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <OrderedListMessage {...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 {...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 {...(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}
-      >
-        {messageText}
-      </Markdown>
-    );
-  };
+  const handleMarkdown = () => (
+    <MarkdownContent
+      content={messageText}
+      isMarkdownDisabled={isMarkdownDisabled}
+      codeBlockProps={codeBlockProps}
+      tableProps={tableProps}
+      openLinkInNewTab={openLinkInNewTab}
+      additionalRehypePlugins={additionalRehypePlugins}
+      additionalRemarkPlugins={additionalRemarkPlugins}
+      linkProps={linkProps}
+      reactMarkdownProps={reactMarkdownProps}
+      remarkGfmProps={remarkGfmProps}
+      hasNoImages={role === 'user' && hasNoImagesInUserMessages}
+      isPrimary={isPrimary}
+    />
+  );
 
   const renderMessage = () => {
     if (isLoading) {

package/src/Message/TableMessage/TableMessage.scss

@@ -25,4 +25,15 @@
   .pf-v6-c-table__tr:last-of-type {
     border-block-end: 0;
   }
+
+  &.pf-m-markdown {
+    table,
+    tbody,
+    td,
+    thead,
+    th,
+    tr {
+      font-size: inherit;
+    }
+  }
 }

package/src/Message/TableMessage/TableMessage.tsx

@@ -5,6 +5,7 @@
 import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Table, TableProps } from '@patternfly/react-table';
+import { css } from '@patternfly/react-styles';
 
 interface Properties {
   line: number;
@@ -20,10 +21,20 @@ export interface TableNode {
 }
 
 export interface TableMessageProps {
+  /** Content of the table */
+  children?: React.ReactNode;
+  /** Flag indicating whether primary styles should be applied. */
   isPrimary?: boolean;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
 }
 
-const TableMessage = ({ children, isPrimary, ...props }: Omit<TableProps, 'ref'> & ExtraProps & TableMessageProps) => {
+const TableMessage = ({
+  children,
+  isPrimary,
+  shouldRetainStyles,
+  ...props
+}: Omit<TableProps, 'ref'> & ExtraProps & TableMessageProps) => {
   const { className, ...rest } = props;
 
   // This allows us to parse the nested data we get back from the 3rd party Markdown parser
@@ -76,7 +87,12 @@ const TableMessage = ({ children, isPrimary, ...props }: Omit<TableProps, 'ref'>
     <Table
       aria-label={props['aria-label']}
       gridBreakPoint="grid"
-      className={`pf-chatbot__message-table ${isPrimary ? 'pf-m-primary' : ''} ${className ? className : ''}`}
+      className={css(
+        'pf-chatbot__message-table',
+        isPrimary && 'pf-m-primary',
+        shouldRetainStyles && 'pf-m-markdown',
+        className
+      )}
       {...rest}
     >
       {modifyChildren(children)}

package/src/Message/TextMessage/TextMessage.scss

@@ -53,6 +53,14 @@
       background-color: var(--pf-t--global--background--color--secondary--default);
     }
   }
+
+  &.pf-m-markdown {
+    display: block;
+  }
+  &.pf-m-markdown > [class^='pf-v6-c-content'] {
+    font-size: inherit;
+    color: inherit;
+  }
 }
 
 // ============================================================================

package/src/Message/TextMessage/TextMessage.tsx

@@ -4,19 +4,46 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Content, ContentProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
 export interface TextMessageProps {
+  /** The text message content */
+  children?: React.ReactNode;
+  /** Flag indicating whether primary styling is applied. */
   isPrimary?: boolean;
+  /** The wrapper component to use for the PatternFly Content component. Defaults to a div. */
+  component?:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'a'
+    | 'small'
+    | 'blockquote'
+    | 'pre'
+    | 'hr'
+    | 'ul'
+    | 'ol'
+    | 'dl'
+    | 'li'
+    | 'dt'
+    | 'dd';
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
 }
 
 const TextMessage = ({
   component,
   children,
   isPrimary,
+  shouldRetainStyles,
   ...props
 }: Omit<ContentProps, 'ref'> & ExtraProps & TextMessageProps) => (
-  <span className={`pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`}>
-    <Content component={component} {...props}>
+  <span className={css('pf-chatbot__message-text', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown')}>
+    <Content component={component} {...props} className={css(props?.className)}>
       {children}
     </Content>
   </span>

package/src/ToolCall/ToolCall.test.tsx

@@ -181,4 +181,95 @@ describe('ToolCall', () => {
     render(<ToolCall {...defaultProps} cardFooterProps={{ id: 'card-footer-test-id' }} />);
     expect(screen.getByRole('button', { name: 'Run tool' }).closest('#card-footer-test-id')).toBeVisible();
   });
+
+  it('Renders collapsed by default when expandableContent is provided', () => {
+    render(<ToolCall {...defaultProps} expandableContent="Expandable Content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
+
+  it('Renders expanded when isDefaultExpanded is true', () => {
+    render(<ToolCall {...defaultProps} isDefaultExpanded expandableContent="Expandable Content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(
+      <ToolCall
+        {...defaultProps}
+        isDefaultExpanded={false}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ isExpanded: true }}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <ToolCall
+        {...defaultProps}
+        isDefaultExpanded={false}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ onToggle: customOnToggle }}
+      />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.titleText });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalledTimes(1);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
+
+  it('should render titleText as markdown when isTitleMarkdown is true', () => {
+    const titleText = '**Bold title**';
+    const { container } = render(<ToolCall titleText={titleText} isTitleMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold title')).toBeTruthy();
+  });
+
+  it('should not render titleText as markdown when isTitleMarkdown is false', () => {
+    const titleText = '**Bold title**';
+    render(<ToolCall titleText={titleText} />);
+    expect(screen.getByText('**Bold title**')).toBeTruthy();
+  });
+
+  it('should render expandableContent as markdown when isExpandableContentMarkdown is true', async () => {
+    const user = userEvent.setup();
+    const expandableContent = '**Bold expandable content**';
+    const { container } = render(
+      <ToolCall {...defaultProps} expandableContent={expandableContent} isExpandableContentMarkdown />
+    );
+    await user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold expandable content')).toBeTruthy();
+  });
+
+  it('should not render expandableContent as markdown when isExpandableContentMarkdown is false', async () => {
+    const user = userEvent.setup();
+    const expandableContent = '**Bold expandable content**';
+    render(<ToolCall {...defaultProps} expandableContent={expandableContent} />);
+    await user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+    expect(screen.getByText('**Bold expandable content**')).toBeTruthy();
+  });
+
+  it('should pass markdownContentProps to MarkdownContent component', () => {
+    const titleText = '**Bold title**';
+    const { container } = render(
+      <ToolCall titleText={titleText} isTitleMarkdown markdownContentProps={{ isPrimary: true }} />
+    );
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
 });

package/src/ToolCall/ToolCall.tsx

@@ -1,4 +1,4 @@
-import { type FunctionComponent } from 'react';
+import { useState, type FunctionComponent } from 'react';
 import {
   ActionList,
   ActionListProps,
@@ -19,6 +19,8 @@ import {
   Spinner,
   SpinnerProps
 } from '@patternfly/react-core';
+import MarkdownContent from '../MarkdownContent';
+import type { MarkdownContentProps } from '../MarkdownContent';
 
 export interface ToolCallProps {
   /** Title text for the tool call. */
@@ -31,6 +33,8 @@ export interface ToolCallProps {
   spinnerProps?: SpinnerProps;
   /** Content to render within an expandable section. */
   expandableContent?: React.ReactNode;
+  /** Flag indicating whether the expandable content is expanded by default. */
+  isDefaultExpanded?: boolean;
   /** Text content for the "run" action button. */
   runButtonText?: string;
   /** Additional props for the "run" action button. */
@@ -59,6 +63,14 @@ export interface ToolCallProps {
   cardFooterProps?: CardFooterProps;
   /** Additional props for the expandable section when expandableContent is passed. */
   expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Whether to enable markdown rendering for titleText. When true, titleText will be parsed as markdown. */
+  isTitleMarkdown?: boolean;
+  /** Whether to enable markdown rendering for expandableContent. When true and expandableContent is a string, it will be parsed as markdown. */
+  isExpandableContentMarkdown?: boolean;
+  /** Props passed to MarkdownContent component when markdown is enabled */
+  markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+  /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+  shouldRetainStyles?: boolean;
 }
 
 export const ToolCall: FunctionComponent<ToolCallProps> = ({
@@ -66,6 +78,7 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
   loadingText,
   isLoading,
   expandableContent,
+  isDefaultExpanded = false,
   runButtonText = 'Run tool',
   runButtonProps,
   runActionItemProps,
@@ -80,8 +93,25 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
   cardBodyProps,
   cardFooterProps,
   expandableSectionProps,
-  spinnerProps
+  spinnerProps,
+  isTitleMarkdown,
+  isExpandableContentMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false
 }: ToolCallProps) => {
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const renderTitle = () => {
+    if (isTitleMarkdown) {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={titleText} {...markdownContentProps} />;
+    }
+    return titleText;
+  };
+
   const titleContent = (
     <span className={`pf-chatbot__tool-call-title-content`}>
       {isLoading ? (
@@ -90,10 +120,23 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
           {<span className="pf-chatbot__tool-call-title-text">{loadingText}</span>}
         </>
       ) : (
-        <span className="pf-chatbot__tool-call-title-text">{titleText}</span>
+        <span className="pf-chatbot__tool-call-title-text">{renderTitle()}</span>
       )}
     </span>
   );
+
+  const renderExpandableContent = () => {
+    if (isExpandableContentMarkdown && typeof expandableContent === 'string') {
+      return (
+        <MarkdownContent
+          shouldRetainStyles={shouldRetainStyles}
+          content={expandableContent}
+          {...markdownContentProps}
+        />
+      );
+    }
+    return expandableContent;
+  };
   const defaultActions = (
     <>
       <ActionListItem {...actionListItemProps} {...cancelActionItemProps}>
@@ -124,10 +167,12 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
           <ExpandableSection
             className="pf-chatbot__tool-call-expandable-section"
             toggleContent={titleContent}
+            onToggle={onToggle}
+            isExpanded={isExpanded}
             isIndented
             {...expandableSectionProps}
           >
-            {expandableContent}
+            {renderExpandableContent()}
           </ExpandableSection>
         ) : (
           titleContent

package/src/ToolResponse/ToolResponse.scss

@@ -34,3 +34,13 @@
     --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
   }
 }
+
+.pf-chatbot__tool-response-expandable-section .pf-v6-c-expandable-section__toggle .pf-m-markdown {
+  padding: inherit;
+}
+
+.pf-chatbot__tool-response {
+  .pf-chatbot__message-image {
+    max-width: 100%;
+  }
+}