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

package/dist/esm/Message/Message.d.ts

@@ -60,12 +60,24 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     isLoading?: boolean;
     /** Array of attachments attached to a message */
     attachments?: MessageAttachment[];
-    /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen */
+    /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen.
+     * Can be a single actions object or an array of action group objects. When passing an array, you can pass an object of actions or
+     * an object that contains an actions property for finer control of selection persistence.
+     */
     actions?: {
         [key: string]: ActionProps;
-    };
+    } | {
+        [key: string]: ActionProps;
+    }[] | {
+        actions: {
+            [key: string]: ActionProps;
+        };
+        persistActionSelection?: boolean;
+    }[];
     /** When true, the selected action will persist even when clicking outside the component.
-     * When false (default), clicking outside or clicking another action will deselect the current selection. */
+     * When false (default), clicking outside or clicking another action will deselect the current selection.
+     * For finer control of multiple action groups, use persistActionSelection on each group.
+     */
     persistActionSelection?: boolean;
     /** Sources for message */
     sources?: SourcesCardProps;

package/dist/esm/Message/Message.js

@@ -213,7 +213,7 @@ export const MessageBase = (_a) => {
         }
         return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? _jsx(ErrorMessage, Object.assign({}, error)) : handleMarkdown()] }));
     };
-    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [avatar && (_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps))), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (_jsx(ResponseActions, { actions: actions, persistActionSelection: persistActionSelection })), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [avatar && (_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps))), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (_jsx(_Fragment, { children: Array.isArray(actions) ? (_jsx("div", { className: "pf-chatbot__response-actions-groups", children: actions.map((actionGroup, index) => (_jsx(ResponseActions, { actions: actionGroup.actions || actionGroup, persistActionSelection: persistActionSelection || actionGroup.persistActionSelection }, index))) })) : (_jsx(ResponseActions, { actions: actions, persistActionSelection: persistActionSelection })) })), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
                                     var _a;
                                     return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId, variant: isPrimary ? 'outline' : undefined }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
                                 }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })] })] })));

package/dist/esm/Message/Message.test.js

@@ -355,7 +355,7 @@ describe('Message', () => {
         expect(screen.queryByRole('button', { name: /No/i })).toBeFalsy();
         expect(screen.getByRole('button', { name: /1 more/i }));
     }));
-    it('should be able to show actions', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('Renders response actions when a single actions object is passed', () => __awaiter(void 0, void 0, void 0, function* () {
         render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
                 // eslint-disable-next-line no-console
                 positive: { onClick: () => console.log('Good response') },
@@ -373,9 +373,132 @@ describe('Message', () => {
                 listen: { onClick: () => console.log('Listen') }
             } }));
         ALL_ACTIONS.forEach(({ label }) => {
-            expect(screen.getByRole('button', { name: label })).toBeTruthy();
+            expect(screen.getByRole('button', { name: label })).toBeVisible();
         });
     }));
+    it('Renders response actions when an array of actions objects is passed', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: [
+                {
+                    // eslint-disable-next-line no-console
+                    positive: { onClick: () => console.log('Good response') },
+                    // eslint-disable-next-line no-console
+                    negative: { onClick: () => console.log('Bad response') }
+                },
+                {
+                    // eslint-disable-next-line no-console
+                    copy: { onClick: () => console.log('Copy') },
+                    // eslint-disable-next-line no-console
+                    edit: { onClick: () => console.log('Edit') },
+                    // eslint-disable-next-line no-console
+                    share: { onClick: () => console.log('Share') },
+                    // eslint-disable-next-line no-console
+                    download: { onClick: () => console.log('Download') }
+                },
+                {
+                    // eslint-disable-next-line no-console
+                    listen: { onClick: () => console.log('Listen') }
+                }
+            ] }));
+        ALL_ACTIONS.forEach(({ label }) => {
+            expect(screen.getByRole('button', { name: label })).toBeVisible();
+        });
+    }));
+    it('Renders response actions when an array of objects containing actions objects is passed', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: [
+                {
+                    actions: {
+                        // eslint-disable-next-line no-console
+                        positive: { onClick: () => console.log('Good response') },
+                        // eslint-disable-next-line no-console
+                        negative: { onClick: () => console.log('Bad response') }
+                    }
+                },
+                {
+                    actions: {
+                        // eslint-disable-next-line no-console
+                        copy: { onClick: () => console.log('Copy') },
+                        // eslint-disable-next-line no-console
+                        edit: { onClick: () => console.log('Edit') },
+                        // eslint-disable-next-line no-console
+                        share: { onClick: () => console.log('Share') },
+                        // eslint-disable-next-line no-console
+                        download: { onClick: () => console.log('Download') }
+                    }
+                },
+                {
+                    actions: {
+                        // eslint-disable-next-line no-console
+                        listen: { onClick: () => console.log('Listen') }
+                    }
+                }
+            ] }));
+        ALL_ACTIONS.forEach(({ label }) => {
+            expect(screen.getByRole('button', { name: label })).toBeVisible();
+        });
+    }));
+    it('should handle persistActionSelection correctly when a single actions object is passed', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Test message", persistActionSelection: true, actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            } }));
+        const goodBtn = screen.getByRole('button', { name: /Good response/i });
+        const badBtn = screen.getByRole('button', { name: /Bad response/i });
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(screen.getByText('Test message'));
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(badBtn);
+        expect(screen.getByRole('button', { name: /Bad response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should handle persistActionSelection correctly when an array of actions objects is passed', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Test message", persistActionSelection: true, actions: [
+                {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                },
+                {
+                    copy: { onClick: jest.fn() }
+                }
+            ] }));
+        const goodBtn = screen.getByRole('button', { name: /Good response/i });
+        const copyBtn = screen.getByRole('button', { name: /Copy/i });
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(screen.getByText('Test message'));
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(copyBtn);
+        expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(screen.getByText('Test message'));
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should handle persistActionSelection correctly when an array of objects containing actions objects is passed', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Test message", actions: [
+                {
+                    actions: {
+                        positive: { onClick: jest.fn() },
+                        negative: { onClick: jest.fn() }
+                    },
+                    persistActionSelection: true
+                },
+                {
+                    actions: {
+                        copy: { onClick: jest.fn() }
+                    },
+                    persistActionSelection: false
+                }
+            ] }));
+        const goodBtn = screen.getByRole('button', { name: /Good response/i });
+        const copyBtn = screen.getByRole('button', { name: /Copy/i });
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(copyBtn);
+        expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(screen.getByText('Test message'));
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(copyBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
     it('should not show actions if loading', () => __awaiter(void 0, void 0, void 0, function* () {
         render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, actions: {
                 // eslint-disable-next-line no-console

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

@@ -11,6 +11,8 @@ export interface ToolCallProps {
     spinnerProps?: SpinnerProps;
     /** Content to render within an expandable section. */
     expandableContent?: React.ReactNode;
+    /** Flag indicating whether the expandable content is expanded by default. */
+    isDefaultExpanded?: boolean;
     /** Text content for the "run" action button. */
     runButtonText?: string;
     /** Additional props for the "run" action button. */

package/dist/esm/ToolCall/ToolCall.js

@@ -1,10 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { ActionList, ActionListGroup, ActionListItem, Button, Card, CardBody, CardFooter, ExpandableSection, Spinner } from '@patternfly/react-core';
-export const ToolCall = ({ titleText, loadingText, isLoading, expandableContent, runButtonText = 'Run tool', runButtonProps, runActionItemProps, cancelButtonText = 'Cancel', cancelButtonProps, cancelActionItemProps, actions, actionListProps, actionListGroupProps, actionListItemProps, cardProps, cardBodyProps, cardFooterProps, expandableSectionProps, spinnerProps }) => {
+export const ToolCall = ({ titleText, loadingText, isLoading, expandableContent, isDefaultExpanded = false, runButtonText = 'Run tool', runButtonProps, runActionItemProps, cancelButtonText = 'Cancel', cancelButtonProps, cancelActionItemProps, actions, actionListProps, actionListGroupProps, actionListItemProps, cardProps, cardBodyProps, cardFooterProps, expandableSectionProps, spinnerProps }) => {
+    const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
     const titleContent = (_jsx("span", { className: `pf-chatbot__tool-call-title-content`, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, Object.assign({ diameter: "1em" }, spinnerProps)), ' ', _jsx("span", { className: "pf-chatbot__tool-call-title-text", children: loadingText })] })) : (_jsx("span", { className: "pf-chatbot__tool-call-title-text", children: titleText })) }));
     const defaultActions = (_jsxs(_Fragment, { children: [_jsx(ActionListItem, Object.assign({}, actionListItemProps, cancelActionItemProps, { children: _jsx(Button, Object.assign({ variant: "link" }, cancelButtonProps, { children: cancelButtonText })) })), _jsx(ActionListItem, Object.assign({}, actionListItemProps, runActionItemProps, { children: _jsx(Button, Object.assign({ variant: "secondary" }, runButtonProps, { children: runButtonText })) }))] }));
     const customActions = actions &&
         actions.map((action, index) => (_jsx(ActionListItem, Object.assign({}, actionListItemProps, { children: action }), index)));
-    return (_jsxs(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-call" }, cardProps, { children: [_jsx(CardBody, Object.assign({ className: "pf-chatbot__tool-call-title" }, cardBodyProps, { children: expandableContent && !isLoading ? (_jsx(ExpandableSection, Object.assign({ className: "pf-chatbot__tool-call-expandable-section", toggleContent: titleContent, isIndented: true }, expandableSectionProps, { children: expandableContent }))) : (titleContent) })), !isLoading && (_jsx(CardFooter, Object.assign({}, cardFooterProps, { children: _jsx(ActionList, Object.assign({ className: "pf-chatbot__tool-call-action-list" }, actionListProps, { children: _jsx(ActionListGroup, Object.assign({}, actionListGroupProps, { children: customActions || defaultActions })) })) })))] })));
+    return (_jsxs(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-call" }, cardProps, { children: [_jsx(CardBody, Object.assign({ className: "pf-chatbot__tool-call-title" }, cardBodyProps, { children: expandableContent && !isLoading ? (_jsx(ExpandableSection, Object.assign({ className: "pf-chatbot__tool-call-expandable-section", toggleContent: titleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true }, expandableSectionProps, { children: expandableContent }))) : (titleContent) })), !isLoading && (_jsx(CardFooter, Object.assign({}, cardFooterProps, { children: _jsx(ActionList, Object.assign({ className: "pf-chatbot__tool-call-action-list" }, actionListProps, { children: _jsx(ActionListGroup, Object.assign({}, actionListGroupProps, { children: customActions || defaultActions })) })) })))] })));
 };
 export default ToolCall;

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

@@ -136,4 +136,30 @@ describe('ToolCall', () => {
         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();
     });
+    it('Renders collapsed by default when expandableContent is provided', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { expandableContent: "Expandable Content" })));
+        expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+    });
+    it('Renders expanded when isDefaultExpanded is true', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isDefaultExpanded: true, expandableContent: "Expandable Content" })));
+        expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText('Expandable Content')).toBeVisible();
+    });
+    it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableContent: "Expandable Content", expandableSectionProps: { isExpanded: true } })));
+        expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText('Expandable Content')).toBeVisible();
+    });
+    it('expandableSectionProps.onToggle overrides internal onToggle behavior', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const customOnToggle = jest.fn();
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableContent: "Expandable Content", expandableSectionProps: { onToggle: customOnToggle } })));
+        const toggleButton = screen.getByRole('button', { name: defaultProps.titleText });
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        yield user.click(toggleButton);
+        expect(customOnToggle).toHaveBeenCalledTimes(1);
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+    }));
 });

package/dist/esm/ToolResponse/ToolResponse.d.ts

@@ -3,6 +3,8 @@ import { type FunctionComponent } from 'react';
 export interface ToolResponseProps {
     /** Toggle content shown for expandable section */
     toggleContent: React.ReactNode;
+    /** Flag indicating whether the expandable content is expanded by default. */
+    isDefaultExpanded?: boolean;
     /** Additional props passed to expandable section */
     expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
     /** Subheading rendered inside expandable section */

package/dist/esm/ToolResponse/ToolResponse.js

@@ -4,8 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 import { Card, CardBody, CardTitle, Divider, ExpandableSection } from '@patternfly/react-core';
 import { useState } from 'react';
-export const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
-    const [isExpanded, setIsExpanded] = useState(true);
+export const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, isDefaultExpanded = true, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
+    const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };

package/dist/esm/ToolResponse/ToolResponse.test.js

@@ -1,5 +1,15 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import ToolResponse from './ToolResponse';
 describe('ToolResponse', () => {
@@ -76,4 +86,34 @@ describe('ToolResponse', () => {
         const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardBody: undefined })));
         expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
     });
+    it('Renders expanded by default', () => {
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps)));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+        expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+    });
+    it('Renders collapsed when isDefaultExpanded is false', () => {
+        render(_jsx(ToolResponse, Object.assign({ isDefaultExpanded: false }, defaultProps)));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+        expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+    });
+    it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableSectionProps: { isExpanded: true } })));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+        expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+    });
+    it('expandableSectionProps.onToggle overrides internal onToggle behavior', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const customOnToggle = jest.fn();
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableSectionProps: { onToggle: customOnToggle } })));
+        const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        yield user.click(toggleButton);
+        expect(customOnToggle).toHaveBeenCalledTimes(1);
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+        expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+    }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.5.0-prerelease.20",
+  "version": "6.5.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/MessageWithDeepThinking.tsx

@@ -3,15 +3,29 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const MessageWithDeepThinkingExample: FunctionComponent = () => (
-  <Message
-    name="Bot"
-    role="bot"
-    avatar={patternflyAvatar}
-    content="This example has a body description that's within the recommended limit of 2 lines."
-    deepThinking={{
-      toggleContent: 'Show thinking',
-      subheading: 'Thought for 3 seconds',
-      body: "Here's why I said this."
-    }}
-  />
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This example has a body description that's within the recommended limit of 2 lines."
+      deepThinking={{
+        toggleContent: 'Show thinking',
+        subheading: 'Thought for 3 seconds',
+        body: "Here's why I said this."
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This example has deep thinking that is collapsed by default:"
+      deepThinking={{
+        isDefaultExpanded: false,
+        toggleContent: 'Show thinking',
+        subheading: 'Thought for 3 seconds',
+        body: "Here's why I said this."
+      }}
+    />
+  </>
 );

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

@@ -0,0 +1,61 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const MessageWithMultipleActionGroups: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This message contains multiple action groups, each with their own selection persistence: \n1. Feedback actions (thumbs up/down) with persistent selections \n2. Utility actions (copy, download) with non-persistent selections \n3. Listen action with persistent selection"
+      actions={[
+        {
+          actions: {
+            // eslint-disable-next-line no-console
+            positive: { onClick: () => console.log('Good response') },
+            // eslint-disable-next-line no-console
+            negative: { onClick: () => console.log('Bad response') }
+          },
+          persistActionSelection: true
+        },
+        {
+          actions: {
+            // eslint-disable-next-line no-console
+            copy: { onClick: () => console.log('Copy') },
+            // eslint-disable-next-line no-console
+            download: { onClick: () => console.log('Download') }
+          },
+          persistActionSelection: false
+        },
+        {
+          actions: {
+            // eslint-disable-next-line no-console
+            listen: { onClick: () => console.log('Listen') }
+          },
+          persistActionSelection: true
+        }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This message contains multiple action groups, both of which persist selections."
+      actions={[
+        {
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // eslint-disable-next-line no-console
+          negative: { onClick: () => console.log('Bad response') }
+        },
+        {
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        }
+      ]}
+      persistActionSelection={true}
+    />
+  </>
+);

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

@@ -31,7 +31,7 @@ export const MessageWithToolCallExample: FunctionComponent = () => {
           name="Bot"
           role="bot"
           avatar={patternflyAvatar}
-          content="This example has an expandable tool call title, with an additional description::"
+          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.',
@@ -39,6 +39,19 @@ export const MessageWithToolCallExample: FunctionComponent = () => {
             loadingText: "Loading 'awesome_tool_expansion'"
           }}
         />
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This example has an expandable tool call that is expanded by default:"
+          toolCall={{
+            isDefaultExpanded: true,
+            titleText: "Calling 'awesome_tool_expansion'",
+            expandableContent: 'This is the expandable content for the tool call.',
+            isLoading: toolCallsAreLoading,
+            loadingText: "Loading 'awesome_tool_expansion'"
+          }}
+        />
       </FlexItem>
     </Flex>
   );