@patternfly/chatbot 6.5.0-prerelease.27 → 6.5.0-prerelease.28

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

@@ -0,0 +1,109 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+const QuickResponse_1 = __importDefault(require("./QuickResponse"));
+test('Renders with quick responses', () => {
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' },
+        { id: '3', content: 'Response 3' }
+    ];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses }));
+    expect(react_1.screen.getByText('Response 1')).toBeVisible();
+    expect(react_1.screen.getByText('Response 2')).toBeVisible();
+    expect(react_1.screen.getByText('Response 3')).toBeVisible();
+});
+test('Renders with compact styling', () => {
+    const quickResponses = [{ id: '1', content: 'Compact response' }];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, isCompact: true }));
+    expect(react_1.screen.getByText('Compact response').closest('.pf-v6-c-label')).toHaveClass('pf-m-compact');
+});
+test('Renders with custom className on response', () => {
+    const quickResponses = [{ id: '1', content: 'Custom class response', className: 'custom-response-class' }];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses }));
+    expect(react_1.screen.getByText('Custom class response').closest('.pf-v6-c-label')).toHaveClass('custom-response-class');
+});
+test('Renders with custom container className', () => {
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: { className: 'custom-container-class' } }));
+    expect(react_1.screen.getByText('Response 1').closest('.pf-v6-c-label-group')).toHaveClass('custom-container-class');
+});
+test('Spreads additional custom container props', () => {
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: { id: 'custom-container-id' } }));
+    expect(react_1.screen.getByText('Response 1').closest('.pf-v6-c-label-group__list')).toHaveAttribute('id', 'custom-container-id');
+});
+test('Renders with pf-chatbot__message-quick-response--selected class after click', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = user_event_1.default.setup();
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses }));
+    yield user.click(react_1.screen.getByText('Response 1'));
+    expect(react_1.screen.getByText('Response 1').closest('.pf-v6-c-label')).toHaveClass('pf-chatbot__message-quick-response--selected');
+}));
+test('Does not calls onClick handler when not passed', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = user_event_1.default.setup();
+    const handleClick = jest.fn();
+    const quickResponses = [{ id: '1', content: 'Clickable response' }];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses }));
+    yield user.click(react_1.screen.getByText('Clickable response'));
+    expect(handleClick).not.toHaveBeenCalled();
+}));
+test('Calls onClick handler when passed', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = user_event_1.default.setup();
+    const handleClick = jest.fn();
+    const quickResponses = [{ id: '1', content: 'Clickable response', onClick: handleClick }];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses }));
+    yield user.click(react_1.screen.getByText('Clickable response'));
+    expect(handleClick).toHaveBeenCalled();
+}));
+test('Does not call onSelect when not passed', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = user_event_1.default.setup();
+    const handleSelect = jest.fn();
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses }));
+    yield user.click(react_1.screen.getByText('Response 2'));
+    expect(handleSelect).not.toHaveBeenCalled();
+}));
+test('Calls onSelect when passed', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = user_event_1.default.setup();
+    const handleSelect = jest.fn();
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, onSelect: handleSelect }));
+    yield user.click(react_1.screen.getByText('Response 2'));
+    expect(handleSelect).toHaveBeenCalledWith('2');
+}));
+test('Spreads additional response props', () => {
+    const quickResponses = [{ id: '1', content: 'Response with props', isCompact: true, 'aria-label': 'Test label' }];
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses }));
+    expect(react_1.screen.getByText('Response with props').closest('.pf-v6-c-label')).toHaveAttribute('aria-label', 'Test label');
+});

package/dist/cjs/Message/QuickResponse/index.d.ts

@@ -0,0 +1 @@
+export * from './QuickResponse';

package/dist/cjs/Message/QuickResponse/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./QuickResponse"), exports);

package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts

@@ -25,5 +25,5 @@ export interface QuickStartTileProps {
     /** Sets the tile to compact styling */
     isCompact?: boolean;
 }
-declare const QuickStartTile: FC<QuickStartTileProps>;
+export declare const QuickStartTile: FC<QuickStartTileProps>;
 export default QuickStartTile;

package/dist/cjs/Message/QuickStarts/QuickStartTile.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.camelize = void 0;
+exports.QuickStartTile = exports.camelize = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const rocket_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/rocket-icon"));
 const outlined_bookmark_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon"));
@@ -43,4 +43,5 @@ const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, mi
                 actions: { actions: additionalAction }
             }), { children: quickStartIcon })), (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: (0, jsx_runtime_1.jsx)(QuickStartTileHeader_1.default, { name: displayName, onSelect: onSelect, quickStartId: id }) }), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { hasGutter: true, children: [(0, jsx_runtime_1.jsxs)(react_core_1.Flex, { spaceItems: { default: 'spaceItemsSm' }, children: [type && (0, jsx_runtime_1.jsx)(react_core_1.Label, { color: type.color, children: type.text }), durationMinutes && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", "data-test": "duration", icon: (0, jsx_runtime_1.jsx)(outlined_clock_icon_1.default, {}), children: (0, react_core_1.pluralize)(durationMinutes, minuteWord, minuteWordPlural) }))] }), (0, jsx_runtime_1.jsx)(QuickStartTileDescription_1.default, { description: description, prerequisites: prerequisites, prerequisiteWord: prerequisiteWord, prerequisiteWordPlural: prerequisiteWordPlural, quickStartButtonAriaLabel: quickStartButtonAriaLabel })] }) }), (0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "link", isInline: true, onClick: onSelect, children: (0, jsx_runtime_1.jsx)("span", { className: "pf-v6-c-button__text", children: "Start" }) }) })] }));
 };
-exports.default = QuickStartTile;
+exports.QuickStartTile = QuickStartTile;
+exports.default = exports.QuickStartTile;

package/dist/cjs/Message/QuickStarts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './QuickStartTile';
+export * from './types';

package/dist/cjs/Message/QuickStarts/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./QuickStartTile"), exports);
+__exportStar(require("./types"), exports);

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

@@ -51,5 +51,5 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
     /** Optional privacy statement text displayed under text area */
     privacyStatement?: string;
 }
-declare const UserFeedback: FunctionComponent<UserFeedbackProps>;
+export declare const UserFeedback: FunctionComponent<UserFeedbackProps>;
 export default UserFeedback;

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

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserFeedback = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 // Import PatternFly components
@@ -40,4 +41,5 @@ const UserFeedback = (_a) => {
                                         onTextAreaChange && onTextAreaChange(_event, value);
                                     }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps)) })), privacyStatement && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__feedback-card-privacy", children: privacyStatement }), 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), size: isCompact ? 'sm' : undefined }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
 };
-exports.default = UserFeedback;
+exports.UserFeedback = UserFeedback;
+exports.default = exports.UserFeedback;

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

@@ -38,5 +38,5 @@ export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAP
     /** Timestamp passed in by Message for more context in aria announcements */
     timestamp?: string;
 }
-declare const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps>;
+export declare const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps>;
 export default UserFeedbackComplete;

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

@@ -14,9 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserFeedbackComplete = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-// Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const CloseButton_1 = __importDefault(require("./CloseButton"));
 const UserFeedbackComplete = (_a) => {
@@ -90,4 +90,5 @@ const UserFeedbackComplete = (_a) => {
                         }
                         : undefined }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__feedback-complete-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__feedback-complete-image", children: (0, jsx_runtime_1.jsxs)("svg", { width: "60", height: "64", viewBox: "0 0 60 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M53.0555 21.5975H6.94323C3.57013 21.5975 0.835693 24.3319 0.835693 27.705V57.8925C0.835693 61.2656 3.57013 64 6.94323 64H53.0555C56.4286 64 59.1631 61.2656 59.1631 57.8925V27.705C59.1631 24.3319 56.4286 21.5975 53.0555 21.5975Z", fill: "#F8AE54" }), (0, jsx_runtime_1.jsx)("path", { d: "M55.8973 19.8247C52.5894 15.7926 29.9992 0 29.9992 0C29.9992 0 7.40996 15.7926 4.10102 19.8247C0.79312 23.8568 0.835476 25.7184 0.835476 27.8899H59.1629C59.1629 25.7184 59.2052 23.8578 55.8973 19.8257V19.8247Z", fill: "#FFCC17" }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M53.0567 8.48981H6.94336V61.8388H53.0567V8.48981Z", fill: "#F2F2F2" }) }), (0, jsx_runtime_1.jsx)("path", { d: "M51.6589 7.49908H8.34204V60.8481H51.6589V7.49908Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M0.835693 29.1296V57.8925C0.835693 59.2375 1.27165 60.4803 2.00823 61.4896L23.0303 43.5462L0.835693 29.1296Z", fill: "#FFCC17" }), (0, jsx_runtime_1.jsx)("path", { d: "M36.9695 43.5472L57.9905 61.4907C58.7271 60.4813 59.1631 59.2386 59.1631 57.8935V29.1306L36.9685 43.5472H36.9695Z", fill: "#FFF4CC" }), (0, jsx_runtime_1.jsx)("path", { d: "M0.835693 57.8925V57.8067L22.4146 42.7992L29.9994 37.5244L37.5842 42.7992L59.1641 57.8067V57.8925C59.1641 61.2665 56.4296 64 53.0566 64H6.94323C3.57024 64 0.835693 61.2665 0.835693 57.8925Z", fill: "#FFE072" }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M22.1563 42.978L0.835693 57.8067V56.6993L22.1563 42.978Z", fill: "#FEF07C" }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M37.8425 42.978L59.1631 57.8067V56.6993L37.8425 42.978Z", fill: "#FEF07C" }) }), (0, jsx_runtime_1.jsx)("path", { d: "M37.8037 32.2373C42.1136 27.9273 42.1136 20.9395 37.8037 16.6295C33.4937 12.3196 26.5059 12.3196 22.196 16.6295C17.886 20.9395 17.886 27.9273 22.196 32.2373C26.5059 36.5472 33.4937 36.5472 37.8037 32.2373Z", fill: "#0066CC" }), (0, jsx_runtime_1.jsx)("path", { d: "M27.7803 30.1276C27.6098 30.1276 27.4497 30.0614 27.3298 29.9406L22.9465 25.5562C22.8267 25.4364 22.7595 25.2762 22.7595 25.1068C22.7595 24.9374 22.8256 24.7762 22.9465 24.6554L24.2379 23.364C24.3577 23.2442 24.5178 23.177 24.6883 23.177C24.8587 23.177 25.0168 23.2431 25.1377 23.363L27.7803 26.0056L34.861 18.9259C34.9808 18.8061 35.1409 18.7389 35.3103 18.7389C35.4798 18.7389 35.6389 18.8051 35.7597 18.9239L37.0531 20.2173C37.173 20.3361 37.2401 20.4962 37.2401 20.6677C37.2401 20.8392 37.174 20.9983 37.0531 21.1181L28.2317 29.9406C28.1119 30.0604 27.9518 30.1265 27.7823 30.1265L27.7803 30.1276Z", fill: "white" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__feedback-complete-text", children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { className: "pf-chatbot__feedback-complete-title", children: title }), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: `pf-chatbot__feedback-complete-card-body`, children: body })] })] })] })) })));
 };
-exports.default = UserFeedbackComplete;
+exports.UserFeedbackComplete = UserFeedbackComplete;
+exports.default = exports.UserFeedbackComplete;

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

@@ -0,0 +1,2 @@
+export * from './UserFeedback';
+export * from './UserFeedbackComplete';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UserFeedback"), exports);
+__exportStar(require("./UserFeedbackComplete"), exports);

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

@@ -1,3 +1,11 @@
 export { default } from './Message';
 export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
+export * from './ErrorMessage/ErrorMessage';
+export * from './MessageAndActions';
+export * from './MessageAttachments';
 export * from './Message';
+export * from './MessageLoading';
+export * from './MessageInput';
+export * from './QuickResponse';
+export * from './QuickStarts';
+export * from './UserFeedback';

package/dist/cjs/Message/index.js

@@ -22,4 +22,12 @@ var Message_1 = require("./Message");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Message_1).default; } });
 var rehypeCodeBlockToggle_1 = require("./Plugins/rehypeCodeBlockToggle");
 Object.defineProperty(exports, "rehypeCodeBlockToggle", { enumerable: true, get: function () { return rehypeCodeBlockToggle_1.rehypeCodeBlockToggle; } });
+__exportStar(require("./ErrorMessage/ErrorMessage"), exports);
+__exportStar(require("./MessageAndActions"), exports);
+__exportStar(require("./MessageAttachments"), exports);
 __exportStar(require("./Message"), exports);
+__exportStar(require("./MessageLoading"), exports);
+__exportStar(require("./MessageInput"), exports);
+__exportStar(require("./QuickResponse"), exports);
+__exportStar(require("./QuickStarts"), exports);
+__exportStar(require("./UserFeedback"), exports);

package/dist/cjs/ResponseActions/ResponseActions.d.ts

@@ -29,6 +29,10 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
 type ExtendedActionProps = ActionProps & {
     [key: string]: any;
 };
+/**
+ * The various actions that can be attached to a bot message for users to interact with.
+ * Use this component when passing children to Message to customize its structure.
+ */
 export interface ResponseActionProps {
     /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
     actions: Record<string, ExtendedActionProps | undefined> & {

package/dist/cjs/ResponseActions/ResponseActionsGroups.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+/**
+ * The container for grouping multiple related ResponseActions components, typically used for having different persistence states amongst groups.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface ResponseActionsGroupsProps extends HTMLProps<HTMLDivElement> {
+    /** Content to render inside the response actions groups container */
+    children: ReactNode;
+    /** Additional classes applied to the response actions groups container. */
+    className?: string;
+}
+export declare const ResponseActionsGroups: FunctionComponent<ResponseActionsGroupsProps>;
+export default ResponseActionsGroups;

package/dist/cjs/ResponseActions/ResponseActionsGroups.js

@@ -0,0 +1,22 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponseActionsGroups = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_styles_1 = require("@patternfly/react-styles");
+const ResponseActionsGroups = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_styles_1.css)('pf-chatbot__response-actions-groups', className) }, props, { children: children })));
+};
+exports.ResponseActionsGroups = ResponseActionsGroups;
+exports.default = exports.ResponseActionsGroups;

package/dist/cjs/ResponseActions/ResponseActionsGroups.test.d.ts

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

package/dist/cjs/ResponseActions/ResponseActionsGroups.test.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const ResponseActionsGroups_1 = __importDefault(require("./ResponseActionsGroups"));
+test('Renders with children', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toBeInTheDocument();
+});
+test('Renders with pf-chatbot__response-actions-groups class by default', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveClass('pf-chatbot__response-actions-groups', { exact: true });
+});
+test('Renders with custom className', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { className: "custom-class", children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveClass('custom-class');
+});
+test('Spreads additional props', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { id: "test-id", children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

package/dist/cjs/ResponseActions/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './ResponseActions';
 export * from './ResponseActions';
+export * from './ResponseActionsGroups';

package/dist/cjs/ResponseActions/index.js

@@ -21,3 +21,4 @@ exports.default = void 0;
 var ResponseActions_1 = require("./ResponseActions");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ResponseActions_1).default; } });
 __exportStar(require("./ResponseActions"), exports);
+__exportStar(require("./ResponseActionsGroups"), exports);

package/dist/esm/MarkdownContent/MarkdownContent.d.ts

@@ -5,10 +5,15 @@ import { TableProps } from '@patternfly/react-table';
 import 'highlight.js/styles/vs2015.css';
 import { PluggableList } from 'unified';
 import { ButtonProps } from '@patternfly/react-core';
+/**
+ * MarkdownContent renders content either as plain text or with content with markdown support.
+ *
+ * Use this component when passing children to Message to customize its structure.
+ */
 export interface MarkdownContentProps {
-    /** The markdown content to render */
+    /** The content to render. Supports markdown formatting by default, or plain text when isMarkdownDisabled is true. */
     content?: string;
-    /** Disables markdown parsing, allowing only text input */
+    /** Disables markdown parsing, allowing only plain text input */
     isMarkdownDisabled?: boolean;
     /** Props for code blocks */
     codeBlockProps?: CodeBlockMessageProps;

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

@@ -1,3 +1,17 @@
 import { AlertProps } from '@patternfly/react-core';
-declare const ErrorMessage: ({ title, actionLinks, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ErrorMessage displays an inline danger alert for error states in messages.
+ * Use this component when passing children to Message to display error information.
+ */
+export interface ErrorMessageProps extends Partial<AlertProps> {
+    /** Content to display in the error alert body */
+    children?: React.ReactNode;
+    /** Additional classes for the error alert */
+    className?: string;
+    /** Title of the error alert */
+    title?: React.ReactNode;
+    /** Action links to display in the alert footer */
+    actionLinks?: React.ReactNode;
+}
+export declare const ErrorMessage: ({ title, actionLinks, children, className, ...props }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default ErrorMessage;

package/dist/esm/Message/ErrorMessage/ErrorMessage.js

@@ -14,8 +14,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Chatbot Main - Message - Content - Error
 // ============================================================================
 import { Alert } from '@patternfly/react-core';
-const ErrorMessage = (_a) => {
-    var { title, actionLinks, children } = _a, props = __rest(_a, ["title", "actionLinks", "children"]);
-    return (_jsx(Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks }, props, { children: children })));
+export const ErrorMessage = (_a) => {
+    var { title, actionLinks, children, className } = _a, props = __rest(_a, ["title", "actionLinks", "children", "className"]);
+    return (_jsx(Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks, className: className }, props, { children: children })));
 };
 export default ErrorMessage;

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

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

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ErrorMessage from './ErrorMessage';
+test('Renders with title', () => {
+    render(_jsx(ErrorMessage, { title: "Error occurred" }));
+    expect(screen.getByText('Error occurred')).toBeVisible();
+});
+test('Renders with children', () => {
+    render(_jsx(ErrorMessage, { title: "Error occurred", children: "This is the error message body" }));
+    expect(screen.getByText('This is the error message body')).toBeVisible();
+});
+test('Renders with action links', () => {
+    const actionLinks = (_jsx("a", { href: "#retry", "data-testid": "retry-link", children: "Retry action link" }));
+    render(_jsx(ErrorMessage, { title: "Error occurred", actionLinks: actionLinks }));
+    expect(screen.getByText('Retry action link')).toBeVisible();
+});
+test('Renders with custom className', () => {
+    render(_jsx(ErrorMessage, { title: "Error occurred", className: "custom-error-class" }));
+    expect(screen.getByText('Error occurred').parentElement).toHaveClass('custom-error-class');
+});
+test('Renders with spread props', () => {
+    render(_jsx(ErrorMessage, { title: "Error occurred", id: "test-error-id" }));
+    expect(screen.getByText('Error occurred').parentElement).toHaveAttribute('id', 'test-error-id');
+});

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

@@ -42,6 +42,8 @@ export interface MessageExtraContent {
     endContent?: ReactNode;
 }
 export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
+    /** Children to render instead of the default message structure, allowing more fine-tuned message control. When provided, this will override the default rendering of content, toolResponse, deepThinking, toolCall, sources, quickStarts, actions, etc. */
+    children?: ReactNode;
     /** Unique id for message */
     id?: string;
     /** Role of the user sending the message */

package/dist/esm/Message/Message.js

@@ -32,7 +32,7 @@ import DeepThinking from '../DeepThinking';
 import ToolCall from '../ToolCall';
 import MarkdownContent from '../MarkdownContent';
 export const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, persistActionSelection, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true, isPrimary } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "persistActionSelection", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages", "isPrimary"]);
+    var { children, role, content, extraContent, name, avatar, timestamp, isLoading, actions, persistActionSelection, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true, isPrimary } = _a, props = __rest(_a, ["children", "role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "persistActionSelection", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages", "isPrimary"]);
     const [messageText, setMessageText] = useState(content);
     useEffect(() => {
         setMessageText(content);
@@ -60,10 +60,10 @@ export const MessageBase = (_a) => {
         }
         return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? _jsx(ErrorMessage, Object.assign({}, error)) : handleMarkdown()] }));
     };
-    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [avatar && (_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps))), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (_jsx(_Fragment, { children: Array.isArray(actions) ? (_jsx("div", { className: "pf-chatbot__response-actions-groups", children: actions.map((actionGroup, index) => (_jsx(ResponseActions, { actions: actionGroup.actions || actionGroup, persistActionSelection: persistActionSelection || actionGroup.persistActionSelection }, index))) })) : (_jsx(ResponseActions, { actions: actions, persistActionSelection: persistActionSelection })) })), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
-                                    var _a;
-                                    return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId, variant: isPrimary ? 'outline' : undefined }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
-                                }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })] })] })));
+    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [avatar && (_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps))), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsx("div", { className: "pf-chatbot__message-response", children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (_jsx(_Fragment, { children: Array.isArray(actions) ? (_jsx("div", { className: "pf-chatbot__response-actions-groups", children: actions.map((actionGroup, index) => (_jsx(ResponseActions, { actions: actionGroup.actions || actionGroup, persistActionSelection: persistActionSelection || actionGroup.persistActionSelection }, index))) })) : (_jsx(ResponseActions, { actions: actions, persistActionSelection: persistActionSelection })) })), userFeedbackForm && (_jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact }))), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+                                        var _a;
+                                        return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId, variant: isPrimary ? 'outline' : undefined }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
+                                    }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })) })] })] })));
 };
 const Message = forwardRef((props, ref) => (_jsx(MessageBase, Object.assign({ innerRef: ref }, props))));
 export default Message;

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

@@ -0,0 +1,14 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+/**
+ * The container that wraps the primary message content and inline actions, such as ToolCall, ToolResponse, DeepThinking, ResponseActions, etc.
+ * Attachments should not be rendered inside this container.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MessageAndActionsProps extends HTMLProps<HTMLDivElement> {
+    /** Content to render inside the message and actions container. */
+    children: ReactNode;
+    /** Additional classes applied to the message and actions container. */
+    className?: string;
+}
+export declare const MessageAndActions: FunctionComponent<MessageAndActionsProps>;
+export default MessageAndActions;

package/dist/esm/Message/MessageAndActions/MessageAndActions.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '@patternfly/react-styles';
+export const MessageAndActions = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (_jsx("div", Object.assign({ className: css('pf-chatbot__message-and-actions', className) }, props, { children: children })));
+};
+export default MessageAndActions;

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageAndActions from './MessageAndActions';
+test('Renders with children', () => {
+    render(_jsx(MessageAndActions, { children: "Test content" }));
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+test('Renders with pf-chatbot__message-and-actions class by default', () => {
+    render(_jsx(MessageAndActions, { children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__message-and-actions', { exact: true });
+});
+test('Renders with custom className', () => {
+    render(_jsx(MessageAndActions, { className: "custom-class", children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+test('Spreads additional props', () => {
+    render(_jsx(MessageAndActions, { id: "test-id", children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

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

@@ -0,0 +1 @@
+export * from './MessageAndActions';

package/dist/esm/Message/MessageAndActions/index.js

@@ -0,0 +1 @@
+export * from './MessageAndActions';

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

@@ -0,0 +1,13 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+/**
+ * The container for a single message attachment item, typically the FileDetailsLabel component. You must wrap any attachment components in this container.
+ * Use this component within MessageAttachmentsContainer when passing children to Message to customize its structure.
+ */
+export interface MessageAttachmentItemProps extends HTMLProps<HTMLDivElement> {
+    /** Content to render inside a single attachment container */
+    children: ReactNode;
+    /** Additional classes applied to the attachment container. */
+    className?: string;
+}
+export declare const MessageAttachmentItem: FunctionComponent<MessageAttachmentItemProps>;
+export default MessageAttachmentItem;