@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

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

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

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

@@ -1,6 +1,3 @@
-// ============================================================================
-// 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)
@@ -12,14 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// Chatbot Main - Message - Content - Link
+// ============================================================================
 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 (_jsx(Button, Object.assign({ component: "a", variant: "link", href: href, icon: _jsx(ExternalLinkSquareAltIcon, {}), iconPosition: "end", isInline: true, target: target }, props, { children: children })));
     }
-    return (React.createElement(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props), children));
+    return (_jsx(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props, { children: children })));
 };
 export default LinkMessage;

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

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

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

@@ -1,7 +1,4 @@
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ListItem } from '@patternfly/react-core';
-const ListItemMessage = ({ children }) => React.createElement(ListItem, null, children);
+const ListItemMessage = ({ children }) => _jsx(ListItem, { children: children });
 export default ListItemMessage;

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

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

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

@@ -1,8 +1,4 @@
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
-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)));
+const OrderedListMessage = ({ children, start }) => (_jsx("div", { className: "pf-chatbot__message-ordered-list", children: _jsx(List, { component: ListComponent.ol, type: OrderType.number, start: start, children: children }) }));
 export default OrderedListMessage;

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

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

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

@@ -1,8 +1,4 @@
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { List } from '@patternfly/react-core';
-const UnorderedListMessage = ({ children }) => (React.createElement("div", { className: "pf-chatbot__message-unordered-list" },
-    React.createElement(List, null, children)));
+const UnorderedListMessage = ({ children }) => (_jsx("div", { className: "pf-chatbot__message-unordered-list", children: _jsx(List, { children: children }) }));
 export default UnorderedListMessage;

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

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
+import { ReactNode } from 'react';
+import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
@@ -7,7 +8,7 @@ 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';
+import { PluggableList } from 'unified';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -34,7 +35,7 @@ export interface MessageExtraContent {
     /** Content to display at the end */
     endContent?: ReactNode;
 }
-export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
+export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     /** Unique id for message */
     id?: string;
     /** Role of the user sending the message */
@@ -53,7 +54,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     isLoading?: boolean;
     /** Array of attachments attached to a message */
     attachments?: MessageAttachment[];
-    /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
+    /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen */
     actions?: {
         [key: string]: ActionProps;
     };
@@ -63,9 +64,24 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     botWord?: string;
     /** Label for the English "Loading message," displayed to screenreaders when loading a message */
     loadingWord?: string;
+    /** Props for code blocks */
     codeBlockProps?: {
+        /** Aria label applied to code blocks */
         'aria-label'?: string;
+        /** Class name applied to code blocks */
         className?: string;
+        /** Whether code blocks are expandable */
+        isExpandable?: boolean;
+        /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
+        maxLength?: number;
+        /** Additional props passed to expandable section if isExpandable is applied */
+        expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+        /** Additional props passed to expandable toggle if isExpandable is applied */
+        expandableSectionToggleProps?: ExpandableSectionToggleProps;
+        /** Link text applied to expandable toggle when expanded */
+        expandedText?: string;
+        /** Link text applied to expandable toggle when collapsed */
+        collapsedText?: string;
     };
     /** Props for quick responses */
     quickResponses?: QuickResponse[];
@@ -95,7 +111,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     /** 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>;
+    innerRef?: 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 */
@@ -115,14 +131,16 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     /** Label for the English word "Cancel" used in edit mode. */
     cancelWord?: string;
     /** Callback function for when edit mode update button is clicked */
-    onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Callback functionf or when edit cancel update button is clicked */
-    onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Ref applied to editable message input */
+    inputRef?: Ref<HTMLTextAreaElement>;
     /** Props for edit form */
     editFormProps?: FormProps;
     /** Sets message to compact styling. */
     isCompact?: boolean;
 }
-export declare const MessageBase: React.FunctionComponent<MessageProps>;
-declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MessageBase: FunctionComponent<MessageProps>;
+declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Message;

package/dist/esm/Message/Message.js

@@ -1,6 +1,3 @@
-// ============================================================================
-// Chatbot Main - Message
-// ============================================================================
 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)
@@ -12,7 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Chatbot Main - Message
+// ============================================================================
+import { forwardRef, useEffect, useState } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
@@ -42,14 +43,15 @@ import rehypeSanitize from 'rehype-sanitize';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
+import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 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, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps, isCompact } = _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", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps", "isCompact"]);
-    const [messageText, setMessageText] = React.useState(content);
-    React.useEffect(() => {
+    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, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact } = _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", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact"]);
+    const [messageText, setMessageText] = useState(content);
+    useEffect(() => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-    let rehypePlugins = [rehypeUnwrapImages];
+    let rehypePlugins = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
     if (openLinkInNewTab) {
         rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
     }
@@ -67,73 +69,49 @@ export const MessageBase = (_a) => {
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
     const renderMessage = () => {
         if (isLoading) {
-            return React.createElement(MessageLoading, { loadingWord: loadingWord });
+            return _jsx(MessageLoading, { loadingWord: loadingWord });
         }
         if (isEditable) {
-            return (React.createElement(React.Fragment, null,
-                beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
-                React.createElement(MessageInput, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
-                        onEditUpdate && onEditUpdate(event);
-                        setMessageText(text);
-                    }, onEditCancel: onEditCancel }, editFormProps))));
+            return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), _jsx(MessageInput, Object.assign({ content: messageText, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, value) => {
+                            onEditUpdate && onEditUpdate(event);
+                            setMessageText(value);
+                        }, onEditCancel: onEditCancel, inputRef: inputRef }, editFormProps))] }));
         }
-        return (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 }, messageText))));
+        return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? (_jsx(ErrorMessage, Object.assign({}, error))) : (_jsx(Markdown, { components: {
+                        p: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                        code: (_a) => {
+                            var { children } = _a, props = __rest(_a, ["children"]);
+                            return (_jsx(CodeBlockMessage, Object.assign({}, props, codeBlockProps, { children: children })));
+                        },
+                        h1: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                        h2: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                        h3: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                        h4: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                        h5: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                        h6: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                        blockquote: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
+                        ul: (props) => _jsx(UnorderedListMessage, Object.assign({}, props)),
+                        ol: (props) => _jsx(OrderedListMessage, Object.assign({}, props)),
+                        li: (props) => _jsx(ListItemMessage, Object.assign({}, props)),
+                        table: (props) => _jsx(TableMessage, Object.assign({}, props, tableProps)),
+                        tbody: (props) => _jsx(TbodyMessage, Object.assign({}, props)),
+                        thead: (props) => _jsx(TheadMessage, Object.assign({}, props)),
+                        tr: (props) => _jsx(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 _jsx(TdMessage, Object.assign({}, rest));
+                        },
+                        th: (props) => _jsx(ThMessage, Object.assign({}, props)),
+                        img: (props) => _jsx(ImageMessage, Object.assign({}, props)),
+                        a: (props) => (_jsx(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps, { children: props.children })))
+                    }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins, children: messageText }))] }));
     };
-    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" },
-                name && (React.createElement("span", { className: "pf-chatbot__message-name" },
-                    React.createElement(Truncate, { content: name }))),
-                role === 'bot' && (React.createElement(Label, { variant: "outline", isCompact: true }, botWord)),
-                React.createElement(Timestamp, { date: date }, timestamp)),
-            React.createElement("div", { className: "pf-chatbot__message-response" },
-                React.createElement("div", { className: "pf-chatbot__message-and-actions" },
-                    renderMessage(),
-                    afterMainContent && React.createElement(React.Fragment, null, afterMainContent),
-                    !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })),
-                    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, isCompact: isCompact })),
-                    !isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
-                    userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
-                    userFeedbackComplete && (React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
-                    !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))),
-                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)))));
+    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: [_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 }), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && _jsx(ResponseActions, { actions: actions }), 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 }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
+                                }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })] })] })));
 };
-const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
+const Message = forwardRef((props, ref) => (_jsx(MessageBase, Object.assign({ innerRef: ref }, props))));
 export default Message;