@azure/communication-react 1.22.0 → 1.23.0-alpha-202412190017

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

@@ -21,14 +21,7 @@ export const MessageStatusIndicatorInternal = (props) => {
     const [isTooltipToggled, setIsTooltipToggled] = useState(false);
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
-    const calloutStyle = {
-        root: {
-            padding: 0
-        },
-        calloutMain: {
-            padding: '0.5rem'
-        }
-    };
+    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
@@ -37,37 +30,35 @@ export const MessageStatusIndicatorInternal = (props) => {
     };
     switch (status) {
         case 'failed':
-            return React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageFailed", iconClassName: mergeStyles(MessageStatusIndicatorErrorIconStyle, {
-                        color: isDarkThemed(theme) ? theme.semanticColors.errorText : theme.palette.redDark
-                    }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.failedToSendAriaLabel }));
+            return (React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
+                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageFailed", iconClassName: mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: isDarkThemed(theme) ? theme.semanticColors.errorText : theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.failedToSendAriaLabel })));
         case 'sending':
-            return React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSending", iconClassName: mergeStyles(MessageStatusIndicatorIconStyle, {
-                        color: theme.palette.themePrimary
-                    }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.sendingAriaLabel }));
+            return (React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
+                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSending", iconClassName: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.sendingAriaLabel })));
         case 'seen':
-            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content: 
+            return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content: 
                 // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'
                 // when readCount is 0, we have a bug, show 'seen' to cover up as a fall back
                 // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back
-                readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {
-                    messageThreadReadCount: `${readCount}`,
-                    remoteParticipantsCount: `${remoteParticipantsCount}`
-                }), onTooltipToggle: () => {
+                readCount === 0 ||
+                    (remoteParticipantsCount && remoteParticipantsCount <= 1) ||
+                    !readCount ||
+                    !remoteParticipantsCount ||
+                    strings.readByTooltipText === undefined
+                    ? strings.seenTooltipText
+                    : _formatString(strings.readByTooltipText, {
+                        messageThreadReadCount: `${readCount}`,
+                        remoteParticipantsCount: `${remoteParticipantsCount}`
+                    }), onTooltipToggle: () => {
                     if (onToggleToolTip) {
                         onToggleToolTip(!isTooltipToggled);
                         setIsTooltipToggled(!isTooltipToggled);
                     }
                 } },
-                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSeen", iconClassName: mergeStyles({
-                        color: theme.palette.themePrimary
-                    }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.seenAriaLabel }));
+                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSeen", iconClassName: mergeStyles({ color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.seenAriaLabel })));
         case 'delivered':
-            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
-                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageDelivered", iconClassName: mergeStyles(MessageStatusIndicatorIconStyle, {
-                        color: theme.palette.themePrimary
-                    }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.deliveredAriaLabel }));
+            return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
+                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageDelivered", iconClassName: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.deliveredAriaLabel })));
         default:
             return React.createElement(React.Fragment, null);
     }
@@ -75,11 +66,7 @@ export const MessageStatusIndicatorInternal = (props) => {
 // The TooltipHost root uses display: inline by default.
 // To prevent sizing issues or tooltip positioning issues, we override to inline-block.
 // For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
-const hostStyles = {
-    root: {
-        display: 'inline-block'
-    }
-};
+const hostStyles = { root: { display: 'inline-block' } };
 const MemoMessageStatusIcon = React.memo((obj) => {
     return React.createElement(MessageStatusIcon, Object.assign({}, obj));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicatorInternal.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIndicatorInternal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';\nimport { MessageStatusIndicatorStrings } from './MessageStatusIndicator';\nimport { MessageStatusIcon, MessageStatusIconProps } from './MessageStatusIcon';\n\n/**\n * Props for {@link MessageStatusIndicatorInternal}.\n *\n * @internal\n */\nexport interface MessageStatusIndicatorInternalProps {\n  /** Message status that determines the icon to display. */\n  status?: MessageStatus;\n  readCount?: number;\n  onToggleToolTip?: (isToggled: boolean) => void;\n  /** number of participants not including myself */\n  remoteParticipantsCount?: number;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <MessageStatus styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: MessageStatusIndicatorStrings;\n  /**\n   * Optional call back to provide LiveMessage component for accessibility\n   */\n  shouldAnnounce: boolean;\n}\n\n/**\n * Component to display the status of a sent message.\n *\n * Adds an icon and tooltip corresponding to the message status.\n *\n * @internal\n */\nexport const MessageStatusIndicatorInternal = (props: MessageStatusIndicatorInternalProps): JSX.Element => {\n  const {\n    status,\n    styles,\n    remoteParticipantsCount,\n    onToggleToolTip,\n    readCount,\n    shouldAnnounce\n  } = props;\n  const localeStrings = useLocale().strings.messageStatusIndicator;\n  const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  switch (status) {\n    case 'failed':\n      return <TooltipHost content={strings.failedToSendTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n        ...calloutProps\n      }} styles={hostStyles}>\n          <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageFailed\" iconClassName={mergeStyles(MessageStatusIndicatorErrorIconStyle, {\n          color: isDarkThemed(theme) ? theme.semanticColors.errorText : theme.palette.redDark\n        }, styles?.root)} ariaLabel={strings.failedToSendAriaLabel} />\n        </TooltipHost>;\n    case 'sending':\n      return <TooltipHost content={strings.sendingTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n        ...calloutProps\n      }} styles={hostStyles}>\n          <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageSending\" iconClassName={mergeStyles(MessageStatusIndicatorIconStyle, {\n          color: theme.palette.themePrimary\n        }, styles?.root)} ariaLabel={strings.sendingAriaLabel} />\n        </TooltipHost>;\n    case 'seen':\n      return <TooltipHost calloutProps={{\n        ...calloutProps\n      }} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles} content={\n      // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n      // when readCount is 0, we have a bug, show 'seen' to cover up as a fall back\n      // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n      readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {\n        messageThreadReadCount: `${readCount}`,\n        remoteParticipantsCount: `${remoteParticipantsCount}`\n      })} onTooltipToggle={() => {\n        if (onToggleToolTip) {\n          onToggleToolTip(!isTooltipToggled);\n          setIsTooltipToggled(!isTooltipToggled);\n        }\n      }}>\n          <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageSeen\" iconClassName={mergeStyles({\n          color: theme.palette.themePrimary\n        }, styles?.root)} ariaLabel={strings.seenAriaLabel} />\n        </TooltipHost>;\n    case 'delivered':\n      return <TooltipHost calloutProps={{\n        ...calloutProps\n      }} content={strings.deliveredTooltipText} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles}>\n          <MemoMessageStatusIcon shouldAnnounce={shouldAnnounce} iconName=\"MessageDelivered\" iconClassName={mergeStyles(MessageStatusIndicatorIconStyle, {\n          color: theme.palette.themePrimary\n        }, styles?.root)} ariaLabel={strings.deliveredAriaLabel} />\n        </TooltipHost>;\n    default:\n      return <></>;\n  }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n  root: {\n    display: 'inline-block'\n  }\n};\nconst MemoMessageStatusIcon = React.memo((obj: MessageStatusIconProps): JSX.Element => {\n  return <MessageStatusIcon {...obj} />;\n});"]}
+{"version":3,"file":"MessageStatusIndicatorInternal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicatorInternal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport {\n  MessageStatusIndicatorErrorIconStyle,\n  MessageStatusIndicatorIconStyle\n} from './styles/MessageStatusIndicator.styles';\nimport { MessageStatusIndicatorStrings } from './MessageStatusIndicator';\nimport { MessageStatusIcon, MessageStatusIconProps } from './MessageStatusIcon';\n\n/**\n * Props for {@link MessageStatusIndicatorInternal}.\n *\n * @internal\n */\nexport interface MessageStatusIndicatorInternalProps {\n  /** Message status that determines the icon to display. */\n  status?: MessageStatus;\n  readCount?: number;\n  onToggleToolTip?: (isToggled: boolean) => void;\n  /** number of participants not including myself */\n  remoteParticipantsCount?: number;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <MessageStatus styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: MessageStatusIndicatorStrings;\n  /**\n   * Optional call back to provide LiveMessage component for accessibility\n   */\n  shouldAnnounce: boolean;\n}\n\n/**\n * Component to display the status of a sent message.\n *\n * Adds an icon and tooltip corresponding to the message status.\n *\n * @internal\n */\nexport const MessageStatusIndicatorInternal = (props: MessageStatusIndicatorInternalProps): JSX.Element => {\n  const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount, shouldAnnounce } = props;\n  const localeStrings = useLocale().strings.messageStatusIndicator;\n  const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n  const strings = { ...localeStrings, ...props.strings };\n  const theme = useTheme();\n\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n\n  switch (status) {\n    case 'failed':\n      return (\n        <TooltipHost\n          content={strings.failedToSendTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          calloutProps={{ ...calloutProps }}\n          styles={hostStyles}\n        >\n          <MemoMessageStatusIcon\n            shouldAnnounce={shouldAnnounce}\n            iconName=\"MessageFailed\"\n            iconClassName={mergeStyles(\n              MessageStatusIndicatorErrorIconStyle,\n              { color: isDarkThemed(theme) ? theme.semanticColors.errorText : theme.palette.redDark },\n              styles?.root\n            )}\n            ariaLabel={strings.failedToSendAriaLabel}\n          />\n        </TooltipHost>\n      );\n    case 'sending':\n      return (\n        <TooltipHost\n          content={strings.sendingTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          calloutProps={{ ...calloutProps }}\n          styles={hostStyles}\n        >\n          <MemoMessageStatusIcon\n            shouldAnnounce={shouldAnnounce}\n            iconName=\"MessageSending\"\n            iconClassName={mergeStyles(\n              MessageStatusIndicatorIconStyle,\n              { color: theme.palette.themePrimary },\n              styles?.root\n            )}\n            ariaLabel={strings.sendingAriaLabel}\n          />\n        </TooltipHost>\n      );\n    case 'seen':\n      return (\n        <TooltipHost\n          calloutProps={{ ...calloutProps }}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          styles={hostStyles}\n          content={\n            // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n            // when readCount is 0, we have a bug, show 'seen' to cover up as a fall back\n            // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n            readCount === 0 ||\n            (remoteParticipantsCount && remoteParticipantsCount <= 1) ||\n            !readCount ||\n            !remoteParticipantsCount ||\n            strings.readByTooltipText === undefined\n              ? strings.seenTooltipText\n              : _formatString(strings.readByTooltipText, {\n                  messageThreadReadCount: `${readCount}`,\n                  remoteParticipantsCount: `${remoteParticipantsCount}`\n                })\n          }\n          onTooltipToggle={() => {\n            if (onToggleToolTip) {\n              onToggleToolTip(!isTooltipToggled);\n              setIsTooltipToggled(!isTooltipToggled);\n            }\n          }}\n        >\n          <MemoMessageStatusIcon\n            shouldAnnounce={shouldAnnounce}\n            iconName=\"MessageSeen\"\n            iconClassName={mergeStyles({ color: theme.palette.themePrimary }, styles?.root)}\n            ariaLabel={strings.seenAriaLabel}\n          />\n        </TooltipHost>\n      );\n    case 'delivered':\n      return (\n        <TooltipHost\n          calloutProps={{ ...calloutProps }}\n          content={strings.deliveredTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          styles={hostStyles}\n        >\n          <MemoMessageStatusIcon\n            shouldAnnounce={shouldAnnounce}\n            iconName=\"MessageDelivered\"\n            iconClassName={mergeStyles(\n              MessageStatusIndicatorIconStyle,\n              { color: theme.palette.themePrimary },\n              styles?.root\n            )}\n            ariaLabel={strings.deliveredAriaLabel}\n          />\n        </TooltipHost>\n      );\n    default:\n      return <></>;\n  }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n\nconst MemoMessageStatusIcon = React.memo((obj: MessageStatusIconProps): JSX.Element => {\n  return <MessageStatusIcon {...obj} />;\n});\n"]}

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

@@ -1,9 +1,15 @@
 /// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId, ComponentSlotStyle } from '../types';
+import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
 import { MessageStatus } from "../../../acs-ui-common/src";
+import { AttachmentMetadataInProgress } from "../../../acs-ui-common/src";
+import { MessageOptions } from "../../../acs-ui-common/src";
+import { AttachmentOptions } from '../types/Attachment';
+import { MentionOptions } from './MentionPopover';
 import { InlineImageOptions } from './ChatMessage/ChatMessageContent';
+import { RichTextEditorOptions, RichTextStrings } from './RichTextEditor/RichTextSendBox';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -29,6 +35,7 @@ export interface MessageThreadStyles extends BaseCustomStyles {
     /** Styles for system message container. */
     systemMessageContainer?: ComponentSlotStyle;
     /** Styles for blocked message container. */
+    blockedMessageContainer?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
@@ -92,10 +99,20 @@ export interface MessageThreadStrings {
     actionMenuMoreOptions?: string;
     /** Aria label to announce when a message is deleted */
     messageDeletedAnnouncementAriaLabel: string;
+    /** String for download attachment button in attachment card */
+    downloadAttachment: string;
     /** String for open attachment button in attachment card */
     openAttachment: string;
+    /** String for policy violation message removal */
+    blockedWarningText: string;
+    /** String for policy violation message removal details link */
+    blockedWarningLinkText: string;
     /** String for aria text in attachment card group*/
     attachmentCardGroupMessage: string;
+    /**
+     * Error message indicating that one or more image uploads are not complete.
+     */
+    imageUploadsPendingError: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -118,7 +135,7 @@ export type MessageRenderer = (props: MessageProps) => JSX.Element;
  * @public
  * Callback function run when a message is updated.
  */
-export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
+export type UpdateMessageCallback = (messageId: string, content: string, options?: MessageOptions) => Promise<void>;
 /**
  * @public
  * Callback function run when a message edit is cancelled.
@@ -137,7 +154,7 @@ export type MessageThreadProps = {
     /**
      * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
-    messages: (ChatMessage | SystemMessage | CustomMessage)[];
+    messages: (ChatMessage | SystemMessage | CustomMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage)[];
     /**
      * number of participants in the thread
      */
@@ -218,6 +235,11 @@ export type MessageThreadProps = {
      * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
      */
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
+    /**
+     * Optional callback to render attachments in the message component.
+     * @beta
+     */
+    onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to edit a message.
      *
@@ -246,7 +268,7 @@ export type MessageThreadProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string) => Promise<void>;
+    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
     /**
     /**
      * Disable editing messages.
@@ -260,12 +282,66 @@ export type MessageThreadProps = {
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
+    /**
+     * @beta
+     * Optional attachment options, which defines behvaiour for uploading and downloading attachments.
+     * As this moment, the uploadOptions would be ignored and this option is intended for download only.
+     */
+    attachmentOptions?: AttachmentOptions;
+    /**
+     * Optional function to provide customized date format.
+     * @beta
+     */
+    onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional props needed to lookup a mention query and display mentions
+     * @beta
+     */
+    mentionOptions?: MentionOptions;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta
      */
     inlineImageOptions?: InlineImageOptions;
+    /**
+     * Options to enable rich text editor for the edit box.
+     * @beta
+     */
+    richTextEditorOptions?: RichTextEditBoxOptions;
 };
+/**
+ * Options for the rich text editor edit box configuration.
+ *
+ * @beta
+ */
+export interface RichTextEditBoxOptions extends RichTextEditorOptions {
+    /**
+     * Optional callback to handle an inline image that's inserted in the rich text editor.
+     * When not provided, pasting images into rich text editor will be disabled.
+     * @param imageAttributes - attributes of the image such as id, src, style, etc.
+     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']
+     * @param messageId - the id of the message that the inlineImage belongs to.
+     */
+    onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
+    /**
+     * Optional callback invoked after inline image is removed from the UI.
+     * @param imageAttributes - attributes of the image such as id, src, style, etc.
+     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].
+     *        Note that if the src attribute is a local blob url, it has been revoked at this point.
+     * @param messageId - the id of the message that the inlineImage belongs to.
+     */
+    onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
+    /**
+     * Optional Record of type {@link AttachmentMetadataInProgress}
+     * to render the errorBar for inline images inserted in the MessageThread's edit boxes when:
+     *   - there is an error provided in the messagesInlineImagesWithProgress
+     *   - progress is less than 1 when the send button is clicked
+     *   - content html string is longer than the max allowed length.
+     *     (Note that the id and the url prop of the messagesInlineImagesWithProgress will be used as the id and src attribute of the content html
+     *     when calculating the content length, only for the purpose of displaying the content length overflow error.)
+     */
+    messagesInlineImagesWithProgress?: Record<string, AttachmentMetadataInProgress[]>;
+}
 /**
  * Props to render a single message.
  *
@@ -281,7 +357,7 @@ export type MessageProps = {
     /**
      * Strings from parent MessageThread component
      */
-    strings: MessageThreadStrings;
+    strings: MessageThreadStrings & /* @conditional-compile-remove(rich-text-editor) */ Partial<RichTextStrings>;
     /**
      * Custom CSS styles for chat message container.
      */
@@ -327,7 +403,7 @@ export type MessageProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string) => Promise<void>;
+    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
 };
 /**
  * @internal

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

@@ -26,8 +26,16 @@ import { createStyleFromV8Style } from './styles/v8StyleShim';
 import { ChatMessageComponentWrapper } from './ChatMessage/ChatMessageComponentWrapper';
 import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 import { Announcer } from './Announcer';
+/* @conditional-compile-remove(rich-text-editor) */
+import { loadChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker';
 const isMessageSame = (first, second) => {
-    return first.messageId === second.messageId && first.content === second.content && first.contentType === second.contentType && JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) && first.senderId === second.senderId && first.senderDisplayName === second.senderDisplayName && JSON.stringify(first.editedOn) === JSON.stringify(second.editedOn);
+    return (first.messageId === second.messageId &&
+        first.content === second.content &&
+        first.contentType === second.contentType &&
+        JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) &&
+        first.senderId === second.senderId &&
+        first.senderDisplayName === second.senderDisplayName &&
+        JSON.stringify(first.editedOn) === JSON.stringify(second.editedOn));
 };
 /**
  * Get the latest message from the message array.
@@ -54,7 +62,8 @@ const isThereNewMessageNotFromCurrentUser = (userId, latestMessageFromPreviousMe
     if (latestMessageFromPreviousMessages === undefined) {
         return latestMessageFromNewMessages.senderId !== userId;
     }
-    return !isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) && latestMessageFromNewMessages.senderId !== userId;
+    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
+        latestMessageFromNewMessages.senderId !== userId);
 };
 /**
  * Returns true if the current user sent the latest message and false otherwise. It will ignore messages that have no
@@ -69,36 +78,35 @@ const didUserSendTheLatestMessage = (userId, latestMessageFromPreviousMessages,
     if (latestMessageFromPreviousMessages === undefined) {
         return latestMessageFromNewMessages.senderId === userId;
     }
-    return !isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) && latestMessageFromNewMessages.senderId === userId;
+    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
+        latestMessageFromNewMessages.senderId === userId);
 };
 const DefaultJumpToNewMessageButton = (props) => {
     const { text, onClick } = props;
-    return React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) });
+    return (React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) }));
 };
 const memoizeAllMessages = memoizeFnAll((message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage) => {
     let key = message.messageId;
     let statusToRender = undefined;
-    if (message.messageType === 'chat') {
+    if (message.messageType === 'chat' ||
+        /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked') {
         if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
             key = message.clientMessageId;
         }
         if (showMessageStatus && message.mine) {
             switch (message.messageId) {
-                case lastSeenChatMessage:
-                    {
-                        statusToRender = 'seen';
-                        break;
-                    }
-                case lastSendingChatMessage:
-                    {
-                        statusToRender = 'sending';
-                        break;
-                    }
-                case lastDeliveredChatMessage:
-                    {
-                        statusToRender = 'delivered';
-                        break;
-                    }
+                case lastSeenChatMessage: {
+                    statusToRender = 'seen';
+                    break;
+                }
+                case lastSendingChatMessage: {
+                    statusToRender = 'sending';
+                    break;
+                }
+                case lastDeliveredChatMessage: {
+                    statusToRender = 'delivered';
+                    break;
+                }
             }
         }
         if (message.mine && message.status === 'failed') {
@@ -152,8 +160,8 @@ export const MessageThread = (props) => {
     var _a;
     const theme = useTheme();
     const chatBody = useMemo(() => {
-        return React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
-            React.createElement(MessageThreadWrapper, Object.assign({}, props)));
+        return (React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+            React.createElement(MessageThreadWrapper, Object.assign({}, props))));
     }, [theme, props]);
     return React.createElement("div", { className: mergeStyles(messageThreadContainerStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) }, chatBody);
 };
@@ -162,7 +170,17 @@ export const MessageThread = (props) => {
  */
 export const MessageThreadWrapper = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, inlineImageOptions } = props;
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, 
+    /* @conditional-compile-remove(date-time-customization) */
+    onDisplayDateTimeString, 
+    /* @conditional-compile-remove(mention) */
+    mentionOptions, inlineImageOptions, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    attachmentOptions, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    onRenderAttachmentDownloads, 
+    /* @conditional-compile-remove(rich-text-editor) */
+    richTextEditorOptions } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
     const [chatMessagesInitialized, setChatMessagesInitialized] = useState(false);
@@ -188,6 +206,15 @@ export const MessageThreadWrapper = (props) => {
     const previousMessagesRef = useRef([]);
     // an aria label for Narrator to notify when a message is deleted
     const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = useState(undefined);
+    /* @conditional-compile-remove(rich-text-editor) */
+    useEffect(() => {
+        // if rich text editor is enabled, the rich text editor component should be loaded early for good UX
+        if (richTextEditorOptions !== undefined) {
+            // this line is needed to load the Rooster JS dependencies early in the lifecycle
+            // when the rich text editor is enabled
+            loadChatMessageComponentAsRichTextEditBox();
+        }
+    }, [richTextEditorOptions]);
     const onDeleteMessageCallback = useCallback((messageId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!onDeleteMessage) {
             return;
@@ -223,12 +250,12 @@ export const MessageThreadWrapper = (props) => {
             setDeletedMessageAriaLabel(undefined);
         }
         else {
-            if (!previousMessagesRef.current.find(message => message.messageId === latestDeletedMessageId)) {
+            if (!previousMessagesRef.current.find((message) => message.messageId === latestDeletedMessageId)) {
                 // the message is deleted in previousMessagesRef
                 // no need to update deletedMessageAriaLabel
                 setDeletedMessageAriaLabel(undefined);
             }
-            else if (!messages.find(message => message.messageId === latestDeletedMessageId)) {
+            else if (!messages.find((message) => message.messageId === latestDeletedMessageId)) {
                 // the message is deleted in messages array but still exists in previousMessagesRef
                 // update deletedMessageAriaLabel
                 setDeletedMessageAriaLabel(strings.messageDeletedAnnouncementAriaLabel);
@@ -270,10 +297,14 @@ export const MessageThreadWrapper = (props) => {
     const clientHeight = (_a = chatThreadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
     // we try to only send those message status if user is scrolled to the bottom.
     const sendMessageStatusIfAtBottom = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!isAtBottomOfScrollRef.current || !document.hasFocus() || !messagesRef.current || messagesRef.current.length === 0 || !showMessageStatus) {
+        if (!isAtBottomOfScrollRef.current ||
+            !document.hasFocus() ||
+            !messagesRef.current ||
+            messagesRef.current.length === 0 ||
+            !showMessageStatus) {
             return;
         }
-        const messagesWithId = messagesRef.current.filter(message => {
+        const messagesWithId = messagesRef.current.filter((message) => {
             return message.messageType === 'chat' && !message.mine && !!message.messageId;
         });
         if (messagesWithId.length === 0) {
@@ -281,7 +312,10 @@ export const MessageThreadWrapper = (props) => {
         }
         const lastMessage = messagesWithId[messagesWithId.length - 1];
         try {
-            if (onMessageSeen && lastMessage && lastMessage.messageId && lastMessage.messageId !== messageIdSeenByMeRef.current) {
+            if (onMessageSeen &&
+                lastMessage &&
+                lastMessage.messageId &&
+                lastMessage.messageId !== messageIdSeenByMeRef.current) {
                 yield onMessageSeen(lastMessage.messageId);
                 messageIdSeenByMeRef.current = lastMessage.messageId;
             }
@@ -302,7 +336,8 @@ export const MessageThreadWrapper = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        const atBottom = Math.ceil(chatScrollDivRef.current.scrollTop) >= chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
+        const atBottom = Math.ceil(chatScrollDivRef.current.scrollTop) >=
+            chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
         if (atBottom) {
             sendMessageStatusIfAtBottom();
             if (!isAtBottomOfScrollRef.current) {
@@ -318,7 +353,9 @@ export const MessageThreadWrapper = (props) => {
                 isLoadingChatMessagesRef.current = true;
                 try {
                     // Fetch message until scrollTop reach the threshold for fetching new message
-                    while (!isAllChatMessagesLoadedRef.current && chatScrollDivRef.current && chatScrollDivRef.current.scrollTop <= 500) {
+                    while (!isAllChatMessagesLoadedRef.current &&
+                        chatScrollDivRef.current &&
+                        chatScrollDivRef.current.scrollTop <= 500) {
                         isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
                         yield delay(200);
                     }
@@ -345,7 +382,8 @@ export const MessageThreadWrapper = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        chatScrollDivRef.current.scrollTop = chatScrollDivRef.current.scrollHeight - (previousHeightRef.current - previousTopRef.current);
+        chatScrollDivRef.current.scrollTop =
+            chatScrollDivRef.current.scrollHeight - (previousHeightRef.current - previousTopRef.current);
     }, [messages]);
     // Fetch more messages to make the scroll bar appear, infinity scroll is then handled in the handleScroll function.
     useEffect(() => {
@@ -415,10 +453,12 @@ export const MessageThreadWrapper = (props) => {
      */
     useEffect(() => {
         // If user just sent the latest message then we assume we can move user to bottom of scroll.
-        if (isThereNewMessageNotFromCurrentUser(userId, latestPreviousChatMessage, latestCurrentChatMessage) && !isAtBottomOfScrollRef.current) {
+        if (isThereNewMessageNotFromCurrentUser(userId, latestPreviousChatMessage, latestCurrentChatMessage) &&
+            !isAtBottomOfScrollRef.current) {
             setExistsNewChatMessage(true);
         }
-        else if (didUserSendTheLatestMessage(userId, latestPreviousChatMessage, latestCurrentChatMessage) || isAtBottomOfScrollRef.current) {
+        else if (didUserSendTheLatestMessage(userId, latestPreviousChatMessage, latestCurrentChatMessage) ||
+            isAtBottomOfScrollRef.current) {
             scrollToBottom();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -446,28 +486,35 @@ export const MessageThreadWrapper = (props) => {
                 setReadCountForHoveredIndicator(undefined);
             }
         };
-        return React.createElement(MessageStatusIndicatorInternal, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
+        return (React.createElement(MessageStatusIndicatorInternal, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
             // -1 because participant count does not include myself
-            remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldAnnounce: shouldAnnounce });
+            remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldAnnounce: shouldAnnounce }));
     }, []);
     const theme = useTheme();
     const messagesToDisplay = useMemo(() => {
-        return memoizeAllMessages(memoizedMessageFn => {
+        return memoizeAllMessages((memoizedMessageFn) => {
             return messages.map((message, index) => {
                 return memoizedMessageFn(message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessageCallback, onSendMessage, props.disableEditing, lastDeliveredChatMessage, lastSeenChatMessage, lastSendingChatMessage);
             });
         });
-    }, [lastDeliveredChatMessage, lastSeenChatMessage, lastSendingChatMessage, messages, onCancelEditMessage, onDeleteMessageCallback, onSendMessage, onUpdateMessage, props.disableEditing, showMessageDate, showMessageStatus, strings]);
+    }, [
+        lastDeliveredChatMessage,
+        lastSeenChatMessage,
+        lastSendingChatMessage,
+        messages,
+        onCancelEditMessage,
+        onDeleteMessageCallback,
+        onSendMessage,
+        onUpdateMessage,
+        props.disableEditing,
+        showMessageDate,
+        showMessageStatus,
+        strings
+    ]);
     const classes = useChatStyles();
-    const chatArrowNavigationAttributes = useArrowNavigationGroup({
-        axis: 'vertical',
-        memorizeCurrent: false
-    });
-    return React.createElement("div", { className: mergeStyles(messageThreadWrapperContainerStyle), ref: chatThreadRef },
-        existsNewChatMessage && !disableJumpToNewMessageButton && React.createElement("div", { className: mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? onRenderJumpToNewMessageButton({
-            text: strings.newMessagesIndicator,
-            onClick: scrollToBottom
-        }) : React.createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })),
+    const chatArrowNavigationAttributes = useArrowNavigationGroup({ axis: 'vertical', memorizeCurrent: false });
+    return (React.createElement("div", { className: mergeStyles(messageThreadWrapperContainerStyle), ref: chatThreadRef },
+        existsNewChatMessage && !disableJumpToNewMessageButton && (React.createElement("div", { className: mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? (onRenderJumpToNewMessageButton({ text: strings.newMessagesIndicator, onClick: scrollToBottom })) : (React.createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })))),
         React.createElement(LiveAnnouncer, null,
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
                 React.createElement(Chat
@@ -475,10 +522,30 @@ export const MessageThreadWrapper = (props) => {
                 , Object.assign({ 
                     // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
                     className: mergeClasses(classes.root, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, chatArrowNavigationAttributes),
-                    latestDeletedMessageId && React.createElement(Announcer, { key: latestDeletedMessageId, announcementString: deletedMessageAriaLabel, ariaLive: 'polite' }),
+                    latestDeletedMessageId && (React.createElement(Announcer, { key: latestDeletedMessageId, announcementString: deletedMessageAriaLabel, ariaLive: 'polite' })),
                     messagesToDisplay.map((message) => {
-                        return React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, inlineImageOptions: inlineImageOptions }));
-                    })))));
+                        var _a;
+                        return (React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, 
+                            /* @conditional-compile-remove(file-sharing-acs) */
+                            actionsForAttachment: (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _a === void 0 ? void 0 : _a.actionsForAttachment, inlineImageOptions: inlineImageOptions, 
+                            /* @conditional-compile-remove(date-time-customization) */
+                            onDisplayDateTimeString: onDisplayDateTimeString, 
+                            /* @conditional-compile-remove(mention) */
+                            mentionOptions: mentionOptions, 
+                            /* @conditional-compile-remove(file-sharing-acs) */
+                            onRenderAttachmentDownloads: onRenderAttachmentDownloads, 
+                            /* @conditional-compile-remove(rich-text-editor) */
+                            isRichTextEditorEnabled: !!richTextEditorOptions, 
+                            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                            onPaste: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onPaste, 
+                            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                            onInsertInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onInsertInlineImage, 
+                            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                            inlineImagesWithProgress: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress) &&
+                                (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress[message.message.messageId]), 
+                            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                            onRemoveInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onRemoveInlineImage })));
+                    }))))));
 };
 const MemoChatMessageComponentWrapper = React.memo((obj) => {
     return React.createElement(ChatMessageComponentWrapper, Object.assign({}, obj));