@azure/communication-react 1.12.0 → 1.12.1-alpha-202401190013

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

@@ -2,6 +2,10 @@
 import { MessageStatus } from "../../../../acs-ui-common/src";
 import { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';
 import { ChatMessage, OnRenderAvatarCallback } from '../../types';
+import { BlockedMessage } from '../../types';
+import { FileDownloadHandler } from '../FileDownloadCards';
+import { AttachmentMetadata } from '../FileDownloadCards';
+import { MentionOptions } from '../MentionPopover';
 import { MessageStatusIndicatorProps } from '../MessageStatusIndicator';
 /**
  * Props for {@link ChatMessageComponentWrapper}
@@ -16,16 +20,23 @@ 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;
     participantCount?: number;
     readCount?: number;
+    onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
     onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {
         id: string;
         displayName: string;
     }[]) => void) => void;
+    fileDownloadHandler?: FileDownloadHandler;
+    onDisplayDateTimeString?: (messageDate: Date) => string;
+    onFetchInlineAttachment: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;
+    onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
+    inlineAttachments: Record<string, Record<string, string>>;
+    mentionOptions?: MentionOptions;
 };
 /**
  * The wrapper component to display different types of chat message.

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

@@ -9,7 +9,7 @@ import { DefaultSystemMessage } from './DefaultSystemMessage';
  * @private
  */
 export const ChatMessageComponentWrapper = (props) => {
-    var _a;
+    var _a, _b;
     const { message, styles, onRenderMessage, key: messageKey } = props;
     const systemMessageStyle = useMemo(() => {
         return {
@@ -17,31 +17,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 (React.createElement(FluentChatMessageComponentWrapper, 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 React.createElement(FluentChatMessageComponentWrapper, 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 (React.createElement(FluentChatMessageComponentWrapper, 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));
+        }
     }
 };
 //# sourceMappingURL=ChatMessageComponentWrapper.js.map

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;AAIvC,OAAO,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AA2B9D;;;;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,oBAAC,iCAAiC,oBAAK,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,IAAI,CAAC;YAC1H,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","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 { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapper } from './FluentChatMessageComponentWrapper';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\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};\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 <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />;\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};"]}
+{"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';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadHandler } from '../FileDownloadCards';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { AttachmentMetadata } from '../FileDownloadCards';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../MentionPopover';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapper } from './FluentChatMessageComponentWrapper';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\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  /* @conditional-compile-remove(file-sharing) */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (\n      readBy: {\n        id: string;\n        displayName: string;\n      }[]\n    ) => void\n  ) => void;\n  /* @conditional-compile-remove(file-sharing) */\n  fileDownloadHandler?: FileDownloadHandler;\n  /* @conditional-compile-remove(date-time-customization) */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  onFetchInlineAttachment: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;\n  /* @conditional-compile-remove(image-gallery) */\n  onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  inlineAttachments: Record<string, Record<string, string>>;\n  /* @conditional-compile-remove(mention) */\n  mentionOptions?: MentionOptions;\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 (\n      <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n    );\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 (\n        <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n      );\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"]}

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

@@ -1,11 +1,26 @@
 /// <reference types="react" />
 import { ChatMessage } from '../../types/ChatMessage';
+import { BlockedMessage } from '../../types/ChatMessage';
+import { MentionDisplayOptions } from '../MentionPopover';
 import { MessageThreadStrings } from '../MessageThread';
+import { AttachmentMetadata } from '../FileDownloadCards';
 type ChatMessageContentProps = {
     message: ChatMessage;
     strings: MessageThreadStrings;
+    mentionDisplayOptions?: MentionDisplayOptions;
+    attachmentsMap?: Record<string, string>;
+    onFetchAttachments?: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;
+    onInlineImageClicked?: (attachmentId: string) => void;
+};
+type BlockedMessageContentProps = {
+    message: BlockedMessage;
+    strings: MessageThreadStrings;
 };
 /** @private */
 export declare const ChatMessageContent: (props: ChatMessageContentProps) => JSX.Element;
+/**
+ * @private
+ */
+export declare const BlockedMessageContent: (props: BlockedMessageContentProps) => JSX.Element;
 export {};
 //# sourceMappingURL=ChatMessageContent.d.ts.map

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

@@ -1,11 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React from 'react';
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+import { useEffect } from 'react';
 import { _formatString } from "../../../../acs-ui-common/src";
 import parse, { Element as DOMElement } from 'html-react-parser';
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+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';
 /** @private */
 export const ChatMessageContent = (props) => {
@@ -22,18 +30,57 @@ export const ChatMessageContent = (props) => {
     }
 };
 const MessageContentWithLiveAria = (props) => {
-    return React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
+    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
         React.createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
-        props.content);
+        props.content));
 };
 const MessageContentAsRichTextHTML = (props) => {
-    const {} = props;
-    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) });
+    const { 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    // message is used only in useEffect that is under teams-inline-images-and-file-sharing cc
+    message, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    attachmentsMap, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    onFetchAttachments } = props;
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    useEffect(() => {
+        var _a;
+        if (!attachmentsMap || !onFetchAttachments) {
+            return;
+        }
+        const attachments = (_a = message.inlineImages) === null || _a === void 0 ? void 0 : _a.filter((inlinedImages) => {
+            return attachmentsMap[inlinedImages.id] === undefined;
+        });
+        if (attachments && attachments.length > 0) {
+            onFetchAttachments(attachments, message.messageId);
+        }
+    }, [message.inlineImages, message.messageId, onFetchAttachments, attachmentsMap]);
+    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), 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), 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, { 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))) }));
 };
 // https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
 const extractContent = (s) => {
@@ -42,29 +89,69 @@ const extractContent = (s) => {
     return span.textContent || span.innerText;
 };
 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} ${extractContent(props.message.content || '')} `;
 };
 const messageContentAriaText = (props) => {
     // Strip all html tags from the content for aria.
-    return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {
-        message: DOMPurify.sanitize(props.message.content, {
-            ALLOWED_TAGS: []
-        })
-    }) : _formatString(props.strings.messageContentAriaText, {
-        author: `${props.message.senderDisplayName}`,
-        message: DOMPurify.sanitize(props.message.content, {
-            ALLOWED_TAGS: []
-        })
-    }) : undefined;
+    return props.message.content
+        ? props.message.mine
+            ? _formatString(props.strings.messageContentMineAriaText, {
+                message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })
+            })
+            : _formatString(props.strings.messageContentAriaText, {
+                author: `${props.message.senderDisplayName}`,
+                message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })
+            })
+        : undefined;
 };
 const processHtmlToReact = (props) => {
     var _a;
     const options = {
         transform(reactNode, domNode) {
-            if (domNode instanceof DOMElement && domNode.attribs) { }
+            var _a, _b, _c;
+            if (domNode instanceof DOMElement && domNode.attribs) {
+                // Transform custom rendering of mentions
+                /* @conditional-compile-remove(mention) */
+                if (((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) && domNode.name === 'msft-mention') {
+                    const { id } = domNode.attribs;
+                    const mention = {
+                        id: id,
+                        displayText: (_b = domNode.children[0].nodeValue) !== null && _b !== void 0 ? _b : ''
+                    };
+                    return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
+                }
+                // Transform inline images
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                if (domNode.name &&
+                    domNode.name === 'img' &&
+                    domNode.attribs &&
+                    domNode.attribs.id &&
+                    ((_c = props.message.inlineImages) === null || _c === void 0 ? void 0 : _c.find((metadata) => {
+                        return metadata.id === domNode.attribs.id;
+                    }))) {
+                    domNode.attribs['aria-label'] = domNode.attribs.name;
+                    // logic to check id in map/list
+                    if (props.attachmentsMap && domNode.attribs.id in props.attachmentsMap) {
+                        domNode.attribs.src = props.attachmentsMap[domNode.attribs.id];
+                    }
+                    /* @conditional-compile-remove(image-gallery) */
+                    const handleOnClick = () => {
+                        props.onInlineImageClicked && props.onInlineImageClicked(domNode.attribs.id);
+                    };
+                    const imgProps = attributesToProps(domNode.attribs);
+                    /* @conditional-compile-remove(image-gallery) */
+                    return (React.createElement("span", { "data-ui-id": domNode.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
+                            cursor: 'pointer'
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                handleOnClick();
+                            }
+                        } },
+                        React.createElement("img", Object.assign({}, imgProps))));
+                    return React.createElement("img", Object.assign({}, imgProps));
+                }
+            }
             // Pass through the original node
             return reactNode;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>;\n};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const {} = props;\n  return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n    return <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>;\n  }}>\n          {props.message.content}\n        </Linkify>} />;\n};\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n    author: `${props.message.senderDisplayName}`\n  });\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n    message: DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: []\n    })\n  }) : _formatString(props.strings.messageContentAriaText, {\n    author: `${props.message.senderDisplayName}`,\n    message: DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: []\n    })\n  }) : undefined;\n};\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const options: HTMLReactParserOptions = {\n    transform(reactNode, domNode) {\n      if (domNode instanceof DOMElement && domNode.attribs) {}\n      // Pass through the original node\n      return ((reactNode as unknown) as JSX.Element);\n    }\n  };\n  return <>{parse(props.message.content ?? '', options)}</>;\n};"]}
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { AttachmentMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  onFetchAttachments?: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;\n  /* @conditional-compile-remove(image-gallery) */\n  onInlineImageClicked?: (attachmentId: string) => void;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    // message is used only in useEffect that is under teams-inline-images-and-file-sharing cc\n    message,\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    attachmentsMap,\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    onFetchAttachments\n  } = props;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  useEffect(() => {\n    if (!attachmentsMap || !onFetchAttachments) {\n      return;\n    }\n    const attachments = message.inlineImages?.filter((inlinedImages) => {\n      return attachmentsMap[inlinedImages.id] === undefined;\n    });\n    if (attachments && attachments.length > 0) {\n      onFetchAttachments(attachments, message.messageId);\n    }\n  }, [message.inlineImages, message.messageId, onFetchAttachments, attachmentsMap]);\n\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n    props.message.mine ? '' : liveAuthor\n  } ${extractContent(props.message.content || '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n    : undefined;\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const options: HTMLReactParserOptions = {\n    transform(reactNode, domNode) {\n      if (domNode instanceof DOMElement && domNode.attribs) {\n        // Transform custom rendering of mentions\n        /* @conditional-compile-remove(mention) */\n        if (props.mentionDisplayOptions?.onRenderMention && domNode.name === 'msft-mention') {\n          const { id } = domNode.attribs;\n          const mention: Mention = {\n            id: id,\n            displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n          };\n          return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n        }\n\n        // Transform inline images\n        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n        if (\n          domNode.name &&\n          domNode.name === 'img' &&\n          domNode.attribs &&\n          domNode.attribs.id &&\n          props.message.inlineImages?.find((metadata) => {\n            return metadata.id === domNode.attribs.id;\n          })\n        ) {\n          domNode.attribs['aria-label'] = domNode.attribs.name;\n          // logic to check id in map/list\n          if (props.attachmentsMap && domNode.attribs.id in props.attachmentsMap) {\n            domNode.attribs.src = props.attachmentsMap[domNode.attribs.id];\n          }\n          /* @conditional-compile-remove(image-gallery) */\n          const handleOnClick = (): void => {\n            props.onInlineImageClicked && props.onInlineImageClicked(domNode.attribs.id);\n          };\n          const imgProps = attributesToProps(domNode.attribs);\n          /* @conditional-compile-remove(image-gallery) */\n          return (\n            <span\n              data-ui-id={domNode.attribs.id}\n              onClick={handleOnClick}\n              tabIndex={0}\n              role=\"button\"\n              style={{\n                cursor: 'pointer'\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  handleOnClick();\n                }\n              }}\n            >\n              <img {...imgProps} />\n            </span>\n          );\n          return <img {...imgProps} />;\n        }\n      }\n      // Pass through the original node\n      return reactNode as unknown as JSX.Element;\n    }\n  };\n  return <>{parse(props.message.content ?? '', options)}</>;\n};\n"]}

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

@@ -13,10 +13,10 @@ export const DefaultSystemMessage = (props) => {
         case 'system':
             switch (message.systemMessageType) {
                 case 'content':
-                    return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle });
+                    return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
                 case 'participantAdded':
                 case 'participantRemoved':
-                    return React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub });
+                    return (React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
             }
     }
     return React.createElement(React.Fragment, null);
@@ -24,11 +24,15 @@ export const DefaultSystemMessage = (props) => {
 const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
     const { strings } = useLocale();
     const participantsStr = generateParticipantsStr(message.participants, defaultName);
-    const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;
+    const messageSuffix = message.systemMessageType === 'participantAdded'
+        ? strings.messageThread.participantJoined
+        : strings.messageThread.participantLeft;
     if (participantsStr !== '') {
-        return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style });
+        return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
     }
     return React.createElement(React.Fragment, null);
 };
-const generateParticipantsStr = (participants, defaultName) => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');
+const generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
+    .join(', ');
 //# sourceMappingURL=DefaultSystemMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultSystemMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/DefaultSystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAA0B,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAoB,CAAC,KAAmB,EAAE,EAAE;;IAC3E,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,QAAQ,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5B,KAAK,QAAQ;YACX,QAAQ,OAAO,CAAC,iBAAiB,EAAE,CAAC;gBAClC,KAAK,SAAS;oBACZ,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA4B,EAAE,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,EAAE,cAAc,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,qBAAqB,GAAI,CAAC;gBACpM,KAAK,kBAAkB,CAAC;gBACxB,KAAK,oBAAoB;oBACvB,OAAO,oBAAC,iCAAiC,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,qBAAqB,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,GAAI,CAAC;YACpJ,CAAC;IACL,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AACF,MAAM,iCAAiC,GAAG,CAAC,EACzC,OAAO,EACP,KAAK,EACL,WAAW,EAKZ,EAAe,EAAE;IAChB,MAAM,EACJ,OAAO,EACR,GAAG,SAAS,EAAE,CAAC;IAChB,MAAM,eAAe,GAAG,uBAAuB,CAAC,OAAO,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IACnF,MAAM,aAAa,GAAG,OAAO,CAAC,iBAAiB,KAAK,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC;IACzJ,IAAI,eAAe,KAAK,EAAE,EAAE,CAAC;QAC3B,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA4B,EAAE,OAAO,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAAE,cAAc,EAAE,KAAK,GAAI,CAAC;IAC7L,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AACF,MAAM,uBAAuB,GAAG,CAAC,YAAwC,EAAE,WAAmB,EAAU,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,IAAI,WAAW,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { MessageProps, MessageRenderer, _ChatMessageProps } from '../MessageThread';\nimport { CommunicationParticipant, ComponentSlotStyle, ParticipantAddedSystemMessage, ParticipantRemovedSystemMessage } from '../../types';\nimport { SystemMessage as SystemMessageComponent, SystemMessageIconTypes } from './../SystemMessage';\nimport { useLocale } from '../../localization/LocalizationProvider';\n\n/**\n * @private\n */\nexport const DefaultSystemMessage: MessageRenderer = (props: MessageProps) => {\n  const message = props.message;\n  switch (message.messageType) {\n    case 'system':\n      switch (message.systemMessageType) {\n        case 'content':\n          return <SystemMessageComponent iconName={((message.iconName ? message.iconName : '') as SystemMessageIconTypes)} content={message.content ?? ''} containerStyle={props?.messageContainerStyle} />;\n        case 'participantAdded':\n        case 'participantRemoved':\n          return <ParticipantSystemMessageComponent message={message} style={props.messageContainerStyle} defaultName={props.strings.noDisplayNameSub} />;\n      }\n  }\n  return <></>;\n};\nconst ParticipantSystemMessageComponent = ({\n  message,\n  style,\n  defaultName\n}: {\n  message: ParticipantAddedSystemMessage | ParticipantRemovedSystemMessage;\n  style?: ComponentSlotStyle;\n  defaultName: string;\n}): JSX.Element => {\n  const {\n    strings\n  } = useLocale();\n  const participantsStr = generateParticipantsStr(message.participants, defaultName);\n  const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;\n  if (participantsStr !== '') {\n    return <SystemMessageComponent iconName={((message.iconName ? message.iconName : '') as SystemMessageIconTypes)} content={`${participantsStr} ${messageSuffix}`} containerStyle={style} />;\n  }\n  return <></>;\n};\nconst generateParticipantsStr = (participants: CommunicationParticipant[], defaultName: string): string => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');"]}
+{"version":3,"file":"DefaultSystemMessage.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/DefaultSystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAA0B,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAoB,CAAC,KAAmB,EAAE,EAAE;;IAC3E,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,QAAQ,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5B,KAAK,QAAQ;YACX,QAAQ,OAAO,CAAC,iBAAiB,EAAE,CAAC;gBAClC,KAAK,SAAS;oBACZ,OAAO,CACL,oBAAC,sBAAsB,IACrB,QAAQ,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA2B,EAC9E,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,EAC9B,cAAc,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,qBAAqB,GAC5C,CACH,CAAC;gBACJ,KAAK,kBAAkB,CAAC;gBACxB,KAAK,oBAAoB;oBACvB,OAAO,CACL,oBAAC,iCAAiC,IAChC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,CAAC,qBAAqB,EAClC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,GAC3C,CACH,CAAC;YACN,CAAC;IACL,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,EACzC,OAAO,EACP,KAAK,EACL,WAAW,EAKZ,EAAe,EAAE;IAChB,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,eAAe,GAAG,uBAAuB,CAAC,OAAO,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IACnF,MAAM,aAAa,GACjB,OAAO,CAAC,iBAAiB,KAAK,kBAAkB;QAC9C,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,iBAAiB;QACzC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC;IAE5C,IAAI,eAAe,KAAK,EAAE,EAAE,CAAC;QAC3B,OAAO,CACL,oBAAC,sBAAsB,IACrB,QAAQ,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA2B,EAC9E,OAAO,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAC9C,cAAc,EAAE,KAAK,GACrB,CACH,CAAC;IACJ,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,YAAwC,EAAE,WAAmB,EAAU,EAAE,CACxG,YAAY;KACT,GAAG,CACF,CAAC,WAAW,EAAE,EAAE,CACd,GAAG,CAAC,WAAW,CAAC,WAAW,IAAI,WAAW,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,WAAW,EAAE,CAC1G;KACA,IAAI,CAAC,IAAI,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { MessageProps, MessageRenderer, _ChatMessageProps } from '../MessageThread';\nimport {\n  CommunicationParticipant,\n  ComponentSlotStyle,\n  ParticipantAddedSystemMessage,\n  ParticipantRemovedSystemMessage\n} from '../../types';\nimport { SystemMessage as SystemMessageComponent, SystemMessageIconTypes } from './../SystemMessage';\nimport { useLocale } from '../../localization/LocalizationProvider';\n\n/**\n * @private\n */\nexport const DefaultSystemMessage: MessageRenderer = (props: MessageProps) => {\n  const message = props.message;\n  switch (message.messageType) {\n    case 'system':\n      switch (message.systemMessageType) {\n        case 'content':\n          return (\n            <SystemMessageComponent\n              iconName={(message.iconName ? message.iconName : '') as SystemMessageIconTypes}\n              content={message.content ?? ''}\n              containerStyle={props?.messageContainerStyle}\n            />\n          );\n        case 'participantAdded':\n        case 'participantRemoved':\n          return (\n            <ParticipantSystemMessageComponent\n              message={message}\n              style={props.messageContainerStyle}\n              defaultName={props.strings.noDisplayNameSub}\n            />\n          );\n      }\n  }\n  return <></>;\n};\n\nconst ParticipantSystemMessageComponent = ({\n  message,\n  style,\n  defaultName\n}: {\n  message: ParticipantAddedSystemMessage | ParticipantRemovedSystemMessage;\n  style?: ComponentSlotStyle;\n  defaultName: string;\n}): JSX.Element => {\n  const { strings } = useLocale();\n  const participantsStr = generateParticipantsStr(message.participants, defaultName);\n  const messageSuffix =\n    message.systemMessageType === 'participantAdded'\n      ? strings.messageThread.participantJoined\n      : strings.messageThread.participantLeft;\n\n  if (participantsStr !== '') {\n    return (\n      <SystemMessageComponent\n        iconName={(message.iconName ? message.iconName : '') as SystemMessageIconTypes}\n        content={`${participantsStr} ${messageSuffix}`}\n        containerStyle={style}\n      />\n    );\n  }\n  return <></>;\n};\n\nconst generateParticipantsStr = (participants: CommunicationParticipant[], defaultName: string): string =>\n  participants\n    .map(\n      (participant) =>\n        `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`\n    )\n    .join(', ');\n"]}

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ChatMessage } from '../../types';
+import { BlockedMessage } from '../../types';
 import { ChatMessageComponentWrapperProps } from './ChatMessageComponentWrapper';
 /**
  * Props for {@link FluentChatMessageComponentWrapper}
@@ -7,7 +8,7 @@ import { ChatMessageComponentWrapperProps } from './ChatMessageComponentWrapper'
  * @private
  */
 type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {
-    message: ChatMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
 };
 /**
  * The component for rendering a chat message using Fluent UI components