botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/Activity/StackedLayout.tsx

@@ -1,160 +1,120 @@
 /* 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 { 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 classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { memo } from 'react';
+import { ActivityDecorator } from 'botframework-webchat-api/decorator';
 
-import ScreenReaderText from '../ScreenReaderText';
+import Bubble from './Bubble';
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
-import getFirstBaseOfSoftwareSourceCode from '../Utils/orgSchema/getFirstBaseOfSoftwareSourceCode';
+import ScreenReaderText from '../ScreenReaderText';
 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 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>
-    );
+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
+    }
   }
-);
-
-StackedLayoutInner.displayName = 'StackedLayoutInner';
+};
 
-type StackedLayoutProps = Readonly<{
+type StackedLayoutProps = {
   activity: WebChatActivity;
-  hideTimestamp?: boolean | undefined;
-  renderActivityStatus?: ((options: { hideTimestamp: boolean }) => ReactNode) | undefined;
-  renderAttachment?: RenderAttachment | undefined;
-  renderAvatar?: false | (() => Exclude<ReactNode, boolean | null | undefined>) | undefined;
-  showCallout?: boolean | undefined;
-}>;
+  hideTimestamp?: boolean;
+  renderActivityStatus?: (options: { hideTimestamp: boolean }) => ReactNode;
+  renderAttachment?: RenderAttachment;
+  renderAvatar?: false | (() => Exclude<ReactNode, boolean | null | undefined>);
+  showCallout?: boolean;
+};
 
-const StackedLayout = ({
+const StackedLayout: FC<StackedLayoutProps> = ({
   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 classNames = useStyles(styles);
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions;
 
-  const isMessageOrTyping = activity.type === 'message' || activity.type === 'typing';
+  const isMessage = activity.type === 'message';
 
-  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 attachments = (isMessage && activity.attachments) || [];
+  const fromUser = activity.from.role === 'user';
+  const messageBackDisplayText: string = (isMessage && activity.channelData?.messageBack?.displayText) || '';
 
-  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 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 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') && !isInGroup;
+  const hasAvatar = initials || typeof initials === 'string';
   const hasOtherAvatar = otherInitials || typeof otherInitials === 'string';
   const hasNub = typeof nubSize === 'number';
   const hasOtherNub = typeof otherNubSize === 'number';
@@ -163,155 +123,128 @@ const StackedLayout = ({
   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 = !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;
+  const showNub = showCallout && hasNub && (topAlignedCallout || !attachments?.length);
 
   return (
-    <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
+      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
+      })}
     >
-      <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 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>
       )}
-    </StackedLayoutRoot>
+    </div>
   );
 };
 
-StackedLayout.displayName = 'StackedLayout';
+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
+};
 
 export default memo(StackedLayout);

package/src/ActivityStatus/AbsoluteTime.js

@@ -0,0 +1,32 @@
+import { hooks } from 'botframework-webchat-api';
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+
+import ScreenReaderText from '../ScreenReaderText';
+
+const { useDateFormatter, useLocalizer } = hooks;
+
+const AbsoluteTime = ({ hide, value }) => {
+  const localize = useLocalizer();
+  const formatDate = useDateFormatter();
+
+  const absoluteTime = formatDate(value);
+
+  return (
+    <Fragment>
+      <ScreenReaderText text={localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', absoluteTime)} />
+      {!hide && <span aria-hidden={true}>{absoluteTime}</span>}
+    </Fragment>
+  );
+};
+
+AbsoluteTime.defaultProps = {
+  hide: false
+};
+
+AbsoluteTime.propTypes = {
+  hide: PropTypes.bool,
+  value: PropTypes.string.isRequired
+};
+
+export default AbsoluteTime;