@patternfly/chatbot 6.5.0-prerelease.22 → 6.5.0-prerelease.24

package/src/MessageBar/StopButton.scss

@@ -41,6 +41,5 @@
 .pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

package/src/ToolCall/ToolCall.test.tsx

@@ -232,4 +232,44 @@ describe('ToolCall', () => {
     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

@@ -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. */
@@ -61,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> = ({
@@ -83,7 +93,11 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
   cardBodyProps,
   cardFooterProps,
   expandableSectionProps,
-  spinnerProps
+  spinnerProps,
+  isTitleMarkdown,
+  isExpandableContentMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false
 }: ToolCallProps) => {
   const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
 
@@ -91,6 +105,13 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
     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 ? (
@@ -99,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}>
@@ -138,7 +172,7 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
             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%;
+  }
+}

package/src/ToolResponse/ToolResponse.test.tsx

@@ -149,4 +149,79 @@ describe('ToolResponse', () => {
     expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
     expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
   });
+
+  it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+    const toggleContent = '**Bold toggle**';
+    const { container } = render(
+      <ToolResponse {...defaultProps} toggleContent={toggleContent} isToggleContentMarkdown />
+    );
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold toggle')).toBeTruthy();
+  });
+
+  it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+    const toggleContent = '**Bold toggle**';
+    render(<ToolResponse {...defaultProps} toggleContent={toggleContent} />);
+    expect(screen.getByText('**Bold toggle**')).toBeTruthy();
+  });
+
+  it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+    const subheading = '**Bold subheading**';
+    const { container } = render(<ToolResponse {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold subheading')).toBeTruthy();
+  });
+
+  it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
+    const subheading = '**Bold subheading**';
+    render(<ToolResponse {...defaultProps} subheading={subheading} />);
+    expect(screen.getByText('**Bold subheading**')).toBeTruthy();
+  });
+
+  it('should render body as markdown when isBodyMarkdown is true', () => {
+    const body = '**Bold body**';
+    const { container } = render(<ToolResponse {...defaultProps} body={body} isBodyMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold body')).toBeTruthy();
+  });
+
+  it('should not render body as markdown when isBodyMarkdown is false', () => {
+    const body = '**Bold body**';
+    render(<ToolResponse {...defaultProps} body={body} />);
+    expect(screen.getByText('**Bold body**')).toBeTruthy();
+  });
+
+  it('should render cardTitle as markdown when isCardTitleMarkdown is true', () => {
+    const cardTitle = '**Bold card title**';
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={cardTitle} isCardTitleMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold card title')).toBeTruthy();
+  });
+
+  it('should not render cardTitle as markdown when isCardTitleMarkdown is false', () => {
+    const cardTitle = '**Bold card title**';
+    render(<ToolResponse {...defaultProps} cardTitle={cardTitle} />);
+    expect(screen.getByText('**Bold card title**')).toBeTruthy();
+  });
+
+  it('should render cardBody as markdown when isCardBodyMarkdown is true', () => {
+    const cardBody = '**Bold card body**';
+    const { container } = render(<ToolResponse {...defaultProps} cardBody={cardBody} isCardBodyMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold card body')).toBeTruthy();
+  });
+
+  it('should not render cardBody as markdown when isCardBodyMarkdown is false', () => {
+    const cardBody = '**Bold card body**';
+    render(<ToolResponse {...defaultProps} cardBody={cardBody} />);
+    expect(screen.getByText('**Bold card body**')).toBeTruthy();
+  });
+
+  it('should pass markdownContentProps to MarkdownContent component', () => {
+    const body = '**Bold body**';
+    const { container } = render(
+      <ToolResponse {...defaultProps} body={body} isBodyMarkdown markdownContentProps={{ isPrimary: true }} />
+    );
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
 });

package/src/ToolResponse/ToolResponse.tsx

@@ -14,6 +14,8 @@ import {
   ExpandableSectionProps
 } from '@patternfly/react-core';
 import { useState, type FunctionComponent } from 'react';
+import MarkdownContent from '../MarkdownContent';
+import type { MarkdownContentProps } from '../MarkdownContent';
 
 export interface ToolResponseProps {
   /** Toggle content shown for expandable section */
@@ -42,6 +44,20 @@ export interface ToolResponseProps {
   toolResponseCardDividerProps?: DividerProps;
   /** Additional props passed to tool response card title */
   toolResponseCardTitleProps?: CardTitleProps;
+  /** Whether to enable markdown rendering for toggleContent. When true and toggleContent is a string, it will be parsed as markdown. */
+  isToggleContentMarkdown?: boolean;
+  /** Whether to enable markdown rendering for subheading. When true, subheading will be parsed as markdown. */
+  isSubheadingMarkdown?: boolean;
+  /** Whether to enable markdown rendering for body. When true and body is a string, it will be parsed as markdown. */
+  isBodyMarkdown?: boolean;
+  /** Whether to enable markdown rendering for cardBody. When true and cardBody is a string, it will be parsed as markdown. */
+  isCardBodyMarkdown?: boolean;
+  /** Whether to enable markdown rendering for cardTitle. When true and cardTitle is a string, it will be parsed as markdown. */
+  isCardTitleMarkdown?: 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 ToolResponse: FunctionComponent<ToolResponseProps> = ({
@@ -57,7 +73,14 @@ export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
   toolResponseCardBodyProps,
   toolResponseCardDividerProps,
   toolResponseCardProps,
-  toolResponseCardTitleProps
+  toolResponseCardTitleProps,
+  isToggleContentMarkdown,
+  isSubheadingMarkdown,
+  isBodyMarkdown,
+  isCardBodyMarkdown,
+  isCardTitleMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false
 }: ToolResponseProps) => {
   const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
 
@@ -65,11 +88,60 @@ export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
     setIsExpanded(isExpanded);
   };
 
+  const renderToggleContent = () => {
+    if (isToggleContentMarkdown && typeof toggleContent === 'string') {
+      return (
+        <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={toggleContent} {...markdownContentProps} />
+      );
+    }
+    return toggleContent;
+  };
+
+  const renderSubheading = () => {
+    if (!subheading) {
+      return null;
+    }
+    if (isSubheadingMarkdown) {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={subheading} {...markdownContentProps} />;
+    }
+    return subheading;
+  };
+
+  const renderBody = () => {
+    if (!body) {
+      return null;
+    }
+    if (isBodyMarkdown && typeof body === 'string') {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={body} {...markdownContentProps} />;
+    }
+    return body;
+  };
+
+  const renderCardTitle = () => {
+    if (!cardTitle) {
+      return null;
+    }
+    if (isCardTitleMarkdown && typeof cardTitle === 'string') {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={cardTitle} {...markdownContentProps} />;
+    }
+    return cardTitle;
+  };
+
+  const renderCardBody = () => {
+    if (!cardBody) {
+      return null;
+    }
+    if (isCardBodyMarkdown && typeof cardBody === 'string') {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={cardBody} {...markdownContentProps} />;
+    }
+    return cardBody;
+  };
+
   return (
     <Card isCompact className="pf-chatbot__tool-response" {...cardProps}>
       <CardBody {...cardBodyProps}>
         <ExpandableSection
-          toggleContent={toggleContent}
+          toggleContent={renderToggleContent()}
           onToggle={onToggle}
           isExpanded={isExpanded}
           isIndented
@@ -79,15 +151,15 @@ export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
           <div className="pf-chatbot__tool-response-section">
             {subheading && (
               <div className="pf-chatbot__tool-response-subheading">
-                <span>{subheading}</span>
+                <span>{renderSubheading()}</span>
               </div>
             )}
-            {body && <div className="pf-chatbot__tool-response-body">{body}</div>}
+            {body && <div className="pf-chatbot__tool-response-body">{renderBody()}</div>}
             {(cardTitle || cardBody) && (
               <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
-                {cardTitle && <CardTitle {...toolResponseCardTitleProps}>{cardTitle}</CardTitle>}
+                {cardTitle && <CardTitle {...toolResponseCardTitleProps}>{renderCardTitle()}</CardTitle>}
                 {cardTitle && cardBody && <Divider {...toolResponseCardDividerProps} />}
-                {cardBody && <CardBody {...toolResponseCardBodyProps}>{cardBody}</CardBody>}
+                {cardBody && <CardBody {...toolResponseCardBodyProps}>{renderCardBody()}</CardBody>}
               </Card>
             )}
           </div>

package/src/index.ts

@@ -63,6 +63,9 @@ export * from './ImagePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 
+export { default as MarkdownContent } from './MarkdownContent';
+export * from './MarkdownContent';
+
 export { default as Message } from './Message';
 export * from './Message';
 

package/src/main.scss

@@ -20,6 +20,7 @@
 @import './Message/Message';
 @import './Message/CodeBlockMessage/CodeBlockMessage';
 @import './Message/ImageMessage/ImageMessage';
+@import './Message/LinkMessage/LinkMessage';
 @import './Message/TextMessage/TextMessage';
 @import './Message/ListMessage/ListMessage';
 @import './Message/TableMessage/TableMessage';