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

package/src/ToolResponse/ToolResponse.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import ToolResponse from './ToolResponse';
 
@@ -105,4 +106,122 @@ describe('ToolResponse', () => {
     const { container } = render(<ToolResponse {...defaultProps} cardBody={undefined} />);
     expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
   });
+
+  it('Renders expanded by default', () => {
+    render(<ToolResponse {...defaultProps} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+  });
+
+  it('Renders collapsed when isDefaultExpanded is false', () => {
+    render(<ToolResponse isDefaultExpanded={false} {...defaultProps} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(<ToolResponse {...defaultProps} isDefaultExpanded={false} expandableSectionProps={{ isExpanded: true }} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <ToolResponse {...defaultProps} isDefaultExpanded={false} expandableSectionProps={{ onToggle: customOnToggle }} />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalledTimes(1);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    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,10 +14,14 @@ 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 */
   toggleContent: React.ReactNode;
+  /** Flag indicating whether the expandable content is expanded by default. */
+  isDefaultExpanded?: boolean;
   /** Additional props passed to expandable section */
   expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
   /** Subheading rendered inside expandable section */
@@ -40,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> = ({
@@ -51,22 +69,79 @@ export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
   cardTitle,
   cardBodyProps,
   toggleContent,
+  isDefaultExpanded = true,
   toolResponseCardBodyProps,
   toolResponseCardDividerProps,
   toolResponseCardProps,
-  toolResponseCardTitleProps
+  toolResponseCardTitleProps,
+  isToggleContentMarkdown,
+  isSubheadingMarkdown,
+  isBodyMarkdown,
+  isCardBodyMarkdown,
+  isCardTitleMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false
 }: ToolResponseProps) => {
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     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
@@ -76,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';