npm - @azure/communication-react - Versions diffs - 1.26.0-alpha-202504162032 → 1.26.0 - Mend

@azure/communication-react 1.26.0-alpha-202504162032 → 1.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1275) hide show

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.js CHANGED Viewed

@@ -12,13 +12,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React, { useCallback, useState } from 'react';
 import { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';
 import { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
-import { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';
 /**
  * @private
  */
 export const ChatMyMessageComponent = (props) => {
-    var _a, _b;
     const { onDeleteMessage, onSendMessage, message, onCancelEditMessage, onUpdateMessage } = props;
     const [isEditing, setIsEditing] = useState(false);
     const [focusMessageAfterEditing, setFocusMessageAfterEditing] = useState(false);
@@ -40,39 +37,14 @@ export const ChatMyMessageComponent = (props) => {
     const onResendClick = useCallback(() => {
         onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
         let newContent = content !== null && content !== void 0 ? content : '';
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);
-        onSendMessage &&
-            onSendMessage(newContent,
-            /* @conditional-compile-remove(file-sharing-acs) */
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            {
-                /* @conditional-compile-remove(file-sharing-acs) */ attachments: `attachments` in message ? message.attachments : undefined,
-                /* @conditional-compile-remove(rich-text-editor) */
-                type: props.isRichTextEditorEnabled ? 'html' : 'text'
-            });
-    }, [
-        message,
-        onDeleteMessage,
-        clientMessageId,
-        onSendMessage,
-        content,
-        /* @conditional-compile-remove(rich-text-editor) */ props.isRichTextEditorEnabled
-    ]);
+        onSendMessage && onSendMessage(newContent);
+    }, [message, onDeleteMessage, clientMessageId, onSendMessage, content]);
     const onSubmitHandler = useCallback(
     // due to a bug in babel, we can't use arrow function here
     // affecting conditional-compile-remove(attachment-upload)
-    function (text,
-    /* @conditional-compile-remove(file-sharing-acs) */
-    attachments) {
+    function (text) {
         return __awaiter(this, void 0, void 0, function* () {
-            /* @conditional-compile-remove(file-sharing-acs) */
-            if (`attachments` in message && attachments) {
-                message.attachments = attachments;
-            }
-            yield (onUpdateMessage === null || onUpdateMessage === void 0 ? void 0 : onUpdateMessage(message.messageId, text,
-            /* @conditional-compile-remove(file-sharing-acs) */
-            { attachments: attachments }));
+            yield (onUpdateMessage === null || onUpdateMessage === void 0 ? void 0 : onUpdateMessage(message.messageId, text));
             setIsEditing(false);
             setFocusMessageAfterEditing(true);
         });
@@ -83,26 +55,10 @@ export const ChatMyMessageComponent = (props) => {
         setFocusMessageAfterEditing(true);
     }, [onCancelEditMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return (React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: onSubmitHandler, onCancel: onCancelHandler,
-            /* @conditional-compile-remove(mention) */
-            mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions,
-            /* @conditional-compile-remove(rich-text-editor) */
-            isRichTextEditorEnabled: props.isRichTextEditorEnabled,
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            onPaste: props.onPaste,
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            onInsertInlineImage: props.onInsertInlineImage,
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            inlineImagesWithProgress: props.inlineImagesWithProgress,
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            onRemoveInlineImage: props.onRemoveInlineImage }));
+        return React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: onSubmitHandler, onCancel: onCancelHandler });
     }
     else {
-        return (React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar,
-            /* @conditional-compile-remove(date-time-customization) */
-            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, inlineImageOptions: props.inlineImageOptions,
-            /* @conditional-compile-remove(mention) */
-            mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions, shouldFocusFluentMessageBody: focusMessageAfterEditing })));
+        return React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, strings: props.strings, inlineImageOptions: props.inlineImageOptions, shouldFocusFluentMessageBody: focusMessageAfterEditing }));
     }
 };
 //# sourceMappingURL=ChatMyMessageComponent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { MessageThreadStrings, UpdateMessageCallback } from '../../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { MessageOptions } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(mention) /\nimport { MentionOptions } from '../../MentionPopover';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';\n\n/\n Props for the ChatMyMessageComponent component.\n /\nexport type ChatMyMessageComponentProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n userId: string;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onUpdateMessage?: UpdateMessageCallback;\n onCancelEditMessage?: (messageId: string) => 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?: (\n content: string,\n / @conditional-compile-remove(file-sharing-acs) /\n options?: MessageOptions\n ) => Promise<void>;\n strings: MessageThreadStrings;\n messageStatus?: string;\n /\n Optional text to display when the message status is 'failed'.\n /\n failureReason?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\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 / @conditional-compile-remove(date-time-customization) /\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to lookup suggestions and display mentions in the mention scenario.\n * @beta\n /\n mentionOptions?: MentionOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n /\n Optional callback to render message attachments in the message component.\n * @beta\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /\n Optional callback to define custom actions for attachments.\n * @beta\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n / @conditional-compile-remove(rich-text-editor) /\n isRichTextEditorEnabled?: boolean;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/\n @private\n /\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n const { onDeleteMessage, onSendMessage, message, onCancelEditMessage, onUpdateMessage } = props;\n const [isEditing, setIsEditing] = useState(false);\n const [focusMessageAfterEditing, setFocusMessageAfterEditing] = useState(false);\n\n const onEditClick = useCallback(() => {\n setIsEditing(true);\n setFocusMessageAfterEditing(false);\n }, []);\n\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\n const onResendClick = useCallback(() => {\n onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n let newContent = content ?? '';\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);\n onSendMessage &&\n onSendMessage(\n newContent,\n / @conditional-compile-remove(file-sharing-acs) /\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n {\n / @conditional-compile-remove(file-sharing-acs) / attachments:\n `attachments` in message ? message.attachments : undefined,\n / @conditional-compile-remove(rich-text-editor) /\n type: props.isRichTextEditorEnabled ? 'html' : 'text'\n }\n );\n }, [\n message,\n onDeleteMessage,\n clientMessageId,\n onSendMessage,\n content,\n / @conditional-compile-remove(rich-text-editor) / props.isRichTextEditorEnabled\n ]);\n\n const onSubmitHandler = useCallback(\n // due to a bug in babel, we can't use arrow function here\n // affecting conditional-compile-remove(attachment-upload)\n async function (\n text: string,\n / @conditional-compile-remove(file-sharing-acs) /\n attachments?: AttachmentMetadata[] \| undefined\n ) {\n / @conditional-compile-remove(file-sharing-acs) /\n if (`attachments` in message && attachments) {\n message.attachments = attachments;\n }\n await onUpdateMessage?.(\n message.messageId,\n text,\n / @conditional-compile-remove(file-sharing-acs) /\n { attachments: attachments }\n );\n setIsEditing(false);\n\n setFocusMessageAfterEditing(true);\n },\n [message, onUpdateMessage]\n );\n\n const onCancelHandler = useCallback(\n (messageId: string) => {\n onCancelEditMessage?.(messageId);\n setIsEditing(false);\n\n setFocusMessageAfterEditing(true);\n },\n [onCancelEditMessage]\n );\n\n if (isEditing && message.messageType === 'chat') {\n return (\n <ChatMessageComponentAsEditBoxPicker\n message={message}\n strings={props.strings}\n onSubmit={onSubmitHandler}\n onCancel={onCancelHandler}\n / @conditional-compile-remove(mention) /\n mentionLookupOptions={props.mentionOptions?.lookupOptions}\n / @conditional-compile-remove(rich-text-editor) /\n isRichTextEditorEnabled={props.isRichTextEditorEnabled}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={props.onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={props.onInsertInlineImage}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress={props.inlineImagesWithProgress}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage={props.onRemoveInlineImage}\n />\n );\n } else {\n return (\n <ChatMyMessageComponentAsMessageBubble\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 inlineImageOptions={props.inlineImageOptions}\n / @conditional-compile-remove(mention) */\n mentionDisplayOptions={props.mentionOptions?.displayOptions}\n shouldFocusFluentMessageBody={focusMessageAfterEditing}\n />\n );\n }\n};\n"]}
1	+ {"version":3,"file":"ChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { MessageThreadStrings, UpdateMessageCallback } from '../../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\n/*\n Props for the ChatMyMessageComponent component.\n /\nexport type ChatMyMessageComponentProps = {\n message: ChatMessage;\n userId: string;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onUpdateMessage?: UpdateMessageCallback;\n onCancelEditMessage?: (messageId: string) => 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 Optional text to display when the message status is 'failed'.\n /\n failureReason?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\n remoteParticipantsCount?: number;\n onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n id: string;\n displayName: string;\n }[]) => void) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n /\n Optional callback to render message attachments in the message component.\n * @beta\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /\n Optional callback to define custom actions for attachments.\n * @beta\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/\n @private\n */\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n const {\n onDeleteMessage,\n onSendMessage,\n message,\n onCancelEditMessage,\n onUpdateMessage\n } = props;\n const [isEditing, setIsEditing] = useState(false);\n const [focusMessageAfterEditing, setFocusMessageAfterEditing] = useState(false);\n const onEditClick = useCallback(() => {\n setIsEditing(true);\n setFocusMessageAfterEditing(false);\n }, []);\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 let newContent = content ?? '';\n onSendMessage && onSendMessage(newContent);\n }, [message, onDeleteMessage, clientMessageId, onSendMessage, content]);\n const onSubmitHandler = useCallback(\n // due to a bug in babel, we can't use arrow function here\n // affecting conditional-compile-remove(attachment-upload)\n async function (text: string) {\n await onUpdateMessage?.(message.messageId, text);\n setIsEditing(false);\n setFocusMessageAfterEditing(true);\n }, [message, onUpdateMessage]);\n const onCancelHandler = useCallback((messageId: string) => {\n onCancelEditMessage?.(messageId);\n setIsEditing(false);\n setFocusMessageAfterEditing(true);\n }, [onCancelEditMessage]);\n if (isEditing && message.messageType === 'chat') {\n return <ChatMessageComponentAsEditBoxPicker message={message} strings={props.strings} onSubmit={onSubmitHandler} onCancel={onCancelHandler} />;\n } else {\n return <ChatMyMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar} strings={props.strings} inlineImageOptions={props.inlineImageOptions} shouldFocusFluentMessageBody={focusMessageAfterEditing} />;\n }\n};"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.d.ts CHANGED Viewed

@@ -1,14 +1,12 @@
 import React from 'react';
 import { InlineImageOptions } from '../ChatMessageContent';
 import { ChatMessage } from '../../../types/ChatMessage';
-import { BlockedMessage } from '../../../types/ChatMessage';
 import { MessageThreadStrings } from '../../MessageThread';
 import { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';
 import { AttachmentMenuAction } from '../../../types/Attachment';
 import { AttachmentMetadata } from "../../../../../acs-ui-common/src";
-import { MentionDisplayOptions } from '../../MentionPopover';
 type ChatMyMessageComponentAsMessageBubbleProps = {
-    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+    message: ChatMessage;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
     disableEditing?: boolean;
@@ -39,11 +37,6 @@ type ChatMyMessageComponentAsMessageBubbleProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
-    /**
-     * Optional props needed to display suggestions in the mention scenario.
-     * @internal
-     */
-    mentionDisplayOptions?: MentionDisplayOptions;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js CHANGED Viewed

@@ -13,24 +13,16 @@ import { createStyleFromV8Style } from '../../styles/v8StyleShim';
 import { mergeClasses } from '@fluentui/react-components';
 import { useChatMyMessageStyles, useChatMessageCommonStyles, chatMyMessageActionMenuClassName } from '../../styles/MessageThread.styles';
 import { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';
-/* @conditional-compile-remove(file-sharing-acs) */
-import { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /** @private */
 const MessageBubble = (props) => {
     var _a;
     const ids = useIdentifiers();
     const theme = useTheme();
     const locale = useLocale();
-    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, inlineImageOptions,
-    /* @conditional-compile-remove(mention) */
-    mentionDisplayOptions, onDisplayDateTimeString, onRenderAttachmentDownloads, actionsForAttachment, shouldFocusFluentMessageBody } = props;
+    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, inlineImageOptions, onDisplayDateTimeString, onRenderAttachmentDownloads, actionsForAttachment, shouldFocusFluentMessageBody } = props;
     const formattedTimestamp = useMemo(() => {
-        const defaultTimeStamp = message.createdOn
-            ? generateDefaultTimestamp(message.createdOn, showDate, strings)
-            : undefined;
-        const customTimestamp = message.createdOn
-            ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)
-            : '';
+        const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
+        const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';
         return customTimestamp || defaultTimeStamp;
     }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);
     // Track if the action menu was opened by touch - if so we increase the touch targets for the items
@@ -43,10 +35,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 = chatMessageActionMenuProps({
         ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
@@ -75,10 +64,6 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
-    /* @conditional-compile-remove(file-sharing-acs) */
-    const hasMultipleAttachments = useMemo(() => {
-        return doesMessageContainMultipleAttachments(message);
-    }, [message]);
     const getMessageDetails = useCallback(() => {
         if (messageStatus === 'failed') {
             return React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
@@ -87,62 +72,32 @@ const MessageBubble = (props) => {
             return getMessageEditedDetails(message, theme, strings.editedTag);
         }
     }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
-    const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
+    const isBlockedMessage = false;
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     const getActionsMenu = useCallback(() => {
-        return (React.createElement("div", { className: mergeClasses(
+        return React.createElement("div", { className: mergeClasses(
             // add the static class name to use it in useChatMyMessageStyles
             chatMyMessageActionMenuClassName, chatMyMessageStyles.menu,
             // Make actions menu visible when the message is focused or the flyout is shown
-            focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
-                ? chatMyMessageStyles.menuVisible
-                : chatMyMessageStyles.menuHidden) }, actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children));
-    }, [
-        actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
-        chatMessageActionFlyoutTarget,
-        chatMyMessageStyles.menu,
-        chatMyMessageStyles.menuHidden,
-        chatMyMessageStyles.menuVisible,
-        focused
-    ]);
+            focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden) }, actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children);
+    }, [actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children, chatMessageActionFlyoutTarget, chatMyMessageStyles.menu, chatMyMessageStyles.menuHidden, chatMyMessageStyles.menuVisible, focused]);
     const getContent = useCallback(() => {
-        return (React.createElement("div", null,
-            getMessageBubbleContent(message, strings, userId, inlineImageOptions,
-            /* @conditional-compile-remove(mention) */
-            mentionDisplayOptions, onRenderAttachmentDownloads, actionsForAttachment),
-            getActionsMenu()));
-    }, [
-        actionsForAttachment,
-        getActionsMenu,
-        inlineImageOptions,
-        /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
-        message,
-        onRenderAttachmentDownloads,
-        strings,
-        userId
-    ]);
-    const chatMessage = (React.createElement(React.Fragment, null,
+        return React.createElement("div", null,
+            getMessageBubbleContent(message, strings, userId, inlineImageOptions, onRenderAttachmentDownloads, actionsForAttachment),
+            getActionsMenu());
+    }, [actionsForAttachment, getActionsMenu, inlineImageOptions, message, onRenderAttachmentDownloads, strings, userId]);
+    const chatMessage = React.createElement(React.Fragment, null,
         React.createElement("div", { key: props.message.messageId },
             React.createElement(ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
                     // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-                    className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body,
-                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                    chatMessageCommonStyles.bodyWithPlaceholderImage,
-                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                    chatMyMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
-                        ? chatMessageCommonStyles.blocked
-                        : props.message.status === 'failed'
-                            ? chatMessageCommonStyles.failed
-                            : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,
-                    /* @conditional-compile-remove(file-sharing-acs) */
-                    hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined, mergeStyles(messageContainerStyle)),
+                    className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),
                     style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
                     ref: messageRef
                 }, root: {
                     className: chatMyMessageStyles.root,
-                    onBlur: (e) => {
+                    onBlur: e => {
                         // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
                         // with keyboard the focused element will be changed and there is no way to use `:focus` selector
                         if (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) {
@@ -171,7 +126,7 @@ const MessageBubble = (props) => {
                         props.onActionButtonClick(message, setMessageReadBy);
                     }
                 } }, getContent())),
-        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 }))));
+        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;
 };
 /** @private */

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n chatMessageDateStyle,\n chatMessageFailedTagStyle,\n chatMessageDateFailedStyle\n} from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } 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 { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n useChatMyMessageStyles,\n useChatMessageCommonStyles,\n chatMyMessageActionMenuClassName\n} from '../../styles/MessageThread.styles';\nimport {\n generateCustomizedTimestamp,\n generateDefaultTimestamp,\n getMessageBubbleContent,\n getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMyMessageComponentAsMessageBubbleProps = {\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 // Focus on the message body after the message is edited\n shouldFocusFluentMessageBody: boolean;\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 / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/* @private /\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): 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 inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onDisplayDateTimeString,\n onRenderAttachmentDownloads,\n actionsForAttachment,\n shouldFocusFluentMessageBody\n } = props;\n\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn\n ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n : '';\n\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\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 // `focused` state is used for show/hide actionMenu\n const [focused, setFocused] = React.useState<boolean>(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<HTMLDivElement \| 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 = chatMessageActionMenuProps({\n ariaLabel: strings.actionMenuMoreOptions ?? '',\n enabled: chatActionsEnabled,\n menuButtonRef: messageActionButtonRef,\n menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n onActionButtonClick: () => {\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n setChatMessageActionFlyoutTarget(messageActionButtonRef);\n }\n },\n theme\n });\n\n useEffect(() => {\n if (shouldFocusFluentMessageBody) {\n // set focus in the next render cycle to avoid focus being stolen by other components\n setTimeout(() => {\n messageRef.current?.focus();\n });\n }\n }, [shouldFocusFluentMessageBody]);\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 / @conditional-compile-remove(file-sharing-acs) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message as ChatMessage);\n }, [message]);\n\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }\n }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n const isBlockedMessage =\n false \|\| / @conditional-compile-remove(data-loss-prevention) / message.messageType === 'blocked';\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n\n const getActionsMenu = useCallback(() => {\n return (\n <div\n className={mergeClasses(\n // add the static class name to use it in useChatMyMessageStyles\n chatMyMessageActionMenuClassName,\n chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused \|\| chatMessageActionFlyoutTarget?.current\n ? chatMyMessageStyles.menuVisible\n : chatMyMessageStyles.menuHidden\n )}\n >\n {actionMenuProps?.children}\n </div>\n );\n }, [\n actionMenuProps?.children,\n chatMessageActionFlyoutTarget,\n chatMyMessageStyles.menu,\n chatMyMessageStyles.menuHidden,\n chatMyMessageStyles.menuVisible,\n focused\n ]);\n\n const getContent = useCallback(() => {\n return (\n <div>\n {getMessageBubbleContent(\n message,\n strings,\n userId,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onRenderAttachmentDownloads,\n actionsForAttachment\n )}\n {getActionsMenu()}\n </div>\n );\n }, [\n actionsForAttachment,\n getActionsMenu,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n onRenderAttachmentDownloads,\n strings,\n userId\n ]);\n\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n <ChatMyMessage\n attached={attached}\n key={props.message.messageId}\n body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(\n chatMessageCommonStyles.body,\n chatMyMessageStyles.body,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n chatMessageCommonStyles.bodyWithPlaceholderImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n chatMyMessageStyles.bodyWithPlaceholderImage,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n / @conditional-compile-remove(file-sharing-acs) /\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined,\n mergeStyles(messageContainerStyle)\n ),\n style: { ...createStyleFromV8Style(messageContainerStyle) },\n ref: messageRef\n }}\n root={{\n className: chatMyMessageStyles.root,\n onBlur: (e) => {\n // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n if (chatMessageActionFlyoutTarget?.current) {\n // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n return;\n }\n const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n setFocused(shouldPreserveFocusState);\n },\n onFocus: () => {\n // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n setFocused(true);\n }\n }}\n data-testid=\"chat-composite-message\"\n author={<Text className={chatMessageDateStyle(theme)}>{message.senderDisplayName}</Text>}\n timestamp={\n <Text\n className={\n props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme)\n }\n data-testid={ids.messageTimestamp}\n >\n {formattedTimestamp}\n </Text>\n }\n details={getMessageDetails()}\n onTouchStart={() => setWasInteractionByTouch(true)}\n onPointerDown={() => setWasInteractionByTouch(false)}\n onKeyDown={() => 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 {getContent()}\n </ChatMyMessage>\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 return chatMessage;\n};\n\n/* @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}
1	+ {"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageDateFailedStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles, chatMyMessageActionMenuClassName } from '../../styles/MessageThread.styles';\nimport { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';\ntype ChatMyMessageComponentAsMessageBubbleProps = {\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 // Focus on the message body after the message is edited\n shouldFocusFluentMessageBody: boolean;\n remoteParticipantsCount?: number;\n onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n id: string;\n displayName: string;\n }[]) => void) => 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 Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/* @private /\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\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 inlineImageOptions,\n onDisplayDateTimeString,\n onRenderAttachmentDownloads,\n actionsForAttachment,\n shouldFocusFluentMessageBody\n } = props;\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\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 // `focused` state is used for show/hide actionMenu\n const [focused, setFocused] = React.useState<boolean>(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<HTMLDivElement \| null>(null);\n const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<React.MutableRefObject<HTMLElement \| null> \| undefined>(undefined);\n const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;\n const [messageReadBy, setMessageReadBy] = useState<{\n id: string;\n displayName: string;\n }[]>([]);\n const actionMenuProps = chatMessageActionMenuProps({\n ariaLabel: strings.actionMenuMoreOptions ?? '',\n enabled: chatActionsEnabled,\n menuButtonRef: messageActionButtonRef,\n menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n onActionButtonClick: () => {\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n setChatMessageActionFlyoutTarget(messageActionButtonRef);\n }\n },\n theme\n });\n useEffect(() => {\n if (shouldFocusFluentMessageBody) {\n // set focus in the next render cycle to avoid focus being stolen by other components\n setTimeout(() => {\n messageRef.current?.focus();\n });\n }\n }, [shouldFocusFluentMessageBody]);\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 const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }\n }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n const isBlockedMessage = false;\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const getActionsMenu = useCallback(() => {\n return <div className={mergeClasses(\n // add the static class name to use it in useChatMyMessageStyles\n chatMyMessageActionMenuClassName, chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused \|\| chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden)}>\n {actionMenuProps?.children}\n </div>;\n }, [actionMenuProps?.children, chatMessageActionFlyoutTarget, chatMyMessageStyles.menu, chatMyMessageStyles.menuHidden, chatMyMessageStyles.menuVisible, focused]);\n const getContent = useCallback(() => {\n return <div>\n {getMessageBubbleContent(message, strings, userId, inlineImageOptions, onRenderAttachmentDownloads, actionsForAttachment)}\n {getActionsMenu()}\n </div>;\n }, [actionsForAttachment, getActionsMenu, inlineImageOptions, message, onRenderAttachmentDownloads, strings, userId]);\n const chatMessage = <>\n <div key={props.message.messageId}>\n <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),\n style: {\n ...createStyleFromV8Style(messageContainerStyle)\n },\n ref: messageRef\n }} root={{\n className: chatMyMessageStyles.root,\n onBlur: e => {\n // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n if (chatMessageActionFlyoutTarget?.current) {\n // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n return;\n }\n const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n setFocused(shouldPreserveFocusState);\n },\n onFocus: () => {\n // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n setFocused(true);\n }\n }} data-testid=\"chat-composite-message\" author={<Text className={chatMessageDateStyle(theme)}>{message.senderDisplayName}</Text>} timestamp={<Text className={props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme)} data-testid={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>} details={getMessageDetails()} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} 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 {getContent()}\n </ChatMyMessage>\n </div>\n {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n </>;\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js CHANGED Viewed

@@ -17,78 +17,25 @@ import { getFluentUIAttachedValue, removeFluentUIKeyboardNavigationStyles } from
  * @private
  */
 export const FluentChatMyMessageComponent = (props) => {
-    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick,
-    /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString, inlineImageOptions,
-    /* @conditional-compile-remove(mention) */
-    mentionOptions, userId, defaultStatusRenderer, statusToRender, actionsForAttachment, onRenderAttachmentDownloads,
-    /* @conditional-compile-remove(rich-text-editor) */
-    isRichTextEditorEnabled,
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onPaste,
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    inlineImagesWithProgress,
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onRemoveInlineImage,
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onInsertInlineImage } = props;
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, inlineImageOptions, userId, defaultStatusRenderer, statusToRender, actionsForAttachment, onRenderAttachmentDownloads } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
     // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
     const defaultChatMessageRenderer = useCallback((messageProps) => {
-        if (messageProps.message.messageType === 'chat' ||
-            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
-            return (React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { onRenderAttachmentDownloads: onRenderAttachmentDownloads, strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick,
-                /* @conditional-compile-remove(date-time-customization) */
-                onDisplayDateTimeString: onDisplayDateTimeString, inlineImageOptions: inlineImageOptions,
-                /* @conditional-compile-remove(mention) */
-                mentionOptions: mentionOptions, actionsForAttachment: actionsForAttachment,
-                /* @conditional-compile-remove(rich-text-editor) */
-                isRichTextEditorEnabled: isRichTextEditorEnabled,
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onPaste: onPaste,
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onRemoveInlineImage: onRemoveInlineImage,
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onInsertInlineImage: onInsertInlineImage,
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                inlineImagesWithProgress: inlineImagesWithProgress })));
+        if (messageProps.message.messageType === 'chat') {
+            return React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { onRenderAttachmentDownloads: onRenderAttachmentDownloads, strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, inlineImageOptions: inlineImageOptions, actionsForAttachment: actionsForAttachment }));
         }
         return React.createElement(React.Fragment, null);
-    }, [
-        onActionButtonClick,
-        onRenderAvatar,
-        participantCount,
-        shouldOverlapAvatarAndMessage,
-        showMessageStatus,
-        userId,
-        /* @conditional-compile-remove(date-time-customization) */
-        onDisplayDateTimeString,
-        inlineImageOptions,
-        /* @conditional-compile-remove(mention) */
-        mentionOptions,
-        onRenderAttachmentDownloads,
-        actionsForAttachment,
+    }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, inlineImageOptions, onRenderAttachmentDownloads, actionsForAttachment,
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        new Date().toDateString(),
-        /* @conditional-compile-remove(rich-text-editor) */
-        isRichTextEditorEnabled,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        onPaste,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        onRemoveInlineImage,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        onInsertInlineImage,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        inlineImagesWithProgress
-    ]);
+        new Date().toDateString()]);
     const messageRenderer = useCallback((messageProps) => {
-        return onRenderMessage === undefined
-            ? defaultChatMessageRenderer(Object.assign({}, messageProps))
-            : onRenderMessage(messageProps, defaultChatMessageRenderer);
+        return onRenderMessage === undefined ? defaultChatMessageRenderer(Object.assign({}, messageProps)) : onRenderMessage(messageProps, defaultChatMessageRenderer);
     }, [defaultChatMessageRenderer, onRenderMessage]);
     const messageStatusRenderer = useCallback((onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) => {
-        return showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: message.status })) : (defaultStatusRenderer(message, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0, message.status))) : (React.createElement("div", { className: mergeStyles(noMessageStatusStyle) }));
+        return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({
+            status: message.status
+        }) : defaultStatusRenderer(message, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0, message.status) : React.createElement("div", { className: mergeStyles(noMessageStatusStyle) });
     }, [message, statusToRender]);
     const attached = useMemo(() => {
         return getFluentUIAttachedValue(message.attached);
@@ -97,9 +44,7 @@ export const FluentChatMyMessageComponent = (props) => {
         return {
             // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
             className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)),
-            style: (styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) !== undefined
-                ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)
-                : {},
+            style: (styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) : {},
             role: 'none'
         };
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer]);
@@ -114,24 +59,14 @@ export const FluentChatMyMessageComponent = (props) => {
     }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage, setMessageContainerRef]);
     const myMessageStatusIcon = useMemo(() => {
         var _a;
-        return (React.createElement("div", { className: mergeStyles({ paddingLeft: '0.25rem' }, (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_a = message.mine) !== null && _a !== void 0 ? _a : false) : '') }, message.status
-            ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount)
-            : undefined));
-    }, [
-        defaultStatusRenderer,
-        message.mine,
-        message.status,
-        messageStatusRenderer,
-        onRenderMessageStatus,
-        participantCount,
-        readCount,
-        showMessageStatus,
-        styles
-    ]);
+        return React.createElement("div", { className: mergeStyles({
+                paddingLeft: '0.25rem'
+            }, (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_a = message.mine) !== null && _a !== void 0 ? _a : false) : '') }, message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined);
+    }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);
     // Fluent UI message components are used here as for default message renderer,
     // timestamp and author name should be shown but they aren't shown for custom renderer.
     // More investigations are needed to check if this can be simplified with states.
     // Status and avatar should be shown for both custom and default renderers.
-    return (React.createElement(FluentChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props))));
+    return React.createElement(FluentChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props)));
 };
 //# sourceMappingURL=FluentChatMyMessageComponent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport {\n getFluentUIAttachedValue,\n removeFluentUIKeyboardNavigationStyles\n} from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/\n The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n \n @private\n /\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n showMessageStatus,\n onRenderMessageStatus,\n participantCount,\n readCount,\n onActionButtonClick,\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionOptions,\n userId,\n defaultStatusRenderer,\n statusToRender,\n actionsForAttachment,\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(rich-text-editor) /\n isRichTextEditorEnabled,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback(\n (messageProps: MessageProps) => {\n if (\n messageProps.message.messageType === 'chat' \|\|\n / @conditional-compile-remove(data-loss-prevention) / messageProps.message.messageType === 'blocked'\n ) {\n return (\n <ChatMyMessageComponent\n {...messageProps}\n onRenderAttachmentDownloads={onRenderAttachmentDownloads}\n strings={messageProps.strings}\n message={messageProps.message}\n userId={userId}\n remoteParticipantsCount={participantCount ? participantCount - 1 : 0}\n shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n onRenderAvatar={onRenderAvatar}\n showMessageStatus={showMessageStatus}\n messageStatus={messageProps.message.status}\n onActionButtonClick={onActionButtonClick}\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString={onDisplayDateTimeString}\n inlineImageOptions={inlineImageOptions}\n / @conditional-compile-remove(mention) /\n mentionOptions={mentionOptions}\n actionsForAttachment={actionsForAttachment}\n / @conditional-compile-remove(rich-text-editor) /\n isRichTextEditorEnabled={isRichTextEditorEnabled}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage={onRemoveInlineImage}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={onInsertInlineImage}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress={inlineImagesWithProgress}\n />\n );\n }\n return <></>;\n },\n [\n onActionButtonClick,\n onRenderAvatar,\n participantCount,\n shouldOverlapAvatarAndMessage,\n showMessageStatus,\n userId,\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionOptions,\n onRenderAttachmentDownloads,\n actionsForAttachment,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n new Date().toDateString(),\n / @conditional-compile-remove(rich-text-editor) /\n isRichTextEditorEnabled,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress\n ]\n );\n\n const messageRenderer = useCallback(\n (messageProps: MessageProps) => {\n return onRenderMessage === undefined\n ? defaultChatMessageRenderer({ ...messageProps })\n : onRenderMessage(messageProps, defaultChatMessageRenderer);\n },\n [defaultChatMessageRenderer, onRenderMessage]\n );\n\n const messageStatusRenderer = useCallback(\n (\n onRenderMessageStatus:\n \| ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element \| null)\n \| 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 showMessageStatus?: boolean,\n participantCount?: number,\n readCount?: number\n ) => {\n return showMessageStatus && statusToRender ? (\n onRenderMessageStatus ? (\n onRenderMessageStatus({ status: message.status })\n ) : (\n defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status)\n )\n ) : (\n <div className={mergeStyles(noMessageStatusStyle)} />\n );\n },\n [message, statusToRender]\n );\n\n const attached = useMemo(() => {\n return getFluentUIAttachedValue(message.attached);\n }, [message.attached]);\n\n const myMessageRootProps = useMemo(() => {\n return {\n // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(\n chatMessageRenderStyles.rootMyMessage,\n chatMessageRenderStyles.rootCommon,\n mergeStyles(styles?.myChatItemMessageContainer)\n ),\n style:\n styles?.myChatItemMessageContainer !== undefined\n ? createStyleFromV8Style(styles?.myChatItemMessageContainer)\n : {},\n role: 'none'\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n\n const setMessageContainerRef = useCallback((node: HTMLDivElement \| null) => {\n removeFluentUIKeyboardNavigationStyles(node);\n }, []);\n\n const myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),\n ref: setMessageContainerRef\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage, setMessageContainerRef]);\n\n const myMessageStatusIcon = useMemo(() => {\n return (\n <div\n className={mergeStyles(\n { paddingLeft: '0.25rem' },\n styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : ''\n )}\n >\n {message.status\n ? messageStatusRenderer(\n onRenderMessageStatus,\n defaultStatusRenderer,\n showMessageStatus,\n participantCount,\n readCount\n )\n : undefined}\n </div>\n );\n }, [\n defaultStatusRenderer,\n message.mine,\n message.status,\n messageStatusRenderer,\n onRenderMessageStatus,\n participantCount,\n readCount,\n showMessageStatus,\n styles\n ]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Status and avatar should be shown for both custom and default renderers.\n return (\n <FluentChatMyMessage\n attached={attached}\n root={myMessageRootProps}\n body={myMessageBodyProps}\n statusIcon={myMessageStatusIcon}\n >\n {messageRenderer({ ...props })}\n </FluentChatMyMessage>\n );\n};\n"]}
1	+ {"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue, removeFluentUIKeyboardNavigationStyles } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/*\n The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n \n @private\n */\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n showMessageStatus,\n onRenderMessageStatus,\n participantCount,\n readCount,\n onActionButtonClick,\n inlineImageOptions,\n userId,\n defaultStatusRenderer,\n statusToRender,\n actionsForAttachment,\n onRenderAttachmentDownloads\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n if (messageProps.message.messageType === 'chat') {\n return <ChatMyMessageComponent {...messageProps} onRenderAttachmentDownloads={onRenderAttachmentDownloads} strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} inlineImageOptions={inlineImageOptions} actionsForAttachment={actionsForAttachment} />;\n }\n return <></>;\n }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, inlineImageOptions, onRenderAttachmentDownloads, actionsForAttachment,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n new Date().toDateString()]);\n const messageRenderer = useCallback((messageProps: MessageProps) => {\n return onRenderMessage === undefined ? defaultChatMessageRenderer({\n ...messageProps\n }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n }, [defaultChatMessageRenderer, onRenderMessage]);\n const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element \| null) \| undefined, defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n status: message.status\n }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n }, [message, statusToRender]);\n const attached = useMemo(() => {\n return getFluentUIAttachedValue(message.attached);\n }, [message.attached]);\n const myMessageRootProps = useMemo(() => {\n return {\n // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n role: 'none'\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n const setMessageContainerRef = useCallback((node: HTMLDivElement \| null) => {\n removeFluentUIKeyboardNavigationStyles(node);\n }, []);\n const myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),\n ref: setMessageContainerRef\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage, setMessageContainerRef]);\n const myMessageStatusIcon = useMemo(() => {\n return <div className={mergeStyles({\n paddingLeft: '0.25rem'\n }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n </div>;\n }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Status and avatar should be shown for both custom and default renderers.\n return <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMyMessage>;\n};"]}