@azure/communication-react 1.21.0 → 1.22.0-alpha-202411160017

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageActionMenu.js

@@ -14,15 +14,12 @@ export const chatMessageActionMenuProps = (menuProps) => {
     // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
     const showActionMenu = enabled || menuExpanded;
     const actionMenuProps = {
-        children: React.createElement("div", { tabIndex: showActionMenu ? 0 : undefined, key: "menuButton", "data-testid": "chat-composite-message-action-icon", ref: menuProps.menuButtonRef, onClick: showActionMenu ? () => menuProps.onActionButtonClick() : undefined, style: {
-                margin: showActionMenu ? '1px' : 0,
-                minHeight: showActionMenu ? undefined : '30px'
-            }, role: "button", "aria-label": showActionMenu ? ariaLabel : undefined, "aria-haspopup": showActionMenu, "aria-expanded": menuExpanded, onKeyDown: e => {
+        children: (React.createElement("div", { tabIndex: showActionMenu ? 0 : undefined, key: "menuButton", "data-testid": "chat-composite-message-action-icon", ref: menuProps.menuButtonRef, onClick: showActionMenu ? () => menuProps.onActionButtonClick() : undefined, style: { margin: showActionMenu ? '1px' : 0, minHeight: showActionMenu ? undefined : '30px' }, role: "button", "aria-label": showActionMenu ? ariaLabel : undefined, "aria-haspopup": showActionMenu, "aria-expanded": menuExpanded, onKeyDown: (e) => {
                 // simulate <button> tag behavior
                 if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {
                     menuProps.onActionButtonClick();
                 }
-            } }, showActionMenu ? React.createElement(Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) }) : undefined)
+            } }, showActionMenu ? (React.createElement(Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) })) : undefined))
     };
     return actionMenuProps;
 };

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageActionMenu.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageActionMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAS,MAAM,iBAAiB,CAAC;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAOzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,SAU1C,EAA0C,EAAE;IAC3C,MAAM,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,YAAY,EACb,GAAG,SAAS,CAAC;IACd,4HAA4H;IAC5H,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAC/C,MAAM,eAAe,GAA+B;QAClD,QAAQ,EAAE,6BAAK,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvD,GAAG,EAAC,YAAY,iBAAa,oCAAoC,EAAC,GAAG,EAAE,SAAS,CAAC,aAAa,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE;gBAClL,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAClC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aAC/C,EAAE,IAAI,EAAC,QAAQ,gBAAa,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBAAiB,cAAc,mBAEnF,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE;gBAC1C,iCAAiC;gBACjC,IAAI,cAAc,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC3D,SAAS,CAAC,mBAAmB,EAAE,CAAC;gBAClC,CAAC;YACH,CAAC,IACI,cAAc,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,oBAAoB,gBAAa,SAAS,EAAE,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,CAAC,GAAI,CAAC,CAAC,CAAC,SAAS,CACtI;KACT,CAAC;IACF,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Theme } from '@fluentui/react';\nimport { MenuProps } from '@fluentui/react-components';\nimport React from 'react';\nimport { iconWrapperStyle } from '../styles/ChatMessageComponent.styles';\n\n/** @private */\nexport type ChatMessageActionMenuProps = MenuProps & {\n  showActionMenu?: boolean | undefined;\n};\n\n/**\n * Props for the Chat.Message action menu.\n * This is the 3 dots that appear when hovering over one of your own chat messages.\n *\n * @private\n */\nexport const chatMessageActionMenuProps = (menuProps: {\n  /** String for aria label that is read by Screen readers */\n  ariaLabel?: string;\n  /** Whether the action menu button is enabled, if not this will always return undefined */\n  enabled: boolean;\n  /** Whether the menu is shown */\n  menuExpanded: boolean;\n  menuButtonRef: React.MutableRefObject<HTMLDivElement | null>;\n  onActionButtonClick: () => void;\n  theme: Theme;\n}): ChatMessageActionMenuProps | undefined => {\n  const {\n    ariaLabel,\n    enabled,\n    theme,\n    menuExpanded\n  } = menuProps;\n  // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n  const showActionMenu = enabled || menuExpanded;\n  const actionMenuProps: ChatMessageActionMenuProps = {\n    children: <div tabIndex={showActionMenu ? 0 : undefined} //make div focusable, as Icon below is migrated to v9, this can be deleted\n    key=\"menuButton\" data-testid=\"chat-composite-message-action-icon\" ref={menuProps.menuButtonRef} onClick={showActionMenu ? () => menuProps.onActionButtonClick() : undefined} style={{\n      margin: showActionMenu ? '1px' : 0,\n      minHeight: showActionMenu ? undefined : '30px'\n    }} role=\"button\" aria-label={showActionMenu ? ariaLabel : undefined} aria-haspopup={showActionMenu}\n    // set expanded to true, only when the action menu is open\n    aria-expanded={menuExpanded} onKeyDown={e => {\n      // simulate <button> tag behavior\n      if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {\n        menuProps.onActionButtonClick();\n      }\n    }}>\n        {showActionMenu ? <Icon iconName=\"ChatMessageOptions\" aria-label={ariaLabel} styles={iconWrapperStyle(theme, menuExpanded)} /> : undefined}\n      </div>\n  };\n  return actionMenuProps;\n};"]}
+{"version":3,"file":"ChatMessageActionMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageActionMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAS,MAAM,iBAAiB,CAAC;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAOzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,SAU1C,EAA0C,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IAC9D,4HAA4H;IAC5H,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,MAAM,eAAe,GAA+B;QAClD,QAAQ,EAAE,CACR,6BACE,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACxC,GAAG,EAAC,YAAY,iBACJ,oCAAoC,EAChD,GAAG,EAAE,SAAS,CAAC,aAAa,EAC5B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,SAAS,EAC3E,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,EAC7F,IAAI,EAAC,QAAQ,gBACD,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACnC,cAAc,mBAEd,YAAY,EAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,iCAAiC;gBACjC,IAAI,cAAc,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC3D,SAAS,CAAC,mBAAmB,EAAE,CAAC;gBAClC,CAAC;YACH,CAAC,IAEA,cAAc,CAAC,CAAC,CAAC,CAChB,oBAAC,IAAI,IAAC,QAAQ,EAAC,oBAAoB,gBAAa,SAAS,EAAE,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,CAAC,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,CACT,CACP;KACF,CAAC;IAEF,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Theme } from '@fluentui/react';\nimport { MenuProps } from '@fluentui/react-components';\nimport React from 'react';\nimport { iconWrapperStyle } from '../styles/ChatMessageComponent.styles';\n\n/** @private */\nexport type ChatMessageActionMenuProps = MenuProps & {\n  showActionMenu?: boolean | undefined;\n};\n\n/**\n * Props for the Chat.Message action menu.\n * This is the 3 dots that appear when hovering over one of your own chat messages.\n *\n * @private\n */\nexport const chatMessageActionMenuProps = (menuProps: {\n  /** String for aria label that is read by Screen readers */\n  ariaLabel?: string;\n  /** Whether the action menu button is enabled, if not this will always return undefined */\n  enabled: boolean;\n  /** Whether the menu is shown */\n  menuExpanded: boolean;\n  menuButtonRef: React.MutableRefObject<HTMLDivElement | null>;\n  onActionButtonClick: () => void;\n  theme: Theme;\n}): ChatMessageActionMenuProps | undefined => {\n  const { ariaLabel, enabled, theme, menuExpanded } = menuProps;\n  // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n  const showActionMenu = enabled || menuExpanded;\n\n  const actionMenuProps: ChatMessageActionMenuProps = {\n    children: (\n      <div\n        tabIndex={showActionMenu ? 0 : undefined} //make div focusable, as Icon below is migrated to v9, this can be deleted\n        key=\"menuButton\"\n        data-testid=\"chat-composite-message-action-icon\"\n        ref={menuProps.menuButtonRef}\n        onClick={showActionMenu ? () => menuProps.onActionButtonClick() : undefined}\n        style={{ margin: showActionMenu ? '1px' : 0, minHeight: showActionMenu ? undefined : '30px' }}\n        role=\"button\"\n        aria-label={showActionMenu ? ariaLabel : undefined}\n        aria-haspopup={showActionMenu}\n        // set expanded to true, only when the action menu is open\n        aria-expanded={menuExpanded}\n        onKeyDown={(e) => {\n          // simulate <button> tag behavior\n          if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {\n            menuProps.onActionButtonClick();\n          }\n        }}\n      >\n        {showActionMenu ? (\n          <Icon iconName=\"ChatMessageOptions\" aria-label={ariaLabel} styles={iconWrapperStyle(theme, menuExpanded)} />\n        ) : undefined}\n      </div>\n    )\n  };\n\n  return actionMenuProps;\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.js

@@ -14,7 +14,7 @@ export const ChatMessageActionFlyout = (props) => {
     const theme = useTheme();
     const messageReadByCount = (_a = props.messageReadBy) === null || _a === void 0 ? void 0 : _a.length;
     const sortedMessageReadyByList = [...((_b = props.messageReadBy) !== null && _b !== void 0 ? _b : [])].sort((a, b) => a.displayName.localeCompare(b.displayName));
-    const messageReadByList = sortedMessageReadyByList === null || sortedMessageReadyByList === void 0 ? void 0 : sortedMessageReadyByList.map(person => {
+    const messageReadByList = sortedMessageReadyByList === null || sortedMessageReadyByList === void 0 ? void 0 : sortedMessageReadyByList.map((person) => {
         const personaOptions = {
             hidePersonaDetails: true,
             size: PersonaSize.size24,
@@ -31,9 +31,7 @@ export const ChatMessageActionFlyout = (props) => {
             'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',
             key: person.displayName,
             text: person.displayName,
-            itemProps: {
-                styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
-            },
+            itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
             onRenderIcon: () => {
                 var _a;
                 if (onRenderAvatar) {
@@ -50,34 +48,37 @@ export const ChatMessageActionFlyout = (props) => {
         };
     });
     const menuItems = useMemo(() => {
-        const items = [{
+        const items = [
+            {
                 key: 'Edit',
                 'data-testid': 'chat-composite-message-contextual-menu-edit-action',
                 text: props.strings.editMessage,
                 itemProps: {
                     styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
                 },
-                iconProps: {
-                    iconName: 'MessageEdit',
-                    styles: menuIconStyleSet
-                },
+                iconProps: { iconName: 'MessageEdit', styles: menuIconStyleSet },
                 onClick: props.onEditClick
-            }, {
+            },
+            {
                 key: 'Remove',
                 'data-testid': 'chat-composite-message-contextual-menu-remove-action',
                 text: props.strings.removeMessage,
-                itemProps: {
-                    styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
-                },
+                itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
                 iconProps: {
                     iconName: 'MessageRemove',
                     styles: menuIconStyleSet
                 },
                 onClick: props.onRemoveClick
-            }];
+            }
+        ];
         // only show read by x of x if more than 3 participants in total including myself
         // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide
-        if (props.remoteParticipantsCount && messageReadByCount !== undefined && props.remoteParticipantsCount >= 2 && props.showMessageStatus && props.strings.messageReadCount && props.messageStatus !== 'failed') {
+        if (props.remoteParticipantsCount &&
+            messageReadByCount !== undefined &&
+            props.remoteParticipantsCount >= 2 &&
+            props.showMessageStatus &&
+            props.strings.messageReadCount &&
+            props.messageStatus !== 'failed') {
             items.push({
                 key: 'Read Count',
                 'data-ui-id': 'chat-composite-message-contextual-menu-read-info',
@@ -151,9 +152,27 @@ export const ChatMessageActionFlyout = (props) => {
             });
         }
         return items;
-    }, [props.strings.editMessage, props.strings.removeMessage, props.strings.messageReadCount, props.strings.resendMessage, props.messageStatus, props.increaseFlyoutItemSize, props.onEditClick, props.onRemoveClick, props.onResendClick, props.remoteParticipantsCount, props.showMessageStatus, messageReadByCount, theme.palette.neutralPrimary, theme.palette.neutralTertiary, theme.palette.neutralLighter, theme.palette.themeDarkAlt, messageReadByList]);
+    }, [
+        props.strings.editMessage,
+        props.strings.removeMessage,
+        props.strings.messageReadCount,
+        props.strings.resendMessage,
+        props.messageStatus,
+        props.increaseFlyoutItemSize,
+        props.onEditClick,
+        props.onRemoveClick,
+        props.onResendClick,
+        props.remoteParticipantsCount,
+        props.showMessageStatus,
+        messageReadByCount,
+        theme.palette.neutralPrimary,
+        theme.palette.neutralTertiary,
+        theme.palette.neutralLighter,
+        theme.palette.themeDarkAlt,
+        messageReadByList
+    ]);
     // gap space uses pixels
-    return React.createElement(ContextualMenu, { alignTargetEdge: true, gapSpace: 2 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: calloutMenuProps });
+    return (React.createElement(ContextualMenu, { alignTargetEdge: true, gapSpace: 2 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: calloutMenuProps }));
 };
 /**
  * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.
@@ -163,9 +182,5 @@ const preventUnwantedDismissProps = {
         return ev.type === 'resize';
     }
 };
-const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: {
-        root: {
-            marginRight: '3px'
-        }
-    } });
+const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: { root: { marginRight: '3px' } } });
 //# sourceMappingURL=ChatMessageActionsFlyout.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageActionsFlyout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, ContextualMenu, DirectionalHint, IContextualMenuItem, IPersona, Persona, PersonaSize, Target, useTheme } from '@fluentui/react';\nimport { _pxToRem, _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageMenuStyle, menuIconStyleSet, menuItemIncreasedSizeStyles, menuSubIconStyleSet } from '../styles/ChatMessageComponent.styles';\n\n/** @private */\nexport interface ChatMessageActionFlyoutProps {\n  target?: Target;\n  hidden: boolean;\n  strings: MessageThreadStrings;\n  onEditClick?: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  onDismiss: () => void;\n  messageReadBy?: {\n    id: string;\n    displayName: string;\n  }[];\n  remoteParticipantsCount?: number;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Increase the height of the flyout items.\n   * Recommended when interacting with the chat message using touch.\n   */\n  increaseFlyoutItemSize: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * Chat message actions flyout that contains actions such as Edit Message, or Remove Message.\n *\n * @private\n */\nexport const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JSX.Element => {\n  const theme = useTheme();\n  const messageReadByCount = props.messageReadBy?.length;\n  const sortedMessageReadyByList = [...(props.messageReadBy ?? [])].sort((a, b) => a.displayName.localeCompare(b.displayName));\n  const messageReadByList: IContextualMenuItem[] | undefined = sortedMessageReadyByList?.map(person => {\n    const personaOptions: IPersona = {\n      hidePersonaDetails: true,\n      size: PersonaSize.size24,\n      text: person.displayName,\n      showOverflowTooltip: false,\n      styles: {\n        root: {\n          margin: '0.25rem'\n        }\n      }\n    };\n    const {\n      onRenderAvatar\n    } = props;\n    return {\n      'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',\n      key: person.displayName,\n      text: person.displayName,\n      itemProps: {\n        styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n      },\n      onRenderIcon: () => {\n        if (onRenderAvatar) {\n          const rendered = onRenderAvatar(person.id ?? '', personaOptions);\n          if (rendered) {\n            return rendered;\n          }\n        }\n        return <Persona {...personaOptions} />;\n      },\n      iconProps: {\n        styles: menuIconStyleSet\n      }\n    };\n  });\n  const menuItems = useMemo((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [{\n      key: 'Edit',\n      'data-testid': 'chat-composite-message-contextual-menu-edit-action',\n      text: props.strings.editMessage,\n      itemProps: {\n        styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n      },\n      iconProps: {\n        iconName: 'MessageEdit',\n        styles: menuIconStyleSet\n      },\n      onClick: props.onEditClick\n    }, {\n      key: 'Remove',\n      'data-testid': 'chat-composite-message-contextual-menu-remove-action',\n      text: props.strings.removeMessage,\n      itemProps: {\n        styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n      },\n      iconProps: {\n        iconName: 'MessageRemove',\n        styles: menuIconStyleSet\n      },\n      onClick: props.onRemoveClick\n    }];\n    // only show read by x of x if more than 3 participants in total including myself\n    // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide\n    if (props.remoteParticipantsCount && messageReadByCount !== undefined && props.remoteParticipantsCount >= 2 && props.showMessageStatus && props.strings.messageReadCount && props.messageStatus !== 'failed') {\n      items.push({\n        key: 'Read Count',\n        'data-ui-id': 'chat-composite-message-contextual-menu-read-info',\n        text: _formatString(props.strings.messageReadCount, {\n          messageReadByCount: `${messageReadByCount}`,\n          remoteParticipantsCount: `${props.remoteParticipantsCount}`\n        }),\n        itemProps: {\n          styles: concatStyleSets({\n            linkContent: {\n              color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary\n            },\n            root: {\n              borderTop: `1px solid ${theme.palette.neutralLighter}`\n            }\n          }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)\n        },\n        calloutProps: preventUnwantedDismissProps,\n        subMenuProps: {\n          items: messageReadByList ?? [],\n          calloutProps: preventUnwantedDismissProps,\n          styles: concatStyleSets({\n            root: {\n              maxWidth: _pxToRem(320),\n              span: {\n                overflow: 'hidden',\n                textOverflow: 'ellipsis'\n              }\n            }\n          })\n        },\n        iconProps: {\n          iconName: 'MessageSeen',\n          styles: {\n            root: {\n              color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary\n            }\n          }\n        },\n        submenuIconProps: {\n          iconName: 'HorizontalGalleryRightButton',\n          styles: menuSubIconStyleSet\n        },\n        disabled: messageReadByCount <= 0\n      });\n    } else if (props.messageStatus === 'failed' && props.strings.resendMessage) {\n      items.push({\n        key: 'Resend',\n        text: props.strings.resendMessage,\n        itemProps: {\n          styles: concatStyleSets({\n            linkContent: {\n              color: theme.palette.neutralPrimary\n            },\n            root: {\n              borderTop: `1px solid ${theme.palette.neutralLighter}`\n            }\n          }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)\n        },\n        calloutProps: preventUnwantedDismissProps,\n        iconProps: {\n          iconName: 'MessageResend',\n          styles: {\n            root: {\n              color: theme.palette.themeDarkAlt\n            }\n          }\n        },\n        onClick: props.onResendClick\n      });\n    }\n    return items;\n  }, [props.strings.editMessage, props.strings.removeMessage, props.strings.messageReadCount, props.strings.resendMessage, props.messageStatus, props.increaseFlyoutItemSize, props.onEditClick, props.onRemoveClick, props.onResendClick, props.remoteParticipantsCount, props.showMessageStatus, messageReadByCount, theme.palette.neutralPrimary, theme.palette.neutralTertiary, theme.palette.neutralLighter, theme.palette.themeDarkAlt, messageReadByList]);\n\n  // gap space uses pixels\n  return <ContextualMenu alignTargetEdge={true} gapSpace={2 /*px*/} isBeakVisible={false} items={menuItems} hidden={props.hidden} target={props.target} onDismiss={props.onDismiss} directionalHint={DirectionalHint.topRightEdge} className={chatMessageMenuStyle} calloutProps={calloutMenuProps} />;\n};\n\n/**\n * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.\n */\nconst preventUnwantedDismissProps = {\n  preventDismissOnEvent: (ev: Event | React.FocusEvent | React.KeyboardEvent | React.MouseEvent): boolean => {\n    return ev.type === 'resize';\n  }\n};\nconst calloutMenuProps = {\n  ...preventUnwantedDismissProps,\n  styles: {\n    root: {\n      marginRight: '3px'\n    }\n  }\n};"]}
+{"version":3,"file":"ChatMessageActionsFlyout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageActionsFlyout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  concatStyleSets,\n  ContextualMenu,\n  DirectionalHint,\n  IContextualMenuItem,\n  IPersona,\n  Persona,\n  PersonaSize,\n  Target,\n  useTheme\n} from '@fluentui/react';\nimport { _pxToRem, _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { MessageThreadStrings } from '../MessageThread';\nimport {\n  chatMessageMenuStyle,\n  menuIconStyleSet,\n  menuItemIncreasedSizeStyles,\n  menuSubIconStyleSet\n} from '../styles/ChatMessageComponent.styles';\n\n/** @private */\nexport interface ChatMessageActionFlyoutProps {\n  target?: Target;\n  hidden: boolean;\n  strings: MessageThreadStrings;\n  onEditClick?: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  onDismiss: () => void;\n  messageReadBy?: { id: string; displayName: string }[];\n  remoteParticipantsCount?: number;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Increase the height of the flyout items.\n   * Recommended when interacting with the chat message using touch.\n   */\n  increaseFlyoutItemSize: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * Chat message actions flyout that contains actions such as Edit Message, or Remove Message.\n *\n * @private\n */\nexport const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JSX.Element => {\n  const theme = useTheme();\n  const messageReadByCount = props.messageReadBy?.length;\n\n  const sortedMessageReadyByList = [...(props.messageReadBy ?? [])].sort((a, b) =>\n    a.displayName.localeCompare(b.displayName)\n  );\n\n  const messageReadByList: IContextualMenuItem[] | undefined = sortedMessageReadyByList?.map((person) => {\n    const personaOptions: IPersona = {\n      hidePersonaDetails: true,\n      size: PersonaSize.size24,\n      text: person.displayName,\n      showOverflowTooltip: false,\n      styles: {\n        root: {\n          margin: '0.25rem'\n        }\n      }\n    };\n    const { onRenderAvatar } = props;\n    return {\n      'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',\n      key: person.displayName,\n      text: person.displayName,\n      itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n      onRenderIcon: () => {\n        if (onRenderAvatar) {\n          const rendered = onRenderAvatar(person.id ?? '', personaOptions);\n          if (rendered) {\n            return rendered;\n          }\n        }\n        return <Persona {...personaOptions} />;\n      },\n      iconProps: {\n        styles: menuIconStyleSet\n      }\n    };\n  });\n\n  const menuItems = useMemo((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [\n      {\n        key: 'Edit',\n        'data-testid': 'chat-composite-message-contextual-menu-edit-action',\n        text: props.strings.editMessage,\n        itemProps: {\n          styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n        },\n        iconProps: { iconName: 'MessageEdit', styles: menuIconStyleSet },\n        onClick: props.onEditClick\n      },\n      {\n        key: 'Remove',\n        'data-testid': 'chat-composite-message-contextual-menu-remove-action',\n        text: props.strings.removeMessage,\n        itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n        iconProps: {\n          iconName: 'MessageRemove',\n          styles: menuIconStyleSet\n        },\n        onClick: props.onRemoveClick\n      }\n    ];\n    // only show read by x of x if more than 3 participants in total including myself\n    // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide\n    if (\n      props.remoteParticipantsCount &&\n      messageReadByCount !== undefined &&\n      props.remoteParticipantsCount >= 2 &&\n      props.showMessageStatus &&\n      props.strings.messageReadCount &&\n      props.messageStatus !== 'failed'\n    ) {\n      items.push({\n        key: 'Read Count',\n        'data-ui-id': 'chat-composite-message-contextual-menu-read-info',\n        text: _formatString(props.strings.messageReadCount, {\n          messageReadByCount: `${messageReadByCount}`,\n          remoteParticipantsCount: `${props.remoteParticipantsCount}`\n        }),\n        itemProps: {\n          styles: concatStyleSets(\n            {\n              linkContent: {\n                color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary\n              },\n              root: {\n                borderTop: `1px solid ${theme.palette.neutralLighter}`\n              }\n            },\n            props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n          )\n        },\n        calloutProps: preventUnwantedDismissProps,\n        subMenuProps: {\n          items: messageReadByList ?? [],\n          calloutProps: preventUnwantedDismissProps,\n          styles: concatStyleSets({\n            root: {\n              maxWidth: _pxToRem(320),\n              span: {\n                overflow: 'hidden',\n                textOverflow: 'ellipsis'\n              }\n            }\n          })\n        },\n        iconProps: {\n          iconName: 'MessageSeen',\n          styles: {\n            root: {\n              color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary\n            }\n          }\n        },\n        submenuIconProps: {\n          iconName: 'HorizontalGalleryRightButton',\n          styles: menuSubIconStyleSet\n        },\n        disabled: messageReadByCount <= 0\n      });\n    } else if (props.messageStatus === 'failed' && props.strings.resendMessage) {\n      items.push({\n        key: 'Resend',\n        text: props.strings.resendMessage,\n        itemProps: {\n          styles: concatStyleSets(\n            {\n              linkContent: {\n                color: theme.palette.neutralPrimary\n              },\n              root: {\n                borderTop: `1px solid ${theme.palette.neutralLighter}`\n              }\n            },\n            props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n          )\n        },\n        calloutProps: preventUnwantedDismissProps,\n        iconProps: {\n          iconName: 'MessageResend',\n          styles: {\n            root: {\n              color: theme.palette.themeDarkAlt\n            }\n          }\n        },\n        onClick: props.onResendClick\n      });\n    }\n\n    return items;\n  }, [\n    props.strings.editMessage,\n    props.strings.removeMessage,\n    props.strings.messageReadCount,\n    props.strings.resendMessage,\n    props.messageStatus,\n    props.increaseFlyoutItemSize,\n    props.onEditClick,\n    props.onRemoveClick,\n    props.onResendClick,\n    props.remoteParticipantsCount,\n    props.showMessageStatus,\n    messageReadByCount,\n    theme.palette.neutralPrimary,\n    theme.palette.neutralTertiary,\n    theme.palette.neutralLighter,\n    theme.palette.themeDarkAlt,\n    messageReadByList\n  ]);\n\n  // gap space uses pixels\n  return (\n    <ContextualMenu\n      alignTargetEdge={true}\n      gapSpace={2 /*px*/}\n      isBeakVisible={false}\n      items={menuItems}\n      hidden={props.hidden}\n      target={props.target}\n      onDismiss={props.onDismiss}\n      directionalHint={DirectionalHint.topRightEdge}\n      className={chatMessageMenuStyle}\n      calloutProps={calloutMenuProps}\n    />\n  );\n};\n\n/**\n * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.\n */\nconst preventUnwantedDismissProps = {\n  preventDismissOnEvent: (ev: Event | React.FocusEvent | React.KeyboardEvent | React.MouseEvent): boolean => {\n    return ev.type === 'resize';\n  }\n};\n\nconst calloutMenuProps = {\n  ...preventUnwantedDismissProps,\n  styles: { root: { marginRight: '3px' } }\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentWrapper.d.ts

@@ -2,8 +2,11 @@
 import { MessageStatus } from "../../../../acs-ui-common/src";
 import { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';
 import { ChatMessage, OnRenderAvatarCallback } from '../../types';
+import { BlockedMessage } from '../../types';
 import { AttachmentMenuAction } from '../../types/Attachment';
 import { AttachmentMetadata } from "../../../../acs-ui-common/src";
+import { AttachmentMetadataInProgress } from "../../../../acs-ui-common/src";
+import { MentionOptions } from '../MentionPopover';
 import { MessageStatusIndicatorProps } from '../MessageStatusIndicator';
 import { InlineImageOptions } from './ChatMessageContent';
 /**
@@ -19,7 +22,7 @@ export type ChatMessageComponentWrapperProps = _ChatMessageProps & {
     styles: MessageThreadStyles | undefined;
     shouldOverlapAvatarAndMessage: boolean;
     onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined;
-    defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element;
+    defaultStatusRenderer: (message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element;
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
     onRenderAvatar?: OnRenderAvatarCallback;
     showMessageStatus?: boolean;
@@ -29,12 +32,21 @@ export type ChatMessageComponentWrapperProps = _ChatMessageProps & {
         id: string;
         displayName: string;
     }[]) => void) => void;
+    onDisplayDateTimeString?: (messageDate: Date) => string;
     inlineImageOptions?: InlineImageOptions;
+    mentionOptions?: MentionOptions;
     onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to define custom actions for attachments.
      */
     actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];
+    isRichTextEditorEnabled?: boolean;
+    onPaste?: (event: {
+        content: DocumentFragment;
+    }) => void;
+    onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
+    onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
+    inlineImagesWithProgress?: AttachmentMetadataInProgress[];
 };
 /**
  * The wrapper component to display different types of chat message.

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentWrapper.js

@@ -10,7 +10,7 @@ import { FluentChatMessageComponent } from './MessageComponents/FluentChatMessag
  * @private
  */
 export const ChatMessageComponentWrapper = (props) => {
-    var _a;
+    var _a, _b;
     const { message, styles, onRenderMessage, key: messageKey } = props;
     const systemMessageStyle = useMemo(() => {
         return {
@@ -18,31 +18,37 @@ export const ChatMessageComponentWrapper = (props) => {
         };
     }, []);
     const customMessageStyle = useMemo(() => {
-        return {
-            paddingTop: '1rem',
-            paddingBottom: '0.25rem'
-        };
+        return { paddingTop: '1rem', paddingBottom: '0.25rem' };
     }, []);
+    /* @conditional-compile-remove(data-loss-prevention) */
+    // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)
+    if (message.messageType === 'blocked') {
+        const myChatMessageStyle = message.status === 'failed'
+            ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+            : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+        const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
+        const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
+        return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
+    }
     switch (message.messageType) {
-        case 'chat':
-            {
-                const myChatMessageStyle = message.status === 'failed' ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
-                const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
-                const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-                return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
-            }
-        case 'system':
-            {
-                const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
-                const systemMessageComponent = onRenderMessage === undefined ? React.createElement(DefaultSystemMessage, Object.assign({}, props)) : onRenderMessage(Object.assign(Object.assign({}, props), { messageContainerStyle }), props => React.createElement(DefaultSystemMessage, Object.assign({}, props)));
-                return React.createElement("div", { key: messageKey, style: systemMessageStyle }, systemMessageComponent);
-            }
-        default:
-            {
-                // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
-                const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(Object.assign({}, props));
-                return React.createElement("div", { key: messageKey, style: customMessageStyle }, customMessageComponent);
-            }
+        case 'chat': {
+            const myChatMessageStyle = message.status === 'failed'
+                ? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+                : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+            const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
+            const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
+            return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
+        }
+        case 'system': {
+            const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
+            const systemMessageComponent = onRenderMessage === undefined ? (React.createElement(DefaultSystemMessage, Object.assign({}, props))) : (onRenderMessage(Object.assign(Object.assign({}, props), { messageContainerStyle }), (props) => React.createElement(DefaultSystemMessage, Object.assign({}, props))));
+            return (React.createElement("div", { key: messageKey, style: systemMessageStyle }, systemMessageComponent));
+        }
+        default: {
+            // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
+            const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(Object.assign({}, props));
+            return (React.createElement("div", { key: messageKey, style: customMessageStyle }, customMessageComponent));
+        }
     }
 };
 const fluentChatComponent = (props) => {

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentWrapper.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,oDAAoD,CAAC;AAClG,OAAO,EAAE,0BAA0B,EAAE,MAAM,gDAAgD,CAAC;AAiC5F;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;;IAClG,MAAM,EACJ,OAAO,EACP,MAAM,EACN,eAAe,EACf,GAAG,EAAE,UAAU,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,UAAU,EAAE,QAAQ;SACrB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,UAAU,EAAE,MAAM;YAClB,aAAa,EAAE,SAAS;SACzB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,QAAQ,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5B,KAAK,MAAM;YACT,CAAC;gBACC,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,4BAA4B,mCAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,sBAAsB,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,sBAAsB,CAAC;gBACjK,MAAM,gBAAgB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,CAAC;gBACtD,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBACnF,OAAO,mBAAmB,iCACrB,KAAK,KACR,OAAO,EAAE,OAAO,EAChB,qBAAqB,EAAE,qBAAqB,IAC5C,CAAC;YACL,CAAC;QACH,KAAK,QAAQ;YACX,CAAC;gBACC,MAAM,qBAAqB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,sBAAsB,CAAC;gBAC7D,MAAM,sBAAsB,GAAG,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAC,oBAAoB,oBAAK,KAAK,EAAI,CAAC,CAAC,CAAC,eAAe,iCAC/G,KAAK,KACR,qBAAqB,KACpB,KAAK,CAAC,EAAE,CAAC,oBAAC,oBAAoB,oBAAK,KAAK,EAAI,CAAC,CAAC;gBACjD,OAAO,6BAAK,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB,IACnD,sBAAsB,CACnB,CAAC;YACT,CAAC;QACH;YACE,CAAC;gBACC,mHAAmH;gBACnH,MAAM,sBAAsB,GAAG,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,yCAAK,CAAC,CAAC,CAAC,eAAe,mBACjF,KAAK,EACR,CAAC;gBACH,OAAO,6BAAK,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB,IACnD,sBAAsB,CACnB,CAAC;YACT,CAAC;IACL,CAAC;AACH,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,KAA6C,EAAe,EAAE;IACzF,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;QAChC,OAAO,oBAAC,4BAA4B,oBAAK,KAAK,EAAI,CAAC;IACrD,CAAC;SAAM,CAAC;QACN,OAAO,oBAAC,0BAA0B,oBAAK,KAAK,EAAI,CAAC;IACnD,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapperProps } from './MessageComponents/FluentChatMessageComponent';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\nimport { InlineImageOptions } from './ChatMessageContent';\nimport { FluentChatMyMessageComponent } from './MyMessageComponents/FluentChatMyMessageComponent';\nimport { FluentChatMessageComponent } from './MessageComponents/FluentChatMessageComponent';\n\n/**\n * Props for {@link ChatMessageComponentWrapper}\n *\n * @private\n */\nexport type ChatMessageComponentWrapperProps = _ChatMessageProps & {\n  /**\n   * UserId of the current user.\n   */\n  userId: string;\n  styles: MessageThreadStyles | undefined;\n  shouldOverlapAvatarAndMessage: boolean;\n  onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined;\n  defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element;\n  onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showMessageStatus?: boolean;\n  participantCount?: number;\n  readCount?: number;\n  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  inlineImageOptions?: InlineImageOptions;\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /**\n   * Optional callback to define custom actions for attachments.\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/**\n * The wrapper component to display different types of chat message.\n *\n * @private\n */\nexport const ChatMessageComponentWrapper = (props: ChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    onRenderMessage,\n    key: messageKey\n  } = props;\n  const systemMessageStyle = useMemo(() => {\n    return {\n      paddingTop: '0.5rem'\n    };\n  }, []);\n  const customMessageStyle = useMemo(() => {\n    return {\n      paddingTop: '1rem',\n      paddingBottom: '0.25rem'\n    };\n  }, []);\n  switch (message.messageType) {\n    case 'chat':\n      {\n        const myChatMessageStyle = message.status === 'failed' ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer : styles?.myChatMessageContainer;\n        const chatMessageStyle = styles?.chatMessageContainer;\n        const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;\n        return fluentChatComponent({\n          ...props,\n          message: message,\n          messageContainerStyle: messageContainerStyle\n        });\n      }\n    case 'system':\n      {\n        const messageContainerStyle = styles?.systemMessageContainer;\n        const systemMessageComponent = onRenderMessage === undefined ? <DefaultSystemMessage {...props} /> : onRenderMessage({\n          ...props,\n          messageContainerStyle\n        }, props => <DefaultSystemMessage {...props} />);\n        return <div key={messageKey} style={systemMessageStyle}>\n          {systemMessageComponent}\n        </div>;\n      }\n    default:\n      {\n        // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.\n        const customMessageComponent = onRenderMessage === undefined ? <></> : onRenderMessage({\n          ...props\n        });\n        return <div key={messageKey} style={customMessageStyle}>\n          {customMessageComponent}\n        </div>;\n      }\n  }\n};\nconst fluentChatComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  if (props.message.mine === true) {\n    return <FluentChatMyMessageComponent {...props} />;\n  } else {\n    return <FluentChatMessageComponent {...props} />;\n  }\n};"]}
+{"version":3,"file":"ChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../MentionPopover';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapperProps } from './MessageComponents/FluentChatMessageComponent';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\nimport { InlineImageOptions } from './ChatMessageContent';\nimport { FluentChatMyMessageComponent } from './MyMessageComponents/FluentChatMyMessageComponent';\nimport { FluentChatMessageComponent } from './MessageComponents/FluentChatMessageComponent';\n\n/**\n * Props for {@link ChatMessageComponentWrapper}\n *\n * @private\n */\nexport type ChatMessageComponentWrapperProps = _ChatMessageProps & {\n  /**\n   * UserId of the current user.\n   */\n  userId: string;\n  styles: MessageThreadStyles | undefined;\n  shouldOverlapAvatarAndMessage: boolean;\n  onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined;\n  defaultStatusRenderer: (\n    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n    participantCount: number,\n    readCount: number,\n    status?: MessageStatus\n  ) => JSX.Element;\n  onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showMessageStatus?: boolean;\n  participantCount?: number;\n  readCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (\n      readBy: {\n        id: string;\n        displayName: string;\n      }[]\n    ) => void\n  ) => void;\n  /* @conditional-compile-remove(date-time-customization) */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  inlineImageOptions?: InlineImageOptions;\n  /* @conditional-compile-remove(mention) */\n  mentionOptions?: MentionOptions;\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /**\n   * Optional callback to define custom actions for attachments.\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  /* @conditional-compile-remove(rich-text-editor) */\n  isRichTextEditorEnabled?: boolean;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/**\n * The wrapper component to display different types of chat message.\n *\n * @private\n */\nexport const ChatMessageComponentWrapper = (props: ChatMessageComponentWrapperProps): JSX.Element => {\n  const { message, styles, onRenderMessage, key: messageKey } = props;\n\n  const systemMessageStyle = useMemo(() => {\n    return {\n      paddingTop: '0.5rem'\n    };\n  }, []);\n\n  const customMessageStyle = useMemo(() => {\n    return { paddingTop: '1rem', paddingBottom: '0.25rem' };\n  }, []);\n\n  /* @conditional-compile-remove(data-loss-prevention) */\n  // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)\n  if (message.messageType === 'blocked') {\n    const myChatMessageStyle =\n      message.status === 'failed'\n        ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n        : styles?.myChatMessageContainer;\n    const blockedMessageStyle = styles?.blockedMessageContainer;\n    const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;\n    return fluentChatComponent({ ...props, message: message, messageContainerStyle: messageContainerStyle });\n  }\n\n  switch (message.messageType) {\n    case 'chat': {\n      const myChatMessageStyle =\n        message.status === 'failed'\n          ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n          : styles?.myChatMessageContainer;\n      const chatMessageStyle = styles?.chatMessageContainer;\n      const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;\n      return fluentChatComponent({ ...props, message: message, messageContainerStyle: messageContainerStyle });\n    }\n\n    case 'system': {\n      const messageContainerStyle = styles?.systemMessageContainer;\n      const systemMessageComponent =\n        onRenderMessage === undefined ? (\n          <DefaultSystemMessage {...props} />\n        ) : (\n          onRenderMessage({ ...props, messageContainerStyle }, (props) => <DefaultSystemMessage {...props} />)\n        );\n      return (\n        <div key={messageKey} style={systemMessageStyle}>\n          {systemMessageComponent}\n        </div>\n      );\n    }\n\n    default: {\n      // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.\n      const customMessageComponent = onRenderMessage === undefined ? <></> : onRenderMessage({ ...props });\n      return (\n        <div key={messageKey} style={customMessageStyle}>\n          {customMessageComponent}\n        </div>\n      );\n    }\n  }\n};\n\nconst fluentChatComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  if (props.message.mine === true) {\n    return <FluentChatMyMessageComponent {...props} />;\n  } else {\n    return <FluentChatMessageComponent {...props} />;\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.d.ts

@@ -1,12 +1,19 @@
 import React from 'react';
 import { AttachmentMetadata } from "../../../../acs-ui-common/src";
 import { ChatMessage } from '../../types/ChatMessage';
+import { BlockedMessage } from '../../types/ChatMessage';
+import { MentionDisplayOptions } from '../MentionPopover';
 import { MessageThreadStrings } from '../MessageThread';
 type ChatMessageContentProps = {
     message: ChatMessage;
     strings: MessageThreadStrings;
+    mentionDisplayOptions?: MentionDisplayOptions;
     inlineImageOptions?: InlineImageOptions;
 };
+type BlockedMessageContentProps = {
+    message: BlockedMessage;
+    strings: MessageThreadStrings;
+};
 /**
  * InlineImage's state, as reflected in the UI.
  *
@@ -31,6 +38,10 @@ export interface InlineImageOptions {
 }
 /** @private */
 export declare const ChatMessageContent: (props: ChatMessageContentProps) => JSX.Element;
+/**
+ * @private
+ */
+export declare const BlockedMessageContent: (props: BlockedMessageContentProps) => JSX.Element;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js

@@ -6,8 +6,14 @@ import parse, { Element as DOMElement } from 'html-react-parser';
 import { attributesToProps } from 'html-react-parser';
 import Linkify from 'react-linkify';
 import { Link } from '@fluentui/react';
+/* @conditional-compile-remove(data-loss-prevention) */
+import { FontIcon, Stack } from '@fluentui/react';
 import LiveMessage from '../Announcer/LiveMessage';
+/* @conditional-compile-remove(mention) */
+import { defaultOnMentionRender } from './MentionRenderer';
 import DOMPurify from 'dompurify';
+/* @conditional-compile-remove(data-loss-prevention) */
+import { dataLossIconStyle } from '../styles/MessageThread.styles';
 import { messageTextContentStyles } from '../styles/MessageThread.styles';
 /** @private */
 export const ChatMessageContent = (props) => {
@@ -24,17 +30,36 @@ export const ChatMessageContent = (props) => {
     }
 };
 const MessageContentWithLiveAria = (props) => {
-    return React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel, className: props.className },
+    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel, className: props.className },
         React.createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
-        props.content);
+        props.content));
 };
 const MessageContentAsRichTextHTML = (props) => {
-    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) });
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
 const MessageContentAsText = (props) => {
-    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), className: messageTextContentStyles, content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
-                return React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText);
-            } }, props.message.content) });
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), className: messageTextContentStyles, content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
+                return (React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
+            } }, props.message.content) }));
+};
+/* @conditional-compile-remove(data-loss-prevention) */
+/**
+ * @private
+ */
+export const BlockedMessageContent = (props) => {
+    var _a;
+    const Icon = React.createElement(FontIcon, { className: dataLossIconStyle, iconName: 'DataLossPreventionProhibited' });
+    const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
+    const blockedMessageLink = props.message.link;
+    const blockedMessageLinkText = blockedMessageLink
+        ? (_a = props.message.linkText) !== null && _a !== void 0 ? _a : props.strings.blockedWarningLinkText
+        : '';
+    const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;
+    const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: liveBlockedWarningText, ariaLabel: liveBlockedWarningText, content: React.createElement(Stack, { horizontal: true, wrap: true },
+            Icon,
+            blockedMessage && React.createElement("p", null, blockedMessage),
+            blockedMessageLink && (React.createElement(Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText))) }));
 };
 const extractContentForAllyMessage = (props) => {
     var _a;
@@ -44,7 +69,7 @@ const extractContentForAllyMessage = (props) => {
             ALLOWED_TAGS: ['img'],
             RETURN_DOM_FRAGMENT: true
         });
-        parsedContent.childNodes.forEach(child => {
+        parsedContent.childNodes.forEach((child) => {
             if (child.nodeName.toLowerCase() !== 'img') {
                 return;
             }
@@ -61,9 +86,7 @@ const extractContentForAllyMessage = (props) => {
             parsedContent.appendChild(attachmentTextNode);
         }
         // Strip all html tags from the content for aria.
-        let message = DOMPurify.sanitize(parsedContent, {
-            ALLOWED_TAGS: []
-        });
+        let message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
         // decode HTML entities so that screen reader can read the content properly.
         message = decodeEntities(message);
         return message;
@@ -71,22 +94,22 @@ const extractContentForAllyMessage = (props) => {
     return '';
 };
 const generateLiveMessage = (props) => {
-    const liveAuthor = _formatString(props.strings.liveAuthorIntro, {
-        author: `${props.message.senderDisplayName}`
-    });
+    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
     return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContentForAllyMessage(props)} `;
 };
 const messageContentAriaText = (props) => {
     var _a, _b;
     const message = extractContentForAllyMessage(props);
-    return props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {
-        status: (_a = props.message.status) !== null && _a !== void 0 ? _a : '',
-        message: message
-    }) : _formatString(props.strings.messageContentAriaText, {
-        status: (_b = props.message.status) !== null && _b !== void 0 ? _b : '',
-        author: `${props.message.senderDisplayName}`,
-        message: message
-    });
+    return props.message.mine
+        ? _formatString(props.strings.messageContentMineAriaText, {
+            status: (_a = props.message.status) !== null && _a !== void 0 ? _a : '',
+            message: message
+        })
+        : _formatString(props.strings.messageContentAriaText, {
+            status: (_b = props.message.status) !== null && _b !== void 0 ? _b : '',
+            author: `${props.message.senderDisplayName}`,
+            message: message
+        });
 };
 const attachmentCardGroupDescription = (props) => {
     const attachments = props.message.attachments;
@@ -105,26 +128,37 @@ export const getAttachmentCountLiveMessage = (attachments, attachmentCardGroupMe
     return '';
 };
 const defaultOnRenderInlineImage = (inlineImage) => {
-    return React.createElement("img", Object.assign({ key: inlineImage.imageAttributes.id, tabIndex: 0, "data-ui-id": inlineImage.imageAttributes.id }, inlineImage.imageAttributes));
+    return (React.createElement("img", Object.assign({ key: inlineImage.imageAttributes.id, tabIndex: 0, "data-ui-id": inlineImage.imageAttributes.id }, inlineImage.imageAttributes)));
 };
 const processHtmlToReact = (props) => {
     var _a;
     const options = {
         transform(reactNode, domNode) {
-            var _a;
+            var _a, _b, _c;
             if (domNode instanceof DOMElement && domNode.attribs) {
                 // Transform custom rendering of mentions
+                /* @conditional-compile-remove(mention) */
+                if (domNode.name === 'msft-mention' && domNode.attribs.id) {
+                    const { id } = domNode.attribs;
+                    const mention = {
+                        id: id,
+                        displayText: (_a = domNode.children[0].nodeValue) !== null && _a !== void 0 ? _a : ''
+                    };
+                    if ((_b = props.mentionDisplayOptions) === null || _b === void 0 ? void 0 : _b.onRenderMention) {
+                        return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
+                    }
+                    return defaultOnMentionRender(mention);
+                }
                 // Transform inline images
                 if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
                     if (domNode.attribs.name) {
                         domNode.attribs['aria-label'] = domNode.attribs.name;
                     }
                     const imgProps = attributesToProps(domNode.attribs);
-                    const inlineImageProps = {
-                        messageId: props.message.messageId,
-                        imageAttributes: imgProps
-                    };
-                    return ((_a = props.inlineImageOptions) === null || _a === void 0 ? void 0 : _a.onRenderInlineImage) ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);
+                    const inlineImageProps = { messageId: props.message.messageId, imageAttributes: imgProps };
+                    return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
+                        ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
+                        : defaultOnRenderInlineImage(inlineImageProps);
                 }
                 // Transform links to open in new tab
                 if (domNode.name === 'a' && React.isValidElement(reactNode)) {
@@ -151,7 +185,7 @@ const decodeEntities = (encodedString) => {
         lt: '<',
         gt: '>'
     };
-    return encodedString
+    return (encodedString
         // Find all matches of HTML entities defined in translate_re and
         // replace them with the corresponding character from the translate object.
         .replace(translate_re, function (match, entity) {
@@ -164,6 +198,6 @@ const decodeEntities = (encodedString) => {
         .replace(/&#(\d+);/gi, function (match, numStr) {
         const num = parseInt(numStr, 10);
         return String.fromCharCode(num);
-    });
+    }));
 };
 //# sourceMappingURL=ChatMessageContent.js.map