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

package/src/ImagePreview/ImagePreview.tsx

@@ -0,0 +1,200 @@
+import {
+  Button,
+  ButtonVariant,
+  Icon,
+  ModalBody,
+  ModalBodyProps,
+  ModalFooter,
+  ModalHeader,
+  ModalHeaderProps,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
+import {
+  useState,
+  useEffect,
+  type FunctionComponent,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent
+} from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal, { ChatbotModalProps } from '../ChatbotModal';
+import FileDetailsLabel, { FileDetailsLabelProps } from '../FileDetailsLabel';
+import { TrashIcon } from '@patternfly/react-icons';
+
+export interface ImagePreviewProps extends Omit<ChatbotModalProps, 'children'> {
+  /** Class applied to modal */
+  className?: string;
+  /** Function that handles modal toggle */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to modal header */
+  modalHeaderProps?: ModalHeaderProps;
+  /** Additional props passed to modal body */
+  modalBodyProps?: ModalBodyProps;
+  /** Images displayed in modal */
+  images: { fileName: string; fileSize?: string; image: React.ReactNode }[];
+  /** Flag indicating if the pagination is disabled. */
+  isDisabled?: boolean;
+  /** Accessible label for the pagination component. */
+  paginationAriaLabel?: string;
+  /** Accessible label for the button which moves to the next page. */
+  toNextPageAriaLabel?: string;
+  /** Accessible label for the button which moves to the previous page. */
+  toPreviousPageAriaLabel?: string;
+  /** Function called when user clicks to navigate to next page. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user clicks to navigate to previous page. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when page is changed. */
+  onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+  /** Callback function for when file details label close button is clicked */
+  onCloseFileDetailsLabel?: (event: React.MouseEvent, fileName: string, fileId?: string | number) => void;
+  /** Props passed to file details label */
+  fileDetailsLabelProps?: Omit<FileDetailsLabelProps, 'fileName'>;
+  /** Text shown in navigation */
+  paginationContent?: string;
+  /** Navigation progress announced to assistive devices. Should state the current page/image. */
+  screenreaderText?: string;
+}
+
+const ImagePreview: FunctionComponent<ImagePreviewProps> = ({
+  isModalOpen,
+  displayMode = ChatbotDisplayMode.default,
+  isCompact,
+  className,
+  handleModalToggle,
+  title = 'Preview images',
+  modalHeaderProps,
+  modalBodyProps,
+  images,
+  isDisabled,
+  onSetPage,
+  onPreviousClick,
+  toNextPageAriaLabel = 'Go to next image',
+  toPreviousPageAriaLabel = 'Go to previous image',
+  onNextClick,
+  paginationAriaLabel,
+  onCloseFileDetailsLabel,
+  fileDetailsLabelProps,
+  paginationContent,
+  screenreaderText,
+  ...props
+}: ImagePreviewProps) => {
+  const [page, setPage] = useState(1);
+  const paginationText = paginationContent || `${page}/${images.length}`;
+
+  useEffect(() => {
+    if (images.length === 0 || page > images.length) {
+      setPage(1);
+    }
+  }, [images.length, page]);
+
+  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+    onSetPage && onSetPage(_evt, newPage);
+  };
+
+  return (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      className={`pf-chatbot__image-preview-modal pf-chatbot__image-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
+      displayMode={displayMode}
+      onClose={handleModalToggle}
+      isCompact={isCompact}
+      {...props}
+    >
+      <ModalHeader title={title} {...modalHeaderProps} />
+      <ModalBody className="pf-chatbot__image-preview-body" {...modalBodyProps}>
+        {images.length > 0 && images[page - 1] && (
+          <Stack hasGutter className="pf-chatbot__image-preview-stack">
+            <StackItem>
+              <FileDetailsLabel
+                fileName={images[page - 1].fileName}
+                fileSize={images[page - 1].fileSize}
+                hasTruncation={false}
+                onClose={onCloseFileDetailsLabel}
+                closeButtonIcon={<TrashIcon />}
+                {...fileDetailsLabelProps}
+              />
+            </StackItem>
+            <StackItem>
+              <div className="pf-chatbot__image-preview-body">{images[page - 1].image}</div>
+            </StackItem>
+          </Stack>
+        )}
+      </ModalBody>
+      {images.length > 1 && (
+        <ModalFooter className="pf-chatbot__image-preview-footer">
+          <nav className={`pf-chatbot__image-preview-footer-buttons`} aria-label={paginationAriaLabel}>
+            <Button
+              variant={ButtonVariant.plain}
+              isDisabled={isDisabled || page === 1}
+              data-action="previous"
+              onClick={(event) => {
+                const newPage = page > 1 ? page - 1 : 1;
+                handleNewPage(event, newPage);
+                onPreviousClick && onPreviousClick(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>{paginationText}</span>
+            <div className="pf-chatbot-m-hidden" aria-live="polite">
+              {screenreaderText ?? `Image ${page} of ${images.length}`}
+            </div>
+            <Button
+              variant={ButtonVariant.plain}
+              isDisabled={isDisabled || page === images.length}
+              aria-label={toNextPageAriaLabel}
+              data-action="next"
+              onClick={(event) => {
+                const newPage = page + 1 <= images.length ? page + 1 : images.length;
+                handleNewPage(event, newPage);
+                onNextClick && onNextClick(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>
+        </ModalFooter>
+      )}
+    </ChatbotModal>
+  );
+};
+
+export default ImagePreview;

package/src/ImagePreview/index.ts

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

package/src/Message/Message.tsx

@@ -52,6 +52,7 @@ import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOf
 import ToolResponse, { ToolResponseProps } from '../ToolResponse';
 import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
 import SuperscriptMessage from './SuperscriptMessage/SuperscriptMessage';
+import ToolCall, { ToolCallProps } from '../ToolCall';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -200,6 +201,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   deepThinking?: DeepThinkingProps;
   /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
   remarkGfmProps?: Options;
+  /** Props for a tool call message */
+  toolCall?: ToolCallProps;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -245,6 +248,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   toolResponse,
   deepThinking,
   remarkGfmProps,
+  toolCall,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -485,6 +489,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
             {afterMainContent && <>{afterMainContent}</>}
             {toolResponse && <ToolResponse {...toolResponse} />}
             {deepThinking && <DeepThinking {...deepThinking} />}
+            {toolCall && <ToolCall {...toolCall} />}
             {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile

package/src/MessageBox/MessageBox.scss

@@ -23,18 +23,6 @@
   margin-top: auto !important;
 }
 
-// hide from view but not assistive technologies
-// https://css-tricks.com/inclusively-hidden/
-.pf-chatbot__messagebox-announcement {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 @media screen and (min-width: 64rem) {
   .pf-chatbot--embedded,
   .pf-chatbot--drawer,

package/src/MessageBox/MessageBox.tsx

@@ -335,7 +335,7 @@ export const MessageBox = forwardRef(
           {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}
         >
           {children}
-          <div className="pf-chatbot__messagebox-announcement" aria-live="polite">
+          <div className="pf-chatbot__messagebox-announcement pf-chatbot-m-hidden" aria-live="polite">
             {announcement}
           </div>
         </div>

package/src/ToolCall/ToolCall.scss

@@ -0,0 +1,37 @@
+.pf-chatbot__tool-call {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--small);
+
+  overflow: unset;
+  row-gap: var(--pf-t--global--spacer--sm);
+
+  .pf-chatbot__tool-call-title-content {
+    display: flex;
+    gap: var(--pf-t--global--spacer--xs);
+    align-items: center;
+  }
+
+  .pf-chatbot__tool-call-title:not(:has(.pf-chatbot__tool-call-expandable-section)) {
+    .pf-chatbot__tool-call-title-text {
+      color: var(--pf-t--global--text--color--regular);
+      font-size: var(--pf-t--global--font--size--body--default);
+      font-weight: var(--pf-t--global--font--weight--body--default);
+    }
+  }
+
+  .pf-chatbot__tool-call-title {
+    overflow: unset;
+  }
+
+  .pf-chatbot__tool-call-expandable-section {
+    --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--xs);
+
+    .pf-v6-c-expandable-section__content {
+      color: var(--pf-t--global--text--color--subtle);
+    }
+  }
+
+  .pf-chatbot__tool-call-action-list {
+    justify-content: flex-end;
+  }
+}

package/src/ToolCall/ToolCall.test.tsx

@@ -0,0 +1,184 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import ToolCall from './ToolCall';
+
+describe('ToolCall', () => {
+  const defaultProps = {
+    titleText: 'ToolCall Title',
+    loadingText: 'Loading ToolCall'
+  };
+
+  it('Renders with passed in titleText', () => {
+    render(<ToolCall {...defaultProps} />);
+    expect(screen.getByText(defaultProps.titleText)).toBeVisible();
+  });
+
+  it('Does not render with passed in loadingText when isLoading is false', () => {
+    render(<ToolCall {...defaultProps} />);
+    expect(screen.queryByText(defaultProps.loadingText)).not.toBeInTheDocument();
+  });
+
+  it('Renders with passed in loadingText when isLoading is true', () => {
+    render(<ToolCall {...defaultProps} isLoading />);
+    expect(screen.getByText(defaultProps.loadingText)).toBeVisible();
+  });
+
+  it('Does not render titleText when isLoading is true', () => {
+    render(<ToolCall {...defaultProps} isLoading />);
+    expect(screen.queryByText(defaultProps.titleText)).not.toBeInTheDocument();
+  });
+
+  it('Passes spinnerProps to Spinner', () => {
+    render(<ToolCall {...defaultProps} isLoading spinnerProps={{ id: 'spinner-test-id' }} />);
+
+    expect(screen.getByRole('progressbar')).toHaveAttribute('id', 'spinner-test-id');
+  });
+
+  it('Does not render expandable toggle by default', () => {
+    render(<ToolCall {...defaultProps} />);
+    expect(screen.queryByRole('button', { name: defaultProps.titleText })).not.toBeInTheDocument();
+  });
+
+  it('Renders titleText inside expandable toggle when expandableContent is passed', () => {
+    render(<ToolCall {...defaultProps} expandableContent="Expandable Content" />);
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toBeVisible();
+  });
+
+  it('Does not render expandable content when expandableContent is passed by default', () => {
+    render(<ToolCall {...defaultProps} expandableContent="Expandable Content" />);
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
+
+  it('Renders expandable content when expandableContent is passed and toggle is clicked', async () => {
+    const user = userEvent.setup();
+    render(<ToolCall {...defaultProps} expandableContent="Expandable Content" />);
+    await user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('Passes expandableSectionProps to ExpandableSection', () => {
+    render(
+      <ToolCall
+        {...defaultProps}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ id: 'expandable-section-test-id', isExpanded: true }}
+      />
+    );
+    expect(screen.getByRole('region').parentElement).toHaveAttribute('id', 'expandable-section-test-id');
+  });
+
+  it('Renders "run" action button by default', () => {
+    render(<ToolCall {...defaultProps} />);
+    expect(screen.getByRole('button', { name: 'Run tool' })).toBeVisible();
+  });
+
+  it('Renders "cancel" action button by default', () => {
+    render(<ToolCall {...defaultProps} />);
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+  });
+
+  it('Does not render "run" action button when isLoading is true', () => {
+    render(<ToolCall {...defaultProps} isLoading />);
+    expect(screen.queryByRole('button', { name: 'Run tool' })).not.toBeInTheDocument();
+  });
+
+  it('Does not render "cancel" action button when isLoading is true', () => {
+    render(<ToolCall {...defaultProps} isLoading />);
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
+  });
+
+  it('Renders runButtonText when passed', () => {
+    render(<ToolCall {...defaultProps} runButtonText="Run my custom tool" />);
+    expect(screen.getByRole('button', { name: 'Run my custom tool' })).toBeVisible();
+  });
+
+  it('Renders cancelButtonText when passed', () => {
+    render(<ToolCall {...defaultProps} cancelButtonText="Cancel my custom tool" />);
+    expect(screen.getByRole('button', { name: 'Cancel my custom tool' })).toBeVisible();
+  });
+
+  it('Passes runButtonProps to Button', () => {
+    render(<ToolCall {...defaultProps} runButtonProps={{ id: 'run-button-test-id' }} />);
+    expect(screen.getByRole('button', { name: 'Run tool' })).toHaveAttribute('id', 'run-button-test-id');
+  });
+
+  it('Passes cancelButtonProps to Button', () => {
+    render(<ToolCall {...defaultProps} cancelButtonProps={{ id: 'cancel-button-test-id' }} />);
+    expect(screen.getByRole('button', { name: 'Cancel' })).toHaveAttribute('id', 'cancel-button-test-id');
+  });
+
+  it('Passes runActionItemProps to ActionListItem', () => {
+    render(<ToolCall {...defaultProps} runActionItemProps={{ id: 'run-action-item-test-id' }} />);
+    expect(screen.getByRole('button', { name: 'Run tool' }).parentElement).toHaveAttribute(
+      'id',
+      'run-action-item-test-id'
+    );
+  });
+
+  it('Passes cancelActionItemProps to ActionListItem', () => {
+    render(<ToolCall {...defaultProps} cancelActionItemProps={{ id: 'cancel-action-item-test-id' }} />);
+    expect(screen.getByRole('button', { name: 'Cancel' }).parentElement).toHaveAttribute(
+      'id',
+      'cancel-action-item-test-id'
+    );
+  });
+
+  it('Passes actionListProps to ActionList', () => {
+    render(<ToolCall {...defaultProps} actionListProps={{ id: 'action-list-test-id' }} />);
+    expect(screen.getByRole('button', { name: 'Run tool' }).closest('#action-list-test-id')).toBeVisible();
+  });
+
+  it('Passes actionListGroupProps to ActionListGroup', () => {
+    render(<ToolCall {...defaultProps} actionListGroupProps={{ id: 'action-list-group-test-id' }} />);
+    expect(screen.getByRole('button', { name: 'Run tool' }).closest('#action-list-group-test-id')).toBeVisible();
+  });
+
+  it('Passes actionListItemProps to ActionListItem for default actions', () => {
+    render(<ToolCall {...defaultProps} actionListItemProps={{ className: 'action-list-item-test-class' }} />);
+    expect(screen.getByRole('button', { name: 'Run tool' }).parentElement).toHaveClass('action-list-item-test-class');
+    expect(screen.getByRole('button', { name: 'Cancel' }).parentElement).toHaveClass('action-list-item-test-class');
+  });
+
+  it('Renders custom actions instead of default actions when actions are passed', () => {
+    render(
+      <ToolCall
+        {...defaultProps}
+        actions={[<div key="custom-action-1">Custom action 1</div>, <div key="custom-action-2">Custom action 2</div>]}
+      />
+    );
+
+    expect(screen.getByText('Custom action 1')).toBeVisible();
+    expect(screen.getByText('Custom action 2')).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Run tool' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
+  });
+
+  it('Passes actionListItemProps to ActionListItem for custom actions', () => {
+    render(
+      <ToolCall
+        {...defaultProps}
+        actions={[<div key="custom-action-1">Custom action 1</div>, <div key="custom-action-2">Custom action 2</div>]}
+        actionListItemProps={{ className: 'action-list-item-test-class' }}
+      />
+    );
+    expect(screen.getByText('Custom action 1').parentElement).toHaveClass('action-list-item-test-class');
+    expect(screen.getByText('Custom action 2').parentElement).toHaveClass('action-list-item-test-class');
+  });
+
+  it('Passes cardProps to Card', () => {
+    render(<ToolCall {...defaultProps} cardProps={{ id: 'card-test-id' }} />);
+    expect(screen.getByRole('button', { name: 'Run tool' }).closest('#card-test-id')).toBeVisible();
+  });
+
+  it('Passes cardBodyProps to CardBody', () => {
+    render(<ToolCall {...defaultProps} cardBodyProps={{ id: 'card-body-test-id' }} />);
+    expect(screen.getByText(defaultProps.titleText).closest('#card-body-test-id')).toBeVisible();
+  });
+
+  it('Passes cardFooterProps to CardFooter', () => {
+    render(<ToolCall {...defaultProps} cardFooterProps={{ id: 'card-footer-test-id' }} />);
+    expect(screen.getByRole('button', { name: 'Run tool' }).closest('#card-footer-test-id')).toBeVisible();
+  });
+});

package/src/ToolCall/ToolCall.tsx

@@ -0,0 +1,147 @@
+import { type FunctionComponent } from 'react';
+import {
+  ActionList,
+  ActionListProps,
+  ActionListGroup,
+  ActionListGroupProps,
+  ActionListItem,
+  ActionListItemProps,
+  Button,
+  ButtonProps,
+  Card,
+  CardProps,
+  CardBody,
+  CardBodyProps,
+  CardFooter,
+  CardFooterProps,
+  ExpandableSection,
+  ExpandableSectionProps,
+  Spinner,
+  SpinnerProps
+} from '@patternfly/react-core';
+
+export interface ToolCallProps {
+  /** Title text for the tool call. */
+  titleText: string;
+  /** Loading text for the tool call. */
+  loadingText?: string;
+  /** Flag indicating whether the tool call is loading or not. */
+  isLoading?: boolean;
+  /** Additional props for the spinner that is rendered when isLoading is true. */
+  spinnerProps?: SpinnerProps;
+  /** Content to render within an expandable section. */
+  expandableContent?: React.ReactNode;
+  /** Text content for the "run" action button. */
+  runButtonText?: string;
+  /** Additional props for the "run" action button. */
+  runButtonProps?: ButtonProps;
+  /** Additional props for the "run" action list item. */
+  runActionItemProps?: ActionListItemProps;
+  /** Text content for the "cancel" action button. */
+  cancelButtonText?: string;
+  /** Additional props for the "cancel" action button. */
+  cancelButtonProps?: ButtonProps;
+  /** Additional props for the "cancel" action list item. */
+  cancelActionItemProps?: ActionListItemProps;
+  /** Custom actions to render, typically a "cancel" and "run" action. This will override the default actions. */
+  actions?: React.ReactNode[];
+  /** Additional props for the action list */
+  actionListProps?: ActionListProps;
+  /** Additional props for the action list group. */
+  actionListGroupProps?: ActionListGroupProps;
+  /** Additional props for all action list items. */
+  actionListItemProps?: ActionListItemProps;
+  /** Additional props for the card. */
+  cardProps?: CardProps;
+  /** Additional props for the card body that contains the main tool call content. */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props for the card footer that contains the tool call actions. */
+  cardFooterProps?: CardFooterProps;
+  /** Additional props for the expandable section when expandableContent is passed. */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+}
+
+export const ToolCall: FunctionComponent<ToolCallProps> = ({
+  titleText,
+  loadingText,
+  isLoading,
+  expandableContent,
+  runButtonText = 'Run tool',
+  runButtonProps,
+  runActionItemProps,
+  cancelButtonText = 'Cancel',
+  cancelButtonProps,
+  cancelActionItemProps,
+  actions,
+  actionListProps,
+  actionListGroupProps,
+  actionListItemProps,
+  cardProps,
+  cardBodyProps,
+  cardFooterProps,
+  expandableSectionProps,
+  spinnerProps
+}: ToolCallProps) => {
+  const titleContent = (
+    <span className={`pf-chatbot__tool-call-title-content`}>
+      {isLoading ? (
+        <>
+          <Spinner diameter="1em" {...spinnerProps} />{' '}
+          {<span className="pf-chatbot__tool-call-title-text">{loadingText}</span>}
+        </>
+      ) : (
+        <span className="pf-chatbot__tool-call-title-text">{titleText}</span>
+      )}
+    </span>
+  );
+  const defaultActions = (
+    <>
+      <ActionListItem {...actionListItemProps} {...cancelActionItemProps}>
+        <Button variant="link" {...cancelButtonProps}>
+          {cancelButtonText}
+        </Button>
+      </ActionListItem>
+      <ActionListItem {...actionListItemProps} {...runActionItemProps}>
+        <Button variant="secondary" {...runButtonProps}>
+          {runButtonText}
+        </Button>
+      </ActionListItem>
+    </>
+  );
+
+  const customActions =
+    actions &&
+    actions.map((action, index) => (
+      <ActionListItem key={index} {...actionListItemProps}>
+        {action}
+      </ActionListItem>
+    ));
+
+  return (
+    <Card isCompact className="pf-chatbot__tool-call" {...cardProps}>
+      <CardBody className="pf-chatbot__tool-call-title" {...cardBodyProps}>
+        {expandableContent && !isLoading ? (
+          <ExpandableSection
+            className="pf-chatbot__tool-call-expandable-section"
+            toggleContent={titleContent}
+            isIndented
+            {...expandableSectionProps}
+          >
+            {expandableContent}
+          </ExpandableSection>
+        ) : (
+          titleContent
+        )}
+      </CardBody>
+      {!isLoading && (
+        <CardFooter {...cardFooterProps}>
+          <ActionList className="pf-chatbot__tool-call-action-list" {...actionListProps}>
+            <ActionListGroup {...actionListGroupProps}>{customActions || defaultActions}</ActionListGroup>
+          </ActionList>
+        </CardFooter>
+      )}
+    </Card>
+  );
+};
+
+export default ToolCall;

package/src/ToolCall/index.ts

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

package/src/index.ts

@@ -57,6 +57,9 @@ export * from './FileDropZone';
 export { default as FilePreview } from './FilePreview';
 export * from './FilePreview';
 
+export { default as ImagePreview } from './ImagePreview';
+export * from './ImagePreview';
+
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 
@@ -93,5 +96,8 @@ export * from './TermsOfUse';
 export { default as ToolResponse } from './ToolResponse';
 export * from './ToolResponse';
 
+export { default as ToolCall } from './ToolCall';
+export * from './ToolCall';
+
 export { default as tracking } from './tracking';
 export * from './tracking';