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

package/dist/esm/ToolCall/ToolCall.test.js

@@ -0,0 +1,139 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+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(_jsx(ToolCall, Object.assign({}, defaultProps)));
+        expect(screen.getByText(defaultProps.titleText)).toBeVisible();
+    });
+    it('Does not render with passed in loadingText when isLoading is false', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps)));
+        expect(screen.queryByText(defaultProps.loadingText)).not.toBeInTheDocument();
+    });
+    it('Renders with passed in loadingText when isLoading is true', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isLoading: true })));
+        expect(screen.getByText(defaultProps.loadingText)).toBeVisible();
+    });
+    it('Does not render titleText when isLoading is true', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isLoading: true })));
+        expect(screen.queryByText(defaultProps.titleText)).not.toBeInTheDocument();
+    });
+    it('Passes spinnerProps to Spinner', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isLoading: true, spinnerProps: { id: 'spinner-test-id' } })));
+        expect(screen.getByRole('progressbar')).toHaveAttribute('id', 'spinner-test-id');
+    });
+    it('Does not render expandable toggle by default', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps)));
+        expect(screen.queryByRole('button', { name: defaultProps.titleText })).not.toBeInTheDocument();
+    });
+    it('Renders titleText inside expandable toggle when expandableContent is passed', () => {
+        render(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, defaultProps, { expandableContent: "Expandable Content" })));
+        expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+    });
+    it('Renders expandable content when expandableContent is passed and toggle is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { expandableContent: "Expandable Content" })));
+        yield user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+        expect(screen.getByText('Expandable Content')).toBeVisible();
+    }));
+    it('Passes expandableSectionProps to ExpandableSection', () => {
+        render(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, defaultProps)));
+        expect(screen.getByRole('button', { name: 'Run tool' })).toBeVisible();
+    });
+    it('Renders "cancel" action button by default', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps)));
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
+    });
+    it('Does not render "run" action button when isLoading is true', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isLoading: true })));
+        expect(screen.queryByRole('button', { name: 'Run tool' })).not.toBeInTheDocument();
+    });
+    it('Does not render "cancel" action button when isLoading is true', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isLoading: true })));
+        expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
+    });
+    it('Renders runButtonText when passed', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { runButtonText: "Run my custom tool" })));
+        expect(screen.getByRole('button', { name: 'Run my custom tool' })).toBeVisible();
+    });
+    it('Renders cancelButtonText when passed', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { cancelButtonText: "Cancel my custom tool" })));
+        expect(screen.getByRole('button', { name: 'Cancel my custom tool' })).toBeVisible();
+    });
+    it('Passes runButtonProps to Button', () => {
+        render(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, 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(_jsx(ToolCall, Object.assign({}, defaultProps, { actions: [_jsx("div", { children: "Custom action 1" }, "custom-action-1"), _jsx("div", { children: "Custom action 2" }, "custom-action-2")] })));
+        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(_jsx(ToolCall, Object.assign({}, defaultProps, { actions: [_jsx("div", { children: "Custom action 1" }, "custom-action-1"), _jsx("div", { children: "Custom action 2" }, "custom-action-2")], 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(_jsx(ToolCall, Object.assign({}, defaultProps, { cardProps: { id: 'card-test-id' } })));
+        expect(screen.getByRole('button', { name: 'Run tool' }).closest('#card-test-id')).toBeVisible();
+    });
+    it('Passes cardBodyProps to CardBody', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { cardBodyProps: { id: 'card-body-test-id' } })));
+        expect(screen.getByText(defaultProps.titleText).closest('#card-body-test-id')).toBeVisible();
+    });
+    it('Passes cardFooterProps to CardFooter', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { cardFooterProps: { id: 'card-footer-test-id' } })));
+        expect(screen.getByRole('button', { name: 'Run tool' }).closest('#card-footer-test-id')).toBeVisible();
+    });
+});

package/dist/esm/ToolCall/index.d.ts

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

package/dist/esm/ToolCall/index.js

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

package/dist/esm/index.d.ts

@@ -60,6 +60,8 @@ export { default as SourcesCard } from './SourcesCard';
 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';
 export { default as tracking } from './tracking';

package/dist/esm/index.js

@@ -61,6 +61,8 @@ export { default as SourcesCard } from './SourcesCard';
 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';
 export { default as tracking } from './tracking';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/DeepThinking/DeepThinking.test.tsx","../src/DeepThinking/DeepThinking.tsx","../src/DeepThinking/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/FilePreview/FilePreview.test.tsx","../src/FilePreview/FilePreview.tsx","../src/FilePreview/index.ts","../src/ImagePreview/ImagePreview.test.tsx","../src/ImagePreview/ImagePreview.tsx","../src/ImagePreview/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/SuperscriptMessage/SuperscriptMessage.tsx","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/DeepThinking/DeepThinking.test.tsx","../src/DeepThinking/DeepThinking.tsx","../src/DeepThinking/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/FilePreview/FilePreview.test.tsx","../src/FilePreview/FilePreview.tsx","../src/FilePreview/index.ts","../src/ImagePreview/ImagePreview.test.tsx","../src/ImagePreview/ImagePreview.tsx","../src/ImagePreview/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/SuperscriptMessage/SuperscriptMessage.tsx","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolCall/ToolCall.test.tsx","../src/ToolCall/ToolCall.tsx","../src/ToolCall/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.21",
+  "version": "6.4.0-prerelease.22",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolCall.tsx

@@ -0,0 +1,45 @@
+import { FunctionComponent, useState } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
+
+export const MessageWithToolCallExample: FunctionComponent = () => {
+  const [toolCallsAreLoading, setToolCallsAreLoading] = useState(false);
+  return (
+    <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsXl' }}>
+      <Checkbox
+        label="Tool calls are loading"
+        id="tool-calls-are-loading"
+        isChecked={toolCallsAreLoading}
+        onChange={() => {
+          setToolCallsAreLoading(!toolCallsAreLoading);
+        }}
+      />
+      <FlexItem>
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This example has a static tool call title:"
+          toolCall={{
+            titleText: "Calling 'awesome_tool'",
+            loadingText: "Loading 'awesome_tool'",
+            isLoading: toolCallsAreLoading
+          }}
+        />
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This example has an expandable tool call title, with an additional description::"
+          toolCall={{
+            titleText: "Calling 'awesome_tool_expansion'",
+            expandableContent: 'This is the expandable content for the tool call.',
+            isLoading: toolCallsAreLoading,
+            loadingText: "Loading 'awesome_tool_expansion'"
+          }}
+        />
+      </FlexItem>
+    </Flex>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -199,6 +199,16 @@ Because this is an evolving area, this card content is currently fully customiza
 
 ```
 
+### Messages with tool calls
+
+If you are using [model context protocol (MCP)](https://www.redhat.com/en/blog/model-context-protocol-discover-missing-link-ai-integration), you can share tool call information with users as part of a message. To display a tool card card, pass `toolCalls` to `<Message>`. This card contains a title, actions for running the tool and cancelling, and optional descriptive text.
+
+You can also display a loading animation until the tool call can be run. To visualize loading behavior in this example, select the "Tool calls are loading" checkbox.
+
+```js file="./MessageWithToolCall.tsx"
+
+```
+
 ### Messages with quick start tiles
 
 [Quick start](/extensions/quick-starts/) tiles can be added to messages via the `quickStarts` prop. Users can initiate the quick start from a link within the message tile.

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -123,7 +123,7 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 This demo displays a ChatBot in a static, inline drawer. This demo includes:
 
 1. An empty [PatternFly page](/components/page) with a sidebar and masthead.
-2. A [basic ChatBot](#basic-chatbot), placed beside the page content. It does not overlay the page content, cannot be minimized, and does not allow you to change the display mode by default.
+2. A [basic ChatBot](#basic-chatbot), placed beside the page content. It does not overlay the page content and does not allow you to change the display mode by default.
 
 **Note:** The inline drawer ChatBot is built to fit and perform within a drawer, but the implementation of the drawer is up to you. This drawer can look different for each product, but will often be placed to the side of the page, inline with the page content.
 

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