@patternfly/chatbot 6.4.0-prerelease.20 → 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

@@ -36,6 +36,8 @@ export { default as FileDropZone } from './FileDropZone';
 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';
 export { default as Message } from './Message';
@@ -58,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

@@ -37,6 +37,8 @@ export { default as FileDropZone } from './FileDropZone';
 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';
 export { default as Message } from './Message';
@@ -59,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/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.20",
+  "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/AttachmentEdit.tsx

@@ -19,7 +19,7 @@ export const AttachmentEditModalExample: FunctionComponent = () => {
         id="modal-compact-edit"
         name="modal-compact-edit"
       ></Checkbox>
-      <Button onClick={handleModalToggle}>Launch modal</Button>
+      <Button onClick={handleModalToggle}>Launch attachment edit modal</Button>
       <AttachmentEdit
         code="I am a code snippet"
         fileName="test.yaml"

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

@@ -0,0 +1,53 @@
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import { Button, Checkbox } from '@patternfly/react-core';
+import ImagePreview from '@patternfly/chatbot/dist/dynamic/ImagePreview';
+import filePreview from './file-preview.svg';
+
+export const AttachmentEditModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
+  const [hasNav, setHasNav] = useState(false);
+
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Show multiple images"
+        isChecked={hasNav}
+        onChange={() => setHasNav(!hasNav)}
+        id="modal-compact-image-has-nav"
+        name="modal-compact-image-has-nav"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="modal-compact-image-preview"
+        name="modal-compact-image-preview"
+      ></Checkbox>
+      <Button onClick={handleModalToggle}>Launch image preview modal</Button>
+      <ImagePreview
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        isCompact={isCompact}
+        onCloseFileDetailsLabel={() => {
+          // eslint-disable-next-line no-console
+          console.log('Clicked close button');
+        }}
+        images={
+          hasNav
+            ? /* eslint-disable indent */
+              [
+                { fileName: 'image1.png', fileSize: '134KB', image: <img src={filePreview} alt="Preview one" /> },
+                { fileName: 'image2.png', fileSize: '134KB', image: <img src={filePreview} alt="Preview two" /> }
+              ]
+            : [{ fileName: 'image.png', fileSize: '134KB', image: <img src={filePreview} alt="One" /> }]
+          /* eslint-enable indent */
+        }
+      ></ImagePreview>
+    </>
+  );
+};

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

@@ -48,6 +48,8 @@ import userAvatar from './user_avatar.svg';
 import squareImg from './PF-social-color-square.svg';
 import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, Ref, isValidElement, cloneElement, Children, ReactNode, useRef, useEffect } from 'react';
 import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
+import ImagePreview from '@patternfly/chatbot/dist/dynamic/ImagePreview';
+import filePreview from './file-preview.svg';
 
 The `content` prop of the `<Message>` component is passed to a `<Markdown>` component (from [react-markdown](https://remarkjs.github.io/react-markdown/)), which is configured to translate plain text strings into PatternFly [`<Content>` components](/components/content) and code blocks into PatternFly [`<CodeBlock>` components.](/components/code-block)
 
@@ -189,7 +191,7 @@ If you are using [model context protocol (MCP)](https://www.redhat.com/en/blog/m
 
 ### Messages with deep thinking
 
-You can share details about the "thought process" behind an LLM's response, also known as deep thinking. To display a customizable, expandable card with these details, pass `deepThinking` to `<Message>` and provide a subheading (optional) and content body. 
+You can share details about the "thought process" behind an LLM's response, also known as deep thinking. To display a customizable, expandable card with these details, pass `deepThinking` to `<Message>` and provide a subheading (optional) and content body.
 
 Because this is an evolving area, this card content is currently fully customizable.
 
@@ -197,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.
@@ -274,6 +286,14 @@ To allow users to edit an attached file, load a new code editor within the ChatB
 
 ```
 
+### Image preview
+
+To allow users to preview images, load a modal that contains a view of the file name, file size, and the image. Users can toggle between multiple images by using pagination controls at the bottom of the modal. Return users to the main ChatBot window once they close the modal.
+
+```js file="./ImagePreview.tsx"
+
+```
+
 ### File preview
 
 If the contents of an attachment cannot be previewed, load a file preview modal with a view of the file name and an unavailable message. When users close the modal, return to the main ChatBot window.

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

@@ -19,7 +19,7 @@ export const PreviewAttachmentExample: FunctionComponent = () => {
         id="modal-compact-preview"
         name="modal-compact-preview"
       ></Checkbox>
-      <Button onClick={handleModalToggle}>Launch modal</Button>
+      <Button onClick={handleModalToggle}>Launch attachment preview modal</Button>
       <PreviewAttachment
         code="I am a code snippet"
         fileName="test.yaml"