@azure/communication-react 1.19.0-beta.1 → 1.19.0-beta.2

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js

@@ -6,7 +6,6 @@ import { mergeClasses } from '@fluentui/react-components';
 import { _formatString } from "../../../../../acs-ui-common/src";
 import { useTheme } from '../../../theming';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-/* @conditional-compile-remove(file-sharing-acs) */
 import { useReducer } from 'react';
 import { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';
 import { InputBoxButton } from '../../InputBoxButton';
@@ -14,53 +13,33 @@ import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
 import { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';
 import { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
 import { MAXIMUM_LENGTH_OF_MESSAGE, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { hasIncompleteAttachmentUploads, removeBrokenImageContentAndClearImageSizeStyles, getContentWithUpdatedInlineImagesInfo, isMessageTooLong } from '../../utils/SendBoxUtils';
 import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
-/* @conditional-compile-remove(file-sharing-acs) */
 import { attachmentMetadataReducer, getMessageWithAttachmentMetadata, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 import { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';
 import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';
 import { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';
 import { useLocale } from '../../../localization';
-/* @conditional-compile-remove(file-sharing-acs) */
 import { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';
-/* @conditional-compile-remove(file-sharing-acs) */
 import { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { SendBoxErrorBarType } from '../../SendBoxErrorBar';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';
 /**
  * @private
  */
 export const ChatMessageComponentAsRichTextEditBox = (props) => {
     var _a;
-    const { onCancel, onSubmit, strings, message, 
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onPaste, 
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onInsertInlineImage, 
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    inlineImagesWithProgress, 
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onRemoveInlineImage } = props;
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const { onCancel, onSubmit, strings, message, onPaste, onInsertInlineImage, inlineImagesWithProgress, onRemoveInlineImage } = props;
     const [initialInlineImages, setInitialInlineImages] = useState([]);
     const initialContent = useMemo(() => {
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         const content = message.content;
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         setInitialInlineImages(getPreviousInlineImages(content));
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
         // The broken image element is a div element with all the attributes of the original image element.
         // We need to convert it to a img element so the Rooster knows how to render it.
         // And we need to copy over all the attributes such as id, width, etc.
         // which is needed for sending the message with the images correctly.
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         document.querySelectorAll('.broken-image-wrapper').forEach(brokenImage => {
             var _a;
             const imageElement = document.createElement('img');
@@ -73,23 +52,18 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
             imageElement.style.height = '3rem';
             (_a = brokenImage.parentElement) === null || _a === void 0 ? void 0 : _a.replaceChild(imageElement, brokenImage);
         });
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         return document.body.innerHTML;
         return message.content;
     }, [message]);
     const [textValue, setTextValue] = useState(initialContent || '');
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);
-    /* @conditional-compile-remove(file-sharing-acs) */
     const [attachmentMetadata, handleAttachmentAction] = useReducer(attachmentMetadataReducer, (_a = getMessageWithAttachmentMetadata(message)) !== null && _a !== void 0 ? _a : []);
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const editTextFieldRef = React.useRef(null);
     const theme = useTheme();
     const messageState = useMemo(() => {
-        return getMessageState(textValue, /* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
-    }, [/* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata, textValue]);
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        return getMessageState(textValue, attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
+    }, [attachmentMetadata, textValue]);
     const imageUploadErrorMessage = useMemo(() => {
         var _a, _b;
         return (_b = (_a = inlineImagesWithProgress === null || inlineImagesWithProgress === void 0 ? void 0 : inlineImagesWithProgress.filter(image => image.error).pop()) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message;
@@ -106,10 +80,10 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
         (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
     const textTooLongMessage = useMemo(() => {
-        return messageState === 'too long' || /* @conditional-compile-remove(rich-text-editor-image-upload) */ contentValueWithInlineImagesOverflow ? _formatString(strings.editBoxTextLimit, {
+        return messageState === 'too long' || contentValueWithInlineImagesOverflow ? _formatString(strings.editBoxTextLimit, {
             limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`
         }) : undefined;
-    }, [messageState, strings.editBoxTextLimit, /* @conditional-compile-remove(rich-text-editor-image-upload) */ contentValueWithInlineImagesOverflow]);
+    }, [messageState, strings.editBoxTextLimit, contentValueWithInlineImagesOverflow]);
     const iconClassName = useCallback((isHover) => {
         const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
         return mergeStyles(richTextEditBoxActionButtonIcon, {
@@ -122,7 +96,6 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
     const onRenderThemedSubmitIcon = useCallback((isHover) => {
         return onRenderSubmitIcon(iconClassName(isHover));
     }, [iconClassName]);
-    /* @conditional-compile-remove(file-sharing-acs) */
     const hasMultipleAttachments = useMemo(() => {
         return doesMessageContainMultipleAttachments(message);
     }, [message]);
@@ -130,7 +103,6 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
         if (!submitEnabled) {
             return;
         }
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {
             const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(textValue, inlineImagesWithProgress);
             const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);
@@ -143,9 +115,7 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
             }
         }
         // Don't send message until all attachments have been uploaded successfully
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         setAttachmentUploadsPendingError(undefined);
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         if (hasIncompleteAttachmentUploads(inlineImagesWithProgress)) {
             setAttachmentUploadsPendingError({
                 message: strings.imageUploadsPendingError,
@@ -155,23 +125,17 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
             return;
         }
         let content = textValue;
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         content = removeBrokenImageContentAndClearImageSizeStyles(content);
         let initInlineImages = [];
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         initInlineImages = initialInlineImages !== null && initialInlineImages !== void 0 ? initialInlineImages : [];
         modifyInlineImagesInContentString(content, initInlineImages, (content) => {
             // it's very important to pass an empty attachment here
             // so when user removes all attachments, UI can reflect it instantly
             // if you set it to undefined, the attachments pre-edited would still be there
             // until edit message event is received
-            onSubmit(content, /* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata || []);
+            onSubmit(content, attachmentMetadata || []);
         });
-    }, [submitEnabled, /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        inlineImagesWithProgress, /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        initialInlineImages, textValue, /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        strings.imageUploadsPendingError, onSubmit, /* @conditional-compile-remove(file-sharing-acs) */
-        attachmentMetadata]);
+    }, [submitEnabled, inlineImagesWithProgress, initialInlineImages, textValue, strings.imageUploadsPendingError, onSubmit, attachmentMetadata]);
     const actionButtons = useMemo(() => {
         return React.createElement(Stack, { horizontal: true },
             React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
@@ -183,11 +147,9 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
                 }, id: 'submitIconWrapper', "data-testId": strings.editBoxSubmitButton }));
     }, [message.messageId, onCancel, onRenderThemedCancelIcon, onRenderThemedSubmitIcon, strings.editBoxCancelButton, strings.editBoxSubmitButton, onSubmitHandler]);
     const richTextLocaleStrings = useMemo(() => {
-        /* @conditional-compile-remove(rich-text-editor) */
         return Object.assign(Object.assign({}, locale.richTextSendBox), strings);
         return locale.sendBox;
-    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, /* @conditional-compile-remove(rich-text-editor) */ strings, locale.sendBox]);
-    /* @conditional-compile-remove(file-sharing-acs) */
+    }, [locale.richTextSendBox, strings, locale.sendBox]);
     const onCancelAttachmentUpload = useCallback((attachmentId) => {
         // edit box only capable of removing attachments
         // we need to expand attachment actions
@@ -197,38 +159,31 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
             id: attachmentId
         });
     }, []);
-    /* @conditional-compile-remove(file-sharing-acs) */
     const onRenderAttachmentUploads = useCallback(() => {
         return React.createElement(Stack, { className: attachmentUploadCardsStyles },
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
                 React.createElement(_AttachmentUploadCards, { attachments: attachmentMetadata, onCancelAttachmentUpload: onCancelAttachmentUpload })));
     }, [attachmentMetadata, onCancelAttachmentUpload, theme]);
     const onChangeHandler = useCallback((content, removedInlineImages) => {
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         removedInlineImages === null || removedInlineImages === void 0 ? void 0 : removedInlineImages.forEach((removedInlineImage) => {
             onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);
         });
         setText(content);
-    }, [setText, /* @conditional-compile-remove(rich-text-editor-image-upload) */ onRemoveInlineImage, /* @conditional-compile-remove(rich-text-editor-image-upload) */ message.messageId]);
+    }, [setText, onRemoveInlineImage, message.messageId]);
     const getContent = () => {
         return React.createElement(Stack, { className: mergeStyles(editBoxWidthStyles) },
-            React.createElement(RichTextSendBoxErrors, { textTooLongMessage: textTooLongMessage, systemMessage: message.failureReason, 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */ attachmentUploadsPendingError: attachmentUploadsPendingError, 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */ attachmentProgressError: imageUploadErrorMessage ? {
+            React.createElement(RichTextSendBoxErrors, { textTooLongMessage: textTooLongMessage, systemMessage: message.failureReason, attachmentUploadsPendingError: attachmentUploadsPendingError, attachmentProgressError: imageUploadErrorMessage ? {
                     message: imageUploadErrorMessage,
                     timestamp: Date.now(),
                     errorBarType: SendBoxErrorBarType.error
                 } : undefined }),
-            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: onChangeHandler, editorComponentRef: editTextFieldRef, initialContent: initialContent, strings: richTextLocaleStrings, disabled: false, actionComponents: actionButtons, richTextEditorStyleProps: editBoxRichTextEditorStyle, isHorizontalLayoutDisabled: true, 
-                /* @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads: onRenderAttachmentUploads, 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: onPaste, 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */ onInsertInlineImage: onInsertInlineImage ? (imageAttributes) => {
+            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: onChangeHandler, editorComponentRef: editTextFieldRef, initialContent: initialContent, strings: richTextLocaleStrings, disabled: false, actionComponents: actionButtons, richTextEditorStyleProps: editBoxRichTextEditorStyle, isHorizontalLayoutDisabled: true, onRenderAttachmentUploads: onRenderAttachmentUploads, onPaste: onPaste, onInsertInlineImage: onInsertInlineImage ? (imageAttributes) => {
                     onInsertInlineImage(imageAttributes, message.messageId);
                 } : undefined }));
     };
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     return React.createElement(ChatMyMessage, { attached: attached, root: {
-            className: mergeClasses(chatMyMessageStyles.root, /* @conditional-compile-remove(file-sharing-acs) */ hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined)
+            className: mergeClasses(chatMyMessageStyles.root, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined)
         }, body: {
             className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
         } }, getContent());

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,yCAAgC;AAGxD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,mDAAmD;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAC;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAGhF,OAAO,EAAE,yCAAyC,EAAE,MAAM,0CAA0C,CAAC;AACrG,OAAO,EAAE,yBAAyB,EAAE,iCAAiC,EAAE,MAAM,0BAA0B,CAAC;AACxG,gEAAgE;AAChE,OAAO,EAAE,8BAA8B,EAAE,+CAA+C,EAAE,qCAAqC,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACpL,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACzH,mDAAmD;AACnD,OAAO,EAAE,yBAAyB,EAAE,gCAAgC,EAAE,qCAAqC,EAAE,MAAM,gDAAgD,CAAC;AAEpK,OAAO,EAAE,yBAAyB,EAAE,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAC5G,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,mDAAmD;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,mDAAmD;AACnD,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,gEAAgE;AAChE,OAAO,EAAwB,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAClF,gEAAgE;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,gEAAgE;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAqB1E;;GAEG;AACH,MAAM,CAAC,MAAM,qCAAqC,GAAG,CAAC,KAAiD,EAAe,EAAE;;IACtH,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO;IACP,gEAAgE;IAChE,OAAO;IACP,gEAAgE;IAChE,mBAAmB;IACnB,gEAAgE;IAChE,wBAAwB;IACxB,gEAAgE;IAChE,mBAAmB,EACpB,GAAG,KAAK,CAAC;IAEV,gEAAgE;IAChE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAA2B,EAAE,CAAC,CAAC;IAC7F,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,gEAAgE;QAChE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAChC,gEAAgE;QAChE,sBAAsB,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC;QACzD,gEAAgE;QAChE,MAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,WAAW,CAAC,CAAC;QAC7E,mGAAmG;QACnG,gFAAgF;QAChF,sEAAsE;QACtE,qEAAqE;QACrE,gEAAgE;QAChE,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;;YACvE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACnD,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC;YAC1C,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;gBACnC,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;YAC7D,CAAC;YACD,YAAY,CAAC,GAAG,GAAG,qBAAqB,CAAC;YACzC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAClC,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACnC,MAAA,WAAW,CAAC,aAAa,0CAAE,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QACrE,CAAC,CAAC,CAAC;QACH,gEAAgE;QAChE,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;QAC/B,OAAO,OAAO,CAAC,OAAO,CAAC;IACzB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,cAAc,IAAI,EAAE,CAAC,CAAC;IACzE,gEAAgE;IAChE,MAAM,CAAC,oCAAoC,EAAE,uCAAuC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExG,mDAAmD;IACnD,MAAM,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,GAAG,UAAU,CAAC,yBAAyB,EAAE,MAAA,gCAAgC,CAAC,OAAO,CAAC,mCAAI,EAAE,CAAC,CAAC;IAE5I,gEAAgE;IAChE,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IAChI,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAA6B,IAAI,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO,eAAe,CAAC,SAAS,EAAE,mDAAmD,CAAA,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,EAAE,CAAC,CAAC;IACjH,CAAC,EAAE,CAAC,mDAAmD,CAAA,kBAAkB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvF,gEAAgE;IAChE,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC3C,OAAO,MAAA,MAAA,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK,0CAAE,OAAO,CAAC;IACtF,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAC/B,MAAM,aAAa,GAAG,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,mBAAmB,GAAG,yCAAyC,EAAE,CAAC;IACxE,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IACrD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAiB,EAAQ,EAAE;QACtD,YAAY,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO,YAAY,KAAK,UAAU,IAAI,gEAAgE,CAAA,oCAAoC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,EAAE;YACnL,WAAW,EAAE,GAAG,yBAAyB,EAAE;SAC5C,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACjB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,EAAE,gEAAgE,CAAA,oCAAoC,CAAC,CAAC,CAAC;IACnJ,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE;QACrD,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAC9E,OAAO,WAAW,CAAC,+BAA+B,EAAE;YAClD,KAAK;SACN,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC3D,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE;QAChE,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE;QAChE,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,mDAAmD;IACnD,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,qCAAqC,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,eAAe,GAAG,WAAW,CAAC,GAAS,EAAE;QAC7C,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,gEAAgE;QAChE,IAAI,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpE,MAAM,kCAAkC,GAAG,qCAAqC,CAAC,SAAS,EAAE,wBAAwB,CAAC,CAAC;YACtH,MAAM,cAAc,GAAG,gBAAgB,CAAC,kCAAkC,CAAC,MAAM,CAAC,CAAC;YACnF,0EAA0E;YAC1E,uCAAuC,CAAC,cAAc,CAAC,CAAC;YACxD,yFAAyF;YACzF,mGAAmG;YACnG,IAAI,cAAc,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;QACH,CAAC;QAED,2EAA2E;QAC3E,gEAAgE;QAChE,gCAAgC,CAAC,SAAS,CAAC,CAAC;QAE5C,gEAAgE;QAChE,IAAI,8BAA8B,CAAC,wBAAwB,CAAC,EAAE,CAAC;YAC7D,gCAAgC,CAAC;gBAC/B,OAAO,EAAE,OAAO,CAAC,wBAAwB;gBACzC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,YAAY,EAAE,mBAAmB,CAAC,IAAI;aACvC,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QACD,IAAI,OAAO,GAAG,SAAS,CAAC;QACxB,gEAAgE;QAChE,OAAO,GAAG,+CAA+C,CAAC,OAAO,CAAC,CAAC;QACnE,IAAI,gBAAgB,GAA6B,EAAE,CAAC;QACpD,gEAAgE;QAChE,gBAAgB,GAAG,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE,CAAC;QAC7C,iCAAiC,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,OAAe,EAAE,EAAE;YAC/E,uDAAuD;YACvD,oEAAoE;YACpE,8EAA8E;YAC9E,uCAAuC;YACvC,QAAQ,CAAC,OAAO,EAAE,mDAAmD,CAAA,kBAAkB,IAAI,EAAE,CAAC,CAAC;QACjG,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,gEAAgE;QACnF,wBAAwB,EAAE,gEAAgE;QAC1F,mBAAmB,EAAE,SAAS,EAAE,gEAAgE;QAChG,OAAO,CAAC,wBAAwB,EAAE,QAAQ,EAAE,mDAAmD;QAC/F,kBAAkB,CAAC,CAAC,CAAC;IACrB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,oBAAC,KAAK,IAAC,UAAU;YACpB,oBAAC,cAAc,IAAC,SAAS,EAAE,0BAA0B,EAAE,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAAE,YAAY,EAAE,wBAAwB,EAAE,OAAO,EAAE,GAAG,EAAE;oBAClM,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBAC1C,CAAC,EAAE,EAAE,EAAE,oBAAoB,iBAAe,OAAO,CAAC,mBAAmB,GAAI;YACvE,oBAAC,cAAc,IAAC,SAAS,EAAE,0BAA0B,EAAE,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAAE,YAAY,EAAE,wBAAwB,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;oBACjM,eAAe,EAAE,CAAC;oBAClB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC,EAAE,EAAE,EAAE,mBAAmB,iBAAe,OAAO,CAAC,mBAAmB,GAAI,CAChE,CAAC;IACb,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,OAAO,CAAC,mBAAmB,EAAE,OAAO,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IACjK,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,mDAAmD;QACnD,uCACK,MAAM,CAAC,eAAe,GACtB,OAAO,EACV;QACF,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC,EAAE,CAAC,mDAAmD,CAAA,MAAM,CAAC,eAAe,EAAE,mDAAmD,CAAA,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAE5J,mDAAmD;IACnD,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,YAAoB,EAAE,EAAE;QACpE,gDAAgD;QAChD,uCAAuC;QACvC,8CAA8C;QAC9C,sBAAsB,CAAC;YACrB,IAAI,EAAE,QAAQ;YACd,EAAE,EAAE,YAAY;SACjB,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,mDAAmD;IACnD,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAG,EAAE;QACjD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,2BAA2B;YAChD,oBAAC,qBAAqB,IAAC,OAAO,EAAE,KAAK;gBACnC,oBAAC,sBAAsB,IAAC,WAAW,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,wBAAwB,GAAI,CACzF,CAClB,CAAC;IACb,CAAC,EAAE,CAAC,kBAAkB,EAAE,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,mBAA8C,EAAE,EAAE;QAClH,gEAAgE;QAChE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,CAAC,kBAA0C,EAAE,EAAE;YAC1E,mBAAmB,IAAI,mBAAmB,CAAC,kBAAkB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;QACpF,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,OAAO,EAAE,gEAAgE,CAAA,mBAAmB,EAAE,gEAAgE,CAAA,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IACtL,MAAM,UAAU,GAAG,GAAgB,EAAE;QACnC,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;YACpD,oBAAC,qBAAqB,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa;gBACrG,gEAAgE,CAAC,6BAA6B,EAAE,6BAA6B;gBAC7H,gEAAgE,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAC,CAAC;oBAClH,OAAO,EAAE,uBAAuB;oBAChC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;oBACrB,YAAY,EAAE,mBAAmB,CAAC,KAAK;iBACxC,CAAC,CAAC,CAAC,SAAS,GAAI;YACf,oBAAC,yBAAyB,IAAC,eAAe,EAAE,OAAO,CAAC,sBAAsB,EAAE,QAAQ,EAAE,eAAe,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,wBAAwB,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,IAAI;gBACvV,mDAAmD,CAAC,yBAAyB,EAAE,yBAAyB;gBACxG,gEAAgE,CAAC,OAAO,EAAE,OAAO;gBACjF,gEAAgE,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,eAAuC,EAAE,EAAE;oBACtJ,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;gBAC1D,CAAC,CAAC,CAAC,CAAC,SAAS,GAAI,CACT,CAAC;IACb,CAAC,CAAC;IACF,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,OAAO,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9C,SAAS,EAAE,YAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,mDAAmD,CACrG,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC,CAAC,SAAS,CAAC;SACvF,EAAE,IAAI,EAAE;YACP,SAAS,EAAE,YAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;SACrH,IACI,UAAU,EAAE,CACC,CAAC;AACrB,CAAC,CAAC;AACF,eAAe,qCAAqC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { hasIncompleteAttachmentUploads, removeBrokenImageContentAndClearImageSizeStyles, getContentWithUpdatedInlineImagesInfo, isMessageTooLong } from '../../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { attachmentMetadataReducer, getMessageWithAttachmentMetadata, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { SendBoxErrorBarError, SendBoxErrorBarType } from '../../SendBoxErrorBar';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';\n\n/** @private */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, /* @conditional-compile-remove(file-sharing-acs) */\n  attachmentMetadata?: AttachmentMetadata[]) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: {\n    content: DocumentFragment;\n  }) => 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 ChatMessageComponentAsRichTextEditBox = (props: ChatMessageComponentAsRichTextEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onInsertInlineImage,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    inlineImagesWithProgress,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onRemoveInlineImage\n  } = props;\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const [initialInlineImages, setInitialInlineImages] = useState<Record<string, string>[]>([]);\n  const initialContent = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    const content = message.content;\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    setInitialInlineImages(getPreviousInlineImages(content));\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n    // The broken image element is a div element with all the attributes of the original image element.\n    // We need to convert it to a img element so the Rooster knows how to render it.\n    // And we need to copy over all the attributes such as id, width, etc.\n    // which is needed for sending the message with the images correctly.\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    document.querySelectorAll('.broken-image-wrapper').forEach(brokenImage => {\n      const imageElement = document.createElement('img');\n      const attributes = brokenImage.attributes;\n      for (const attribute of attributes) {\n        imageElement.setAttribute(attribute.name, attribute.value);\n      }\n      imageElement.src = BROKEN_IMAGE_SVG_DATA;\n      imageElement.style.width = '3rem';\n      imageElement.style.height = '3rem';\n      brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n    });\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    return document.body.innerHTML;\n    return message.content;\n  }, [message]);\n  const [textValue, setTextValue] = useState<string>(initialContent || '');\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [attachmentMetadata, handleAttachmentAction] = useReducer(attachmentMetadataReducer, getMessageWithAttachmentMetadata(message) ?? []);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n  const theme = useTheme();\n  const messageState = useMemo(() => {\n    return getMessageState(textValue, /* @conditional-compile-remove(file-sharing-acs) */attachmentMetadata ?? []);\n  }, [/* @conditional-compile-remove(file-sharing-acs) */attachmentMetadata, textValue]);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const imageUploadErrorMessage = useMemo(() => {\n    return inlineImagesWithProgress?.filter(image => image.error).pop()?.error?.message;\n  }, [inlineImagesWithProgress]);\n  const submitEnabled = messageState === 'OK';\n  const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const locale = useLocale().strings;\n  const setText = useCallback((newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  }, []);\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const textTooLongMessage = useMemo(() => {\n    return messageState === 'too long' || /* @conditional-compile-remove(rich-text-editor-image-upload) */contentValueWithInlineImagesOverflow ? _formatString(strings.editBoxTextLimit, {\n      limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n    }) : undefined;\n  }, [messageState, strings.editBoxTextLimit, /* @conditional-compile-remove(rich-text-editor-image-upload) */contentValueWithInlineImagesOverflow]);\n  const iconClassName = useCallback((isHover: boolean) => {\n    const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n    return mergeStyles(richTextEditBoxActionButtonIcon, {\n      color\n    });\n  }, [theme.palette.accent, theme.palette.neutralSecondary]);\n  const onRenderThemedCancelIcon = useCallback((isHover: boolean) => {\n    return onRenderCancelIcon(iconClassName(isHover));\n  }, [iconClassName]);\n  const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => {\n    return onRenderSubmitIcon(iconClassName(isHover));\n  }, [iconClassName]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const hasMultipleAttachments = useMemo(() => {\n    return doesMessageContainMultipleAttachments(message);\n  }, [message]);\n  const onSubmitHandler = useCallback((): void => {\n    if (!submitEnabled) {\n      return;\n    }\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n      const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(textValue, inlineImagesWithProgress);\n      const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n      // Set contentValueWithInlineImagesOverflow state to display the error bar\n      setContentValueWithInlineImagesOverflow(messageTooLong);\n      // The change from the setContentValueOverflow in the previous line will not kick in yet.\n      // We need to rely on the local value of messageTooLong to return early if the message is too long.\n      if (messageTooLong) {\n        return;\n      }\n    }\n\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    if (hasIncompleteAttachmentUploads(inlineImagesWithProgress)) {\n      setAttachmentUploadsPendingError({\n        message: strings.imageUploadsPendingError,\n        timestamp: Date.now(),\n        errorBarType: SendBoxErrorBarType.info\n      });\n      return;\n    }\n    let content = textValue;\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    content = removeBrokenImageContentAndClearImageSizeStyles(content);\n    let initInlineImages: Record<string, string>[] = [];\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    initInlineImages = initialInlineImages ?? [];\n    modifyInlineImagesInContentString(content, initInlineImages, (content: string) => {\n      // it's very important to pass an empty attachment here\n      // so when user removes all attachments, UI can reflect it instantly\n      // if you set it to undefined, the attachments pre-edited would still be there\n      // until edit message event is received\n      onSubmit(content, /* @conditional-compile-remove(file-sharing-acs) */attachmentMetadata || []);\n    });\n  }, [submitEnabled, /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  inlineImagesWithProgress, /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  initialInlineImages, textValue, /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  strings.imageUploadsPendingError, onSubmit, /* @conditional-compile-remove(file-sharing-acs) */\n  attachmentMetadata]);\n  const actionButtons = useMemo(() => {\n    return <Stack horizontal>\n        <InputBoxButton className={richTextActionButtonsStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n        onCancel && onCancel(message.messageId);\n      }} id={'dismissIconWrapper'} data-testId={strings.editBoxCancelButton} />\n        <InputBoxButton className={richTextActionButtonsStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n        onSubmitHandler();\n        e.stopPropagation();\n      }} id={'submitIconWrapper'} data-testId={strings.editBoxSubmitButton} />\n      </Stack>;\n  }, [message.messageId, onCancel, onRenderThemedCancelIcon, onRenderThemedSubmitIcon, strings.editBoxCancelButton, strings.editBoxSubmitButton, onSubmitHandler]);\n  const richTextLocaleStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return {\n      ...locale.richTextSendBox,\n      ...strings\n    };\n    return locale.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */locale.richTextSendBox, /* @conditional-compile-remove(rich-text-editor) */strings, locale.sendBox]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n    // edit box only capable of removing attachments\n    // we need to expand attachment actions\n    // if we want to support more actions e.g. add\n    handleAttachmentAction({\n      type: 'remove',\n      id: attachmentId\n    });\n  }, []);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards attachments={attachmentMetadata} onCancelAttachmentUpload={onCancelAttachmentUpload} />\n        </FluentV9ThemeProvider>\n      </Stack>;\n  }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n  const onChangeHandler = useCallback((content: string | undefined, removedInlineImages?: Record<string, string>[]) => {\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    removedInlineImages?.forEach((removedInlineImage: Record<string, string>) => {\n      onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);\n    });\n    setText(content);\n  }, [setText, /* @conditional-compile-remove(rich-text-editor-image-upload) */onRemoveInlineImage, /* @conditional-compile-remove(rich-text-editor-image-upload) */message.messageId]);\n  const getContent = (): JSX.Element => {\n    return <Stack className={mergeStyles(editBoxWidthStyles)}>\n        <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason}\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ attachmentUploadsPendingError={attachmentUploadsPendingError}\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ attachmentProgressError={imageUploadErrorMessage ? {\n        message: imageUploadErrorMessage,\n        timestamp: Date.now(),\n        errorBarType: SendBoxErrorBarType.error\n      } : undefined} />\n        <RichTextInputBoxComponent placeholderText={strings.editBoxPlaceholderText} onChange={onChangeHandler} editorComponentRef={editTextFieldRef} initialContent={initialContent} strings={richTextLocaleStrings} disabled={false} actionComponents={actionButtons} richTextEditorStyleProps={editBoxRichTextEditorStyle} isHorizontalLayoutDisabled={true}\n      /* @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads={onRenderAttachmentUploads}\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste={onPaste}\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */ onInsertInlineImage={onInsertInlineImage ? (imageAttributes: Record<string, string>) => {\n        onInsertInlineImage(imageAttributes, message.messageId);\n      } : undefined} />\n      </Stack>;\n  };\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return <ChatMyMessage attached={attached} root={{\n    className: mergeClasses(chatMyMessageStyles.root, /* @conditional-compile-remove(file-sharing-acs) */\n    hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined)\n  }} body={{\n    className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)\n  }}>\n      {getContent()}\n    </ChatMyMessage>;\n};\nexport default ChatMessageComponentAsRichTextEditBox;"]}
+{"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';\nimport { hasIncompleteAttachmentUploads, removeBrokenImageContentAndClearImageSizeStyles, getContentWithUpdatedInlineImagesInfo, isMessageTooLong } from '../../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { attachmentMetadataReducer, getMessageWithAttachmentMetadata, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\nimport { SendBoxErrorBarError, SendBoxErrorBarType } from '../../SendBoxErrorBar';\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\nimport { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';\n\n/** @private */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, attachmentMetadata?: AttachmentMetadata[]) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  onPaste?: (event: {\n    content: DocumentFragment;\n  }) => void;\n  onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsRichTextEditBox = (props: ChatMessageComponentAsRichTextEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message,\n    onPaste,\n    onInsertInlineImage,\n    inlineImagesWithProgress,\n    onRemoveInlineImage\n  } = props;\n  const [initialInlineImages, setInitialInlineImages] = useState<Record<string, string>[]>([]);\n  const initialContent = useMemo(() => {\n    const content = message.content;\n    setInitialInlineImages(getPreviousInlineImages(content));\n    const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n    // The broken image element is a div element with all the attributes of the original image element.\n    // We need to convert it to a img element so the Rooster knows how to render it.\n    // And we need to copy over all the attributes such as id, width, etc.\n    // which is needed for sending the message with the images correctly.\n    document.querySelectorAll('.broken-image-wrapper').forEach(brokenImage => {\n      const imageElement = document.createElement('img');\n      const attributes = brokenImage.attributes;\n      for (const attribute of attributes) {\n        imageElement.setAttribute(attribute.name, attribute.value);\n      }\n      imageElement.src = BROKEN_IMAGE_SVG_DATA;\n      imageElement.style.width = '3rem';\n      imageElement.style.height = '3rem';\n      brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n    });\n    return document.body.innerHTML;\n    return message.content;\n  }, [message]);\n  const [textValue, setTextValue] = useState<string>(initialContent || '');\n  const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);\n  const [attachmentMetadata, handleAttachmentAction] = useReducer(attachmentMetadataReducer, getMessageWithAttachmentMetadata(message) ?? []);\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n  const theme = useTheme();\n  const messageState = useMemo(() => {\n    return getMessageState(textValue, attachmentMetadata ?? []);\n  }, [attachmentMetadata, textValue]);\n  const imageUploadErrorMessage = useMemo(() => {\n    return inlineImagesWithProgress?.filter(image => image.error).pop()?.error?.message;\n  }, [inlineImagesWithProgress]);\n  const submitEnabled = messageState === 'OK';\n  const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const locale = useLocale().strings;\n  const setText = useCallback((newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  }, []);\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const textTooLongMessage = useMemo(() => {\n    return messageState === 'too long' || contentValueWithInlineImagesOverflow ? _formatString(strings.editBoxTextLimit, {\n      limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n    }) : undefined;\n  }, [messageState, strings.editBoxTextLimit, contentValueWithInlineImagesOverflow]);\n  const iconClassName = useCallback((isHover: boolean) => {\n    const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n    return mergeStyles(richTextEditBoxActionButtonIcon, {\n      color\n    });\n  }, [theme.palette.accent, theme.palette.neutralSecondary]);\n  const onRenderThemedCancelIcon = useCallback((isHover: boolean) => {\n    return onRenderCancelIcon(iconClassName(isHover));\n  }, [iconClassName]);\n  const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => {\n    return onRenderSubmitIcon(iconClassName(isHover));\n  }, [iconClassName]);\n  const hasMultipleAttachments = useMemo(() => {\n    return doesMessageContainMultipleAttachments(message);\n  }, [message]);\n  const onSubmitHandler = useCallback((): void => {\n    if (!submitEnabled) {\n      return;\n    }\n    if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n      const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(textValue, inlineImagesWithProgress);\n      const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n      // Set contentValueWithInlineImagesOverflow state to display the error bar\n      setContentValueWithInlineImagesOverflow(messageTooLong);\n      // The change from the setContentValueOverflow in the previous line will not kick in yet.\n      // We need to rely on the local value of messageTooLong to return early if the message is too long.\n      if (messageTooLong) {\n        return;\n      }\n    }\n\n    // Don't send message until all attachments have been uploaded successfully\n    setAttachmentUploadsPendingError(undefined);\n    if (hasIncompleteAttachmentUploads(inlineImagesWithProgress)) {\n      setAttachmentUploadsPendingError({\n        message: strings.imageUploadsPendingError,\n        timestamp: Date.now(),\n        errorBarType: SendBoxErrorBarType.info\n      });\n      return;\n    }\n    let content = textValue;\n    content = removeBrokenImageContentAndClearImageSizeStyles(content);\n    let initInlineImages: Record<string, string>[] = [];\n    initInlineImages = initialInlineImages ?? [];\n    modifyInlineImagesInContentString(content, initInlineImages, (content: string) => {\n      // it's very important to pass an empty attachment here\n      // so when user removes all attachments, UI can reflect it instantly\n      // if you set it to undefined, the attachments pre-edited would still be there\n      // until edit message event is received\n      onSubmit(content, attachmentMetadata || []);\n    });\n  }, [submitEnabled, inlineImagesWithProgress, initialInlineImages, textValue, strings.imageUploadsPendingError, onSubmit, attachmentMetadata]);\n  const actionButtons = useMemo(() => {\n    return <Stack horizontal>\n        <InputBoxButton className={richTextActionButtonsStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n        onCancel && onCancel(message.messageId);\n      }} id={'dismissIconWrapper'} data-testId={strings.editBoxCancelButton} />\n        <InputBoxButton className={richTextActionButtonsStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n        onSubmitHandler();\n        e.stopPropagation();\n      }} id={'submitIconWrapper'} data-testId={strings.editBoxSubmitButton} />\n      </Stack>;\n  }, [message.messageId, onCancel, onRenderThemedCancelIcon, onRenderThemedSubmitIcon, strings.editBoxCancelButton, strings.editBoxSubmitButton, onSubmitHandler]);\n  const richTextLocaleStrings = useMemo(() => {\n    return {\n      ...locale.richTextSendBox,\n      ...strings\n    };\n    return locale.sendBox;\n  }, [locale.richTextSendBox, strings, locale.sendBox]);\n  const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n    // edit box only capable of removing attachments\n    // we need to expand attachment actions\n    // if we want to support more actions e.g. add\n    handleAttachmentAction({\n      type: 'remove',\n      id: attachmentId\n    });\n  }, []);\n  const onRenderAttachmentUploads = useCallback(() => {\n    return <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards attachments={attachmentMetadata} onCancelAttachmentUpload={onCancelAttachmentUpload} />\n        </FluentV9ThemeProvider>\n      </Stack>;\n  }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n  const onChangeHandler = useCallback((content: string | undefined, removedInlineImages?: Record<string, string>[]) => {\n    removedInlineImages?.forEach((removedInlineImage: Record<string, string>) => {\n      onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);\n    });\n    setText(content);\n  }, [setText, onRemoveInlineImage, message.messageId]);\n  const getContent = (): JSX.Element => {\n    return <Stack className={mergeStyles(editBoxWidthStyles)}>\n        <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} attachmentUploadsPendingError={attachmentUploadsPendingError} attachmentProgressError={imageUploadErrorMessage ? {\n        message: imageUploadErrorMessage,\n        timestamp: Date.now(),\n        errorBarType: SendBoxErrorBarType.error\n      } : undefined} />\n        <RichTextInputBoxComponent placeholderText={strings.editBoxPlaceholderText} onChange={onChangeHandler} editorComponentRef={editTextFieldRef} initialContent={initialContent} strings={richTextLocaleStrings} disabled={false} actionComponents={actionButtons} richTextEditorStyleProps={editBoxRichTextEditorStyle} isHorizontalLayoutDisabled={true} onRenderAttachmentUploads={onRenderAttachmentUploads} onPaste={onPaste} onInsertInlineImage={onInsertInlineImage ? (imageAttributes: Record<string, string>) => {\n        onInsertInlineImage(imageAttributes, message.messageId);\n      } : undefined} />\n      </Stack>;\n  };\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return <ChatMyMessage attached={attached} root={{\n    className: mergeClasses(chatMyMessageStyles.root, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined)\n  }} body={{\n    className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)\n  }}>\n      {getContent()}\n    </ChatMyMessage>;\n};\nexport default ChatMessageComponentAsRichTextEditBox;"]}

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

@@ -9,7 +9,7 @@ import { AttachmentMetadataInProgress } from "../../../../../acs-ui-common/src";
 import { MentionOptions } from '../../MentionPopover';
 import { InlineImageOptions } from '../ChatMessageContent';
 type ChatMyMessageComponentProps = {
-    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+    message: ChatMessage | BlockedMessage;
     userId: string;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
@@ -25,7 +25,7 @@ type ChatMyMessageComponentProps = {
      * Callback to send a message
      * @param content The message content to send
      */
-    onSendMessage?: (content: string, /* @conditional-compile-remove(file-sharing-acs) */ options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
     strings: MessageThreadStrings;
     messageStatus?: string;
     /**

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

@@ -12,7 +12,6 @@ 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
@@ -36,26 +35,21 @@ 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) */
+        onSendMessage && onSendMessage(newContent, {
+            attachments: `attachments` in message ? message.attachments : undefined,
             type: props.isRichTextEditorEnabled ? 'html' : 'text'
         });
-    }, [message, onDeleteMessage, clientMessageId, onSendMessage, content, /* @conditional-compile-remove(rich-text-editor) */ props.isRichTextEditorEnabled]);
+    }, [message, onDeleteMessage, clientMessageId, onSendMessage, content, props.isRichTextEditorEnabled]);
     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, attachments) {
         return __awaiter(this, void 0, void 0, function* () {
-            /* @conditional-compile-remove(file-sharing-acs) */
             if (`attachments` in message && attachments) {
                 message.attachments = attachments;
             }
-            props.onUpdateMessage && message.messageId && (yield props.onUpdateMessage(message.messageId, text, /* @conditional-compile-remove(file-sharing-acs) */ {
+            props.onUpdateMessage && message.messageId && (yield props.onUpdateMessage(message.messageId, text, {
                 attachments: attachments
             }));
             setIsEditing(false);
@@ -65,18 +59,10 @@ export const ChatMyMessageComponent = (props) => {
         return React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: onSubmitHandler, onCancel: messageId => {
                 props.onCancelEditMessage && props.onCancelEditMessage(messageId);
                 setIsEditing(false);
-            }, 
-            /* @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 });
+            }, mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions, isRichTextEditorEnabled: props.isRichTextEditorEnabled, onPaste: props.onPaste, onInsertInlineImage: props.onInsertInlineImage, inlineImagesWithProgress: props.inlineImagesWithProgress, onRemoveInlineImage: props.onRemoveInlineImage });
     }
     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 }));
+        return React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, inlineImageOptions: props.inlineImageOptions, mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions }));
     }
 };
 //# sourceMappingURL=ChatMyMessageComponent.js.map

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

@@ -1 +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';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMenuAction } from '../../../types/Attachment';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\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';\ntype 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?: (content: string, /* @conditional-compile-remove(file-sharing-acs) */\n  options?: MessageOptions) => 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  /* @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  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional callback to render message attachments in the message component.\n   * @beta\n   */\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\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: {\n    content: DocumentFragment;\n  }) => 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 {\n    onDeleteMessage,\n    onSendMessage,\n    message\n  } = props;\n  const [isEditing, setIsEditing] = useState(false);\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\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    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);\n    onSendMessage && onSendMessage(newContent, /* @conditional-compile-remove(file-sharing-acs) */\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    {\n      /* @conditional-compile-remove(file-sharing-acs) */attachments: `attachments` in message ? message.attachments : undefined,\n      /* @conditional-compile-remove(rich-text-editor) */\n      type: props.isRichTextEditorEnabled ? 'html' : 'text'\n    });\n  }, [message, onDeleteMessage, clientMessageId, onSendMessage, content, /* @conditional-compile-remove(rich-text-editor) */props.isRichTextEditorEnabled]);\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, /* @conditional-compile-remove(file-sharing-acs) */\n  attachments?: AttachmentMetadata[] | undefined) {\n    /* @conditional-compile-remove(file-sharing-acs) */\n    if (`attachments` in message && attachments) {\n      message.attachments = attachments;\n    }\n    props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text, /* @conditional-compile-remove(file-sharing-acs) */\n    {\n      attachments: attachments\n    }));\n    setIsEditing(false);\n  }, [message, props]);\n  if (isEditing && message.messageType === 'chat') {\n    return <ChatMessageComponentAsEditBoxPicker message={message} strings={props.strings} onSubmit={onSubmitHandler} onCancel={messageId => {\n      props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n      setIsEditing(false);\n    }}\n    /* @conditional-compile-remove(mention) */ mentionLookupOptions={props.mentionOptions?.lookupOptions}\n    /* @conditional-compile-remove(rich-text-editor) */ isRichTextEditorEnabled={props.isRichTextEditorEnabled}\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste={props.onPaste}\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */ onInsertInlineImage={props.onInsertInlineImage}\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */ inlineImagesWithProgress={props.inlineImagesWithProgress}\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */ onRemoveInlineImage={props.onRemoveInlineImage} />;\n  } else {\n    return <ChatMyMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar}\n    /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString={props.onDisplayDateTimeString} strings={props.strings} inlineImageOptions={props.inlineImageOptions}\n    /* @conditional-compile-remove(mention) */ mentionDisplayOptions={props.mentionOptions?.displayOptions} />;\n  }\n};"]}
+{"version":3,"file":"ChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAGlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUrD,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;AAChG,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AAC5F,OAAO,EAAE,+CAA+C,EAAE,MAAM,0BAA0B,CAAC;AA8E3F;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;;IACxF,MAAM,EACJ,eAAe,EACf,aAAa,EACb,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAC1E,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,CAAC;YACzC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,eAAe,EAAE,CAAC;YAC9E,eAAe,CAAC,eAAe,CAAC,CAAC;QACnC,CAAC;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,IAAI,UAAU,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC;QAC/B,UAAU,GAAG,+CAA+C,CAAC,UAAU,CAAC,CAAC;QACzE,aAAa,IAAI,aAAa,CAAC,UAAU,EAAE;YACzC,WAAW,EAAE,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;YACvE,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACtD,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC;IACvG,MAAM,eAAe,GAAG,WAAW;IACnC,0DAA0D;IAC1D,0DAA0D;IAC1D,UAAgB,IAAY,EAAE,WAA8C;;YAC1E,IAAI,aAAa,IAAI,OAAO,IAAI,WAAW,EAAE,CAAC;gBAC5C,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC;YACpC,CAAC;YACD,KAAK,CAAC,eAAe,IAAI,OAAO,CAAC,SAAS,IAAI,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE;gBAClG,WAAW,EAAE,WAAW;aACzB,CAAC,CAAC,CAAC;YACJ,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;KAAA,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IACrB,IAAI,SAAS,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE,CAAC;QAChD,OAAO,oBAAC,mCAAmC,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE;gBACrI,KAAK,CAAC,mBAAmB,IAAI,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBAClE,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,EAAE,oBAAoB,EAAE,MAAA,KAAK,CAAC,cAAc,0CAAE,aAAa,EAAE,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAAE,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,EAAE,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,GAAI,CAAC;IAC7S,CAAC;SAAM,CAAC;QACN,OAAO,oBAAC,qCAAqC,oBAAK,KAAK,IAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAAE,qBAAqB,EAAE,MAAA,KAAK,CAAC,cAAc,0CAAE,cAAc,IAAI,CAAC;IACrX,CAAC;AACH,CAAC,CAAC","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 { BlockedMessage } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { MessageOptions } from '@internal/acs-ui-common';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { MentionOptions } from '../../MentionPopover';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\nimport { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';\ntype ChatMyMessageComponentProps = {\n  message: ChatMessage | 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?: (content: string, options?: MessageOptions) => 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 function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\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  isRichTextEditorEnabled?: boolean;\n  onPaste?: (event: {\n    content: DocumentFragment;\n  }) => void;\n  onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/**\n * @private\n */\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n  const {\n    onDeleteMessage,\n    onSendMessage,\n    message\n  } = props;\n  const [isEditing, setIsEditing] = useState(false);\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\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    newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);\n    onSendMessage && onSendMessage(newContent, {\n      attachments: `attachments` in message ? message.attachments : undefined,\n      type: props.isRichTextEditorEnabled ? 'html' : 'text'\n    });\n  }, [message, onDeleteMessage, clientMessageId, onSendMessage, content, props.isRichTextEditorEnabled]);\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, attachments?: AttachmentMetadata[] | undefined) {\n    if (`attachments` in message && attachments) {\n      message.attachments = attachments;\n    }\n    props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text, {\n      attachments: attachments\n    }));\n    setIsEditing(false);\n  }, [message, props]);\n  if (isEditing && message.messageType === 'chat') {\n    return <ChatMessageComponentAsEditBoxPicker message={message} strings={props.strings} onSubmit={onSubmitHandler} onCancel={messageId => {\n      props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n      setIsEditing(false);\n    }} mentionLookupOptions={props.mentionOptions?.lookupOptions} isRichTextEditorEnabled={props.isRichTextEditorEnabled} onPaste={props.onPaste} onInsertInlineImage={props.onInsertInlineImage} inlineImagesWithProgress={props.inlineImagesWithProgress} onRemoveInlineImage={props.onRemoveInlineImage} />;\n  } else {\n    return <ChatMyMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar} onDisplayDateTimeString={props.onDisplayDateTimeString} strings={props.strings} inlineImageOptions={props.inlineImageOptions} mentionDisplayOptions={props.mentionOptions?.displayOptions} />;\n  }\n};"]}

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

@@ -8,7 +8,7 @@ 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 | BlockedMessage;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
     disableEditing?: boolean;

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

@@ -13,7 +13,6 @@ import { createStyleFromV8Style } from '../../styles/v8StyleShim';
 import { mergeClasses } from '@fluentui/react-components';
 import { useChatMyMessageStyles, useChatMessageCommonStyles } 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) => {
@@ -21,13 +20,7 @@ const MessageBubble = (props) => {
     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, 
-    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
-    onRenderAttachmentDownloads, 
-    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
-    actionsForAttachment } = props;
+    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, inlineImageOptions, mentionDisplayOptions, onDisplayDateTimeString, onRenderAttachmentDownloads, actionsForAttachment } = props;
     const formattedTimestamp = useMemo(() => {
         const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
         const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';
@@ -43,7 +36,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 && message.messageType !== 'blocked';
     const [messageReadBy, setMessageReadBy] = useState([]);
     const actionMenuProps = chatMessageActionMenuProps({
         ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
@@ -63,7 +56,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]);
@@ -76,9 +68,9 @@ const MessageBubble = (props) => {
         }
     }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     const getContent = useCallback(() => {
-        return getMessageBubbleContent(message, strings, userId, inlineImageOptions, /* @conditional-compile-remove(mention) */ mentionDisplayOptions, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ actionsForAttachment);
-    }, [/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ actionsForAttachment, inlineImageOptions, /* @conditional-compile-remove(mention) */ mentionDisplayOptions, message, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads, strings, userId]);
-    const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
+        return getMessageBubbleContent(message, strings, userId, inlineImageOptions, mentionDisplayOptions, onRenderAttachmentDownloads, actionsForAttachment);
+    }, [actionsForAttachment, inlineImageOptions, mentionDisplayOptions, message, onRenderAttachmentDownloads, strings, userId]);
+    const isBlockedMessage = false || message.messageType === 'blocked';
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
@@ -86,7 +78,7 @@ const MessageBubble = (props) => {
         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, chatMessageCommonStyles.bodyWithPlaceholderImage, chatMyMessageStyles.bodyWithPlaceholderImage, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined, mergeStyles(messageContainerStyle)),
                     style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
                     ref: messageRef
                 }, root: {