@patternfly/chatbot 6.5.0-prerelease.9 → 6.5.0

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';
 
@@ -75,6 +78,9 @@ export * from './MessageBox';
 export { default as MessageDivider } from './MessageDivider';
 export * from './MessageDivider';
 
+export { default as Onboarding } from './Onboarding';
+export * from './Onboarding';
+
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 

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';
@@ -31,6 +32,7 @@
 @import './MessageBox/MessageBox';
 @import './MessageDivider/MessageDivider';
 @import './MessageBox/JumpButton';
+@import './Onboarding/Onboarding';
 @import './ResponseActions/ResponseActions';
 @import './Settings/Settings';
 @import './SourcesCard/SourcesCard.scss';

package/tsconfig.json

@@ -5,7 +5,7 @@
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "es2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
-    "module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "module": "es2020" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */

package/patternfly-docs/content/extensions/chatbot/about-chatbot.md

@@ -1,44 +0,0 @@
----
-section: PatternFly-AI
-subsection: ChatBot
-id: Overview
-sortValue: 1
-source: About
----
-
-**Note:** The PatternFly ChatBot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot)
-
-It is important to leverage AI in a way that improves the experiences of your users. In alignment with our [AI principles](/patternfly-ai/about-ai#ai-principles) and [ethical design guidelines,](/patternfly-ai/ai-guidelines) we've created this ChatBot extension. The PatternFly ChatBot contains a React implementation of an AI ChatBot, to provide your users with access to convenient and persistent help.
-
-_Only use this ChatBot when it adds value to your users' experiences._ Don't use it simply for the sake of novelty—your users will only be excited to interact with a new ChatBot feature if it directly helps them reach their goals.
-
-## ChatBot demos
-
-To illustrate the capabilities of the ChatBot, including more complex interaction patterns, we've created these demos: 
-- [Basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot)
-- [Embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot)
-- [Comparing ChatBots](/patternfly-ai/chatbot/overview/demo/#comparing-chatbots)
-- [Message feedback](/patternfly-ai/chatbot/messages/demo#message-feedback)
-- [ChatBot attachments via file upload](/patternfly-ai/chatbot/messages/demo#attach-via-upload-button-in-message-bar)
-- [ChatBot attachments via built-in menu](/patternfly-ai/chatbot/messages/demo#attach-via-menu-of-options-in-message-bar)
-
-To learn how to write for ChatBot experiences, refer to our [conversation design guidelines](/patternfly-ai/conversation-design/#writing-for-chatbots).
-
-To learn how to design ChatBot experiences, [refer to the design guidelines](/patternfly-ai/chatbot/overview/design-guidelines).
-
-Explore our documentation, which covers both ChatBot UI components and message-related components:
-- UI
-    - [Structural elements](/patternfly-ai/chatbot/ui#structure)
-    - [Toggle](/patternfly-ai/chatbot/ui#toggle)
-    - [Header](/patternfly-ai/chatbot/ui#header)
-    - [Footer](/patternfly-ai/chatbot/ui#footer)
-    - [Navigation](/patternfly-ai/chatbot/ui#navigation)
-    - [Modals](/patternfly-ai/chatbot/ui#modals)
-- Messages
-    - [Bot and user messages](/patternfly-ai/chatbot/messages)
-    - [File attachments](/patternfly-ai/chatbot/messages#attachments)
-- Analytics support
-    - [Overview](/patternfly-ai/chatbot/analytics)
-  
-
-We will continue to grow and evolve our ChatBot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one.