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

package/dist/cjs/Message/Message.test.js

@@ -141,8 +141,26 @@ const EMPTY_TABLE = `
  | | 
 
  `;
+const FOOTNOTE = `This is some text with a footnote[^1] and here's a longer one.[^bignote]
+
+ You can also reference the same footnote multiple times[^1].
+ 
+   [^1]: This is the full footnote text. You can click the arrow to go back up. 
+   
+   [^bignote]: Here's one with multiple paragraphs and **formatting**.
+ 
+       Indent paragraphs to include them in the footnote.
+ 
+       Add as many paragraphs as you like. You can include *italic text*, **bold text**, and even \`code\`.
+ 
+       > You can even include blockquotes in footnotes!`;
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+const DEEP_THINKING = {
+    toggleContent: 'Show thinking',
+    subheading: 'Thought for 3 seconds',
+    body: "Here's why I said this."
+};
 const ERROR = {
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -526,6 +544,20 @@ describe('Message', () => {
             } }));
         expect(react_2.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
     }));
+    it('should handle tool response correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", toolResponse: {
+                toggleContent: 'Tool response: Name',
+                subheading: 'Thought for 3 seconds',
+                body: 'Lorem ipsum dolor sit amet',
+                cardTitle: 'Card title',
+                cardBody: 'Card body'
+            } }));
+        expect(react_2.screen.getByRole('button', { name: /Tool response: Name/i })).toBeTruthy();
+        expect(react_2.screen.getByText('Thought for 3 seconds')).toBeTruthy();
+        expect(react_2.screen.getByText('Lorem ipsum dolor sit amet')).toBeTruthy();
+        expect(react_2.screen.getByText('Card title')).toBeTruthy();
+        expect(react_2.screen.getByText('Card body')).toBeTruthy();
+    }));
     it('should handle block quote correctly', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
         expect(react_2.screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
@@ -591,6 +623,28 @@ describe('Message', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
         expect(react_2.screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
     });
+    it('should render footnote correctly', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: FOOTNOTE }));
+        expect(react_2.screen.getByText(/This is some text with a footnote/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/and here's a longer one./i)).toBeTruthy();
+        expect(react_2.screen.getByText(/You can also reference the same footnote multiple times./i)).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /Footnotes/i })).toBeTruthy();
+        expect(react_2.screen.getByText(/This is the full footnote text. You can click the arrow to go back up./i)).toBeTruthy();
+        expect(react_2.screen.getByText(/Here's one with multiple paragraphs and/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/formatting/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/Indent paragraphs to include them in the footnote./i)).toBeTruthy();
+        expect(react_2.screen.getByText(/Add as many paragraphs as you like. You can include/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/italic text/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/bold text/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/, and even/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/code/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/You can even include blockquotes in footnotes!/i)).toBeTruthy();
+        expect(react_2.screen.getAllByRole('link', { name: '1' })).toHaveLength(2);
+        expect(react_2.screen.getAllByRole('link', { name: '2' })).toBeTruthy();
+        expect(react_2.screen.getByRole('link', { name: 'Back to reference 1' })).toBeTruthy();
+        expect(react_2.screen.getByRole('link', { name: 'Back to reference 1-2' })).toBeTruthy();
+        expect(react_2.screen.getByRole('link', { name: /Back to reference 2/i })).toBeTruthy();
+    });
     it('should render beforeMainContent with main content', () => {
         const mainContent = 'Main message content';
         const beforeMainContentText = 'Before main content';
@@ -739,4 +793,21 @@ describe('Message', () => {
         const form = container.querySelector('form');
         expect(form).toHaveClass('test');
     });
+    it('should be able to disable markdown parsing', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, isMarkdownDisabled: true }));
+        // this is looking for markdown syntax that is ordinarily stripped
+        expect(react_2.screen.getByText(/~~~yaml/i)).toBeTruthy();
+    });
+    it('should be able to pass props to react-markdown, such as disabling tags', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, reactMarkdownProps: { disallowedElements: ['code'] } }));
+        expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
+        // code block isn't rendering
+        expect(react_2.screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+    });
+    it('should render deep thinking section correctly', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "", deepThinking: DEEP_THINKING }));
+        expect(react_2.screen.getByRole('button', { name: /Show thinking/i })).toBeTruthy();
+        expect(react_2.screen.getByText('Thought for 3 seconds')).toBeTruthy();
+        expect(react_2.screen.getByText("Here's why I said this.")).toBeTruthy();
+    });
 });

package/dist/cjs/Message/SuperscriptMessage/SuperscriptMessage.d.ts

@@ -0,0 +1,3 @@
+import { ExtraProps } from 'react-markdown';
+declare const SuperscriptMessage: ({ children }: JSX.IntrinsicElements["sup"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export default SuperscriptMessage;

package/dist/cjs/Message/SuperscriptMessage/SuperscriptMessage.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SuperscriptMessage = ({ children }) => ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-superscript", children: (0, jsx_runtime_1.jsx)("sup", { children: children }) }));
+exports.default = SuperscriptMessage;

package/dist/cjs/Message/UserFeedback/UserFeedback.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { CardProps, LabelGroupProps, OUIAProps } from '@patternfly/react-core';
+import { ActionGroupProps, ButtonProps, CardBodyProps, CardHeaderProps, CardProps, FormProps, LabelGroupProps, OUIAProps, TextAreaProps } from '@patternfly/react-core';
 import QuickResponse from '../QuickResponse/QuickResponse';
 export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProps {
     /** Additional classes for the pagination navigation container. */
@@ -34,6 +34,20 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
     focusOnLoad?: boolean;
     /** Timestamp passed in by Message for more context in aria announcements */
     timestamp?: string;
+    /** Additional props passed to submit button */
+    submitButtonProps?: ButtonProps;
+    /** Additional props passed to card header */
+    cardHeaderProps?: CardHeaderProps;
+    /** Additional props passed to card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to title heading */
+    headingLevelProps?: React.HTMLAttributes<HTMLHeadingElement>;
+    /** Additional props passed to form */
+    formProps?: FormProps;
+    /** Additional props passed to text area */
+    textAreaProps?: TextAreaProps;
+    /** Additional props passed to action group */
+    actionGroupProps?: ActionGroupProps;
 }
 declare const UserFeedback: FunctionComponent<UserFeedbackProps>;
 export default UserFeedback;

package/dist/cjs/Message/UserFeedback/UserFeedback.js

@@ -21,7 +21,7 @@ const react_core_1 = require("@patternfly/react-core");
 const QuickResponse_1 = __importDefault(require("../QuickResponse/QuickResponse"));
 const CloseButton_1 = __importDefault(require("./CloseButton"));
 const UserFeedback = (_a) => {
-    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact"]);
+    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact, children, cardHeaderProps, cardBodyProps, headingLevelProps, formProps, textAreaProps, actionGroupProps, submitButtonProps } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact", "children", "cardHeaderProps", "cardBodyProps", "headingLevelProps", "formProps", "textAreaProps", "actionGroupProps", "submitButtonProps"]);
     const [selectedResponse, setSelectedResponse] = (0, react_1.useState)();
     const [value, setValue] = (0, react_1.useState)('');
     const divRef = (0, react_1.useRef)(null);
@@ -33,11 +33,11 @@ const UserFeedback = (_a) => {
     }, []);
     return (
     /* card does not have ref forwarding; hence wrapper div */
-    (0, jsx_runtime_1.jsx)("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title, children: (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardHeader, { actions: {
+    (0, jsx_runtime_1.jsx)("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title, children: (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardHeader, Object.assign({ actions: {
                         actions: (0, jsx_runtime_1.jsx)(CloseButton_1.default, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
-                    }, children: (0, jsx_runtime_1.jsx)(HeadingLevel, { className: "pf-chatbot__feedback-card-title", children: title }) }), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`, children: [quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && ((0, jsx_runtime_1.jsx)(react_core_1.TextArea, { value: value, onChange: (_event, value) => {
+                    } }, cardHeaderProps, { children: (0, jsx_runtime_1.jsx)(HeadingLevel, Object.assign({ className: "pf-chatbot__feedback-card-title" }, headingLevelProps, { children: title })) })), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, Object.assign({ className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` }, formProps, { children: [quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && ((0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ value: value, onChange: (_event, value) => {
                                     setValue(value);
                                     onTextAreaChange && onTextAreaChange(_event, value);
-                                }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" })), (0, jsx_runtime_1.jsx)(react_core_1.ActionGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { onClick: () => onSubmit(selectedResponse, value), children: submitWord }) })] }) })] })) }));
+                                }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps))), children, (0, jsx_runtime_1.jsx)(react_core_1.ActionGroup, Object.assign({}, actionGroupProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ onClick: () => onSubmit(selectedResponse, value) }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
 };
 exports.default = UserFeedback;

package/dist/cjs/Message/UserFeedback/UserFeedback.test.js

@@ -134,4 +134,48 @@ describe('UserFeedback', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
         expect(react_1.screen.getByTestId('card')).toHaveClass('pf-m-compact');
     });
+    it('should pass buttonProps to submit button', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, submitButtonProps: { variant: 'secondary', isDisabled: true } }));
+        const submitButton = react_1.screen.getByRole('button', { name: /Submit/i });
+        expect(submitButton).toHaveClass('pf-v6-c-button pf-m-secondary');
+        expect(submitButton).toBeDisabled();
+    });
+    it('should pass cardHeaderProps to card header', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, cardHeaderProps: { 'data-testid': 'card-header', className: 'custom-header' } }));
+        const cardHeader = react_1.screen.getByTestId('card-header');
+        expect(cardHeader).toHaveClass('custom-header');
+    });
+    it('should pass cardBodyProps to card body', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, cardBodyProps: { 'data-testid': 'card-body', className: 'custom-body' } }));
+        const cardBody = react_1.screen.getByTestId('card-body');
+        expect(cardBody).toHaveClass('custom-body');
+    });
+    it('should pass headingLevelProps to title heading', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, headingLevelProps: { className: 'custom-heading', id: 'feedback-title' } }));
+        const heading = react_1.screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i });
+        expect(heading).toHaveClass('custom-heading');
+        expect(heading).toHaveAttribute('id', 'feedback-title');
+    });
+    it('should pass formProps to form', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, formProps: { 'data-testid': 'feedback-form', className: 'custom-form' } }));
+        const form = react_1.screen.getByTestId('feedback-form');
+        expect(form).toHaveClass('custom-form');
+    });
+    it('should pass textAreaProps to text area when hasTextArea is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaProps: { 'data-testid': 'custom-textarea', rows: 5 } }));
+        const textArea = react_1.screen.getByTestId('custom-textarea');
+        expect(textArea).toHaveAttribute('rows', '5');
+        expect(textArea).toHaveAttribute('data-testid', 'custom-textarea');
+    });
+    it('should pass actionGroupProps to action group', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, actionGroupProps: { 'data-testid': 'action-group', className: 'custom-actions' } }));
+        const actionGroup = react_1.screen.getByTestId('action-group');
+        expect(actionGroup).toHaveClass('custom-actions');
+    });
+    it('should render children', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsxs)(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "custom-content", children: "Custom feedback content" }), (0, jsx_runtime_1.jsx)("p", { children: "Additional paragraph" })] }));
+        expect(react_1.screen.getByTestId('custom-content')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Custom feedback content')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Additional paragraph')).toBeInTheDocument();
+    });
 });

package/dist/cjs/MessageBar/MessageBar.js

@@ -32,6 +32,7 @@ const MessageBarBase = (_a) => {
     const [message, setMessage] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = (0, react_1.useState)(false);
     const [hasSentMessage, setHasSentMessage] = (0, react_1.useState)(false);
+    const [isComposing, setIsComposing] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
     const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = (0, react_1.useRef)(null);
@@ -157,18 +158,32 @@ const MessageBarBase = (_a) => {
         setMessage('');
     }, [onSendMessage]);
     const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        // Japanese and other languages may use IME for character input.
+        // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+        // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+        // Chrome, Edge, and Firefox seem to work well with just the compose event.
+        // Safari is a little bit special. We need to handle 229 as well in this case.
+        const nativeEvent = event.nativeEvent;
+        const isCompositionKey = nativeEvent.which === 229;
+        const isCurrentlyComposing = isComposing || isCompositionKey;
+        if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
                 handleSend(message);
             }
         }
-        if (event.key === 'Enter' && event.shiftKey) {
+        if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
             if (textareaRef.current) {
                 handleNewLine(textareaRef.current);
             }
         }
-    }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
+    }, [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]);
+    const handleCompositionStart = (0, react_1.useCallback)(() => {
+        setIsComposing(true);
+    }, []);
+    const handleCompositionEnd = (0, react_1.useCallback)(() => {
+        setIsComposing(false);
+    }, []);
     const handleAttachMenuToggle = () => {
         (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
         attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
@@ -184,7 +199,7 @@ const MessageBarBase = (_a) => {
         }
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachMenuProps && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.tooltipContent, isCompact: isCompact, tooltipProps: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))), !attachMenuProps && hasAttachButton && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.tooltipContent, inputTestId: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.inputTestId, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.tooltipContent, language: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.language, isCompact: isCompact, tooltipProps: (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.tooltipProps }, (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _p === void 0 ? void 0 : _p.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipContent, isCompact: isCompact, tooltipProps: (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.tooltipProps }, (_s = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _s === void 0 ? void 0 : _s.props)))] }));
     };
-    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
+    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, props)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {
         return ((0, jsx_runtime_1.jsx)(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
                 var _a;

package/dist/cjs/MessageBox/JumpButton.d.ts

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from 'react';
+import { TooltipProps, ButtonProps } from '@patternfly/react-core';
 export interface JumpButtonProps {
     /** Position of the Jump Button(top/bottom) */
     position: 'top' | 'bottom';
@@ -6,6 +7,10 @@ export interface JumpButtonProps {
     onClick: () => void;
     /** Flag to change the visibilty of the button */
     isHidden?: boolean;
+    /** Additional props passed to jump buttons */
+    jumpButtonProps?: ButtonProps;
+    /** Additional props passed to tooltip */
+    jumpButtonTooltipProps?: TooltipProps;
 }
 declare const JumpButton: FunctionComponent<JumpButtonProps>;
 export default JumpButton;

package/dist/cjs/MessageBox/JumpButton.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const arrow_up_icon_1 = require("@patternfly/react-icons/dist/esm/icons/arrow-up-icon");
 const arrow_down_icon_1 = require("@patternfly/react-icons/dist/esm/icons/arrow-down-icon");
-const JumpButton = ({ position, isHidden, onClick }) => isHidden ? null : ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Jump ${position}`, onClick: onClick, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: "lg", isInline: true, children: position === 'top' ? (0, jsx_runtime_1.jsx)(arrow_up_icon_1.ArrowUpIcon, {}) : (0, jsx_runtime_1.jsx)(arrow_down_icon_1.ArrowDownIcon, {}) }) }) }));
+const JumpButton = ({ position, isHidden, onClick, jumpButtonProps, jumpButtonTooltipProps }) => isHidden ? null : ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top" }, jumpButtonTooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Back to ${position}`, onClick: onClick }, jumpButtonProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: "lg", isInline: true, children: position === 'top' ? (0, jsx_runtime_1.jsx)(arrow_up_icon_1.ArrowUpIcon, {}) : (0, jsx_runtime_1.jsx)(arrow_down_icon_1.ArrowDownIcon, {}) }) })) })));
 exports.default = JumpButton;

package/dist/cjs/MessageBox/JumpButton.test.js

@@ -20,20 +20,20 @@ const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('JumpButton', () => {
     it('should render top button correctly', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", onClick: jest.fn() }));
-        expect(react_1.screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
     });
     it('should render bottom button correctly', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: jest.fn() }));
-        expect(react_1.screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
     });
     it('should call onClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: spy }));
-        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Jump bottom/i }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Back to bottom/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should be hidden if isHidden prop is used', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: jest.fn(), isHidden: true }));
-        expect(react_1.screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
     }));
 });

package/dist/cjs/MessageBox/MessageBox.d.ts

@@ -1,4 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     /** Content that can be announced, such as a new message, for screen readers */
     announcement?: string;
@@ -18,6 +19,14 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     onScrollToBottomClick?: () => void;
     /** Flag to enable automatic scrolling when new messages are added */
     enableSmartScroll?: boolean;
+    /** Props passed to top jump button */
+    jumpButtonTopProps?: ButtonProps;
+    /** Props passed to bottom jump button */
+    jumpButtonBottomProps?: ButtonProps;
+    /** Props passed to top jump button tooltip */
+    jumpButtonTopTooltipProps?: TooltipProps;
+    /** Props passed to top jump button tooltip */
+    jumpButtonBottomTooltipProps?: TooltipProps;
 }
 export interface MessageBoxHandle extends HTMLDivElement {
     /** Scrolls to the top of the message box */

package/dist/cjs/MessageBox/MessageBox.js

@@ -22,7 +22,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const JumpButton_1 = __importDefault(require("./JumpButton"));
 exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
-    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll"]);
+    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps"]);
     const [atTop, setAtTop] = (0, react_1.useState)(false);
     const [atBottom, setAtBottom] = (0, react_1.useState)(true);
     const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
@@ -206,6 +206,6 @@ exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite", children: announcement })] })), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] })), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps })] }));
 });
 exports.default = exports.MessageBox;

package/dist/cjs/MessageBox/MessageBox.test.js

@@ -56,7 +56,7 @@ describe('MessageBox', () => {
             region.dispatchEvent(new Event('scroll'));
         });
         yield (0, react_2.waitFor)(() => {
-            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump bottom/i }));
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Back to bottom/i }));
             expect(spy).toHaveBeenCalled();
         });
     }));
@@ -75,7 +75,7 @@ describe('MessageBox', () => {
             region.dispatchEvent(new Event('scroll'));
         });
         yield (0, react_2.waitFor)(() => {
-            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump top/i }));
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Back to top/i }));
             expect(spy).toHaveBeenCalled();
         });
     }));

package/dist/cjs/SourcesCard/SourcesCard.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { ButtonProps, CardProps } from '@patternfly/react-core';
+import { ButtonProps, CardBodyProps, CardFooterProps, CardProps, CardTitleProps, TruncateProps } from '@patternfly/react-core';
 export interface SourcesCardProps extends CardProps {
     /** Additional classes for the pagination navigation container. */
     className?: string;
@@ -13,6 +13,8 @@ export interface SourcesCardProps extends CardProps {
     sources: {
         /** Title of sources card */
         title?: string;
+        /** Subtitle of sources card */
+        subtitle?: string;
         /** Link to source */
         link: string;
         /** Body of sources card */
@@ -25,6 +27,10 @@ export interface SourcesCardProps extends CardProps {
         onClick?: React.MouseEventHandler<HTMLButtonElement>;
         /** Any additional props applied to the title of the Sources card  */
         titleProps?: ButtonProps;
+        /** Custom footer applied to the Sources card */
+        footer?: React.ReactNode;
+        /** Additional props passed to Truncate component */
+        truncateProps?: TruncateProps;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;
@@ -44,6 +50,12 @@ export interface SourcesCardProps extends CardProps {
     showMoreWords?: string;
     /** Label for English words "show less" */
     showLessWords?: string;
+    /** Additional props passed to card title */
+    cardTitleProps?: CardTitleProps;
+    /** Additional props passed to card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to card footer */
+    cardFooterProps?: CardFooterProps;
 }
 declare const SourcesCard: FunctionComponent<SourcesCardProps>;
 export default SourcesCard;

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -18,7 +18,7 @@ const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
 const SourcesCard = (_a) => {
     var _b;
-    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact, cardTitleProps, cardBodyProps, cardFooterProps } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact", "cardTitleProps", "cardBodyProps", "cardFooterProps"]);
     const [page, setPage] = (0, react_1.useState)(1);
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const onToggle = (_event, isExpanded) => {
@@ -28,15 +28,15 @@ const SourcesCard = (_a) => {
         setPage(newPage);
         onSetPage && onSetPage(_evt, newPage);
     };
-    const renderTitle = (title) => {
+    const renderTitle = (title, truncateProps) => {
         if (title) {
-            return (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: title });
+            return (0, jsx_runtime_1.jsx)(react_core_1.Truncate, Object.assign({ content: title }, truncateProps));
         }
         return `Source ${page}`;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title) })) }), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__sources-card-title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title, sources[page - 1].truncateProps) })), sources[page - 1].subtitle && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: sources[page - 1].hasShowMore ? (
                         // prevents extra VO announcements of button text - parent Message has aria-live
-                        (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
+                        (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
                                             const newPage = page >= 1 ? page - 1 : 1;
                                             onPreviousClick && onPreviousClick(event, newPage);
                                             handleNewPage(event, newPage);
@@ -44,6 +44,6 @@ const SourcesCard = (_a) => {
                                             const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
                                             onNextClick && onNextClick(event, newPage);
                                             handleNewPage(event, newPage);
-                                        }, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.jsx)("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))] }))] }));
+                                        }, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.jsx)("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))))] }))] }));
 };
 exports.default = SourcesCard;

package/dist/cjs/SourcesCard/SourcesCard.test.js

@@ -184,4 +184,53 @@ describe('SourcesCard', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
         expect(react_1.screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
     });
+    it('should apply cardTitleProps appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardTitleProps: { 'data-testid': 'card-title', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '' }] }));
+        expect(react_1.screen.getByTestId('card-title')).toHaveClass('test');
+    });
+    it('should apply cardBodyProps appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardBodyProps: { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(react_1.screen.getByTestId('card-body')).toHaveClass('test');
+    });
+    it('should apply cardFooterProps appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(react_1.screen.getByTestId('card-footer')).toHaveClass('test');
+    });
+    it('should apply truncateProps appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
+                {
+                    title: 'How to make an apple pie',
+                    link: '',
+                    truncateProps: { 'data-testid': 'card-truncate', className: 'test' }
+                }
+            ] }));
+        expect(react_1.screen.getByTestId('card-truncate')).toHaveClass('test');
+    });
+    it('should apply custom footer appropriately when there is one source', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) }] }));
+        expect(react_1.screen.getByText('I am a custom footer'));
+        expect(react_1.screen.queryByText('1/1')).toBeFalsy();
+    });
+    it('should apply custom footer appropriately when are multiple sources', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
+                { title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) },
+                { title: 'How to bake bread', link: '' }
+            ] }));
+        expect(react_1.screen.getByText('I am a custom footer'));
+        // does not show navigation bar
+        expect(react_1.screen.queryByText('1/2')).toBeFalsy();
+    });
+    it('should apply footer props to custom footer appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) }] }));
+        expect(react_1.screen.getByText('I am a custom footer'));
+        expect(react_1.screen.getByTestId('card-footer')).toHaveClass('test');
+    });
+    it('should apply subtitle appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }] }));
+        expect(react_1.screen.getByText('How to make an apple pie'));
+        expect(react_1.screen.getByText('You must first create the universe'));
+    });
 });

package/dist/cjs/ToolResponse/ToolResponse.d.ts

@@ -0,0 +1,30 @@
+import { CardBodyProps, CardProps, CardTitleProps, DividerProps, ExpandableSectionProps } from '@patternfly/react-core';
+import { type FunctionComponent } from 'react';
+export interface ToolResponseProps {
+    /** Toggle content shown for expandable section */
+    toggleContent: React.ReactNode;
+    /** Additional props passed to expandable section */
+    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Subheading rendered inside expandable section */
+    subheading?: string;
+    /** Body text rendered inside expandable section */
+    body?: React.ReactNode | string;
+    /** Content passed into tool response card body */
+    cardBody: React.ReactNode;
+    /** Content passed into tool response card title */
+    cardTitle: React.ReactNode;
+    /** Additional props passed to main card */
+    cardProps?: CardProps;
+    /** Additional props passed to main card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to tool response card */
+    toolResponseCardProps?: CardProps;
+    /** Additional props passed to tool response card body */
+    toolResponseCardBodyProps?: CardBodyProps;
+    /** Additional props passed to tool response card divider */
+    toolResponseCardDividerProps?: DividerProps;
+    /** Additional props passed to tool response card title */
+    toolResponseCardTitleProps?: CardTitleProps;
+}
+export declare const ToolResponse: FunctionComponent<ToolResponseProps>;
+export default ToolResponse;

package/dist/cjs/ToolResponse/ToolResponse.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolResponse = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// ============================================================================
+// Tool Response Card
+// ============================================================================
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = require("react");
+const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, cardProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ toggleContent: toggleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__tool-response-expandable-section" }, expandableSectionProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__tool-response-section", children: [subheading && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-subheading", children: (0, jsx_runtime_1.jsx)("span", { children: subheading }) })), body && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-body", children: body }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: cardTitle })), (0, jsx_runtime_1.jsx)(react_core_1.Divider, Object.assign({}, toolResponseCardDividerProps)), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, toolResponseCardBodyProps, { children: cardBody }))] }))] }) })) })) })));
+};
+exports.ToolResponse = ToolResponse;
+exports.default = exports.ToolResponse;

package/dist/cjs/ToolResponse/ToolResponse.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';