@patternfly/chatbot 6.4.0-prerelease.15 → 6.4.0-prerelease.17

package/src/Message/Message.test.tsx

@@ -675,6 +675,28 @@ describe('Message', () => {
     );
     expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
   });
+  it('should handle tool response correctly', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        toolResponse={{
+          toggleContent: 'Tool response: Name',
+          subheading: 'Thought for 3 seconds',
+          body: 'Lorem ipsum dolor sit amet',
+          cardTitle: 'Card title',
+          cardBody: 'Card body'
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: /Tool response: Name/i })).toBeTruthy();
+    expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
+    expect(screen.getByText('Lorem ipsum dolor sit amet')).toBeTruthy();
+    expect(screen.getByText('Card title')).toBeTruthy();
+    expect(screen.getByText('Card body')).toBeTruthy();
+  });
   it('should handle block quote correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={BLOCK_QUOTES} />);
     expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();

package/src/Message/Message.tsx

@@ -49,6 +49,7 @@ import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
+import ToolResponse, { ToolResponseProps } from '../ToolResponse';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -189,6 +190,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   isMarkdownDisabled?: boolean;
   /** 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;
+  /** Props for tool response card */
+  toolResponse?: ToolResponseProps;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -230,6 +233,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   isCompact,
   isMarkdownDisabled,
   reactMarkdownProps,
+  toolResponse,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -376,6 +380,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
           <div className="pf-chatbot__message-and-actions">
             {renderMessage()}
             {afterMainContent && <>{afterMainContent}</>}
+            {toolResponse && <ToolResponse {...toolResponse} />}
             {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile

package/src/SourcesCard/SourcesCard.scss

@@ -16,6 +16,17 @@
   box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
+.pf-chatbot__compact-sources-card-body {
+  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__sources-card-subtitle,
+.pf-chatbot__sources-card-subtle {
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+}
+
 .pf-chatbot__sources-card-body-text {
   display: block;
   display: -webkit-box;
@@ -27,6 +38,12 @@
   text-overflow: ellipsis;
 }
 
+.pf-chatbot__sources-card-title-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
 .pf-chatbot__sources-card-footer-container {
   border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
   padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)

package/src/SourcesCard/SourcesCard.test.tsx

@@ -256,4 +256,97 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
   });
+
+  it('should apply cardTitleProps appropriately', () => {
+    render(
+      <SourcesCard
+        cardTitleProps={{ 'data-testid': 'card-title', className: 'test' } as any}
+        sources={[{ title: 'How to make an apple pie', link: '' }]}
+      />
+    );
+    expect(screen.getByTestId('card-title')).toHaveClass('test');
+  });
+
+  it('should apply cardBodyProps appropriately', () => {
+    render(
+      <SourcesCard
+        cardBodyProps={
+          { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' } as any
+        }
+        sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
+      />
+    );
+    expect(screen.getByTestId('card-body')).toHaveClass('test');
+  });
+
+  it('should apply cardFooterProps appropriately', () => {
+    render(
+      <SourcesCard
+        cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+      />
+    );
+    expect(screen.getByTestId('card-footer')).toHaveClass('test');
+  });
+
+  it('should apply truncateProps appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          {
+            title: 'How to make an apple pie',
+            link: '',
+            truncateProps: { 'data-testid': 'card-truncate', className: 'test' } as any
+          }
+        ]}
+      />
+    );
+    expect(screen.getByTestId('card-truncate')).toHaveClass('test');
+  });
+
+  it('should apply custom footer appropriately when there is one source', () => {
+    render(
+      <SourcesCard sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]} />
+    );
+    expect(screen.getByText('I am a custom footer'));
+    expect(screen.queryByText('1/1')).toBeFalsy();
+  });
+
+  it('should apply custom footer appropriately when are multiple sources', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> },
+          { title: 'How to bake bread', link: '' }
+        ]}
+      />
+    );
+    expect(screen.getByText('I am a custom footer'));
+    // does not show navigation bar
+    expect(screen.queryByText('1/2')).toBeFalsy();
+  });
+
+  it('should apply footer props to custom footer appropriately', () => {
+    render(
+      <SourcesCard
+        cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
+        sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]}
+      />
+    );
+    expect(screen.getByText('I am a custom footer'));
+    expect(screen.getByTestId('card-footer')).toHaveClass('test');
+  });
+
+  it('should apply subtitle appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }]}
+      />
+    );
+    expect(screen.getByText('How to make an apple pie'));
+    expect(screen.getByText('You must first create the universe'));
+  });
 });

package/src/SourcesCard/SourcesCard.tsx

@@ -10,14 +10,18 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  CardBodyProps,
   CardFooter,
+  CardFooterProps,
   CardProps,
   CardTitle,
+  CardTitleProps,
   ExpandableSection,
   ExpandableSectionVariant,
   Icon,
   pluralize,
-  Truncate
+  Truncate,
+  TruncateProps
 } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
@@ -34,6 +38,8 @@ export interface SourcesCardProps extends CardProps {
   sources: {
     /** Title of sources card */
     title?: string;
+    /** Subtitle of sources card */
+    subtitle?: string;
     /** Link to source */
     link: string;
     /** Body of sources card */
@@ -46,6 +52,10 @@ export interface SourcesCardProps extends CardProps {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** Any additional props applied to the title of the Sources card  */
     titleProps?: ButtonProps;
+    /** Custom footer applied to the Sources card */
+    footer?: React.ReactNode;
+    /** Additional props passed to Truncate component */
+    truncateProps?: TruncateProps;
   }[];
   /** Label for the English word "source" */
   sourceWord?: string;
@@ -65,6 +75,12 @@ export interface SourcesCardProps extends CardProps {
   showMoreWords?: string;
   /** Label for English words "show less" */
   showLessWords?: string;
+  /** Additional props passed to card title */
+  cardTitleProps?: CardTitleProps;
+  /** Additional props passed to card body */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props passed to card footer */
+  cardFooterProps?: CardFooterProps;
 }
 
 const SourcesCard: FunctionComponent<SourcesCardProps> = ({
@@ -82,6 +98,9 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
   showMoreWords = 'show more',
   showLessWords = 'show less',
   isCompact,
+  cardTitleProps,
+  cardBodyProps,
+  cardFooterProps,
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = useState(1);
@@ -96,9 +115,9 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
     onSetPage && onSetPage(_evt, newPage);
   };
 
-  const renderTitle = (title?: string) => {
+  const renderTitle = (title?: string, truncateProps?: TruncateProps) => {
     if (title) {
-      return <Truncate content={title} />;
+      return <Truncate content={title} {...truncateProps} />;
     }
     return `Source ${page}`;
   };
@@ -107,24 +126,32 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
     <div className="pf-chatbot__source">
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
       <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
-        <CardTitle className="pf-chatbot__sources-card-title">
-          <Button
-            component="a"
-            variant={ButtonVariant.link}
-            href={sources[page - 1].link}
-            icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
-            iconPosition="end"
-            isInline
-            rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
-            target={sources[page - 1].isExternal ? '_blank' : undefined}
-            onClick={sources[page - 1].onClick ?? undefined}
-            {...sources[page - 1].titleProps}
-          >
-            {renderTitle(sources[page - 1].title)}
-          </Button>
+        <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
+          <div className="pf-chatbot__sources-card-title-container">
+            <Button
+              component="a"
+              variant={ButtonVariant.link}
+              href={sources[page - 1].link}
+              icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+              iconPosition="end"
+              isInline
+              rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
+              target={sources[page - 1].isExternal ? '_blank' : undefined}
+              onClick={sources[page - 1].onClick ?? undefined}
+              {...sources[page - 1].titleProps}
+            >
+              {renderTitle(sources[page - 1].title, sources[page - 1].truncateProps)}
+            </Button>
+            {sources[page - 1].subtitle && (
+              <span className="pf-chatbot__sources-card-subtitle">{sources[page - 1].subtitle}</span>
+            )}
+          </div>
         </CardTitle>
         {sources[page - 1].body && (
-          <CardBody className={`pf-chatbot__sources-card-body`}>
+          <CardBody
+            className={`pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
+            {...cardBodyProps}
+          >
             {sources[page - 1].hasShowMore ? (
               // prevents extra VO announcements of button text - parent Message has aria-live
               <div aria-live="off">
@@ -143,68 +170,77 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
             )}
           </CardBody>
         )}
-        {sources.length > 1 && (
-          <CardFooter className="pf-chatbot__sources-card-footer-container">
-            <div className="pf-chatbot__sources-card-footer">
-              <nav className={`pf-chatbot__sources-card-footer-buttons ${className}`} aria-label={paginationAriaLabel}>
-                <Button
-                  variant={ButtonVariant.plain}
-                  isDisabled={isDisabled || page === 1}
-                  data-action="previous"
-                  onClick={(event) => {
-                    const newPage = page >= 1 ? page - 1 : 1;
-                    onPreviousClick && onPreviousClick(event, newPage);
-                    handleNewPage(event, newPage);
-                  }}
-                  aria-label={toPreviousPageAriaLabel}
-                >
-                  <Icon iconSize="lg">
-                    {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
-                    <svg
-                      className="pf-v6-svg"
-                      viewBox="0 0 280 500"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
-                    </svg>
-                  </Icon>
-                </Button>
-                <span aria-hidden="true">
-                  {page}/{sources.length}
-                </span>
-                <Button
-                  variant={ButtonVariant.plain}
-                  isDisabled={isDisabled || page === sources.length}
-                  aria-label={toNextPageAriaLabel}
-                  data-action="next"
-                  onClick={(event) => {
-                    const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
-                    onNextClick && onNextClick(event, newPage);
-                    handleNewPage(event, newPage);
-                  }}
-                >
-                  <Icon isInline iconSize="lg">
-                    {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
-                    <svg
-                      className="pf-v6-svg"
-                      viewBox="0 0 180 500"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
-                    </svg>
-                  </Icon>
-                </Button>
-              </nav>
-            </div>
+        {sources[page - 1].footer ? (
+          <CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
+            {sources[page - 1].footer}
           </CardFooter>
+        ) : (
+          sources.length > 1 && (
+            <CardFooter className="pf-chatbot__sources-card-footer-container" {...cardFooterProps}>
+              <div className="pf-chatbot__sources-card-footer">
+                <nav
+                  className={`pf-chatbot__sources-card-footer-buttons ${className}`}
+                  aria-label={paginationAriaLabel}
+                >
+                  <Button
+                    variant={ButtonVariant.plain}
+                    isDisabled={isDisabled || page === 1}
+                    data-action="previous"
+                    onClick={(event) => {
+                      const newPage = page >= 1 ? page - 1 : 1;
+                      onPreviousClick && onPreviousClick(event, newPage);
+                      handleNewPage(event, newPage);
+                    }}
+                    aria-label={toPreviousPageAriaLabel}
+                  >
+                    <Icon iconSize="lg">
+                      {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                      <svg
+                        className="pf-v6-svg"
+                        viewBox="0 0 280 500"
+                        fill="currentColor"
+                        aria-hidden="true"
+                        role="img"
+                        width="1em"
+                        height="1em"
+                      >
+                        <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
+                      </svg>
+                    </Icon>
+                  </Button>
+                  <span aria-hidden="true">
+                    {page}/{sources.length}
+                  </span>
+                  <Button
+                    variant={ButtonVariant.plain}
+                    isDisabled={isDisabled || page === sources.length}
+                    aria-label={toNextPageAriaLabel}
+                    data-action="next"
+                    onClick={(event) => {
+                      const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
+                      onNextClick && onNextClick(event, newPage);
+                      handleNewPage(event, newPage);
+                    }}
+                  >
+                    <Icon isInline iconSize="lg">
+                      {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                      <svg
+                        className="pf-v6-svg"
+                        viewBox="0 0 180 500"
+                        fill="currentColor"
+                        aria-hidden="true"
+                        role="img"
+                        width="1em"
+                        height="1em"
+                      >
+                        <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
+                      </svg>
+                    </Icon>
+                  </Button>
+                </nav>
+              </div>
+            </CardFooter>
+          )
         )}
       </Card>
     </div>

package/src/ToolResponse/ToolResponse.scss

@@ -0,0 +1,36 @@
+.pf-chatbot__tool-response {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  overflow: unset;
+}
+
+.pf-chatbot__tool-response-expandable-section {
+  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__tool-response-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__tool-response-subheading {
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
+.pf-chatbot__tool-response-body {
+  color: var(--pf-t--global--text--color--subtle);
+  margin-block-end: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__tool-response-card {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+
+  .pf-v6-c-divider {
+    --pf-v6-c-divider--Color: var(--pf-t--global--border--color--control--read-only);
+  }
+}

package/src/ToolResponse/ToolResponse.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ToolResponse from './ToolResponse';
+
+describe('ToolResponse', () => {
+  const defaultProps = {
+    toggleContent: 'Tool response: toolName',
+    cardTitle: 'Title',
+    cardBody: 'Body'
+  };
+
+  it('should render with required props only', () => {
+    render(<ToolResponse {...defaultProps} />);
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.getByText('Body')).toBeTruthy();
+    expect(screen.getByText('Tool response: toolName')).toBeTruthy();
+  });
+
+  it('should render subheading when provided', () => {
+    const subheading = 'Tool execution result';
+    render(<ToolResponse {...defaultProps} subheading={subheading} />);
+    expect(screen.getByText(subheading)).toBeTruthy();
+  });
+
+  it('should render body content when provided', () => {
+    const body = 'This is the tool response body content';
+    render(<ToolResponse {...defaultProps} body={body} />);
+    expect(screen.getByText(body)).toBeTruthy();
+  });
+
+  it('should render with complex content including React elements', () => {
+    const body = (
+      <div>
+        <p>Complex body content</p>
+        <ul>
+          <li>Item 1</li>
+          <li>Item 2</li>
+        </ul>
+      </div>
+    );
+    const cardTitle = <strong>API Response</strong>;
+    const cardBody = (
+      <div>
+        <code>{"{ status: 'success' }"}</code>
+      </div>
+    );
+
+    render(<ToolResponse {...defaultProps} body={body} cardTitle={cardTitle} cardBody={cardBody} />);
+    expect(screen.getByText('Complex body content')).toBeTruthy();
+    expect(screen.getByText('Item 1')).toBeTruthy();
+    expect(screen.getByText('Item 2')).toBeTruthy();
+    expect(screen.getByText('API Response')).toBeTruthy();
+    expect(screen.getByText("{ status: 'success' }")).toBeTruthy();
+  });
+
+  it('should apply custom className from cardProps', () => {
+    const { container } = render(
+      <ToolResponse {...defaultProps} cardProps={{ className: 'custom-tool-response-class' }} />
+    );
+    expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
+  });
+
+  it('should pass through expandableSectionProps', () => {
+    render(<ToolResponse {...defaultProps} expandableSectionProps={{ className: 'custom-expandable-class' }} />);
+    expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
+  });
+
+  it('should pass through toolResponseCardProps', () => {
+    render(<ToolResponse {...defaultProps} toolResponseCardProps={{ className: 'custom-card-class' }} />);
+    expect(document.querySelector('.custom-card-class')).toBeTruthy();
+  });
+
+  it('should not render subheading span when subheading is not provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} />);
+    const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
+    expect(subheadingContainer).toBeFalsy();
+  });
+});

package/src/ToolResponse/ToolResponse.tsx

@@ -0,0 +1,95 @@
+// ============================================================================
+// Tool Response Card
+// ============================================================================
+import {
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardProps,
+  CardTitle,
+  CardTitleProps,
+  Divider,
+  DividerProps,
+  ExpandableSection,
+  ExpandableSectionProps
+} from '@patternfly/react-core';
+import { useState, type FunctionComponent } from 'react';
+
+export interface ToolResponseProps {
+  /** Toggle content shown for expandable section */
+  toggleContent: React.ReactNode;
+  /** Additional props passed to expandable section */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Subheading rendered inside expandable section */
+  subheading?: string;
+  /** Body text rendered inside expandable section */
+  body?: React.ReactNode | string;
+  /** Content passed into tool response card body */
+  cardBody: React.ReactNode;
+  /** Content passed into tool response card title */
+  cardTitle: React.ReactNode;
+  /** Additional props passed to main card */
+  cardProps?: CardProps;
+  /** Additional props passed to main card body */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props passed to tool response card */
+  toolResponseCardProps?: CardProps;
+  /** Additional props passed to tool response card body */
+  toolResponseCardBodyProps?: CardBodyProps;
+  /** Additional props passed to tool response card divider */
+  toolResponseCardDividerProps?: DividerProps;
+  /** Additional props passed to tool response card title */
+  toolResponseCardTitleProps?: CardTitleProps;
+}
+
+export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
+  body,
+  cardProps,
+  expandableSectionProps,
+  subheading,
+  cardBody,
+  cardTitle,
+  cardBodyProps,
+  toggleContent,
+  toolResponseCardBodyProps,
+  toolResponseCardDividerProps,
+  toolResponseCardProps,
+  toolResponseCardTitleProps
+}: ToolResponseProps) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <Card isCompact className="pf-chatbot__tool-response" {...cardProps}>
+      <CardBody {...cardBodyProps}>
+        <ExpandableSection
+          toggleContent={toggleContent}
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          isIndented
+          className="pf-chatbot__tool-response-expandable-section"
+          {...expandableSectionProps}
+        >
+          <div className="pf-chatbot__tool-response-section">
+            {subheading && (
+              <div className="pf-chatbot__tool-response-subheading">
+                <span>{subheading}</span>
+              </div>
+            )}
+            {body && <div className="pf-chatbot__tool-response-body">{body}</div>}
+            <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
+              <CardTitle {...toolResponseCardTitleProps}>{cardTitle}</CardTitle>
+              <Divider {...toolResponseCardDividerProps} />
+              <CardBody {...toolResponseCardBodyProps}>{cardBody}</CardBody>
+            </Card>
+          </div>
+        </ExpandableSection>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ToolResponse;

package/src/ToolResponse/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ToolResponse';
+
+export * from './ToolResponse';

package/src/index.ts

@@ -84,5 +84,8 @@ export * from './SourcesCard';
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
 
+export { default as ToolResponse } from './ToolResponse';
+export * from './ToolResponse';
+
 export { default as tracking } from './tracking';
 export * from './tracking';