@patternfly/chatbot 6.4.0-prerelease.10 → 6.4.0-prerelease.12

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/esm/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/esm/Message/UserFeedback/UserFeedback.js

@@ -16,7 +16,7 @@ import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from
 import QuickResponse from '../QuickResponse/QuickResponse';
 import CloseButton from './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] = useState();
     const [value, setValue] = useState('');
     const divRef = useRef(null);
@@ -28,11 +28,11 @@ const UserFeedback = (_a) => {
     }, []);
     return (
     /* card does not have ref forwarding; hence wrapper div */
-    _jsx("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title, children: _jsxs(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props, { children: [_jsx(CardHeader, { actions: {
+    _jsx("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title, children: _jsxs(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props, { children: [_jsx(CardHeader, Object.assign({ actions: {
                         actions: _jsx(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
-                    }, children: _jsx(HeadingLevel, { className: "pf-chatbot__feedback-card-title", children: title }) }), _jsx(CardBody, { children: _jsxs(Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`, children: [quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && (_jsx(TextArea, { value: value, onChange: (_event, value) => {
+                    } }, cardHeaderProps, { children: _jsx(HeadingLevel, Object.assign({ className: "pf-chatbot__feedback-card-title" }, headingLevelProps, { children: title })) })), _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsxs(Form, Object.assign({ className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` }, formProps, { children: [quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && (_jsx(TextArea, Object.assign({ value: value, onChange: (_event, value) => {
                                     setValue(value);
                                     onTextAreaChange && onTextAreaChange(_event, value);
-                                }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" })), _jsx(ActionGroup, { children: _jsx(Button, { onClick: () => onSubmit(selectedResponse, value), children: submitWord }) })] }) })] })) }));
+                                }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps))), children, _jsx(ActionGroup, Object.assign({}, actionGroupProps, { children: _jsx(Button, Object.assign({ onClick: () => onSubmit(selectedResponse, value) }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
 };
 export default UserFeedback;

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
@@ -129,4 +129,48 @@ describe('UserFeedback', () => {
         render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
         expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
     });
+    it('should pass buttonProps to submit button', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, submitButtonProps: { variant: 'secondary', isDisabled: true } }));
+        const submitButton = 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', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, cardHeaderProps: { 'data-testid': 'card-header', className: 'custom-header' } }));
+        const cardHeader = screen.getByTestId('card-header');
+        expect(cardHeader).toHaveClass('custom-header');
+    });
+    it('should pass cardBodyProps to card body', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, cardBodyProps: { 'data-testid': 'card-body', className: 'custom-body' } }));
+        const cardBody = screen.getByTestId('card-body');
+        expect(cardBody).toHaveClass('custom-body');
+    });
+    it('should pass headingLevelProps to title heading', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, headingLevelProps: { className: 'custom-heading', id: 'feedback-title' } }));
+        const heading = 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', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, formProps: { 'data-testid': 'feedback-form', className: 'custom-form' } }));
+        const form = screen.getByTestId('feedback-form');
+        expect(form).toHaveClass('custom-form');
+    });
+    it('should pass textAreaProps to text area when hasTextArea is true', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaProps: { 'data-testid': 'custom-textarea', rows: 5 } }));
+        const textArea = screen.getByTestId('custom-textarea');
+        expect(textArea).toHaveAttribute('rows', '5');
+        expect(textArea).toHaveAttribute('data-testid', 'custom-textarea');
+    });
+    it('should pass actionGroupProps to action group', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, actionGroupProps: { 'data-testid': 'action-group', className: 'custom-actions' } }));
+        const actionGroup = screen.getByTestId('action-group');
+        expect(actionGroup).toHaveClass('custom-actions');
+    });
+    it('should render children', () => {
+        render(_jsxs(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, children: [_jsx("div", { "data-testid": "custom-content", children: "Custom feedback content" }), _jsx("p", { children: "Additional paragraph" })] }));
+        expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+        expect(screen.getByText('Custom feedback content')).toBeInTheDocument();
+        expect(screen.getByText('Additional paragraph')).toBeInTheDocument();
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.10",
+  "version": "6.4.0-prerelease.12",
   "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/MessageWithFeedback.tsx

@@ -1,104 +1,130 @@
 import { useState, FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
-import { Checkbox, FormGroup, Stack } from '@patternfly/react-core';
+import { Checkbox, FormGroup, Flex, FlexItem } from '@patternfly/react-core';
 
 export const MessageWithFeedbackExample: FunctionComponent = () => {
   const [hasCloseButton, setHasCloseButton] = useState(false);
   const [hasTextArea, setHasTextArea] = useState(false);
+  const [hasChildren, setHasChildren] = useState(false);
+
+  const children = <>Do not share any personal or other sensitive information in your feedback.</>;
 
   return (
     <>
-      <Stack hasGutter>
-        <FormGroup role="radiogroup" isInline fieldId="feedback-card" label="Variant">
-          <Checkbox
-            isChecked={hasTextArea}
-            onChange={() => {
-              setHasTextArea(!hasTextArea);
+      <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+        <FlexItem>
+          <FormGroup role="radiogroup" isInline isStack fieldId="feedback-card" label="Variant">
+            <Checkbox
+              isChecked={hasTextArea}
+              onChange={() => {
+                setHasTextArea(!hasTextArea);
+              }}
+              name="feedback-card-with-text-area"
+              label="Has text area"
+              id="has-text-area"
+            />
+            <Checkbox
+              isChecked={hasChildren}
+              onChange={() => {
+                setHasChildren(!hasChildren);
+              }}
+              name="feedback-card-with-children"
+              label="Has additional content"
+              id="has-children"
+            />
+          </FormGroup>
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            avatar={patternflyAvatar}
+            content="This is a message with the feedback card:"
+            userFeedbackForm={{
+              quickResponses: [
+                { id: '1', content: 'Helpful information' },
+                { id: '2', content: 'Easy to understand' },
+                { id: '3', content: 'Resolved my issue' }
+              ],
+              onSubmit: (quickResponse, additionalFeedback) =>
+                alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
+              hasTextArea,
+              children: hasChildren ? children : undefined,
+              // eslint-disable-next-line no-console
+              onClose: () => console.log('closed feedback form'),
+              focusOnLoad: false
             }}
-            name="basic-inline-radio"
-            label="Has text area"
-            id="has-text-area"
           />
-        </FormGroup>
-        <Message
-          name="Bot"
-          role="bot"
-          avatar={patternflyAvatar}
-          content="This is a message with the feedback card:"
-          userFeedbackForm={{
-            quickResponses: [
-              { id: '1', content: 'Helpful information' },
-              { id: '2', content: 'Easy to understand' },
-              { id: '3', content: 'Resolved my issue' }
-            ],
-            onSubmit: (quickResponse, additionalFeedback) =>
-              alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
-            hasTextArea,
-            // eslint-disable-next-line no-console
-            onClose: () => console.log('closed feedback form'),
-            focusOnLoad: false
-          }}
-        />
-        <Message
-          name="Bot"
-          role="bot"
-          avatar={patternflyAvatar}
-          content="This is a compact message with the feedback card:"
-          userFeedbackForm={{
-            quickResponses: [
-              { id: '1', content: 'Helpful information' },
-              { id: '2', content: 'Easy to understand' },
-              { id: '3', content: 'Resolved my issue' }
-            ],
-            onSubmit: (quickResponse, additionalFeedback) =>
-              alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
-            hasTextArea,
-            // eslint-disable-next-line no-console
-            onClose: () => console.log('closed feedback form'),
-            focusOnLoad: false
-          }}
-          isCompact
-        />
-      </Stack>
-      <Stack hasGutter>
-        <FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
-          <Checkbox
-            isChecked={hasCloseButton}
-            onChange={() => {
-              setHasCloseButton(!hasCloseButton);
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            avatar={patternflyAvatar}
+            content="This is a compact message with the feedback card:"
+            userFeedbackForm={{
+              quickResponses: [
+                { id: '1', content: 'Helpful information' },
+                { id: '2', content: 'Easy to understand' },
+                { id: '3', content: 'Resolved my issue' }
+              ],
+              onSubmit: (quickResponse, additionalFeedback) =>
+                alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
+              hasTextArea,
+              children: hasChildren ? children : undefined,
+              // eslint-disable-next-line no-console
+              onClose: () => console.log('closed feedback form'),
+              focusOnLoad: false
             }}
-            name="basic-inline-radio"
-            label="Has close button"
-            id="has-close"
+            isCompact
           />
-        </FormGroup>
-        <Message
-          name="Bot"
-          role="bot"
-          avatar={patternflyAvatar}
-          content="This is a thank-you message, which is displayed once the feedback card is submitted:"
-          // eslint-disable-next-line no-console
-          userFeedbackComplete={{
+        </FlexItem>
+      </Flex>
+      <Flex direction={{ default: 'column' }}>
+        <FlexItem>
+          <FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
+            <Checkbox
+              isChecked={hasCloseButton}
+              onChange={() => {
+                setHasCloseButton(!hasCloseButton);
+              }}
+              name="basic-inline-radio"
+              label="Has close button"
+              id="has-close"
+            />
+          </FormGroup>
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            avatar={patternflyAvatar}
+            content="This is a thank-you message, which is displayed once the feedback card is submitted:"
             // eslint-disable-next-line no-console
-            onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
-            focusOnLoad: false
-          }}
-        />
-        <Message
-          name="Bot"
-          role="bot"
-          avatar={patternflyAvatar}
-          content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
-          // eslint-disable-next-line no-console
-          userFeedbackComplete={{
+            userFeedbackComplete={{
+              // eslint-disable-next-line no-console
+              onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
+              focusOnLoad: false
+            }}
+          />
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            avatar={patternflyAvatar}
+            content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
             // eslint-disable-next-line no-console
-            onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
-            focusOnLoad: false
-          }}
-          isCompact
-        />
-      </Stack>
+            userFeedbackComplete={{
+              // eslint-disable-next-line no-console
+              onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
+              focusOnLoad: false
+            }}
+            isCompact
+          />
+        </FlexItem>
+      </Flex>
     </>
   );
 };

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

@@ -34,10 +34,7 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
-import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
-import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
+import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, RedoIcon, RobotIcon } from '@patternfly/react-icons';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';

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

@@ -1,8 +1,46 @@
-import { Fragment, FunctionComponent } from 'react';
-
+import { Fragment, FunctionComponent, useState, useEffect } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
-import { Alert, Badge, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionToggle,
+  Alert,
+  Badge,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardExpandableContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+  CodeBlockCode,
+  Content,
+  ContentVariants,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  HelperText,
+  HelperTextItem,
+  Icon,
+  Progress,
+  ProgressMeasureLocation,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  Label,
+  Tab,
+  Tabs,
+  TabTitleText,
+  Spinner
+} from '@patternfly/react-core';
+import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon } from '@patternfly/react-icons';
 
 const UserActionEndContent = () => {
   // eslint-disable-next-line no-console
@@ -36,6 +74,543 @@ const BeforeMainContent = () => (
   </div>
 );
 
+interface Stage {
+  id: string;
+  name: string;
+  startProgress: number;
+  endProgress: number;
+}
+
+const LiveProgressSummaryCard = () => {
+  const [isCardExpanded, setIsCardExpanded] = useState(false);
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState('installing-toggle');
+  const [progress, setProgress] = useState(15);
+  const [isSimulationRunning, setIsSimulationRunning] = useState(false);
+  const [userManuallyExpandedAccordion, setUserManuallyExpandedAccordion] = useState(false);
+
+  const stages: Stage[] = [
+    {
+      id: 'installing-toggle',
+      name: 'Installing cluster bootstrap',
+      startProgress: 0,
+      endProgress: 25
+    },
+    {
+      id: 'setup-toggle',
+      name: 'Control plane setup',
+      startProgress: 25,
+      endProgress: 45
+    },
+    {
+      id: 'deploying-toggle',
+      name: 'Deploying cluster operators',
+      startProgress: 45,
+      endProgress: 85
+    },
+    {
+      id: 'finalizing-toggle',
+      name: 'Finalizing installation',
+      startProgress: 85,
+      endProgress: 100
+    }
+  ];
+
+  const getCurrentStage = () =>
+    stages.find((stage) => progress >= stage.startProgress && progress < stage.endProgress) ||
+    stages[stages.length - 1];
+
+  const getTimeRemaining = () => {
+    const remainingProgress = 100 - progress;
+    const estimatedMinutes = Math.max(1, Math.round((remainingProgress / 100) * 30)); // 30 minutes total simulation
+    return `About ${estimatedMinutes} minute${estimatedMinutes !== 1 ? 's' : ''} remaining`;
+  };
+
+  const getCurrentStageName = () => {
+    const currentStage = getCurrentStage();
+    return currentStage.name;
+  };
+
+  const getStageStatus = (stage: Stage) => {
+    if (progress >= stage.endProgress) {
+      return 'completed';
+    }
+    if (progress >= stage.startProgress) {
+      return 'in-progress';
+    }
+    return 'pending';
+  };
+
+  const renderStageIcon = (stage: Stage) => {
+    const status = getStageStatus(stage);
+
+    if (status === 'completed') {
+      return <CheckCircleIcon color="green" aria-label="Complete" />;
+    } else if (status === 'in-progress') {
+      return <Spinner size="sm" aria-valuetext="In progress" />;
+    } else {
+      return <div style={{ width: 'var(--pf-t--global--spacer--md)' }}>{/* Empty space for pending stages */}</div>;
+    }
+  };
+
+  // Auto-increment progress when simulation is running
+  useEffect(() => {
+    let interval;
+
+    if (isSimulationRunning && progress < 100) {
+      interval = setInterval(() => {
+        setProgress((prev) => {
+          const increment = Math.random() * 2 + 0.5; // Random increment between 0.5-2.5%
+          const newProgress = Math.min(prev + increment, 100);
+
+          // Stop simulation when complete
+          if (newProgress >= 100) {
+            setIsSimulationRunning(false);
+            setUserManuallyExpandedAccordion(false); // Reset manual override when simulation completes
+          }
+
+          return newProgress;
+        });
+      }, 800);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isSimulationRunning, progress]);
+
+  // Auto-expand accordion to show current stage (only if user hasn't manually overridden)
+  useEffect(() => {
+    if (isSimulationRunning && !userManuallyExpandedAccordion) {
+      setIsAccordionExpanded(getCurrentStage().id);
+    }
+  }, [progress, isSimulationRunning, userManuallyExpandedAccordion]);
+
+  const onExpandCard = (_event: React.MouseEvent) => {
+    setIsCardExpanded(!isCardExpanded);
+  };
+
+  const onExpandAccordion = (id: string) => {
+    setUserManuallyExpandedAccordion(true);
+
+    if (id === isAccordionExpanded) {
+      setIsAccordionExpanded('');
+    } else {
+      setIsAccordionExpanded(id);
+    }
+  };
+
+  const getStageContent = (stage: Stage) => {
+    const status = getStageStatus(stage);
+
+    if (status === 'in-progress') {
+      switch (stage.id) {
+        case 'installing-toggle':
+          return `Installing bootstrap node...
+Installing etcd cluster...
+Installing control plane...`;
+        case 'setup-toggle':
+          return `Configuring cluster networking...
+Setting up OpenShift API server...
+Configuring authentication...
+Setting up cluster operators...`;
+        case 'deploying-toggle':
+          return `Deploying openshift-apiserver operator...
+Deploying openshift-sdn operator...
+Deploying openshift-ingress operator...
+`;
+        case 'finalizing-toggle':
+          return `Finalizing cluster configuration...
+Running post-installation tasks...
+Setting up cluster console...`;
+      }
+    }
+    if (status === 'pending') {
+      return 'Processing...';
+    }
+    return 'Complete!';
+  };
+
+  const renderCodeBlock = (stage: Stage) => (
+    <CodeBlock
+      style={
+        {
+          '--pf-v6-c-code-block--BackgroundColor': 'var(--pf-t--color--gray--95)',
+          '--pf-v6-c-code-block--BorderRadius': 'var(--pf-t--global--border--radius--small)'
+        } as React.CSSProperties
+      }
+    >
+      <CodeBlockCode>{getStageContent(stage)}</CodeBlockCode>
+    </CodeBlock>
+  );
+
+  return (
+    <>
+      <Flex className="pf-v6-u-mt-lg" spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => {
+              setProgress(15);
+              setIsSimulationRunning(true);
+              setUserManuallyExpandedAccordion(false);
+            }}
+            isDisabled={isSimulationRunning}
+          >
+            {isSimulationRunning ? 'Simulation running...' : 'Start simulation of cluster installation progress'}
+          </Button>
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => {
+              setIsSimulationRunning(false);
+              setProgress(15);
+              setIsAccordionExpanded('installing-toggle');
+              setUserManuallyExpandedAccordion(false);
+            }}
+          >
+            Reset
+          </Button>
+        </FlexItem>
+      </Flex>
+      <Card ouiaId="LiveProgressSummaryCard" isExpanded={isCardExpanded}>
+        <CardHeader
+          onExpand={onExpandCard}
+          isToggleRightAligned
+          toggleButtonProps={{
+            id: 'toggle-button1',
+            'aria-label': 'Details',
+            'aria-labelledby': 'expandable-card-title toggle-button1',
+            'aria-expanded': isCardExpanded
+          }}
+        >
+          <DescriptionList>
+            <DescriptionListGroup
+              style={
+                {
+                  '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--md)'
+                } as React.CSSProperties
+              }
+            >
+              <DescriptionListTerm id="title-outside-progress-example-label">
+                OpenShift cluster installation
+              </DescriptionListTerm>
+              <DescriptionListDescription>
+                <Progress
+                  aria-labelledby="title-outside-progress-example-label"
+                  value={progress}
+                  measureLocation={ProgressMeasureLocation.outside}
+                  style={{ '--pf-v6-c-progress--GridGap': 'var(--pf-t--global--spacer--sm' } as React.CSSProperties}
+                  helperText={
+                    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                      <FlexItem>
+                        <HelperText>
+                          <HelperTextItem>
+                            {progress >= 100 ? 'Installation complete!' : getCurrentStageName()}
+                          </HelperTextItem>
+                        </HelperText>
+                      </FlexItem>
+                      <FlexItem>
+                        <HelperText>
+                          {/* Progress was getting announced on VoiceOver constantly - this helps avoid that */}
+                          <HelperTextItem aria-live="off">
+                            {progress >= 100 ? 'Completed' : getTimeRemaining()}
+                          </HelperTextItem>
+                        </HelperText>
+                      </FlexItem>
+                    </Flex>
+                  }
+                />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </CardHeader>
+        <CardExpandableContent>
+          <CardBody>
+            <hr className="pf-v6-u-mb-md" />
+            <Accordion
+              style={
+                {
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart': 'var(--pf-t--global--spacer--md)',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd': '0',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart': '0',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd': '0',
+                  '--pf-v6-c-accordion__expandable-content--BackgroundColor': 'initial',
+                  '--pf-v6-c-accordion__expandable-content--Color': '#fff'
+                } as React.CSSProperties
+              }
+            >
+              {stages.map((stage) => (
+                <AccordionItem key={stage.id} isExpanded={isAccordionExpanded === stage.id}>
+                  <AccordionToggle
+                    onClick={() => {
+                      onExpandAccordion(stage.id);
+                    }}
+                    id={stage.id}
+                  >
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+                      <FlexItem>{renderStageIcon(stage)}</FlexItem>
+                      <FlexItem>{stage.name}</FlexItem>
+                    </Flex>
+                  </AccordionToggle>
+                  <AccordionContent id={stage.id.replace('-toggle', '')}>{renderCodeBlock(stage)}</AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </CardBody>
+        </CardExpandableContent>
+        <CardFooter>
+          <Button isBlock variant="tertiary" icon={<ArrowRightIcon />} iconPosition="end">
+            Open in console
+          </Button>
+        </CardFooter>
+      </Card>
+    </>
+  );
+};
+
+const VersionSelectorCard = () => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isCardSelected, setIsCardSelected] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const id1 = '4.20';
+  const id2 = '4.19';
+  const id3 = '4.18';
+  const id4 = '4.17';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsCardSelected(event.currentTarget.id);
+  };
+
+  const onToggleExpandableSection = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const handleTabClick = (_event: any, tabIndex: string | number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const contentId = 'detached-expandable-section-content';
+  const toggleId = 'detached-expandable-section-toggle';
+
+  const generateTabContent = (title: string, subtitle: string) => (
+    <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapMd' }}>
+      <FlexItem alignSelf={{ default: 'alignSelfCenter' }} className="pf-v6-u-mt-md pf-v6-u-text-align-center">
+        <div className="pf-v6-u-font-weight-bold">{title}</div>
+        <div>{subtitle}</div>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.20-card" isSelectable isSelected={isCardSelected === id1}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id1,
+              selectableActionAriaLabelledby: '4.20-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>4.20.0-ec.3</FlexItem>
+                <FlexItem>
+                  <Label isCompact color={isCardSelected === id1 ? 'blue' : undefined}>
+                    Preview
+                  </Label>
+                </FlexItem>
+              </Flex>
+            </CardTitle>
+          </CardHeader>
+          <CardBody>Developer preview • Not for production</CardBody>
+        </Card>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.19-card" isSelectable isSelected={isCardSelected === id2}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id2,
+              selectableActionAriaLabelledby: '4.19-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>4.19.2</FlexItem>
+                <FlexItem>
+                  <Label isCompact color={isCardSelected === id2 ? 'blue' : undefined}>
+                    Latest
+                  </Label>
+                </FlexItem>
+              </Flex>
+            </CardTitle>
+          </CardHeader>
+          <CardBody>Newest features • 18-month support • Recommended</CardBody>
+        </Card>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.18-card" isSelectable isSelected={isCardSelected === id3}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id3,
+              selectableActionAriaLabelledby: '4.18-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>4.18.19</CardTitle>
+          </CardHeader>
+          <CardBody>Previous stable • Full support</CardBody>
+        </Card>
+        <ExpandableSection isExpanded={isExpanded} isDetached toggleId={toggleId} contentId={contentId}>
+          <Flex
+            direction={{ default: 'column' }}
+            alignItems={{ default: 'alignItemsCenter' }}
+            gap={{ default: 'gapMd' }}
+          >
+            <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+              <Card className="pf-v6-u-mt-md" id="4.17-card" isSelectable isSelected={isCardSelected === id4}>
+                <CardHeader
+                  selectableActions={{
+                    selectableActionId: id4,
+                    selectableActionAriaLabelledby: '4.17-card',
+                    name: 'version',
+                    variant: 'single',
+                    onChange,
+                    isHidden: true
+                  }}
+                >
+                  <CardTitle>
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                      <FlexItem>4.17.34</FlexItem>
+                      <FlexItem>
+                        <Label isCompact color={isCardSelected === id4 ? 'blue' : undefined}>
+                          Maintenance
+                        </Label>
+                      </FlexItem>
+                    </Flex>
+                  </CardTitle>
+                </CardHeader>
+                <CardBody>Maintenance support phase</CardBody>
+              </Card>
+            </FlexItem>
+          </Flex>
+        </ExpandableSection>
+      </FlexItem>
+      <FlexItem>
+        <ExpandableSectionToggle
+          isExpanded={isExpanded}
+          onToggle={onToggleExpandableSection}
+          toggleId={toggleId}
+          contentId={contentId}
+          direction="up"
+        >
+          {isExpanded ? 'Hide older versions' : 'Show older versions'}
+        </ExpandableSectionToggle>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <Card ouiaId="VersionSelectorCard">
+      <CardBody
+        style={{ '--pf-v6-c-card--child--PaddingBlockEnd': 'var(--pf-t--global--spacer--md)' } as React.CSSProperties}
+      >
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Architecture" role="region" isFilled>
+          <Tab
+            eventKey={0}
+            title={
+              <TabTitleText>
+                <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                  <FlexItem>
+                    <CubeIcon />
+                  </FlexItem>
+                  <FlexItem>Single arch</FlexItem>
+                </Flex>
+              </TabTitleText>
+            }
+          >
+            {generateTabContent('x86_64 Intel/AMD only', 'Standard deployments • Most common choice')}
+          </Tab>
+          <Tab
+            eventKey={1}
+            title={
+              <TabTitleText>
+                <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                  <FlexItem>
+                    <CubesIcon />
+                  </FlexItem>
+                  <FlexItem>Multi arch</FlexItem>
+                </Flex>
+              </TabTitleText>
+            }
+          >
+            {generateTabContent('Multi arch', 'Standard deployments')}
+          </Tab>
+        </Tabs>
+      </CardBody>
+      <CardFooter>
+        <Button isBlock isDisabled={isCardSelected === ''}>
+          Continue with selections
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+const DownloadCard = () => (
+  <Card>
+    <CardHeader isToggleRightAligned>
+      <CardTitle>
+        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+          <FlexItem>
+            <Icon size="lg" status="success">
+              <CheckCircleIcon />
+            </Icon>
+          </FlexItem>
+          <FlexItem>Your discovery ISO is ready</FlexItem>
+        </Flex>
+      </CardTitle>
+    </CardHeader>
+    <CardBody>
+      <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
+        <FlexItem>
+          <Content component={ContentVariants.p}>
+            To begin adding hosts to your bare metal cluster, you first need to boot them with the generated Discovery
+            ISO. This allows the installation program to see and manage your hardware.
+          </Content>
+        </FlexItem>
+
+        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
+          <FlexItem>
+            <Button variant={ButtonVariant.primary} icon={<ArrowCircleDownIcon />} isBlock>
+              Download Discovery ISO
+            </Button>
+          </FlexItem>
+
+          <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
+            <Content component={ContentVariants.small}>1.2 GB • Expires in 24 hours</Content>
+          </FlexItem>
+        </Flex>
+      </Flex>
+    </CardBody>
+    <CardFooter>
+      <Content component={ContentVariants.small}>
+        <strong>Next step:</strong> After downloading, boot your bare metal hosts from this ISO image.
+      </Content>
+    </CardFooter>
+  </Card>
+);
+
 export const UserMessageWithExtraContent: FunctionComponent = () => (
   <>
     <Message
@@ -50,5 +625,34 @@ export const UserMessageWithExtraContent: FunctionComponent = () => (
         endContent: <UserActionEndContent />
       }}
     />
+    <Message
+      avatar={patternflyAvatar}
+      name="Bot"
+      role="bot"
+      content="This is a message with a live progress summmary card."
+      timestamp="1 hour ago"
+      extraContent={{
+        afterMainContent: <LiveProgressSummaryCard />
+      }}
+    />
+    <Message
+      avatar={patternflyAvatar}
+      name="Bot"
+      role="bot"
+      content="This is a message with a version selector card."
+      timestamp="1 hour ago"
+      extraContent={{
+        afterMainContent: <VersionSelectorCard />
+      }}
+    />
+    <Message
+      avatar={patternflyAvatar}
+      name="Bot"
+      role="bot"
+      content="All set! I've finished building the Discovery ISO. The next step is to download it and boot your hosts, which you can do using the summary card I've prepared for you:"
+      extraContent={{
+        endContent: <DownloadCard />
+      }}
+    />
   </>
 );

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -245,4 +245,111 @@ describe('UserFeedback', () => {
     );
     expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
   });
+  it('should pass buttonProps to submit button', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        submitButtonProps={{ variant: 'secondary', isDisabled: true }}
+      />
+    );
+    const submitButton = 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', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        cardHeaderProps={{ 'data-testid': 'card-header', className: 'custom-header' } as any}
+      />
+    );
+    const cardHeader = screen.getByTestId('card-header');
+    expect(cardHeader).toHaveClass('custom-header');
+  });
+  it('should pass cardBodyProps to card body', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        cardBodyProps={{ 'data-testid': 'card-body', className: 'custom-body' } as any}
+      />
+    );
+    const cardBody = screen.getByTestId('card-body');
+    expect(cardBody).toHaveClass('custom-body');
+  });
+  it('should pass headingLevelProps to title heading', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        headingLevelProps={{ className: 'custom-heading', id: 'feedback-title' }}
+      />
+    );
+    const heading = 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', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        formProps={{ 'data-testid': 'feedback-form', className: 'custom-form' } as any}
+      />
+    );
+    const form = screen.getByTestId('feedback-form');
+    expect(form).toHaveClass('custom-form');
+  });
+  it('should pass textAreaProps to text area when hasTextArea is true', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaProps={{ 'data-testid': 'custom-textarea', rows: 5 } as any}
+      />
+    );
+    const textArea = screen.getByTestId('custom-textarea');
+    expect(textArea).toHaveAttribute('rows', '5');
+    expect(textArea).toHaveAttribute('data-testid', 'custom-textarea');
+  });
+  it('should pass actionGroupProps to action group', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        actionGroupProps={{ 'data-testid': 'action-group', className: 'custom-actions' } as any}
+      />
+    );
+    const actionGroup = screen.getByTestId('action-group');
+    expect(actionGroup).toHaveClass('custom-actions');
+  });
+  it('should render children', () => {
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES}>
+        <div data-testid="custom-content">Custom feedback content</div>
+        <p>Additional paragraph</p>
+      </UserFeedback>
+    );
+    expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+    expect(screen.getByText('Custom feedback content')).toBeInTheDocument();
+    expect(screen.getByText('Additional paragraph')).toBeInTheDocument();
+  });
 });

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -8,15 +8,21 @@ import { useState, useRef, useEffect } from 'react';
 // Import PatternFly components
 import {
   ActionGroup,
+  ActionGroupProps,
   Button,
+  ButtonProps,
   Card,
   CardBody,
+  CardBodyProps,
   CardHeader,
+  CardHeaderProps,
   CardProps,
   Form,
+  FormProps,
   LabelGroupProps,
   OUIAProps,
-  TextArea
+  TextArea,
+  TextAreaProps
 } from '@patternfly/react-core';
 import QuickResponse from '../QuickResponse/QuickResponse';
 import CloseButton from './CloseButton';
@@ -54,6 +60,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;
 }
 
 const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
@@ -74,6 +94,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   headingLevel: HeadingLevel = 'h1',
   focusOnLoad = true,
   isCompact,
+  children,
+  cardHeaderProps,
+  cardBodyProps,
+  headingLevelProps,
+  formProps,
+  textAreaProps,
+  actionGroupProps,
+  submitButtonProps,
   ...props
 }: UserFeedbackProps) => {
   const [selectedResponse, setSelectedResponse] = useState<string>();
@@ -94,11 +122,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
           actions={{
             actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
           }}
+          {...cardHeaderProps}
         >
-          <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
+          <HeadingLevel className="pf-chatbot__feedback-card-title" {...headingLevelProps}>
+            {title}
+          </HeadingLevel>
         </CardHeader>
-        <CardBody>
-          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
+        <CardBody {...cardBodyProps}>
+          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`} {...formProps}>
             {quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
@@ -117,10 +148,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
                 placeholder={textAreaPlaceholder}
                 aria-label={textAreaAriaLabel}
                 resizeOrientation="vertical"
+                {...textAreaProps}
               />
             )}
-            <ActionGroup>
-              <Button onClick={() => onSubmit(selectedResponse, value)}>{submitWord}</Button>
+            {children}
+            <ActionGroup {...actionGroupProps}>
+              <Button onClick={() => onSubmit(selectedResponse, value)} {...submitButtonProps}>
+                {submitWord}
+              </Button>
             </ActionGroup>
           </Form>
         </CardBody>