@patternfly/chatbot 1.0.0

package/src/ToolCall/ToolCall.scss

@@ -0,0 +1,37 @@
+.pf-chatbot__tool-call {
+  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
+
+  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,275 @@
+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();
+  });
+
+  it('Renders collapsed by default when expandableContent is provided', () => {
+    render(<ToolCall {...defaultProps} expandableContent="Expandable Content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
+
+  it('Renders expanded when isDefaultExpanded is true', () => {
+    render(<ToolCall {...defaultProps} isDefaultExpanded expandableContent="Expandable Content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(
+      <ToolCall
+        {...defaultProps}
+        isDefaultExpanded={false}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ isExpanded: true }}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <ToolCall
+        {...defaultProps}
+        isDefaultExpanded={false}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ onToggle: customOnToggle }}
+      />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.titleText });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalledTimes(1);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
+
+  it('should render titleText as markdown when isTitleMarkdown is true', () => {
+    const titleText = '**Bold title**';
+    const { container } = render(<ToolCall titleText={titleText} isTitleMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold title')).toBeTruthy();
+  });
+
+  it('should not render titleText as markdown when isTitleMarkdown is false', () => {
+    const titleText = '**Bold title**';
+    render(<ToolCall titleText={titleText} />);
+    expect(screen.getByText('**Bold title**')).toBeTruthy();
+  });
+
+  it('should render expandableContent as markdown when isExpandableContentMarkdown is true', async () => {
+    const user = userEvent.setup();
+    const expandableContent = '**Bold expandable content**';
+    const { container } = render(
+      <ToolCall {...defaultProps} expandableContent={expandableContent} isExpandableContentMarkdown />
+    );
+    await user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold expandable content')).toBeTruthy();
+  });
+
+  it('should not render expandableContent as markdown when isExpandableContentMarkdown is false', async () => {
+    const user = userEvent.setup();
+    const expandableContent = '**Bold expandable content**';
+    render(<ToolCall {...defaultProps} expandableContent={expandableContent} />);
+    await user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+    expect(screen.getByText('**Bold expandable content**')).toBeTruthy();
+  });
+
+  it('should pass markdownContentProps to MarkdownContent component', () => {
+    const titleText = '**Bold title**';
+    const { container } = render(
+      <ToolCall titleText={titleText} isTitleMarkdown markdownContentProps={{ isPrimary: true }} />
+    );
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+});

package/src/ToolCall/ToolCall.tsx

@@ -0,0 +1,192 @@
+import { useState, 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';
+import MarkdownContent from '../MarkdownContent';
+import type { MarkdownContentProps } from '../MarkdownContent';
+
+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;
+  /** Flag indicating whether the expandable content is expanded by default. */
+  isDefaultExpanded?: boolean;
+  /** 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'>;
+  /** Whether to enable markdown rendering for titleText. When true, titleText will be parsed as markdown. */
+  isTitleMarkdown?: boolean;
+  /** Whether to enable markdown rendering for expandableContent. When true and expandableContent is a string, it will be parsed as markdown. */
+  isExpandableContentMarkdown?: 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 ToolCall: FunctionComponent<ToolCallProps> = ({
+  titleText,
+  loadingText,
+  isLoading,
+  expandableContent,
+  isDefaultExpanded = false,
+  runButtonText = 'Run tool',
+  runButtonProps,
+  runActionItemProps,
+  cancelButtonText = 'Cancel',
+  cancelButtonProps,
+  cancelActionItemProps,
+  actions,
+  actionListProps,
+  actionListGroupProps,
+  actionListItemProps,
+  cardProps,
+  cardBodyProps,
+  cardFooterProps,
+  expandableSectionProps,
+  spinnerProps,
+  isTitleMarkdown,
+  isExpandableContentMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false
+}: ToolCallProps) => {
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const renderTitle = () => {
+    if (isTitleMarkdown) {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={titleText} {...markdownContentProps} />;
+    }
+    return titleText;
+  };
+
+  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">{renderTitle()}</span>
+      )}
+    </span>
+  );
+
+  const renderExpandableContent = () => {
+    if (isExpandableContentMarkdown && typeof expandableContent === 'string') {
+      return (
+        <MarkdownContent
+          shouldRetainStyles={shouldRetainStyles}
+          content={expandableContent}
+          {...markdownContentProps}
+        />
+      );
+    }
+    return expandableContent;
+  };
+  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}
+            onToggle={onToggle}
+            isExpanded={isExpanded}
+            isIndented
+            {...expandableSectionProps}
+          >
+            {renderExpandableContent()}
+          </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/ToolResponse/ToolResponse.scss

@@ -0,0 +1,46 @@
+.pf-chatbot__tool-response {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
+  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--default);
+  --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--default);
+  }
+}
+
+.pf-chatbot__tool-response-expandable-section .pf-v6-c-expandable-section__toggle .pf-m-markdown {
+  padding: inherit;
+}
+
+.pf-chatbot__tool-response {
+  .pf-chatbot__message-image {
+    max-width: 100%;
+  }
+}