@azure/communication-react 1.5.1-alpha-202304040013 → 1.5.1-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAIlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAKhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AAiE5F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,eAAe,GAAG,iBAAiB,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,OAAO,GAAG,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,eAAe,EAAE;YAC7E,eAAe,CAAC,eAAe,CAAC,CAAC;SAClC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,eAAe,IAAI,eAAe,IAAI,eAAe,CAAC,eAAe,CAAC,CAAC;QACvE,aAAa,IAAI,aAAa,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/D,IAAI,SAAS,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;QAC/C,OAAO,CACL,oBAAC,6BAA6B,IAC5B,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,KAAK,CAAC,6BAA6B,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;gBAC1C,KAAK,CAAC,eAAe;oBACnB,OAAO,CAAC,SAAS;oBACjB,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;gBAC5E,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,EACD,QAAQ,EAAE,GAAG,EAAE;gBACb,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,GACD,CACH,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,mCAAmC,oBAC9B,KAAK,IACT,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,KAAK,CAAC,cAAc;YACpC,0DAA0D;YAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,IACtB,CACH,CAAC;KACH;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageComponentProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => Promise<void>;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineAcceptRejectEditButtons: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientmessageid\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n\n  if (isEditing && message.messageType === 'chat') {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        inlineEditButtons={props.inlineAcceptRejectEditButtons}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            message.messageId &&\n            (await props.onUpdateMessage(message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={() => {\n          setIsEditing(false);\n        }}\n      />\n    );\n  } else {\n    return (\n      <ChatMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n      />\n    );\n  }\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAIlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AAiE5F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,eAAe,EAAE;YACnD,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;SAC1C;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;;QACrC,eAAe,IAAI,OAAO,CAAC,eAAe,IAAI,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACvF,aAAa,IAAI,aAAa,CAAC,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/E,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;QACxC,OAAO,yCAAK,CAAC;KACd;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,CACL,oBAAC,6BAA6B,IAC5B,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,KAAK,CAAC,6BAA6B,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;gBAC1C,KAAK,CAAC,eAAe;oBACnB,KAAK,CAAC,OAAO,CAAC,SAAS;oBACvB,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;gBAClF,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,EACD,QAAQ,EAAE,GAAG,EAAE;gBACb,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,GACD,CACH,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,mCAAmC,oBAC9B,KAAK,IACT,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,KAAK,CAAC,cAAc;YACpC,0DAA0D;YAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,IACtB,CACH,CAAC;KACH;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageComponentProps = {\n  message: ChatMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => Promise<void>;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineAcceptRejectEditButtons: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientmessageid\n    else if (onDeleteMessage && message.clientMessageId) {\n      onDeleteMessage(message.clientMessageId);\n    }\n  }, [message.messageId, message.clientMessageId, onDeleteMessage]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && message.clientMessageId && onDeleteMessage(message.clientMessageId);\n    onSendMessage && onSendMessage(message.content ?? '');\n  }, [message.clientMessageId, message.content, onSendMessage, onDeleteMessage]);\n\n  if (props.message.messageType !== 'chat') {\n    return <></>;\n  } else if (isEditing) {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        inlineEditButtons={props.inlineAcceptRejectEditButtons}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            props.message.messageId &&\n            (await props.onUpdateMessage(props.message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={() => {\n          setIsEditing(false);\n        }}\n      />\n    );\n  } else {\n    return (\n      <ChatMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n      />\n    );\n  }\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -1,12 +1,11 @@
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
-import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
 import { OnRenderAvatarCallback } from '../../types';
 import { FileDownloadHandler } from '../FileDownloadCards';
 declare type ChatMessageComponentAsMessageBubbleProps = {
-    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+    message: ChatMessage;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
     disableEditing?: boolean;

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

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
 import { Chat, Text } from '@fluentui/react-northstar';
+import { _formatString } from "../../../../acs-ui-common/src";
 import React, { useCallback, useRef, useState } from 'react';
 import { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';
 import { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';
@@ -9,8 +10,6 @@ import { useIdentifiers } from '../../identifiers/IdentifierProvider';
 import { useTheme } from '../../theming';
 import { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';
 import { ChatMessageContent } from './ChatMessageContent';
-/* @conditional-compile-remove(data-loss-prevention) */
-import { BlockedMessageContent } from './ChatMessageContent';
 import { chatMessageActionMenuProps } from './ChatMessageActionMenu';
 import { _FileDownloadCards } from '../FileDownloadCards';
 import { useLocale } from '../../localization';
@@ -50,10 +49,7 @@ const MessageBubble = (props) => {
     const messageRef = useRef(null);
     const messageActionButtonRef = useRef(null);
     const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
-    const chatActionsEnabled = !disableEditing &&
-        message.status !== 'sending' &&
-        !!message.mine &&
-        /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
+    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;
     const [messageReadBy, setMessageReadBy] = useState([]);
     const actionMenuProps = wasInteractionByTouch
         ? undefined
@@ -64,10 +60,8 @@ const MessageBubble = (props) => {
             // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
             forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,
             onActionButtonClick: () => {
-                if (message.messageType === 'chat') {
-                    props.onActionButtonClick(message, setMessageReadBy);
-                    setChatMessageActionFlyoutTarget(messageActionButtonRef);
-                }
+                props.onActionButtonClick(message, setMessageReadBy);
+                setChatMessageActionFlyoutTarget(messageActionButtonRef);
             },
             theme
         });
@@ -90,29 +84,23 @@ const MessageBubble = (props) => {
         locale,
         fileDownloadHandler
     ]);
-    const editedOn = 'editedOn' in message ? message.editedOn : undefined;
-    const getMessageDetails = useCallback(() => {
-        if (messageStatus === 'failed') {
-            return React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
-        }
-        else if (message.messageType === 'chat' && editedOn) {
-            return React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag);
-        }
-        return undefined;
-    }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
-    const getContent = useCallback(() => {
-        /* @conditional-compile-remove(data-loss-prevention) */
-        if (message.messageType === 'blocked') {
-            return (React.createElement("div", { tabIndex: 0 },
-                React.createElement(BlockedMessageContent, { message: message, strings: strings })));
-        }
-        return (React.createElement("div", { tabIndex: 0 },
-            React.createElement(ChatMessageContent, { message: message, strings: strings }),
-            props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
-    }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
+    const messageContentAriaText = props.message.content
+        ? props.message.mine
+            ? _formatString(strings.messageContentMineAriaText, {
+                message: props.message.content
+            })
+            : _formatString(strings.messageContentAriaText, {
+                author: `${props.message.senderDisplayName}`,
+                message: props.message.content
+            })
+        : undefined;
     const chatMessage = (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: messageRef },
-            React.createElement(Chat.Message, { "data-ui-id": "chat-composite-message", className: mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: getContent(), author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), mine: message.mine, timestamp: React.createElement(Text, { "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), positionActionMenu: false, actionMenu: actionMenuProps, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onBlur: () => setWasInteractionByTouch(false), onClick: () => {
+            React.createElement(Chat.Message, { "data-ui-id": "chat-composite-message", className: mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: React.createElement("div", { tabIndex: 0 },
+                    React.createElement(ChatMessageContent, { message: message, liveAuthorIntro: strings.liveAuthorIntro, messageContentAriaText: messageContentAriaText }),
+                    props.onRenderFileDownloads
+                        ? props.onRenderFileDownloads(userId, message)
+                        : defaultOnRenderFileDownloads()), author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), mine: message.mine, timestamp: React.createElement(Text, { "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: messageStatus === 'failed' ? (React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag)) : message.editedOn ? (React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag)) : undefined, positionActionMenu: false, actionMenu: actionMenuProps, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onBlur: () => setWasInteractionByTouch(false), onClick: () => {
                     if (!wasInteractionByTouch) {
                         return;
                     }
@@ -122,9 +110,7 @@ const MessageBubble = (props) => {
                     // In doing so here we set the target of the flyout to be the message and
                     // not the 3-dot menu button to position the flyout correctly.
                     setChatMessageActionFlyoutTarget(messageRef);
-                    if (message.messageType === 'chat') {
-                        props.onActionButtonClick(message, setMessageReadBy);
-                    }
+                    props.onActionButtonClick(message, setMessageReadBy);
                 } })),
         chatActionsEnabled && (React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }))));
     return chatMessage;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { Chat, Text, ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport {\n  chatMessageEditedTagStyle,\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle\n} from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\nconst generateDefaultTimestamp = (\n  createdOn: Date,\n  showDate: boolean | undefined,\n  strings: MessageThreadStrings\n): string => {\n  const formattedTimestamp = showDate\n    ? formatTimestampForChatMessage(createdOn, new Date(), strings)\n    : formatTimeForChatMessage(createdOn);\n\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (\n  props: ChatMessageComponentAsMessageBubbleProps,\n  createdOn: Date,\n  locale: ComponentLocale\n): string => {\n  /* @conditional-compile-remove(date-time-customization) */\n  return props.onDisplayDateTimeString\n    ? props.onDisplayDateTimeString(createdOn)\n    : locale.onDisplayDateTimeString\n    ? locale.onDisplayDateTimeString(createdOn)\n    : '';\n\n  return '';\n};\n/** @private */\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const {\n    userId,\n    message,\n    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    fileDownloadHandler\n  } = props;\n\n  const defaultTimeStamp = message.createdOn\n    ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n    : undefined;\n\n  const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n\n  const formattedTimestamp = customTimestamp || defaultTimeStamp;\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled =\n    !disableEditing &&\n    message.status !== 'sending' &&\n    !!message.mine &&\n    /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n  const actionMenuProps = wasInteractionByTouch\n    ? undefined\n    : chatMessageActionMenuProps({\n        ariaLabel: strings.actionMenuMoreOptions ?? '',\n        enabled: chatActionsEnabled,\n        menuButtonRef: messageActionButtonRef,\n        // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n        forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,\n        onActionButtonClick: () => {\n          if (message.messageType === 'chat') {\n            props.onActionButtonClick(message, setMessageReadBy);\n            setChatMessageActionFlyoutTarget(messageActionButtonRef);\n          }\n        },\n        theme\n      });\n\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n\n  const defaultOnRenderFileDownloads = useCallback(\n    () => (\n      <_FileDownloadCards\n        userId={userId}\n        fileMetadata={message['attachedFilesMetadata'] || []}\n        downloadHandler={fileDownloadHandler}\n        /* @conditional-compile-remove(file-sharing) */\n        strings={{ downloadFile: props.strings.downloadFile ?? locale.strings.messageThread.downloadFile }}\n      />\n    ),\n    [\n      userId,\n      message,\n      /* @conditional-compile-remove(file-sharing) */\n      props,\n      /* @conditional-compile-remove(file-sharing) */\n      locale,\n      fileDownloadHandler\n    ]\n  );\n\n  const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n  const getMessageDetails = useCallback(() => {\n    if (messageStatus === 'failed') {\n      return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n    } else if (message.messageType === 'chat' && editedOn) {\n      return <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>;\n    }\n    return undefined;\n  }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n  const getContent = useCallback(() => {\n    /* @conditional-compile-remove(data-loss-prevention) */\n    if (message.messageType === 'blocked') {\n      return (\n        <div tabIndex={0}>\n          <BlockedMessageContent message={message} strings={strings} />\n        </div>\n      );\n    }\n    return (\n      <div tabIndex={0}>\n        <ChatMessageContent message={message} strings={strings} />\n        {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n      </div>\n    );\n  }, [defaultOnRenderFileDownloads, message, props, strings, userId]);\n\n  const chatMessage = (\n    <>\n      <div ref={messageRef}>\n        <Chat.Message\n          data-ui-id=\"chat-composite-message\"\n          className={mergeStyles(messageContainerStyle as IStyle)}\n          styles={messageContainerStyle}\n          content={getContent()}\n          author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>}\n          mine={message.mine}\n          timestamp={<Text data-ui-id={ids.messageTimestamp}>{formattedTimestamp}</Text>}\n          details={getMessageDetails()}\n          positionActionMenu={false}\n          actionMenu={actionMenuProps}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          onBlur={() => setWasInteractionByTouch(false)}\n          onClick={() => {\n            if (!wasInteractionByTouch) {\n              return;\n            }\n            // If the message was touched via touch we immediately open the menu\n            // flyout (when using mouse the 3-dot menu that appears on hover\n            // must be clicked to open the flyout).\n            // In doing so here we set the target of the flyout to be the message and\n            // not the 3-dot menu button to position the flyout correctly.\n            setChatMessageActionFlyoutTarget(messageRef);\n            if (message.messageType === 'chat') {\n              props.onActionButtonClick(message, setMessageReadBy);\n            }\n          }}\n        />\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\n    </>\n  );\n\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { Chat, Text, ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport {\n  chatMessageEditedTagStyle,\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle\n} from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\nconst generateDefaultTimestamp = (\n  createdOn: Date,\n  showDate: boolean | undefined,\n  strings: MessageThreadStrings\n): string => {\n  const formattedTimestamp = showDate\n    ? formatTimestampForChatMessage(createdOn, new Date(), strings)\n    : formatTimeForChatMessage(createdOn);\n\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (\n  props: ChatMessageComponentAsMessageBubbleProps,\n  createdOn: Date,\n  locale: ComponentLocale\n): string => {\n  /* @conditional-compile-remove(date-time-customization) */\n  return props.onDisplayDateTimeString\n    ? props.onDisplayDateTimeString(createdOn)\n    : locale.onDisplayDateTimeString\n    ? locale.onDisplayDateTimeString(createdOn)\n    : '';\n\n  return '';\n};\n/** @private */\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const {\n    userId,\n    message,\n    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    fileDownloadHandler\n  } = props;\n\n  const defaultTimeStamp = message.createdOn\n    ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n    : undefined;\n\n  const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n\n  const formattedTimestamp = customTimestamp || defaultTimeStamp;\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n  const actionMenuProps = wasInteractionByTouch\n    ? undefined\n    : chatMessageActionMenuProps({\n        ariaLabel: strings.actionMenuMoreOptions ?? '',\n        enabled: chatActionsEnabled,\n        menuButtonRef: messageActionButtonRef,\n        // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n        forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,\n        onActionButtonClick: () => {\n          props.onActionButtonClick(message, setMessageReadBy);\n          setChatMessageActionFlyoutTarget(messageActionButtonRef);\n        },\n        theme\n      });\n\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n\n  const defaultOnRenderFileDownloads = useCallback(\n    () => (\n      <_FileDownloadCards\n        userId={userId}\n        fileMetadata={message['attachedFilesMetadata'] || []}\n        downloadHandler={fileDownloadHandler}\n        /* @conditional-compile-remove(file-sharing) */\n        strings={{ downloadFile: props.strings.downloadFile ?? locale.strings.messageThread.downloadFile }}\n      />\n    ),\n    [\n      userId,\n      message,\n      /* @conditional-compile-remove(file-sharing) */\n      props,\n      /* @conditional-compile-remove(file-sharing) */\n      locale,\n      fileDownloadHandler\n    ]\n  );\n\n  const messageContentAriaText = props.message.content\n    ? props.message.mine\n      ? _formatString(strings.messageContentMineAriaText, {\n          message: props.message.content\n        })\n      : _formatString(strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: props.message.content\n        })\n    : undefined;\n\n  const chatMessage = (\n    <>\n      <div ref={messageRef}>\n        <Chat.Message\n          data-ui-id=\"chat-composite-message\"\n          className={mergeStyles(messageContainerStyle as IStyle)}\n          styles={messageContainerStyle}\n          content={\n            <div tabIndex={0}>\n              <ChatMessageContent\n                message={message}\n                liveAuthorIntro={strings.liveAuthorIntro}\n                messageContentAriaText={messageContentAriaText}\n              />\n              {props.onRenderFileDownloads\n                ? props.onRenderFileDownloads(userId, message)\n                : defaultOnRenderFileDownloads()}\n            </div>\n          }\n          author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>}\n          mine={message.mine}\n          timestamp={<Text data-ui-id={ids.messageTimestamp}>{formattedTimestamp}</Text>}\n          details={\n            messageStatus === 'failed' ? (\n              <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>\n            ) : message.editedOn ? (\n              <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>\n            ) : undefined\n          }\n          positionActionMenu={false}\n          actionMenu={actionMenuProps}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          onBlur={() => setWasInteractionByTouch(false)}\n          onClick={() => {\n            if (!wasInteractionByTouch) {\n              return;\n            }\n            // If the message was touched via touch we immediately open the menu\n            // flyout (when using mouse the 3-dot menu that appears on hover\n            // must be clicked to open the flyout).\n            // In doing so here we set the target of the flyout to be the message and\n            // not the 3-dot menu button to position the flyout correctly.\n            setChatMessageActionFlyoutTarget(messageRef);\n            props.onActionButtonClick(message, setMessageReadBy);\n          }}\n        />\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\n    </>\n  );\n\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n\"../../../../acs-ui-common/src\""]}

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

@@ -1,20 +1,11 @@
 /// <reference types="react" />
 import { ChatMessage } from '../../types/ChatMessage';
-import { BlockedMessage } from '../../types/ChatMessage';
-import { MessageThreadStrings } from '../MessageThread';
 declare type ChatMessageContentProps = {
     message: ChatMessage;
-    strings: MessageThreadStrings;
-};
-declare type BlockedMessageContentProps = {
-    message: BlockedMessage;
-    strings: MessageThreadStrings;
+    liveAuthorIntro: string;
+    messageContentAriaText?: string;
 };
 /** @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

@@ -6,8 +6,6 @@ import { Parser } from 'html-to-react';
 import Linkify from 'react-linkify';
 import { LiveMessage } from 'react-aria-live';
 import { Link } from '@fluentui/react';
-/* @conditional-compile-remove(data-loss-prevention) */
-import { FontIcon, Stack } from '@fluentui/react';
 /** @private */
 export const ChatMessageContent = (props) => {
     switch (props.message.contentType) {
@@ -22,44 +20,20 @@ export const ChatMessageContent = (props) => {
             return React.createElement(React.Fragment, null);
     }
 };
-const MessageContentWithLiveAria = (props) => {
-    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
-        React.createElement(LiveMessage, { message: props.liveMessage, "aria-live": "polite" }),
-        props.content));
-};
 const MessageContentAsRichTextHTML = (props) => {
     const htmlToReactParser = new Parser();
-    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: htmlToReactParser.parse(props.message.content) }));
+    const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
+    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.messageContentAriaText },
+        React.createElement(LiveMessage, { message: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, "aria-live": "polite" }),
+        htmlToReactParser.parse(props.message.content)));
 };
 const MessageContentAsText = (props) => {
-    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
+    const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
+    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.messageContentAriaText },
+        React.createElement(LiveMessage, { message: `${props.message.mine ? '' : liveAuthor} ${props.message.content}`, "aria-live": "polite" }),
+        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 === false
-        ? ''
-        : props.message.warningText === '' || 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))) }));
+            } }, props.message.content)));
 };
 // https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
 const extractContent = (s) => {
@@ -67,16 +41,4 @@ const extractContent = (s) => {
     span.innerHTML = s;
     return span.textContent || span.innerText;
 };
-const messageContentAriaText = (props) => {
-    return props.message.content
-        ? props.message.mine
-            ? _formatString(props.strings.messageContentMineAriaText, {
-                message: props.message.content
-            })
-            : _formatString(props.strings.messageContentAriaText, {
-                author: `${props.message.senderDisplayName}`,
-                message: props.message.content
-            })
-        : undefined;
-};
 //# sourceMappingURL=ChatMessageContent.js.map

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

@@ -1 +1 @@
-{"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';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { LiveMessage } from 'react-aria-live';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\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} aria-live=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const htmlToReactParser = new Parser();\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={htmlToReactParser.parse(props.message.content)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\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 === false\n      ? ''\n      : props.message.warningText === '' || props.message.warningText === undefined\n      ? props.strings.blockedWarningText\n      : 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 messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: props.message.content\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: props.message.content\n        })\n    : undefined;\n};\n\"../../../../acs-ui-common/src\""]}
+{"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';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { LiveMessage } from 'react-aria-live';\nimport { Link } from '@fluentui/react';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  liveAuthorIntro: string;\n  messageContentAriaText?: string;\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 MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const htmlToReactParser = new Parser();\n  const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.messageContentAriaText}>\n      <LiveMessage\n        message={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n        aria-live=\"polite\"\n      />\n      {htmlToReactParser.parse(props.message.content)}\n    </div>\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.messageContentAriaText}>\n      <LiveMessage message={`${props.message.mine ? '' : liveAuthor} ${props.message.content}`} aria-live=\"polite\" />\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    </div>\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\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/FileDownloadCards.d.ts

@@ -1,15 +1,9 @@
 /// <reference types="react" />
-/**
- * @beta
- */
-export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images) */ 'teamsInlineImage' | 'unknown';
 /**
  * Meta Data containing information about the uploaded file.
  * @beta
  */
 export interface FileMetadata {
-    attachmentType: FileMetadataAttachmentType;
-    id: string;
     /**
      * File name to be displayed.
      */
@@ -24,7 +18,6 @@ export interface FileMetadata {
      * Download URL for the file.
      */
     url: string;
-    previewUrl?: string;
 }
 /**
  * Strings of _FileDownloadCards that can be overridden.

package/dist/dist-esm/react-components/src/components/FileDownloadCards.js

@@ -56,11 +56,7 @@ export const _FileDownloadCards = (props) => {
             }
         }
     }), [props]);
-    // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.
-    // Since you can't have both fileSharing and teamsInlineImage in the same message.
-    if (!fileMetadata ||
-        fileMetadata.length === 0 ||
-        /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing') {
+    if (!fileMetadata || fileMetadata.length === 0) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },

package/dist/dist-esm/react-components/src/components/FileDownloadCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Icon, IconButton, Spinner, SpinnerSize } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\n\n/* @conditional-compile-remove(teams-inline-images) */\n/**\n * @beta\n */\nexport type FileMetadataAttachmentType =\n  | 'fileSharing'\n  | /* @conditional-compile-remove(teams-inline-images) */ 'teamsInlineImage'\n  | 'unknown';\n\n/**\n * Meta Data containing information about the uploaded file.\n * @beta\n */\nexport interface FileMetadata {\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Attachment type of the file.\n   * Possible values {@link FileDownloadHandler}.\n   */\n  attachmentType: FileMetadataAttachmentType;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Unique ID of the file.\n   */\n  id: string;\n  /**\n   * File name to be displayed.\n   */\n  name: string;\n  /**\n   * Extension is used for rendering the file icon.\n   * An unknown extension will be rendered as a generic icon.\n   * Example: `jpeg`\n   */\n  extension: string;\n  /**\n   * Download URL for the file.\n   */\n  url: string;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Preview URL for the file.\n   * Used in the message bubble for inline images.\n   */\n  previewUrl?: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n  /** Aria label to notify user when focus is on file download button. */\n  downloadFile: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n  /** The error message to display in the UI */\n  errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n *   if (isUnauthorizedUser(userId)) {\n *     return { errorMessage: 'You don’t have permission to download this file.' };\n *   } else {\n *     return new URL(fileData.url);\n *   }\n * }\n *\n * const App = () => (\n *   <ChatComposite\n *     ...\n *     fileSharing={{\n *       fileDownloadHandler: fileDownloadHandler\n *     }}\n *   />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCards {\n  /**\n   * User id of the local participant\n   */\n  userId: string;\n  /**\n   * A chat message metadata that inculdes file metadata\n   */\n  fileMetadata: FileMetadata[];\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\n  /**\n   * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n   */\n  onDownloadErrorMessage?: (errMsg: string) => void;\n  /**\n   * Optional arialabel strings for file download cards\n   */\n  strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n  const { userId, fileMetadata } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const downloadFileButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadFile ?? localeStrings.downloadFile;\n      // Return download button without aria label\n      return props.strings?.downloadFile ?? '';\n    },\n    [props.strings?.downloadFile, localeStrings.downloadFile]\n  );\n\n  const fileDownloadHandler = useCallback(\n    async (userId, file) => {\n      if (!props.downloadHandler) {\n        window.open(file.url, '_blank', 'noopener,noreferrer');\n      } else {\n        setShowSpinner(true);\n        try {\n          const response = await props.downloadHandler(userId, file);\n          setShowSpinner(false);\n          if (response instanceof URL) {\n            window.open(response.toString(), '_blank', 'noopener,noreferrer');\n          } else {\n            props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n          }\n        } finally {\n          setShowSpinner(false);\n        }\n      }\n    },\n    [props]\n  );\n  // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.\n  // Since you can't have both fileSharing and teamsInlineImage in the same message.\n  if (\n    !fileMetadata ||\n    fileMetadata.length === 0 ||\n    /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing'\n  ) {\n    return <></>;\n  }\n\n  return (\n    <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup>\n        {fileMetadata &&\n          fileMetadata.map((file) => (\n            <_FileCard\n              fileName={file.name}\n              key={file.name}\n              fileExtension={file.extension}\n              actionIcon={\n                showSpinner ? (\n                  <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n                ) : (\n                  <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                    <DownloadIconTrampoline />\n                  </IconButton>\n                )\n              }\n              actionHandler={() => fileDownloadHandler(userId, file)}\n            />\n          ))}\n      </_FileCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n  // @conditional-compile-remove(file-sharing)\n  return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n  // Return _some_ available icon, as the real icon is beta-only.\n  return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n  /* @conditional-compile-remove(file-sharing) */\n  return useLocale().strings.messageThread;\n  return { downloadFile: '' };\n};\n"]}
+{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Icon, IconButton, Spinner, SpinnerSize } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\n\n/**\n * Meta Data containing information about the uploaded file.\n * @beta\n */\nexport interface FileMetadata {\n  /**\n   * File name to be displayed.\n   */\n  name: string;\n  /**\n   * Extension is used for rendering the file icon.\n   * An unknown extension will be rendered as a generic icon.\n   * Example: `jpeg`\n   */\n  extension: string;\n  /**\n   * Download URL for the file.\n   */\n  url: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n  /** Aria label to notify user when focus is on file download button. */\n  downloadFile: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n  /** The error message to display in the UI */\n  errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n *   if (isUnauthorizedUser(userId)) {\n *     return { errorMessage: 'You don’t have permission to download this file.' };\n *   } else {\n *     return new URL(fileData.url);\n *   }\n * }\n *\n * const App = () => (\n *   <ChatComposite\n *     ...\n *     fileSharing={{\n *       fileDownloadHandler: fileDownloadHandler\n *     }}\n *   />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCards {\n  /**\n   * User id of the local participant\n   */\n  userId: string;\n  /**\n   * A chat message metadata that inculdes file metadata\n   */\n  fileMetadata: FileMetadata[];\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\n  /**\n   * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n   */\n  onDownloadErrorMessage?: (errMsg: string) => void;\n  /**\n   * Optional arialabel strings for file download cards\n   */\n  strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n  const { userId, fileMetadata } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const downloadFileButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadFile ?? localeStrings.downloadFile;\n      // Return download button without aria label\n      return props.strings?.downloadFile ?? '';\n    },\n    [props.strings?.downloadFile, localeStrings.downloadFile]\n  );\n\n  const fileDownloadHandler = useCallback(\n    async (userId, file) => {\n      if (!props.downloadHandler) {\n        window.open(file.url, '_blank', 'noopener,noreferrer');\n      } else {\n        setShowSpinner(true);\n        try {\n          const response = await props.downloadHandler(userId, file);\n          setShowSpinner(false);\n          if (response instanceof URL) {\n            window.open(response.toString(), '_blank', 'noopener,noreferrer');\n          } else {\n            props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n          }\n        } finally {\n          setShowSpinner(false);\n        }\n      }\n    },\n    [props]\n  );\n\n  if (!fileMetadata || fileMetadata.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup>\n        {fileMetadata &&\n          fileMetadata.map((file) => (\n            <_FileCard\n              fileName={file.name}\n              key={file.name}\n              fileExtension={file.extension}\n              actionIcon={\n                showSpinner ? (\n                  <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n                ) : (\n                  <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                    <DownloadIconTrampoline />\n                  </IconButton>\n                )\n              }\n              actionHandler={() => fileDownloadHandler(userId, file)}\n            />\n          ))}\n      </_FileCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n  // @conditional-compile-remove(file-sharing)\n  return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n  // Return _some_ available icon, as the real icon is beta-only.\n  return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n  /* @conditional-compile-remove(file-sharing) */\n  return useLocale().strings.messageThread;\n  return { downloadFile: '' };\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageThread.d.ts

@@ -2,7 +2,6 @@
 import { IStyle } from '@fluentui/react';
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId } from '../types';
-import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
 import { FileDownloadHandler, FileMetadata } from './FileDownloadCards';
 /**
@@ -29,8 +28,6 @@ export interface MessageThreadStyles extends BaseCustomStyles {
     chatMessageContainer?: ComponentSlotStyle;
     /** Styles for system message container. */
     systemMessageContainer?: ComponentSlotStyle;
-    /** Styles for blocked message container. */
-    blockedMessageContainer?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
@@ -94,10 +91,6 @@ export interface MessageThreadStrings {
     actionMenuMoreOptions?: string;
     /** String for download file button in file card */
     downloadFile: string;
-    /** String for policy violation message removal */
-    blockedWarningText: string;
-    /** String for policy violation message removal details link */
-    blockedWarningLinkText: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -134,9 +127,9 @@ export declare type MessageThreadProps = {
      */
     userId: string;
     /**
-     * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`.
+     * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage` or `CustomMessage`.
      */
-    messages: (ChatMessage | SystemMessage | CustomMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage)[];
+    messages: (ChatMessage | SystemMessage | CustomMessage)[];
     /**
      * number of participants in the thread
      */
@@ -280,7 +273,7 @@ export declare type MessageThreadProps = {
  */
 export declare type MessageProps = {
     /**
-     * Message to render. It can type `ChatMessage` or `SystemMessage`, `BlockedMessage` or `CustomMessage`.
+     * Message to render. It can type `ChatMessage` or `SystemMessage` or `CustomMessage`.
      */
     message: Message;
     /**