@azure/communication-react 1.17.0 → 1.18.0-alpha-202406110013

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

@@ -0,0 +1,142 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles, Stack } from '@fluentui/react';
+import { ChatMyMessage } from '@fluentui-contrib/react-chat';
+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';
+import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
+import { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';
+import { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
+import { MAXIMUM_LENGTH_OF_MESSAGE } 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';
+/**
+ * @private
+ */
+export const ChatMessageComponentAsRichTextEditBox = (props) => {
+    var _a;
+    const { onCancel, onSubmit, strings, message, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onPaste } = props;
+    const [textValue, setTextValue] = useState(message.content || '');
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const [attachmentMetadata, handleAttachmentAction] = useReducer(attachmentMetadataReducer, (_a = getMessageWithAttachmentMetadata(message)) !== null && _a !== void 0 ? _a : []);
+    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]);
+    const submitEnabled = messageState === 'OK';
+    const editContainerStyles = useChatMessageRichTextEditContainerStyles();
+    const chatMyMessageStyles = useChatMyMessageStyles();
+    const locale = useLocale().strings;
+    const setText = useCallback((newValue) => {
+        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+    }, []);
+    useEffect(() => {
+        var _a;
+        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const textTooLongMessage = useMemo(() => {
+        return messageState === 'too long'
+            ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
+            : undefined;
+    }, [messageState, strings.editBoxTextLimit]);
+    const iconClassName = useCallback((isHover) => {
+        const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
+        return mergeStyles(richTextEditBoxActionButtonIcon, { color });
+    }, [theme.palette.accent, theme.palette.neutralSecondary]);
+    const onRenderThemedCancelIcon = useCallback((isHover) => {
+        return onRenderCancelIcon(iconClassName(isHover));
+    }, [iconClassName]);
+    const onRenderThemedSubmitIcon = useCallback((isHover) => {
+        return onRenderSubmitIcon(iconClassName(isHover));
+    }, [iconClassName]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const hasMultipleAttachments = useMemo(() => {
+        return doesMessageContainMultipleAttachments(message);
+    }, [message]);
+    const actionButtons = useMemo(() => {
+        return (React.createElement(Stack, { horizontal: true },
+            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                    onCancel && onCancel(message.messageId);
+                }, id: 'dismissIconWrapper', "data-testId": strings.editBoxCancelButton }),
+            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                    // 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
+                    submitEnabled &&
+                        onSubmit(textValue, /* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata);
+                    e.stopPropagation();
+                }, id: 'submitIconWrapper', "data-testId": strings.editBoxSubmitButton })));
+    }, [
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachmentMetadata,
+        message.messageId,
+        onCancel,
+        onRenderThemedCancelIcon,
+        onRenderThemedSubmitIcon,
+        onSubmit,
+        strings.editBoxCancelButton,
+        strings.editBoxSubmitButton,
+        submitEnabled,
+        textValue
+    ]);
+    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) */
+    const onCancelAttachmentUpload = useCallback((attachmentId) => {
+        // edit box only capable of removing attachments
+        // we need to expand attachment actions
+        // if we want to support more actions e.g. add
+        handleAttachmentAction({ type: 'remove', 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 getContent = () => {
+        return (React.createElement(Stack, { className: mergeStyles(editBoxWidthStyles) },
+            React.createElement(RichTextSendBoxErrors, { textTooLongMessage: textTooLongMessage, systemMessage: message.failureReason }),
+            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: setText, editorComponentRef: editTextFieldRef, initialContent: message.content, 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 })));
+    };
+    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.multipleAttachments : undefined)
+        }, body: {
+            className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
+        } }, getContent()));
+};
+export default ChatMessageComponentAsRichTextEditBox;
+//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../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 { 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 } from '../../utils/SendBoxUtils';\nimport {\n  getMessageState,\n  onRenderCancelIcon,\n  onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport {\n  attachmentMetadataReducer,\n  getMessageWithAttachmentMetadata,\n  doesMessageContainMultipleAttachments\n} 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\n/** @private */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachmentMetadata?: AttachmentMetadata[]\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsRichTextEditBox = (\n  props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onPaste\n  } = props;\n\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [attachmentMetadata, handleAttachmentAction] = useReducer(\n    attachmentMetadataReducer,\n    getMessageWithAttachmentMetadata(message) ?? []\n  );\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  const submitEnabled = messageState === 'OK';\n\n  const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const locale = useLocale().strings;\n\n  const setText = useCallback((newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  }, []);\n\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n\n  const textTooLongMessage = useMemo(() => {\n    return messageState === 'too long'\n      ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n      : undefined;\n  }, [messageState, strings.editBoxTextLimit]);\n\n  const iconClassName = useCallback(\n    (isHover: boolean) => {\n      const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n      return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n    },\n    [theme.palette.accent, theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedCancelIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderCancelIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderSubmitIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const hasMultipleAttachments = useMemo(() => {\n    return doesMessageContainMultipleAttachments(message);\n  }, [message]);\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack horizontal>\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxCancelButton}\n          tooltipContent={strings.editBoxCancelButton}\n          onRenderIcon={onRenderThemedCancelIcon}\n          onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }}\n          id={'dismissIconWrapper'}\n          data-testId={strings.editBoxCancelButton}\n        />\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxSubmitButton}\n          tooltipContent={strings.editBoxSubmitButton}\n          onRenderIcon={onRenderThemedSubmitIcon}\n          onClick={(e) => {\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            submitEnabled &&\n              onSubmit(textValue, /* @conditional-compile-remove(file-sharing-acs) */ attachmentMetadata);\n            e.stopPropagation();\n          }}\n          id={'submitIconWrapper'}\n          data-testId={strings.editBoxSubmitButton}\n        />\n      </Stack>\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachmentMetadata,\n    message.messageId,\n    onCancel,\n    onRenderThemedCancelIcon,\n    onRenderThemedSubmitIcon,\n    onSubmit,\n    strings.editBoxCancelButton,\n    strings.editBoxSubmitButton,\n    submitEnabled,\n    textValue\n  ]);\n  const richTextLocaleStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return { ...locale.richTextSendBox, ...strings };\n    return locale.sendBox;\n  }, [\n    /* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox,\n    /* @conditional-compile-remove(rich-text-editor) */ strings,\n    locale.sendBox\n  ]);\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({ type: 'remove', id: attachmentId });\n  }, []);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            attachments={attachmentMetadata}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n  const getContent = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(editBoxWidthStyles)}>\n        <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n        <RichTextInputBoxComponent\n          placeholderText={strings.editBoxPlaceholderText}\n          onChange={setText}\n          editorComponentRef={editTextFieldRef}\n          initialContent={message.content}\n          strings={richTextLocaleStrings}\n          disabled={false}\n          actionComponents={actionButtons}\n          richTextEditorStyleProps={editBoxRichTextEditorStyle}\n          isHorizontalLayoutDisabled={true}\n          /* @conditional-compile-remove(file-sharing-acs) */\n          onRenderAttachmentUploads={onRenderAttachmentUploads}\n          /* @conditional-compile-remove(rich-text-editor-image-upload) */\n          onPaste={onPaste}\n        />\n      </Stack>\n    );\n  };\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return (\n    <ChatMyMessage\n      attached={attached}\n      root={{\n        className: mergeClasses(\n          chatMyMessageStyles.root,\n          /* @conditional-compile-remove(file-sharing-acs) */\n          hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined\n        )\n      }}\n      body={{\n        className: mergeClasses(\n          editContainerStyles.body,\n          attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n        )\n      }}\n    >\n      {getContent()}\n    </ChatMyMessage>\n  );\n};\n\nexport default ChatMessageComponentAsRichTextEditBox;\n"]}

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

@@ -1,11 +1,15 @@
 /// <reference types="react" />
 import { MessageThreadStrings, UpdateMessageCallback } from '../../MessageThread';
+import { RichTextEditorOptions } from '../../MessageThread';
 import { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';
+import { BlockedMessage } from '../../../types';
 import { AttachmentMenuAction } from '../../../types/Attachment';
 import { AttachmentMetadata } from "../../../../../acs-ui-common/src";
+import { MessageOptions } from "../../../../../acs-ui-common/src";
+import { MentionOptions } from '../../MentionPopover';
 import { InlineImageOptions } from '../ChatMessageContent';
 type ChatMyMessageComponentProps = {
-    message: ChatMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     userId: string;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
@@ -21,7 +25,7 @@ type ChatMyMessageComponentProps = {
      * Callback to send a message
      * @param content The message content to send
      */
-    onSendMessage?: (content: string) => Promise<void>;
+    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
     strings: MessageThreadStrings;
     messageStatus?: string;
     /**
@@ -47,6 +51,16 @@ type ChatMyMessageComponentProps = {
      * @param userId - user Id
      */
     onRenderAvatar?: OnRenderAvatarCallback;
+    /**
+     * Optional function to provide customized date format.
+     * @beta
+     */
+    onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional props needed to lookup suggestions and display mentions in the mention scenario.
+     * @beta
+     */
+    mentionOptions?: MentionOptions;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta
@@ -62,6 +76,11 @@ type ChatMyMessageComponentProps = {
      * @beta
      */
     actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];
+    /**
+     * Optional flag to enable rich text editor.
+     * @beta
+     */
+    richTextEditorOptions?: RichTextEditorOptions;
 };
 /**
  * @private

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

@@ -16,6 +16,7 @@ import { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEdi
  * @private
  */
 export const ChatMyMessageComponent = (props) => {
+    var _a, _b;
     const { onDeleteMessage, onSendMessage, message } = props;
     const [isEditing, setIsEditing] = useState(false);
     const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);
@@ -31,26 +32,53 @@ export const ChatMyMessageComponent = (props) => {
         }
     }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);
     const onResendClick = useCallback(() => {
+        /* @conditional-compile-remove(file-sharing-acs) */
+        const messageOptions = {
+            attachments: `attachments` in message ? message.attachments : undefined
+        };
         onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
-        onSendMessage && onSendMessage(content !== undefined ? content : '');
+        onSendMessage &&
+            onSendMessage(content !== undefined ? content : '', 
+            /* @conditional-compile-remove(file-sharing-acs) */
+            messageOptions);
     }, [onDeleteMessage, clientMessageId, onSendMessage, content, message]);
     const onSubmitHandler = useCallback(
     // due to a bug in babel, we can't use arrow function here
     // affecting conditional-compile-remove(attachment-upload)
-    function (text) {
+    function (text, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    attachments) {
         return __awaiter(this, void 0, void 0, function* () {
-            props.onUpdateMessage && message.messageId && (yield props.onUpdateMessage(message.messageId, text));
+            /* @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) */
+                {
+                    attachments: attachments
+                }));
             setIsEditing(false);
         });
     }, [message, props]);
     if (isEditing && message.messageType === 'chat') {
-        return React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: onSubmitHandler, onCancel: messageId => {
+        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) */
+            richTextEditorOptions: props.richTextEditorOptions }));
     }
     else {
-        return React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, strings: props.strings, inlineImageOptions: props.inlineImageOptions }));
+        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 })));
     }
 };
 //# 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(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';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\ntype 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  /* @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};\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    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [onDeleteMessage, clientMessageId, onSendMessage, content, message]);\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    props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text));\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  } else {\n    return <ChatMyMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar} strings={props.strings} inlineImageOptions={props.inlineImageOptions} />;\n  }\n};"]}
+{"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';\n/* @conditional-compile-remove(rich-text-editor) */\nimport { RichTextEditorOptions } 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(mention) */\nimport { MentionOptions } from '../../MentionPopover';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\n\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?: (\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  /* @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  /**\n   * Optional flag to enable rich text editor.\n   * @beta\n   */\n  richTextEditorOptions?: RichTextEditorOptions;\n};\n\n/**\n * @private\n */\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\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    /* @conditional-compile-remove(file-sharing-acs) */\n    const messageOptions = {\n      attachments: `attachments` in message ? message.attachments : undefined\n    };\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage &&\n      onSendMessage(\n        content !== undefined ? content : '',\n        /* @conditional-compile-remove(file-sharing-acs) */\n        messageOptions\n      );\n  }, [onDeleteMessage, clientMessageId, onSendMessage, content, message]);\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      props.onUpdateMessage &&\n        message.messageId &&\n        (await props.onUpdateMessage(\n          message.messageId,\n          text,\n          /* @conditional-compile-remove(file-sharing-acs) */\n          {\n            attachments: attachments\n          }\n        ));\n      setIsEditing(false);\n    },\n    [message, props]\n  );\n  if (isEditing && message.messageType === 'chat') {\n    return (\n      <ChatMessageComponentAsEditBoxPicker\n        message={message}\n        strings={props.strings}\n        onSubmit={onSubmitHandler}\n        onCancel={(messageId) => {\n          props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n          setIsEditing(false);\n        }}\n        /* @conditional-compile-remove(mention) */\n        mentionLookupOptions={props.mentionOptions?.lookupOptions}\n        /* @conditional-compile-remove(rich-text-editor) */\n        richTextEditorOptions={props.richTextEditorOptions}\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      />\n    );\n  }\n};\n"]}

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

@@ -1,12 +1,14 @@
 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;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
     disableEditing?: boolean;
@@ -36,6 +38,11 @@ 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

@@ -3,7 +3,7 @@
 import { Text, mergeStyles } from '@fluentui/react';
 import { ChatMyMessage } from '@fluentui-contrib/react-chat';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { chatMessageDateStyle, chatMessageFailedTagStyle } from '../../styles/ChatMessageComponent.styles';
+import { chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageDateFailedStyle } from '../../styles/ChatMessageComponent.styles';
 import { useIdentifiers } from '../../../identifiers/IdentifierProvider';
 import { useTheme } from '../../../theming';
 import { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';
@@ -13,20 +13,28 @@ 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) => {
     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, onDisplayDateTimeString, 
+    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 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
@@ -39,7 +47,10 @@ const MessageBubble = (props) => {
     const messageRef = useRef(null);
     const messageActionButtonRef = useRef(null);
     const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
-    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;
+    const chatActionsEnabled = !disableEditing &&
+        message.status !== 'sending' &&
+        !!message.mine &&
+        /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
     const [messageReadBy, setMessageReadBy] = useState([]);
     const actionMenuProps = chatMessageActionMenuProps({
         ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
@@ -59,6 +70,10 @@ 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);
@@ -68,22 +83,42 @@ const MessageBubble = (props) => {
         }
     }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     const getContent = useCallback(() => {
-        return getMessageBubbleContent(message, strings, userId, inlineImageOptions, /* @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, message, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads, strings, userId]);
-    const isBlockedMessage = false;
+        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';
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
-    const chatMessage = React.createElement(React.Fragment, null,
+    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, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),
+                    className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage
+                        ? chatMessageCommonStyles.blocked
+                        : props.message.status === 'failed'
+                            ? chatMessageCommonStyles.failed
+                            : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, 
+                    /* @conditional-compile-remove(file-sharing-acs) */
+                    hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : 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) {
@@ -98,11 +133,13 @@ const MessageBubble = (props) => {
                         // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
                         setFocused(true);
                     }
-                }, "data-ui-id": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), actions: {
+                }, "data-ui-id": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle(theme) }, message.senderDisplayName), timestamp: React.createElement(Text, { className: props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme), "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), actions: {
                     children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
                     className: mergeClasses(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, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
+                    focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
+                        ? chatMyMessageStyles.menuVisible
+                        : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
                 }, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => {
                     if (!wasInteractionByTouch) {
                         return;
@@ -117,7 +154,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 */