botframework-webchat-component 4.18.2 → 4.19.0

package/src/Activity/StackedLayout.tsx

@@ -1,120 +1,160 @@
 /* eslint complexity: ["error", 50] */
 
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import type { RenderAttachment } from 'botframework-webchat-api';
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { memo } from 'react';
-import { ActivityDecorator } from 'botframework-webchat-api/decorator';
+import { ActivityBorderDecorator } from 'botframework-webchat-api/decorator.js';
+import {
+  getActivityLivestreamingMetadata,
+  getOrgSchemaMessage,
+  getVoiceActivityRole,
+  getVoiceActivityText,
+  isVoiceActivity,
+  type WebChatActivity
+} from 'botframework-webchat-core';
+import cx from 'classnames';
+import React, { memo, useCallback, useMemo, type ReactNode } from 'react';
 
-import Bubble from './Bubble';
-import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import ScreenReaderText from '../ScreenReaderText';
+import isZeroOrPositive from '../Utils/isZeroOrPositive';
+import getFirstBaseOfSoftwareSourceCode from '../Utils/orgSchema/getFirstBaseOfSoftwareSourceCode';
 import textFormatToContentType from '../Utils/textFormatToContentType';
-import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useUniqueId from '../hooks/internal/useUniqueId';
+import { useGetLogicalGroupKey } from '../providers/ActivityLogicalGrouping';
+import AttachmentRow from './AttachmentRow';
+import Bubble from './Bubble';
+import CodeBlockContent from './CodeBlockContent';
+import CollapsibleContent from './CollapsibleContent';
+import StackedLayoutMain from './StackedLayoutMain';
+import StackedLayoutMessageStatus from './StackedLayoutMessageStatus';
+import StackedLayoutRoot from './StackedLayoutRoot';
+import StackedLayoutStatus from './StackedLayoutStatus';
 
-import type { FC, ReactNode } from 'react';
-import type { RenderAttachment } from 'botframework-webchat-api';
-import type { WebChatActivity } from 'botframework-webchat-core';
-
-const { useAvatarForBot, useAvatarForUser, useLocalizer, useStyleOptions } = hooks;
-
-const ROOT_STYLE = {
-  '&.webchat__stacked-layout': {
-    position: 'relative', // This is to keep screen reader text in the destinated area.
-
-    '& .webchat__stacked-layout__attachment-row, & .webchat__stacked-layout__main, & .webchat__stacked-layout__message-row, & .webchat__stacked-layout__status':
-      {
-        display: 'flex'
-      },
-
-    '& .webchat__stacked-layout__alignment-pad': {
-      flexShrink: 0
-    },
-
-    '& .webchat__stacked-layout__attachment': {
-      width: '100%'
-    },
-
-    '& .webchat__stacked-layout__avatar-gutter': {
-      display: 'flex',
-      flexDirection: 'column',
-      flexShrink: 0
-    },
-
-    '&.webchat__stacked-layout--from-user': {
-      '& .webchat__stacked-layout__attachment-row, & .webchat__stacked-layout__main, & .webchat__stacked-layout__message-row, & .webchat__stacked-layout__status':
-        {
-          flexDirection: 'row-reverse'
-        }
-    },
-
-    '& .webchat__stacked-layout__content': {
-      flex: 1,
-
-      // This is for bottom aligning an avatar with a message bubble shorter than the avatar.
-      // Related to the test at activityGrouping.avatarMiddleware.atBottom.js.
-      display: 'flex',
-      flexDirection: 'column',
-
-      // This "overflow: hidden" is to make sure text overflow will get clipped correctly.
-      // Related to the test at basic.js "long URLs with keep-all".
-      overflow: 'hidden'
-    },
-
-    '& .webchat__stacked-layout__nub-pad': {
-      flexShrink: 0
-    }
+import styles from './StackedLayout.module.css';
+
+const { useAvatarForBot, useAvatarForUser, useLocalizer, useGetKeyByActivity, useStyleOptions } = hooks;
+
+type StackedLayoutInnerProps = Readonly<{
+  activity: WebChatActivity;
+  children?: ReactNode | undefined;
+  fromUser: boolean;
+  hasAvatar: boolean;
+  hasDisplayText: boolean;
+  hasNub: boolean;
+  id: string;
+  renderAvatar?: false | (() => Exclude<ReactNode, boolean | null | undefined>) | undefined;
+  renderBubbleContent: (title?: string | undefined, showStatus?: boolean) => ReactNode;
+  showAvatar?: boolean | undefined;
+  showNub?: boolean | undefined;
+}>;
+
+const StackedLayoutInner = memo(
+  ({
+    activity,
+    children,
+    fromUser,
+    hasAvatar,
+    hasDisplayText,
+    hasNub,
+    id,
+    renderAvatar,
+    renderBubbleContent,
+    showAvatar,
+    showNub
+  }: StackedLayoutInnerProps) => {
+    const [{ initials: botInitials }] = useAvatarForBot();
+    const localize = useLocalizer();
+    const classNames = useStyles(styles);
+
+    const messageThing = useMemo(() => getOrgSchemaMessage(activity.entities), [activity]);
+    const greetingAlt = (
+      fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
+    ).replace(/\s{2,}/gu, ' ');
+
+    return (
+      <StackedLayoutMain avatar={showAvatar && renderAvatar && renderAvatar()}>
+        {!!(hasDisplayText || messageThing?.abstract[0]) && (
+          <div
+            aria-roledescription="message"
+            className={cx(classNames['stacked-layout__message-row'])}
+            // Disable "Prop `id` is forbidden on DOM Nodes" rule because we are using the ID prop for accessibility.
+            /* eslint-disable-next-line react/forbid-dom-props */
+            id={id}
+            role="group"
+          >
+            <ScreenReaderText text={greetingAlt} />
+            <Bubble
+              className={classNames['stacked-layout__message']}
+              fromUser={fromUser}
+              nub={showNub || (hasAvatar || hasNub ? 'hidden' : false)}
+            >
+              <ActivityBorderDecorator activity={activity}>
+                {renderBubbleContent(messageThing?.abstract[0])}
+              </ActivityBorderDecorator>
+            </Bubble>
+          </div>
+        )}
+        <div className={classNames['stacked-layout__attachment-list']}>{children}</div>
+      </StackedLayoutMain>
+    );
   }
-};
+);
 
-type StackedLayoutProps = {
+StackedLayoutInner.displayName = 'StackedLayoutInner';
+
+type StackedLayoutProps = Readonly<{
   activity: WebChatActivity;
-  hideTimestamp?: boolean;
-  renderActivityStatus?: (options: { hideTimestamp: boolean }) => ReactNode;
-  renderAttachment?: RenderAttachment;
-  renderAvatar?: false | (() => Exclude<ReactNode, boolean | null | undefined>);
-  showCallout?: boolean;
-};
+  hideTimestamp?: boolean | undefined;
+  renderActivityStatus?: ((options: { hideTimestamp: boolean }) => ReactNode) | undefined;
+  renderAttachment?: RenderAttachment | undefined;
+  renderAvatar?: false | (() => Exclude<ReactNode, boolean | null | undefined>) | undefined;
+  showCallout?: boolean | undefined;
+}>;
 
-const StackedLayout: FC<StackedLayoutProps> = ({
+const StackedLayout = ({
   activity,
   hideTimestamp,
   renderActivityStatus,
   renderAttachment,
   renderAvatar,
   showCallout
-}) => {
+}: StackedLayoutProps) => {
   const [styleOptions] = useStyleOptions();
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
-  const [{ stackedLayout: stackedLayoutStyleSet }] = useStyleSet();
   const ariaLabelId = useUniqueId('webchat__stacked-layout__id');
   const localize = useLocalizer();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const classNames = useStyles(styles);
 
   const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions;
 
-  const isMessage = activity.type === 'message';
+  const isMessageOrTyping = activity.type === 'message' || activity.type === 'typing';
 
-  const attachments = (isMessage && activity.attachments) || [];
-  const fromUser = activity.from.role === 'user';
-  const messageBackDisplayText: string = (isMessage && activity.channelData?.messageBack?.displayText) || '';
+  const attachments = useMemo(() => (isMessageOrTyping && activity.attachments) || [], [activity, isMessageOrTyping]);
+  const fromUser = activity.from.role === 'user' || getVoiceActivityRole(activity) === 'user';
+  const messageBackDisplayText: string = (isMessageOrTyping && activity.channelData?.messageBack?.displayText) || '';
+  const messageThing = useMemo(() => getOrgSchemaMessage(activity.entities), [activity]);
+  const isCollapsible = useMemo(() => messageThing?.keywords?.includes('Collapsible'), [messageThing]);
 
-  const activityDisplayText = isMessage ? messageBackDisplayText || activity.text : '';
-  const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
-  const greetingAlt = (
-    fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
-  ).replace(/\s{2,}/gu, ' ');
+  const creativeWorkStatus = messageThing?.creativeWorkStatus[0];
+  const isLivestreaming = !!getActivityLivestreamingMetadata(activity);
+  const activityDisplayText = isMessageOrTyping
+    ? messageBackDisplayText || activity.text
+    : isLivestreaming && 'text' in activity
+      ? (activity.text as string)
+      : isVoiceActivity(activity)
+        ? getVoiceActivityText(activity)
+        : '';
 
   const initials = fromUser ? userInitials : botInitials;
   const nubOffset = fromUser ? bubbleFromUserNubOffset : bubbleNubOffset;
   const nubSize = fromUser ? bubbleFromUserNubSize : bubbleNubSize;
   const otherInitials = fromUser ? botInitials : userInitials;
   const otherNubSize = fromUser ? bubbleNubSize : bubbleFromUserNubSize;
+  const activityKey = useGetKeyByActivity()(activity);
+  const isInGroup = !!useGetLogicalGroupKey()(activityKey);
 
-  const hasAvatar = initials || typeof initials === 'string';
+  const hasAvatar = (initials || typeof initials === 'string') && !isInGroup;
   const hasOtherAvatar = otherInitials || typeof otherInitials === 'string';
   const hasNub = typeof nubSize === 'number';
   const hasOtherNub = typeof otherNubSize === 'number';
@@ -123,128 +163,155 @@ const StackedLayout: FC<StackedLayoutProps> = ({
   const extraTrailing = !hasOtherAvatar && hasOtherNub; // This is for bot message with user nub and no user avatar. And vice versa.
 
   const showAvatar = showCallout && hasAvatar && !!renderAvatar;
-  const showNub = showCallout && hasNub && (topAlignedCallout || !attachments?.length);
+  const showNub = !isInGroup && showCallout && hasNub && (topAlignedCallout || !attachments?.length);
+
+  const showStatus = !!creativeWorkStatus || isInGroup;
+
+  const renderMainBubbleContent = useCallback(
+    (title = '', withStatus = true) => (
+      <div className={classNames['stacked-layout__bubble']}>
+        {withStatus && showStatus && <StackedLayoutMessageStatus creativeWorkStatus={creativeWorkStatus} />}
+        {title && <div className={classNames['stacked-layout__title']}>{title}</div>}
+        {activityDisplayText &&
+          renderAttachment({
+            activity,
+            attachment: {
+              content: activityDisplayText,
+              contentType: textFormatToContentType('textFormat' in activity ? activity.textFormat : undefined)
+            }
+          })}
+      </div>
+    ),
+    [activity, activityDisplayText, classNames, creativeWorkStatus, renderAttachment, showStatus]
+  );
+
+  const attachmentChildren = useMemo(() => {
+    const syntheticAttachments = [];
+
+    const attachmentAlt = localize(
+      fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT',
+      otherInitials || ''
+    );
+
+    if (isCollapsible && 'text' in activity && activity.text) {
+      syntheticAttachments.push(
+        <AttachmentRow
+          attachedAlt={attachmentAlt}
+          fromUser={fromUser}
+          hasAvatar={!!hasAvatar}
+          hasNub={!!hasNub}
+          key={syntheticAttachments.length}
+          showBubble={false}
+        >
+          {renderMainBubbleContent('', false)}
+        </AttachmentRow>
+      );
+    }
+
+    if (isCollapsible) {
+      const firstSoftwareSourceCode = getFirstBaseOfSoftwareSourceCode(messageThing);
+
+      if (firstSoftwareSourceCode) {
+        syntheticAttachments.push(
+          <AttachmentRow
+            attachedAlt={attachmentAlt}
+            fromUser={fromUser}
+            hasAvatar={!!hasAvatar}
+            hasNub={!!hasNub}
+            key={syntheticAttachments.length}
+            showBubble={false}
+          >
+            <CodeBlockContent
+              code={firstSoftwareSourceCode.text[0]}
+              key={syntheticAttachments.length}
+              language={firstSoftwareSourceCode.programmingLanguage[0]}
+              title={firstSoftwareSourceCode.programmingLanguage[0]}
+            />
+          </AttachmentRow>
+        );
+      }
+    }
+
+    return syntheticAttachments.concat(
+      attachments.map((attachment, index) => (
+        <AttachmentRow
+          attachedAlt={attachmentAlt}
+          fromUser={fromUser}
+          hasAvatar={!!hasAvatar}
+          hasNub={!!hasNub}
+          /* eslint-disable-next-line react/no-array-index-key */
+          key={index + syntheticAttachments.length}
+          showBubble={isCollapsible ? false : true}
+        >
+          {renderAttachment({ activity, attachment })}
+        </AttachmentRow>
+      ))
+    );
+  }, [
+    activity,
+    attachments,
+    fromUser,
+    hasAvatar,
+    hasNub,
+    isCollapsible,
+    localize,
+    messageThing,
+    otherInitials,
+    renderAttachment,
+    renderMainBubbleContent
+  ]);
+
+  const renderCollapsibleBubbleContent = useCallback(
+    (title = '') => (
+      <div className={classNames['stacked-layout__bubble']}>
+        {showStatus && <StackedLayoutMessageStatus creativeWorkStatus={creativeWorkStatus} />}
+        <CollapsibleContent
+          summary={title}
+          summaryClassName={cx(classNames['stacked-layout__title'], classNames['stacked-layout__title--collapsible'])}
+        >
+          <div className={classNames['stacked-layout__attachment-list']}>{attachmentChildren}</div>
+        </CollapsibleContent>
+      </div>
+    ),
+    [attachmentChildren, classNames, creativeWorkStatus, showStatus]
+  );
+
+  const renderBubbleContent = isCollapsible ? renderCollapsibleBubbleContent : renderMainBubbleContent;
 
   return (
-    <div
-      aria-labelledby={activityDisplayText ? ariaLabelId : undefined}
-      className={classNames('webchat__stacked-layout', rootClassName, stackedLayoutStyleSet + '', {
-        'webchat__stacked-layout--extra-trailing': extraTrailing,
-        'webchat__stacked-layout--from-user': fromUser,
-        'webchat__stacked-layout--hide-avatar': hasAvatar && !showAvatar,
-        'webchat__stacked-layout--hide-nub': hasNub && !showNub,
-        'webchat__stacked-layout--no-message': !activityDisplayText,
-        'webchat__stacked-layout--show-avatar': showAvatar,
-        'webchat__stacked-layout--show-nub': showNub,
-        'webchat__stacked-layout--top-callout': topAlignedCallout
-      })}
+    <StackedLayoutRoot
+      ariaLabelId={activityDisplayText ? ariaLabelId : undefined}
+      extraTrailing={extraTrailing}
+      fromUser={fromUser}
+      hideAvatar={hasAvatar && !showAvatar}
+      hideNub={hasNub && !showNub}
+      isActivity={true}
+      noMessage={!activityDisplayText && !isCollapsible}
+      showAvatar={showAvatar}
+      showNub={showNub}
+      topCallout={topAlignedCallout}
     >
-      <div className="webchat__stacked-layout__main">
-        <div className="webchat__stacked-layout__avatar-gutter">{showAvatar && renderAvatar()}</div>
-        <div className="webchat__stacked-layout__content">
-          {!!activityDisplayText && (
-            <div
-              aria-roledescription="message"
-              className="webchat__stacked-layout__message-row"
-              // Disable "Prop `id` is forbidden on DOM Nodes" rule because we are using the ID prop for accessibility.
-              /* eslint-disable-next-line react/forbid-dom-props */
-              id={ariaLabelId}
-              role="group"
-            >
-              <ScreenReaderText text={greetingAlt} />
-              <Bubble
-                className="webchat__stacked-layout__message"
-                fromUser={fromUser}
-                nub={showNub || (hasAvatar || hasNub ? 'hidden' : false)}
-              >
-                <ActivityDecorator activity={activity}>
-                  {renderAttachment({
-                    activity,
-                    attachment: isMessage
-                      ? {
-                          content: activityDisplayText,
-                          contentType: textFormatToContentType(activity.textFormat)
-                        }
-                      : undefined
-                  })}
-                </ActivityDecorator>
-              </Bubble>
-            </div>
-          )}
-          {attachments.map((attachment, index) => (
-            <div
-              aria-roledescription="attachment"
-              className={classNames('webchat__stacked-layout__attachment-row', {
-                'webchat__stacked-layout__attachment-row--first': !index
-              })}
-              /* attachments do not have an ID, it is always indexed by number */
-              /* eslint-disable-next-line react/no-array-index-key */
-              key={index}
-              role="group"
-            >
-              <ScreenReaderText text={attachedAlt} />
-              <Bubble
-                className="webchat__stacked-layout__attachment"
-                fromUser={fromUser}
-                /* eslint-disable-next-line react/no-array-index-key */
-                key={index}
-                nub={hasAvatar || hasNub ? 'hidden' : false}
-              >
-                {renderAttachment({ activity, attachment })}
-              </Bubble>
-            </div>
-          ))}
-        </div>
-        <div className="webchat__stacked-layout__alignment-pad" />
-      </div>
-      {typeof renderActivityStatus === 'function' && (
-        <div className="webchat__stacked-layout__status">
-          <div className="webchat__stacked-layout__avatar-gutter" />
-          <div className="webchat__stacked-layout__nub-pad" />
-          {renderActivityStatus({ hideTimestamp })}
-          <div className="webchat__stacked-layout__alignment-pad" />
-        </div>
+      <StackedLayoutInner
+        activity={activity}
+        fromUser={fromUser}
+        hasAvatar={hasAvatar}
+        hasDisplayText={!!activityDisplayText?.length || isCollapsible}
+        hasNub={hasNub}
+        id={ariaLabelId}
+        renderAvatar={renderAvatar}
+        renderBubbleContent={renderBubbleContent}
+        showAvatar={showAvatar}
+        showNub={showNub}
+      >
+        {!isCollapsible && attachmentChildren.length > 0 && attachmentChildren}
+      </StackedLayoutInner>
+      {renderActivityStatus && !isInGroup && (
+        <StackedLayoutStatus>{renderActivityStatus({ hideTimestamp })}</StackedLayoutStatus>
       )}
-    </div>
+    </StackedLayoutRoot>
   );
 };
 
-StackedLayout.defaultProps = {
-  hideTimestamp: false,
-  renderActivityStatus: () => false,
-  renderAvatar: undefined,
-  showCallout: true
-};
-
-StackedLayout.propTypes = {
-  // PropTypes cannot fully capture TypeScript types.
-  // @ts-ignore
-  activity: PropTypes.shape({
-    attachments: PropTypes.array,
-    channelData: PropTypes.shape({
-      messageBack: PropTypes.shape({
-        displayText: PropTypes.string
-      })
-    }),
-    from: PropTypes.shape({
-      role: PropTypes.string.isRequired
-    }).isRequired,
-    text: PropTypes.string,
-    textFormat: PropTypes.oneOf(['markdown', 'plain', 'xml']),
-    timestamp: PropTypes.string,
-    type: PropTypes.string.isRequired
-  }).isRequired,
-  hideTimestamp: PropTypes.bool,
-
-  // PropTypes cannot validate precisely with its TypeScript counterpart.
-  // @ts-ignore
-  renderActivityStatus: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.func]),
-  renderAttachment: PropTypes.func.isRequired,
-
-  // PropTypes cannot validate precisely with its TypeScript counterpart.
-  // @ts-ignore
-  renderAvatar: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.func]),
-  showCallout: PropTypes.bool
-};
+StackedLayout.displayName = 'StackedLayout';
 
 export default memo(StackedLayout);

package/src/Activity/StackedLayoutMain.tsx

@@ -0,0 +1,36 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, type InferOutput } from 'valibot';
+
+import styles from './StackedLayout.module.css';
+
+const stackedLayoutMainPropsSchema = pipe(
+  object({
+    avatar: optional(reactNode()),
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type StackedLayoutMainProps = InferOutput<typeof stackedLayoutMainPropsSchema>;
+
+const StackedLayoutMain = memo((props: StackedLayoutMainProps) => {
+  const { avatar, children } = validateProps(stackedLayoutMainPropsSchema, props);
+
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['stacked-layout__main']}>
+      <div className={cx(classNames['stacked-layout__avatar-gutter'])}>{avatar}</div>
+      <div className={cx(classNames['stacked-layout__content'])}>{children}</div>
+      <div className={classNames['stacked-layout__alignment-pad']} />
+    </div>
+  );
+});
+
+StackedLayoutMain.displayName = 'StackedLayoutMain';
+
+export default StackedLayoutMain;
+export { stackedLayoutMainPropsSchema, type StackedLayoutMainProps };

package/src/Activity/StackedLayoutMessageStatus.tsx

@@ -0,0 +1,57 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import { ComponentIcon } from '../Icon';
+import MessageStatusLoader from './private/MessageStatusLoader';
+
+import styles from './StackedLayout.module.css';
+
+const stackedLayoutMessageStatusPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    creativeWorkStatus: optional(string())
+  }),
+  readonly()
+);
+
+type StackedLayoutMessageStatusProps = InferInput<typeof stackedLayoutMessageStatusPropsSchema>;
+
+const StackedLayoutMessageStatus = (props: StackedLayoutMessageStatusProps) => {
+  const { className, creativeWorkStatus } = validateProps(stackedLayoutMessageStatusPropsSchema, props);
+
+  const classNames = useStyles(styles);
+
+  return (
+    <div
+      className={cx(
+        classNames['stacked-layout__message-status'],
+        {
+          [classNames['stacked-layout__message-status--incomplete']]: creativeWorkStatus === 'Incomplete',
+          [classNames['stacked-layout__message-status--published']]: creativeWorkStatus === 'Published',
+          [classNames['stacked-layout__message-status--unset']]: !creativeWorkStatus
+        },
+        className
+      )}
+    >
+      <ComponentIcon
+        appearance="text"
+        className={classNames['stacked-layout__message-status-unset-icon']}
+        icon="unchecked-circle"
+      />
+      <ComponentIcon
+        appearance="text"
+        className={classNames['stacked-layout__message-status-complete-icon']}
+        icon="checkmark-circle"
+      />
+      <MessageStatusLoader className={classNames['stacked-layout__message-status-loader']} />
+    </div>
+  );
+};
+
+StackedLayoutMessageStatus.displayName = 'StackedLayoutMessageStatus';
+
+export default memo(StackedLayoutMessageStatus);
+export { stackedLayoutMessageStatusPropsSchema, type StackedLayoutMessageStatusProps };