@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.20

package/src/MessageBox/JumpButton.test.tsx

@@ -6,20 +6,20 @@ import userEvent from '@testing-library/user-event';
 describe('JumpButton', () => {
   it('should render top button correctly', () => {
     render(<JumpButton position="top" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
   });
   it('should render bottom button correctly', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
   });
   it('should call onClick appropriately', async () => {
     const spy = jest.fn();
     render(<JumpButton position="bottom" onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should be hidden if isHidden prop is used', async () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    expect(screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
   });
 });

package/src/MessageBox/JumpButton.tsx

@@ -4,7 +4,7 @@
 import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
-import { Button, Tooltip, Icon } from '@patternfly/react-core';
+import { Button, Tooltip, Icon, TooltipProps, ButtonProps } from '@patternfly/react-core';
 
 import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon';
 import { ArrowDownIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-down-icon';
@@ -16,16 +16,32 @@ export interface JumpButtonProps {
   onClick: () => void;
   /** Flag to change the visibilty of the button */
   isHidden?: boolean;
+  /** Additional props passed to jump buttons */
+  jumpButtonProps?: ButtonProps;
+  /** Additional props passed to tooltip */
+  jumpButtonTooltipProps?: TooltipProps;
 }
 
-const JumpButton: FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
+const JumpButton: FunctionComponent<JumpButtonProps> = ({
+  position,
+  isHidden,
+  onClick,
+  jumpButtonProps,
+  jumpButtonTooltipProps
+}: JumpButtonProps) =>
   isHidden ? null : (
-    <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
+    <Tooltip
+      id={`pf-chatbot__tooltip--jump-${position}`}
+      content={`Back to ${position}`}
+      position="top"
+      {...jumpButtonTooltipProps}
+    >
       <Button
         variant="plain"
         className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
-        aria-label={`Jump ${position}`}
+        aria-label={`Back to ${position}`}
         onClick={onClick}
+        {...jumpButtonProps}
       >
         <Icon iconSize="lg" isInline>
           {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}

package/src/MessageBox/MessageBox.test.tsx

@@ -61,7 +61,7 @@ describe('MessageBox', () => {
     });
 
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+      userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
       expect(spy).toHaveBeenCalled();
     });
   });
@@ -85,7 +85,7 @@ describe('MessageBox', () => {
       region.dispatchEvent(new Event('scroll'));
     });
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump top/i }));
+      userEvent.click(screen.getByRole('button', { name: /Back to top/i }));
       expect(spy).toHaveBeenCalled();
     });
   });

package/src/MessageBox/MessageBox.tsx

@@ -18,6 +18,7 @@ import {
   WheelEventHandler
 } from 'react';
 import JumpButton from './JumpButton';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
@@ -38,6 +39,14 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   onScrollToBottomClick?: () => void;
   /** Flag to enable automatic scrolling when new messages are added */
   enableSmartScroll?: boolean;
+  /** Props passed to top jump button */
+  jumpButtonTopProps?: ButtonProps;
+  /** Props passed to bottom jump button */
+  jumpButtonBottomProps?: ButtonProps;
+  /** Props passed to top jump button tooltip */
+  jumpButtonTopTooltipProps?: TooltipProps;
+  /** Props passed to top jump button tooltip */
+  jumpButtonBottomTooltipProps?: TooltipProps;
 }
 
 export interface MessageBoxHandle extends HTMLDivElement {
@@ -60,6 +69,10 @@ export const MessageBox = forwardRef(
       onScrollToTopClick,
       onScrollToBottomClick,
       enableSmartScroll = false,
+      jumpButtonTopProps,
+      jumpButtonBottomProps,
+      jumpButtonBottomTooltipProps,
+      jumpButtonTopTooltipProps,
       ...props
     }: MessageBoxProps,
     ref: ForwardedRef<MessageBoxHandle | null>
@@ -305,7 +318,13 @@ export const MessageBox = forwardRef(
 
     return (
       <>
-        <JumpButton position="top" isHidden={isOverflowing && atTop} onClick={scrollToTop} />
+        <JumpButton
+          position="top"
+          isHidden={isOverflowing && atTop}
+          onClick={scrollToTop}
+          jumpButtonProps={jumpButtonTopProps}
+          jumpButtonTooltipProps={jumpButtonTopTooltipProps}
+        />
         <div
           role="region"
           tabIndex={0}
@@ -324,6 +343,8 @@ export const MessageBox = forwardRef(
           position="bottom"
           isHidden={isOverflowing && atBottom}
           onClick={() => scrollToBottom({ resumeSmartScroll: true })}
+          jumpButtonProps={jumpButtonBottomProps}
+          jumpButtonTooltipProps={jumpButtonBottomTooltipProps}
         />
       </>
     );

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();
+  });
+});