@patternfly/chatbot 6.4.0-prerelease.21 → 6.4.0-prerelease.23

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/ToolResponse/ToolResponse.test.tsx

@@ -75,4 +75,34 @@ describe('ToolResponse', () => {
     const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
     expect(subheadingContainer).toBeFalsy();
   });
+
+  it('should not render card when cardTitle and cardBody are not provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} cardBody={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeFalsy();
+  });
+
+  it('should render card when only cardTitle is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardBody={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeTruthy();
+  });
+
+  it('should render card when only cardBody is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeTruthy();
+  });
+
+  it('should render divider when cardBody and cardTitle are provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeTruthy();
+  });
+
+  it('should not render divider when only cardBody is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
+  });
+
+  it('should not render divider when only cardTitle is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardBody={undefined} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
+  });
 });

package/src/ToolResponse/ToolResponse.tsx

@@ -25,9 +25,9 @@ export interface ToolResponseProps {
   /** Body text rendered inside expandable section */
   body?: React.ReactNode | string;
   /** Content passed into tool response card body */
-  cardBody: React.ReactNode;
+  cardBody?: React.ReactNode;
   /** Content passed into tool response card title */
-  cardTitle: React.ReactNode;
+  cardTitle?: React.ReactNode;
   /** Additional props passed to main card */
   cardProps?: CardProps;
   /** Additional props passed to main card body */
@@ -80,11 +80,13 @@ export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
               </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>
+            {(cardTitle || cardBody) && (
+              <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
+                {cardTitle && <CardTitle {...toolResponseCardTitleProps}>{cardTitle}</CardTitle>}
+                {cardTitle && cardBody && <Divider {...toolResponseCardDividerProps} />}
+                {cardBody && <CardBody {...toolResponseCardBodyProps}>{cardBody}</CardBody>}
+              </Card>
+            )}
           </div>
         </ExpandableSection>
       </CardBody>

package/src/index.ts

@@ -93,6 +93,9 @@ export * from './SourcesCard';
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
 
+export { default as ToolCall } from './ToolCall';
+export * from './ToolCall';
+
 export { default as ToolResponse } from './ToolResponse';
 export * from './ToolResponse';
 

package/src/main.scss

@@ -37,11 +37,7 @@
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
 @import './TermsOfUse/TermsOfUse';
 @import './ToolResponse/ToolResponse';
-
-.ws-full-page-utils {
-  left: 0 !important;
-  right: auto !important;
-}
+@import './ToolCall/ToolCall';
 
 // hide from view but not assistive technologies
 // https://css-tricks.com/inclusively-hidden/