@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.41

package/dist/esm/Compare/Compare.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+export const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
+    const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
+    const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
+    const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+    React.useEffect(() => {
+        // we want to show the first if we switch to the mobile toggle view
+        // and reset/switch back to normal otherwise
+        const updateChatbotVisibility = () => {
+            if (window.innerWidth >= 901) {
+                setShowFirstChatbot(true);
+                setShowSecondChatbot(true);
+            }
+            else {
+                setShowFirstChatbot(true);
+                setShowSecondChatbot(false);
+                setIsSelected('toggle-group-chatbot-1');
+            }
+        };
+        window.addEventListener('resize', updateChatbotVisibility);
+        return () => {
+            window.removeEventListener('resize', updateChatbotVisibility);
+        };
+    }, []);
+    // this only happens on mobile
+    const handleChildToggleClick = (event) => {
+        const id = event.currentTarget.id;
+        setIsSelected(id);
+        setShowSecondChatbot(!showSecondChatbot);
+        setShowFirstChatbot(!showFirstChatbot);
+        onToggleClick && onToggleClick(event);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
+            React.createElement(ToggleGroup, { "aria-label": toggleGroupAriaLabel },
+                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
+                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
+        React.createElement("div", { className: "pf-chatbot__compare" },
+            React.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
+            React.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
+};
+export default Compare;

package/dist/esm/Compare/Compare.test.d.ts

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

package/dist/esm/Compare/Compare.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Compare from './Compare';
+const firstChild = (React.createElement("div", null,
+    React.createElement("h1", null, "Child 1")));
+const secondChild = (React.createElement("div", null,
+    React.createElement("h1", null, "Child 2")));
+describe('Compare', () => {
+    it('should render compare correctly', () => {
+        render(React.createElement(Compare, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
+        expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+    });
+});

package/dist/esm/Compare/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Compare';
+export * from './Compare';

package/dist/esm/Compare/index.js

@@ -0,0 +1,2 @@
+export { default } from './Compare';
+export * from './Compare';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AlertProps } from '@patternfly/react-core';
+declare const ErrorMessage: ({ title, actionLinks, children, ...props }: AlertProps) => React.JSX.Element;
+export default ErrorMessage;

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

@@ -0,0 +1,21 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Error
+// ============================================================================
+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 React from 'react';
+import { Alert } from '@patternfly/react-core';
+const ErrorMessage = (_a) => {
+    var { title, actionLinks, children } = _a, props = __rest(_a, ["title", "actionLinks", "children"]);
+    return (React.createElement(Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks }, props), children));
+};
+export default ErrorMessage;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+declare const ImageMessage: ({ children, ...props }: JSX.IntrinsicElements["img"] & ExtraProps) => React.JSX.Element;
+export default ImageMessage;

package/dist/esm/Message/ImageMessage/ImageMessage.js

@@ -0,0 +1,20 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Image
+// ============================================================================
+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 React from 'react';
+const ImageMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement("img", Object.assign({ className: "pf-chatbot__message-image" }, props), children));
+};
+export default ImageMessage;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonProps } from '@patternfly/react-core';
+declare const LinkMessage: ({ children, target, href, ...props }: ButtonProps) => React.JSX.Element;
+export default LinkMessage;

package/dist/esm/Message/LinkMessage/LinkMessage.js

@@ -0,0 +1,25 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Link
+// ============================================================================
+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 React from 'react';
+import { Button } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+const LinkMessage = (_a) => {
+    var { children, target, href } = _a, props = __rest(_a, ["children", "target", "href"]);
+    if (target === '_blank') {
+        return (React.createElement(Button, Object.assign({ component: "a", variant: "link", href: href, icon: React.createElement(ExternalLinkSquareAltIcon, null), iconPosition: "end", isInline: true, target: target }, props), children));
+    }
+    return (React.createElement(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props), children));
+};
+export default LinkMessage;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const OrderedListMessage: ({ children }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
+declare const OrderedListMessage: ({ children, start }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
 export default OrderedListMessage;

package/dist/esm/Message/ListMessage/OrderedListMessage.js

@@ -3,6 +3,6 @@
 // ============================================================================
 import React from 'react';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
-const OrderedListMessage = ({ children }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
-    React.createElement(List, { component: ListComponent.ol, type: OrderType.number }, children)));
+const OrderedListMessage = ({ children, start }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
+    React.createElement(List, { component: ListComponent.ol, type: OrderType.number, start: start }, children)));
 export default OrderedListMessage;

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

@@ -1,12 +1,13 @@
-import React from 'react';
-import { AvatarProps, LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import React, { ReactNode } from 'react';
+import { AlertProps, AvatarProps, ButtonProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
-export interface QuickResponse extends Omit<LabelProps, 'children'> {
-    content: string;
-    id: string;
-    onClick: () => void;
-}
+import { QuickStart, QuickstartAction } from './QuickStarts/types';
+import QuickResponse from './QuickResponse/QuickResponse';
+import { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
+import { TableProps } from '@patternfly/react-table';
+import { PluggableList } from 'react-markdown/lib';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -25,6 +26,14 @@ export interface MessageAttachment {
     /** Custom test id for the loading spinner in the attachment component */
     spinnerTestId?: string;
 }
+export interface MessageExtraContent {
+    /** Content to display before the main content */
+    beforeMainContent?: ReactNode;
+    /** Content to display after the main content */
+    afterMainContent?: ReactNode;
+    /** Content to display at the end */
+    endContent?: ReactNode;
+}
 export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
     /** Unique id for message */
     id?: string;
@@ -32,6 +41,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     role: 'user' | 'bot';
     /** Message content */
     content?: string;
+    /** Extra Message content */
+    extraContent?: MessageExtraContent;
     /** Name of the user */
     name?: string;
     /** Avatar src for the user */
@@ -60,10 +71,42 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     quickResponses?: QuickResponse[];
     /** Props for quick responses container */
     quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Props for user feedback card */
+    userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
+    /** Props for user feedback response */
+    userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
     /** Whether avatar is round */
     hasRoundAvatar?: boolean;
     /** Any additional props applied to the avatar, for additional customization  */
     avatarProps?: Omit<AvatarProps, 'alt'>;
+    /** Props for QuickStart card */
+    quickStarts?: {
+        quickStart: QuickStart;
+        onSelectQuickStart: (id?: string) => void;
+        minuteWord?: string;
+        minuteWordPlural?: string;
+        prerequisiteWord?: string;
+        prerequisiteWordPlural?: string;
+        quickStartButtonAriaLabel?: string;
+        className?: string;
+        onClick?: () => void;
+        action?: QuickstartAction;
+    };
+    /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
+    isLiveRegion?: boolean;
+    /** Ref applied to message  */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+    tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+    /** Additional rehype plugins passed from the consumer */
+    additionalRehypePlugins?: PluggableList;
+    /** Whether to open links in message in new tab. */
+    openLinkInNewTab?: boolean;
+    /** Optional inline error message that can be displayed in the message */
+    error?: AlertProps;
+    /** Props for links */
+    linkProps?: ButtonProps;
 }
-export declare const Message: React.FunctionComponent<MessageProps>;
+export declare const MessageBase: React.FunctionComponent<MessageProps>;
+declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Message;

package/dist/esm/Message/Message.js

@@ -15,7 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Avatar, Label, LabelGroup, Timestamp, Truncate } from '@patternfly/react-core';
+import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
 import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
@@ -25,8 +25,32 @@ import SourcesCard from '../SourcesCard';
 import ListItemMessage from './ListMessage/ListItemMessage';
 import UnorderedListMessage from './ListMessage/UnorderedListMessage';
 import OrderedListMessage from './ListMessage/OrderedListMessage';
-export const Message = (_a) => {
-    var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps"]);
+import QuickStartTile from './QuickStarts/QuickStartTile';
+import QuickResponse from './QuickResponse/QuickResponse';
+import UserFeedback from './UserFeedback/UserFeedback';
+import UserFeedbackComplete from './UserFeedback/UserFeedbackComplete';
+import TableMessage from './TableMessage/TableMessage';
+import TrMessage from './TableMessage/TrMessage';
+import TdMessage from './TableMessage/TdMessage';
+import TbodyMessage from './TableMessage/TbodyMessage';
+import TheadMessage from './TableMessage/TheadMessage';
+import ThMessage from './TableMessage/ThMessage';
+import ImageMessage from './ImageMessage/ImageMessage';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSanitize from 'rehype-sanitize';
+import LinkMessage from './LinkMessage/LinkMessage';
+import ErrorMessage from './ErrorMessage/ErrorMessage';
+export const MessageBase = (_a) => {
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, 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 = [], linkProps, error } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error"]);
+    const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
+    let rehypePlugins = [rehypeUnwrapImages];
+    if (openLinkInNewTab) {
+        rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
+    }
+    if (additionalRehypePlugins) {
+        rehypePlugins.push(...additionalRehypePlugins);
+    }
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
         const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -36,7 +60,7 @@ export const Message = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
-    return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}` }, props),
+    return (React.createElement("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),
         React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         React.createElement("div", { className: "pf-chatbot__message-contents" },
             React.createElement("div", { className: "pf-chatbot__message-meta" },
@@ -46,23 +70,51 @@ export const Message = (_a) => {
                 React.createElement(Timestamp, { date: date }, timestamp)),
             React.createElement("div", { className: "pf-chatbot__message-response" },
                 React.createElement("div", { className: "pf-chatbot__message-and-actions" },
-                    isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(Markdown, { components: {
-                            p: TextMessage,
-                            code: ({ children }) => React.createElement(CodeBlockMessage, Object.assign({}, codeBlockProps), children),
-                            ul: UnorderedListMessage,
-                            ol: OrderedListMessage,
-                            li: ListItemMessage
-                        }, remarkPlugins: [remarkGfm] }, content)),
+                    isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(React.Fragment, null,
+                        beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
+                        error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
+                                p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                                code: (_a) => {
+                                    var { children } = _a, props = __rest(_a, ["children"]);
+                                    return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
+                                },
+                                h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                                h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                                h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                                h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                                h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                                h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                                blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
+                                ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
+                                ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
+                                li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
+                                table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
+                                tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
+                                thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
+                                tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
+                                td: (props) => {
+                                    // Conflicts with Td type
+                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                    const { width } = props, rest = __rest(props, ["width"]);
+                                    return React.createElement(TdMessage, Object.assign({}, rest));
+                                },
+                                th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
+                                img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
+                                a: (props) => (React.createElement(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
+                            }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, content)),
+                        afterMainContent && React.createElement(React.Fragment, null, afterMainContent))),
                     !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
+                    quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
                     !isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
-                    !isLoading && quickResponses && (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
-                        var { id, onClick, content } = _a, props = __rest(_a, ["id", "onClick", "content"]);
-                        return (React.createElement(Label, Object.assign({ variant: "outline", color: "blue", key: id, onClick: onClick }, props), content));
-                    })))),
+                    userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
+                    userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
+                    !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
                 attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
                     var _a;
                     return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
                         React.createElement(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 })));
-                })))))));
+                }))),
+                !isLoading && endContent && React.createElement(React.Fragment, null, endContent)))));
 };
+const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
 export default Message;