npm - @azure/communication-react - Versions diffs - 1.15.0-alpha-202404030013 → 1.15.0-alpha-202404050013 - Mend

@azure/communication-react 1.15.0-alpha-202404030013 → 1.15.0-alpha-202404050013

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

Files changed (174) hide show

package/dist/dist-cjs/communication-react/{index-aOBAWcNI.js → index-C4BFVPuO.js} RENAMED Viewed

@@ -176,7 +176,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.15.0-alpha-202404030013';
+var telemetryVersion = '1.15.0-alpha-202404050013';
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -390,7 +390,6 @@ const isHideAttendeeNamesEnabled = (state, props) => {
     /* @conditional-compile-remove(hide-attendee-name) */
     return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.hideAttendeeNames) !== null && _b !== void 0 ? _b : false;
 };
-/* @conditional-compile-remove(capabilities) */
 /**
  * @private
  */
@@ -643,21 +642,12 @@ const maskDisplayNameWithRole = (displayName, localUserRole, participantRole, is
  *
  * @public
  */
-const microphoneButtonSelector = reselect__namespace.createSelector([
-    getCallExists,
-    getIsMuted,
-    getDeviceManager$1,
-    /* @conditional-compile-remove(capabilities) */ getCapabilities,
-    /* @conditional-compile-remove(capabilities) */ getRole$1
-], (callExists, isMuted, deviceManager,
-/* @conditional-compile-remove(capabilities) */ capabilities,
-/* @conditional-compile-remove(capabilities) */ role) => {
+const microphoneButtonSelector = reselect__namespace.createSelector([getCallExists, getIsMuted, getDeviceManager$1, getCapabilities, getRole$1], (callExists, isMuted, deviceManager, capabilities, role) => {
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;
-    /* @conditional-compile-remove(capabilities) */
     const incapable = ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.unmuteMic.isPresent) === false && (capabilities === null || capabilities === void 0 ? void 0 : capabilities.unmuteMic.reason) !== 'NotInitialized') ||
         role === 'Consumer';
     return {
-        disabled: !callExists || !permission || /* @conditional-compile-remove(capabilities) */ incapable,
+        disabled: !callExists || !permission || incapable,
         checked: callExists ? !isMuted : false,
         microphones: deviceManager.microphones,
         speakers: deviceManager.speakers,
@@ -670,25 +660,14 @@ const microphoneButtonSelector = reselect__namespace.createSelector([
  *
  * @public
  */
-const cameraButtonSelector = reselect__namespace.createSelector([
-    getLocalVideoStreams$1,
-    getDeviceManager$1,
-    /* @conditional-compile-remove(capabilities) */ getCapabilities,
-    /* @conditional-compile-remove(capabilities) */ getRole$1
-], (localVideoStreams, deviceManager,
-/* @conditional-compile-remove(capabilities) */ capabilities,
-/* @conditional-compile-remove(capabilities) */ role) => {
+const cameraButtonSelector = reselect__namespace.createSelector([getLocalVideoStreams$1, getDeviceManager$1, getCapabilities, getRole$1], (localVideoStreams, deviceManager, capabilities, role) => {
     const previewOn = _isPreviewOn(deviceManager);
     const localVideoFromCall = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;
-    /* @conditional-compile-remove(capabilities) */
     const incapable = ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.turnVideoOn.isPresent) === false && (capabilities === null || capabilities === void 0 ? void 0 : capabilities.turnVideoOn.reason) !== 'NotInitialized') ||
         role === 'Consumer';
     return {
-        disabled: !deviceManager.selectedCamera ||
-            !permission ||
-            !deviceManager.cameras.length ||
-            /* @conditional-compile-remove(capabilities) */ incapable,
+        disabled: !deviceManager.selectedCamera || !permission || !deviceManager.cameras.length || incapable,
         checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,
         cameras: deviceManager.cameras,
         selectedCamera: deviceManager.selectedCamera
@@ -723,17 +702,8 @@ const reactionButtonSelector = reselect__namespace.createSelector([getLocalParti
  *
  * @public
  */
-const screenShareButtonSelector = reselect__namespace.createSelector([
-    getIsScreenSharingOn,
-    /* @conditional-compile-remove(PSTN-calls) */ getCallState,
-    /* @conditional-compile-remove(capabilities) */ getCapabilities,
-    /* @conditional-compile-remove(capabilities) */ getRole$1
-], (isScreenSharingOn,
-/* @conditional-compile-remove(PSTN-calls) */ callState,
-/* @conditional-compile-remove(capabilities) */ capabilities,
-/* @conditional-compile-remove(capabilities) */ role) => {
+const screenShareButtonSelector = reselect__namespace.createSelector([getIsScreenSharingOn, /* @conditional-compile-remove(PSTN-calls) */ getCallState, getCapabilities, getRole$1], (isScreenSharingOn, /* @conditional-compile-remove(PSTN-calls) */ callState, capabilities, role) => {
     let disabled = undefined;
-    /* @conditional-compile-remove(capabilities) */
     disabled =
         disabled ||
             ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.shareScreen.isPresent) === false && (capabilities === null || capabilities === void 0 ? void 0 : capabilities.shareScreen.reason) !== 'NotInitialized') ||
@@ -2315,7 +2285,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(capabilities) */
     setCapabilities(callId, capabilities, capabilitiesChangeInfo) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3991,7 +3960,6 @@ class OptimalVideoCountSubscriber {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(capabilities) */
 /**
  * @private
  */
@@ -4176,7 +4144,6 @@ class CallSubscriber {
             /* @conditional-compile-remove(acs-close-captions) */
             (_c = this._CaptionsSubscriber) === null || _c === void 0 ? void 0 : _c.unsubscribe();
             (_d = this._raiseHandSubscriber) === null || _d === void 0 ? void 0 : _d.unsubscribe();
-            /* @conditional-compile-remove(capabilities) */
             this._capabilitiesSubscriber.unsubscribe();
             /* @conditional-compile-remove(reaction) */
             (_e = this._reactionSubscriber) === null || _e === void 0 ? void 0 : _e.unsubscribe();
@@ -4293,7 +4260,6 @@ class CallSubscriber {
             localOptimalVideoCountFeature: this._call.feature(communicationCalling.Features.OptimalVideoCount)
         });
         this._localVideoStreamVideoEffectsSubscribers = new Map();
-        /* @conditional-compile-remove(capabilities) */
         this._capabilitiesSubscriber = new CapabilitiesSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Capabilities));
         /* @conditional-compile-remove(spotlight) */
         this._spotlightSubscriber = new SpotlightSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Spotlight));
@@ -6359,9 +6325,8 @@ const sendButtonStyle = react.mergeStyles({
  */
 const sendIconStyle = (props) => {
     const { theme, hasText, disabled = false,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasAttachment, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
-    const hasNoContent = !hasText &&
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ !hasAttachment;
+    /* @conditional-compile-remove(attachment-upload) */ hasAttachment, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
+    const hasNoContent = !hasText && /* @conditional-compile-remove(attachment-upload) */ !hasAttachment;
     return react.mergeStyles(editorTextBoxButtonStyle, {
         color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary
     }, customSendIconStyle);
@@ -6705,7 +6670,7 @@ const DEFAULT_COMPONENT_ICONS = {
     LowerHandContextualMenuItem: React.createElement(reactIcons.HandRightOff20Regular, null),
     /* @conditional-compile-remove(reaction) */
     ReactionButtonIcon: React.createElement(reactIcons.Emoji20Regular, null),
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     CancelAttachmentUpload: React.createElement(reactIcons.Dismiss16Regular, null),
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     DownloadAttachment: React.createElement(reactIcons.ArrowDownload20Regular, null),
@@ -8965,7 +8930,7 @@ const _AttachmentUploadCards = (props) => {
  */
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const EMPTY_MESSAGE_REGEX = /^\s*$/;
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  */
@@ -8975,7 +8940,7 @@ const hasIncompleteAttachmentUploads = (activeAttachmentUploads) => {
             .filter((attachmentUpload) => !attachmentUpload.uploadError)
             .every((attachmentUpload) => attachmentUpload.progress === 1 && attachmentUpload.progress !== undefined));
 };
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  */
@@ -9367,11 +9332,11 @@ const FluentProviderWithStylesOverrides = (props) => {
  *
  * @public
  */
-const SendBox$1 = (props) => {
+const SendBox = (props) => {
     const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus,
     /* @conditional-compile-remove(mention) */
     mentionLookupOptions,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     activeAttachmentUploads } = props;
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.sendBox;
@@ -9380,7 +9345,7 @@ const SendBox$1 = (props) => {
     const [textValue, setTextValue] = React.useState('');
     const [textValueOverflow, setTextValueOverflow] = React.useState(false);
     const sendTextFieldRef = React.useRef(null);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = React.useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
@@ -9389,9 +9354,9 @@ const SendBox$1 = (props) => {
             return;
         }
         // Don't send message until all attachments have been uploaded successfully
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         setAttachmentUploadsPendingError(undefined);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {
             setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
@@ -9400,7 +9365,7 @@ const SendBox$1 = (props) => {
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
+            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
             onSendMessage && onSendMessage(message);
             setTextValue('');
         }
@@ -9420,25 +9385,25 @@ const SendBox$1 = (props) => {
     const mergedSendIconStyle = React.useMemo(() => sendIconStyle({
         theme,
         hasText: !!textValue,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasAttachment: hasCompletedAttachmentUploads(activeAttachmentUploads),
+        /* @conditional-compile-remove(attachment-upload) */ hasAttachment: hasCompletedAttachmentUploads(activeAttachmentUploads),
         hasErrorMessage: !!errorMessage,
         customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     }), [
         theme,
         textValue,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
+        /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
         errorMessage,
         styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     ]);
     const onRenderSendIcon = React.useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(react.Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no attachments in sendBox
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     React.useEffect(() => {
         if (!(activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((upload) => !upload.uploadError).length)) {
             setAttachmentUploadsPendingError(undefined);
         }
     }, [activeAttachmentUploads]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a;
         return {
@@ -9446,7 +9411,7 @@ const SendBox$1 = (props) => {
             attachmentUploadError: (_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError
         };
     }, [activeAttachmentUploads, attachmentUploadsPendingError]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentUploads = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         if (!(activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((upload) => !upload.uploadError).length)) {
@@ -9468,8 +9433,8 @@ const SendBox$1 = (props) => {
         localeStrings.uploadCompleted
     ]);
     return (React.createElement(react.Stack, { className: react.mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
-        ) },
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
+        ) }, /* @conditional-compile-remove(attachment-upload) */
+        React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(react.Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
@@ -9491,7 +9456,7 @@ const SendBox$1 = (props) => {
                         }
                         e.stopPropagation();
                     }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel })),
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             onRenderAttachmentUploads())));
 };
@@ -9943,6 +9908,15 @@ const richTextFormatButtonIconStyle = (theme, isSelected) => {
         color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary
     });
 };
+/**
+ * @private
+ */
+const editBoxRichTextEditorStyle = () => {
+    return {
+        minHeight: '2.25rem',
+        maxHeight: '2.25rem'
+    };
+};
 /**
  * @private
  */
@@ -10000,6 +9974,12 @@ const insertTableMenuTitleStyles = react.mergeStyles({
     fontSize: '0.75rem',
     marginBottom: '0.5rem'
 });
+/**
+ * @private
+ */
+const tableContextMenuIconStyles = react.mergeStyles({
+    marginTop: '0.375rem'
+});
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -10153,8 +10133,7 @@ const insertTableButton = (theme, maxRowsNumber, maxColumnsNumber) => {
             menuIconProps: {
                 hidden: true
             },
-            onRenderIcon: (item) => {
-                console.log('onRenderIcon', item);
+            onRenderIcon: () => {
                 return React.createElement(TableIcon, null);
             },
             buttonStyles: ribbonTableButtonStyle(theme),
@@ -10236,8 +10215,8 @@ const ribbonButtons = (theme) => {
         dividerRibbonButton(theme, 'RichTextRibbonTextFormatDivider'),
         bulletListButton(theme),
         numberListButton(theme),
-        indentIncreaseButton(theme),
         indentDecreaseButton(theme),
+        indentIncreaseButton(theme),
         dividerRibbonButton(theme, 'RichTextRibbonTableDivider'),
         insertTableButton(theme, MaxRowsNumber, MaxColumnsNumber)
     ].forEach((item) => {
@@ -10314,7 +10293,11 @@ const tableEditInsertMenuItem = {
         menuNameTableInsertLeft: 'Insert left123 ',
         menuNameTableInsertRight: 'Insert right'
     },
-    onClick
+    onClick,
+    iconProps: {
+        iconName: 'RichTextTableInsertMenuIcon',
+        styles: { root: tableContextMenuIconStyles }
+    }
 };
 const tableEditDeleteMenuItem = {
     key: 'menuNameTableDelete',
@@ -10324,7 +10307,11 @@ const tableEditDeleteMenuItem = {
         menuNameTableDeleteRow: 'Delete row',
         menuNameTableDeleteTable: 'Delete table'
     },
-    onClick
+    onClick,
+    iconProps: {
+        iconName: 'RichTextTableDeleteMenuIcon',
+        styles: { root: tableContextMenuIconStyles }
+    }
 };
 const tableActions = [tableEditInsertMenuItem, tableEditDeleteMenuItem];
 /**
@@ -10340,6 +10327,41 @@ const getEditingTable = (editor, node) => {
     return (table === null || table === void 0 ? void 0 : table.isContentEditable) ? { table, td } : null;
 };
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
+ */
+class CopyPastePlugin {
+    getName() {
+        return 'CopyPastePlugin';
+    }
+    initialize() { }
+    dispose() { }
+    onPluginEvent(event) {
+        removeImageElement(event);
+    }
+}
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+const removeImageElement = (event) => {
+    // We don't support the pasting options such as paste as image yet.
+    if (event.eventType === roosterjsEditorTypesCompatible.CompatiblePluginEventType.BeforePaste && event.pasteType === roosterjsEditorTypesCompatible.CompatiblePasteType.Normal) {
+        event.fragment.querySelectorAll('img').forEach((image) => {
+            // If the image is the only child of its parent, remove all the parents of this img element.
+            let parentNode = image.parentElement;
+            let currentNode = image;
+            while ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.childNodes.length) === 1) {
+                currentNode = parentNode;
+                parentNode = parentNode.parentElement;
+            }
+            currentNode === null || currentNode === void 0 ? void 0 : currentNode.remove();
+        });
+    }
+};
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -10392,7 +10414,16 @@ const RichTextEditor = React.forwardRef((props, ref) => {
         const updateContentPlugin = roosterjsReact.createUpdateContentPlugin(roosterjsReact.UpdateMode.OnContentChangedEvent | roosterjsReact.UpdateMode.OnUserInput, (content) => {
             onChange && onChange(content);
         });
-        return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin, contextPlugin, tableEditMenuProvider];
+        const copyPastePlugin = new CopyPastePlugin();
+        return [
+            contentEdit,
+            placeholderPlugin,
+            updateContentPlugin,
+            ribbonPlugin,
+            contextPlugin,
+            tableEditMenuProvider,
+            copyPastePlugin
+        ];
     }, [onChange, placeholderPlugin, ribbonPlugin, strings]);
     const ribbon = React.useMemo(() => {
         const buttons = ribbonButtons(theme);
@@ -10464,9 +10495,9 @@ const richTextBorderBoxStyle = (props) => {
  */
 const RichTextInputBoxComponent = (props) => {
     const { placeholderText, initialContent, onChange, onEnterKeyDown, editorComponentRef, disabled, strings, actionComponents,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     onRenderAttachmentUploads,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false } = props;
     const theme = useTheme();
     const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = React.useState(false);
@@ -10505,11 +10536,11 @@ const RichTextInputBoxComponent = (props) => {
     const useHorizontalLayout = React.useMemo(() => {
         return (!isHorizontalLayoutDisabled &&
             !showRichTextEditorFormatting &&
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ !hasAttachments);
+            /* @conditional-compile-remove(attachment-upload) */ !hasAttachments);
     }, [
         isHorizontalLayoutDisabled,
         showRichTextEditorFormatting,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasAttachments
+        /* @conditional-compile-remove(attachment-upload) */ hasAttachments
     ]);
     return (React.createElement("div", { className: richTextBorderBoxStyle({
             theme: theme,
@@ -10519,7 +10550,7 @@ const RichTextInputBoxComponent = (props) => {
             React.createElement(react.Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(react.Stack.Item, { className: inputBoxRichTextStackItemStyle },
                     React.createElement(RichTextEditor, { initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle })),
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&
+                /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&
                     onRenderAttachmentUploads()),
             actionButtons)));
 };
@@ -10531,9 +10562,9 @@ const RichTextInputBoxComponent = (props) => {
  */
 const RichTextSendBoxErrors = (props) => {
     const {
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     attachmentUploadError,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     attachmentUploadsPendingError, systemMessage, textTooLongMessage } = props;
     const [sendBoxError, setSendBoxError] = React.useState(undefined);
     React.useEffect(() => {
@@ -10558,11 +10589,11 @@ const RichTextSendBoxErrors = (props) => {
             if (prev) {
                 errors.push(prev);
             }
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             if (attachmentUploadsPendingError) {
                 errors.push(attachmentUploadsPendingError);
             }
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             if (attachmentUploadError) {
                 errors.push(attachmentUploadError);
             }
@@ -10574,8 +10605,8 @@ const RichTextSendBoxErrors = (props) => {
             return sortedErrors[0];
         });
     }, [
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadError,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
+        /* @conditional-compile-remove(attachment-upload) */ attachmentUploadError,
+        /* @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
     ]);
     const onDismiss = React.useCallback(() => {
         if (systemMessage && !isMessageEmpty$1(systemMessage)) {
@@ -10599,9 +10630,9 @@ const isMessageEmpty$1 = (message) => {
  */
 const RichTextSendBox = (props) => {
     const { disabled = false, systemMessage, onSendMessage,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     activeAttachmentUploads,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     onCancelAttachmentUpload } = props;
     const theme = useTheme();
     const locale = useLocale$1();
@@ -10614,7 +10645,7 @@ const RichTextSendBox = (props) => {
     }, [localeStrings, props.strings]);
     const [contentValue, setContentValue] = React.useState('');
     const [contentValueOverflow, setContentValueOverflow] = React.useState(false);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = React.useState(undefined);
     const editorComponentRef = React.useRef(null);
     const contentTooLongMessage = React.useMemo(() => (contentValueOverflow ? strings.textTooLong : undefined), [contentValueOverflow, strings.textTooLong]);
@@ -10631,9 +10662,9 @@ const RichTextSendBox = (props) => {
             return;
         }
         // Don't send message until all attachments have been uploaded successfully
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         setAttachmentUploadsPendingError(undefined);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {
             setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
@@ -10642,7 +10673,7 @@ const RichTextSendBox = (props) => {
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
+            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
             onSendMessage(message);
             setContentValue('');
             (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
@@ -10653,29 +10684,29 @@ const RichTextSendBox = (props) => {
         contentValueOverflow,
         disabled,
         onSendMessage,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError
+        /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
+        /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError
     ]);
     const hasErrorMessage = React.useMemo(() => {
         var _a;
         return (!!systemMessage ||
             !!contentTooLongMessage ||
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             !!attachmentUploadsPendingError ||
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             !!((_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError));
     }, [
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         activeAttachmentUploads,
         contentTooLongMessage,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         attachmentUploadsPendingError,
         systemMessage
     ]);
     const onRenderSendIcon = React.useCallback((isHover) => (React.createElement(react.Icon, { iconName: isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
             theme,
             hasText: !!contentValue,
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             hasAttachment: false,
             hasErrorMessage: hasErrorMessage,
             defaultTextColor: theme.palette.neutralSecondary,
@@ -10684,22 +10715,22 @@ const RichTextSendBox = (props) => {
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a;
         return {
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             attachmentUploadsPendingError: attachmentUploadsPendingError,
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             attachmentUploadError: (_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError,
             systemMessage: systemMessage,
             textTooLongMessage: contentTooLongMessage
         };
     }, [
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         activeAttachmentUploads,
         contentTooLongMessage,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         attachmentUploadsPendingError,
         systemMessage
     ]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentUploads = React.useCallback(() => {
         return (React.createElement(react.Stack, { className: attachmentUploadCardsStyles },
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
@@ -10722,16 +10753,16 @@ const RichTextSendBox = (props) => {
                 e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
             }, className: richTextActionButtonsStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel }));
     }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const hasAttachmentUploads = React.useMemo(() => {
         return (hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads));
     }, [activeAttachmentUploads]);
     return (React.createElement(react.Stack, null,
         React.createElement(RichTextSendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(RichTextInputBoxComponent, { placeholderText: strings.placeholderText, onChange: setContent, onEnterKeyDown: sendMessageOnClick, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle,
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             onRenderAttachmentUploads: onRenderAttachmentUploads,
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             hasAttachments: hasAttachmentUploads })));
 };
@@ -10765,7 +10796,7 @@ const inputBoxIcon = react.mergeStyles({
 /**
  * @private
  */
-react.mergeStyles(editorTextBoxButtonStyle, {
+const richTextEditBoxActionButtonIcon = react.mergeStyles(editorTextBoxButtonStyle, {
     '&:hover svg': {
         stroke: 'currentColor'
     }
@@ -11159,7 +11190,7 @@ const useChatMessageEditContainerStyles = reactComponents.makeStyles({
 /**
  * @private
  */
-reactComponents.makeStyles({
+const useChatMessageRichTextEditContainerStyles = reactComponents.makeStyles({
     body: Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent' }), reactComponents.shorthands.margin('1.25rem', 0, 0, 0)), { width: '100%' }),
     bodyAttached: {
         marginTop: '0.125rem',
@@ -11221,24 +11252,23 @@ const onRenderSubmitIcon = (className) => {
     return React.createElement(react.Icon, { iconName: 'EditBoxSubmit', className: className });
 };
 function isMessageEmpty(messageText,
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 attachmentMetadata) {
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     return messageText.trim().length === 0 && (attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.length) === 0;
 }
 /**
  * @private
  */
 function getMessageState(messageText,
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata) {
-    return isMessageEmpty(messageText,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata)
+/* @conditional-compile-remove(attachment-upload) */ attachmentMetadata) {
+    return isMessageEmpty(messageText, /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata)
         ? 'too short'
         : isMessageTooLong(messageText.length)
             ? 'too long'
             : 'OK';
 }
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  * @TODO: Remove when file-sharing feature becomes stable.
@@ -11663,97 +11693,6 @@ const generateParticipantsStr = (participants, defaultName) => participants
     .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
     .join(', ');
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const ChatMessageComponentAsEditBox = (props) => {
-    const { onCancel, onSubmit, strings, message } = props;
-    /* @conditional-compile-remove(mention) */
-    const { mentionLookupOptions } = props;
-    const [textValue, setTextValue] = React.useState(message.content || '');
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    const [attachmentMetadata, setAttachmentMetadata] = React.useState(getMessageWithAttachmentMetadata(message));
-    const editTextFieldRef = React.useRef(null);
-    const theme = useTheme();
-    const messageState = getMessageState(textValue,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
-    const submitEnabled = messageState === 'OK';
-    const editContainerStyles = useChatMessageEditContainerStyles();
-    const chatMyMessageStyles = useChatMyMessageStyles();
-    React.useEffect(() => {
-        var _a;
-        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    const setText = (event, newValue) => {
-        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
-    };
-    const textTooLongMessage = messageState === 'too long'
-        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
-        : undefined;
-    const iconClassName = React.useCallback((isHover) => {
-        const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
-        return react.mergeStyles(inputBoxIcon, { color });
-    }, [theme.palette.accent, theme.palette.neutralSecondary]);
-    const onRenderThemedCancelIcon = React.useCallback((isHover) => {
-        return onRenderCancelIcon(iconClassName(isHover));
-    }, [iconClassName]);
-    const onRenderThemedSubmitIcon = React.useCallback((isHover) => {
-        return onRenderSubmitIcon(iconClassName(isHover));
-    }, [iconClassName]);
-    const editBoxStyles = React.useMemo(() => {
-        return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
-    }, [theme.palette.themePrimary]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    const onRenderAttachmentUploads = React.useCallback(() => {
-        return (!!attachmentMetadata &&
-            attachmentMetadata.length > 0 && (React.createElement("div", { style: { margin: '0.25rem' } },
-            React.createElement(_AttachmentUploadCards, { activeAttachmentUploads: attachmentMetadata, onCancelAttachmentUpload: (attachmentId) => {
-                    setAttachmentMetadata(attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.filter((attachment) => attachment.id !== attachmentId));
-                } }))));
-    }, [attachmentMetadata]);
-    const getContent = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
-                    if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
-                        ev.stopPropagation();
-                    }
-                }, onEnterKeyDown: () => {
-                    submitEnabled &&
-                        onSubmit(textValue, message.metadata,
-                        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ {
-                            attachmentMetadata
-                        });
-                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles,
-                /* @conditional-compile-remove(mention) */
-                mentionLookupOptions: mentionLookupOptions }),
-            React.createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
-                message.failureReason && (React.createElement(react.Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
-                    React.createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason))),
-                React.createElement(react.Stack.Item, { align: "end" },
-                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                            onCancel && onCancel(message.messageId);
-                        }, id: 'dismissIconWrapper' })),
-                React.createElement(react.Stack.Item, { align: "end" },
-                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
-                            submitEnabled &&
-                                onSubmit(textValue, message.metadata,
-                                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ {
-                                    attachmentMetadata
-                                });
-                            e.stopPropagation();
-                        }, id: 'submitIconWrapper' }))),
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads()));
-    };
-    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
-    return (React.createElement(reactChat.ChatMyMessage, { attached: attached, root: {
-            className: chatMyMessageStyles.root
-        }, body: {
-            className: reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
-        } }, getContent()));
-};
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -12498,6 +12437,117 @@ const MessageBubble$1 = (props) => {
 /** @private */
 const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble$1);
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const ChatMessageComponentAsEditBox = (props) => {
+    const { onCancel, onSubmit, strings, message } = props;
+    /* @conditional-compile-remove(mention) */
+    const { mentionLookupOptions } = props;
+    const [textValue, setTextValue] = React.useState(message.content || '');
+    /* @conditional-compile-remove(attachment-upload) */
+    const [attachmentMetadata, setAttachmentMetadata] = React.useState(getMessageWithAttachmentMetadata(message));
+    const editTextFieldRef = React.useRef(null);
+    const theme = useTheme();
+    const messageState = getMessageState(textValue,
+    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
+    const submitEnabled = messageState === 'OK';
+    const editContainerStyles = useChatMessageEditContainerStyles();
+    const chatMyMessageStyles = useChatMyMessageStyles();
+    React.useEffect(() => {
+        var _a;
+        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setText = (event, newValue) => {
+        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+    };
+    const textTooLongMessage = messageState === 'too long'
+        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
+        : undefined;
+    const iconClassName = React.useCallback((isHover) => {
+        const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
+        return react.mergeStyles(inputBoxIcon, { color });
+    }, [theme.palette.accent, theme.palette.neutralSecondary]);
+    const onRenderThemedCancelIcon = React.useCallback((isHover) => {
+        return onRenderCancelIcon(iconClassName(isHover));
+    }, [iconClassName]);
+    const onRenderThemedSubmitIcon = React.useCallback((isHover) => {
+        return onRenderSubmitIcon(iconClassName(isHover));
+    }, [iconClassName]);
+    const editBoxStyles = React.useMemo(() => {
+        return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
+    }, [theme.palette.themePrimary]);
+    /* @conditional-compile-remove(attachment-upload) */
+    const onRenderAttachmentUploads = React.useCallback(() => {
+        return (!!attachmentMetadata &&
+            attachmentMetadata.length > 0 && (React.createElement("div", { style: { margin: '0.25rem' } },
+            React.createElement(_AttachmentUploadCards, { activeAttachmentUploads: attachmentMetadata, onCancelAttachmentUpload: (attachmentId) => {
+                    setAttachmentMetadata(attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.filter((attachment) => attachment.id !== attachmentId));
+                } }))));
+    }, [attachmentMetadata]);
+    const getContent = () => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
+                    if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
+                        ev.stopPropagation();
+                    }
+                }, onEnterKeyDown: () => {
+                    submitEnabled &&
+                        onSubmit(textValue, message.metadata,
+                        /* @conditional-compile-remove(attachment-upload) */ {
+                            attachmentMetadata
+                        });
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles,
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions }),
+            React.createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
+                message.failureReason && (React.createElement(react.Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
+                    React.createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason))),
+                React.createElement(react.Stack.Item, { align: "end" },
+                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                            onCancel && onCancel(message.messageId);
+                        }, id: 'dismissIconWrapper' })),
+                React.createElement(react.Stack.Item, { align: "end" },
+                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                            submitEnabled &&
+                                onSubmit(textValue, message.metadata,
+                                /* @conditional-compile-remove(attachment-upload) */ {
+                                    attachmentMetadata
+                                });
+                            e.stopPropagation();
+                        }, id: 'submitIconWrapper' }))), /* @conditional-compile-remove(attachment-upload) */
+            onRenderAttachmentUploads()));
+    };
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    return (React.createElement(reactChat.ChatMyMessage, { attached: attached, root: {
+            className: chatMyMessageStyles.root
+        }, body: {
+            className: reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
+        } }, getContent()));
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(rich-text-editor) */
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-B3cXye-F.js'); }).then((module) => ({
+    default: module.ChatMessageComponentAsRichTextEditBox
+})));
+/**
+ * @private
+ */
+const ChatMessageComponentAsEditBoxPicker = (props) => {
+    /* @conditional-compile-remove(rich-text-editor) */
+    const { richTextEditor } = props;
+    /* @conditional-compile-remove(rich-text-editor) */
+    if (richTextEditor) {
+        return (React.createElement(React.Suspense, null,
+            React.createElement(ChatMessageComponentAsRichTextEditBox, Object.assign({}, props))));
+    }
+    return React.createElement(ChatMessageComponentAsEditBox, Object.assign({}, props));
+};
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -12533,17 +12583,24 @@ const ChatMyMessageComponent = (props) => {
         onSendMessage && onSendMessage(content !== undefined ? content : '');
     }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return (React.createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$C(void 0, void 0, void 0, function* () {
+        return (React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$C(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     message.messageId &&
-                    (yield props.onUpdateMessage(message.messageId, text, metadata, options));
+                    (yield props.onUpdateMessage(message.messageId, text,
+                    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+                    {
+                        metadata: metadata,
+                        attachmentMetadata: options === null || options === void 0 ? void 0 : options.attachmentMetadata
+                    }));
                 setIsEditing(false);
             }), 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 }));
+            mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions,
+            /* @conditional-compile-remove(rich-text-editor) */
+            richTextEditor: props.richTextEditor }));
     }
     else {
         return (React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar,
@@ -12573,7 +12630,9 @@ const FluentChatMyMessageComponent = (props) => {
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     actionsForAttachment,
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    onRenderAttachmentDownloads } = props;
+    onRenderAttachmentDownloads,
+    /* @conditional-compile-remove(rich-text-editor) */
+    richTextEditor } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentDownloadsMemo = React.useMemo(() => {
@@ -12597,7 +12656,9 @@ const FluentChatMyMessageComponent = (props) => {
                 /* @conditional-compile-remove(mention) */
                 mentionOptions: mentionOptions,
                 /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-                actionsForAttachment: actionsForAttachment })));
+                actionsForAttachment: actionsForAttachment,
+                /* @conditional-compile-remove(rich-text-editor) */
+                richTextEditor: richTextEditor })));
         }
         return React.createElement(React.Fragment, null);
     }, [
@@ -12617,7 +12678,9 @@ const FluentChatMyMessageComponent = (props) => {
         /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         actionsForAttachment,
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        new Date().toDateString()
+        new Date().toDateString(),
+        /* @conditional-compile-remove(rich-text-editor) */
+        richTextEditor
     ]);
     const messageRenderer = React.useCallback((messageProps) => {
         return onRenderMessage === undefined
@@ -13071,7 +13134,9 @@ const MessageThreadWrapper = (props) => {
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     attachmentOptions,
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    onRenderAttachmentDownloads } = props;
+    onRenderAttachmentDownloads,
+    /* @conditional-compile-remove(rich-text-editor) */
+    richTextEditor = false } = 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] = React.useState(false);
@@ -13414,7 +13479,9 @@ const MessageThreadWrapper = (props) => {
                             /* @conditional-compile-remove(mention) */
                             mentionOptions: mentionOptions,
                             /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-                            onRenderAttachmentDownloads: onRenderAttachmentDownloads })));
+                            onRenderAttachmentDownloads: onRenderAttachmentDownloads,
+                            /* @conditional-compile-remove(rich-text-editor) */
+                            richTextEditor: richTextEditor })));
                     }))))));
 };
 const MemoChatMessageComponentWrapper = React.memo((obj) => {
@@ -14345,7 +14412,10 @@ const emojiStyles = (backgroundImage, frameCount) => {
             animationDuration: '8.12s',
             animationTimingFunction: `steps(${steps})`,
             animationIterationCount: 'infinite',
-            backgroundColor: 'unset'
+            backgroundColor: 'transparent'
+        },
+        ':active': {
+            backgroundColor: 'transparent'
         }
     };
 };
@@ -14457,7 +14527,7 @@ const _ReactionDrawerMenuItem = (props) => {
             marginTop: '12px'
         }
     };
-    return (React.createElement(react.Stack, { id: "reaction", role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
+    return (React.createElement(react.Stack, { "data-ui-id": "reaction-mobile-drawer-menu-item", id: "reaction", role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
         React.createElement("div", { style: mobileViewMenuItemStyle() }, emojis.map((emoji, index) => {
             const resourceUrl = emojiResource.get(emoji.toString());
             return (React.createElement(react.IconButton, { key: index, onClick: () => {
@@ -14765,10 +14835,31 @@ const useVideoTileContextualMenuProps = (props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(reaction) */
-/**
- * @private
- */
-const DEFAULT_ORIGINAL_EMOJI_SIZE = 84;
+/** @private */
+const REACTION_START_DISPLAY_SIZE = 44;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+const REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+const getCombinedKey = (userId, reactionType, receivedAt) => {
+    const receivedTime = receivedAt.toISOString();
+    return userId + reactionType + receivedTime;
+};
+/* @conditional-compile-remove(reaction) */
+/** @private */
+const getReceivedUnixTime = (receivedTime) => {
+    return receivedTime.getTime();
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /**
  * @private
  */
@@ -14927,12 +15018,12 @@ const raiseHandLimitedSpaceStyles = {
 /**
  * @private
  */
-const playFrames = react.memoizeFunction(() => react.keyframes({
+const playFrames = react.memoizeFunction((frameHightPx, frameCount) => react.keyframes({
     from: {
-        backgroundPosition: '0px 8568px'
+        backgroundPosition: `0px 0px`
     },
     to: {
-        backgroundPosition: '0px 0px'
+        backgroundPosition: `0px ${frameCount * -frameHightPx}px`
     }
 }));
 /* @conditional-compile-remove(reaction) */
@@ -14942,24 +15033,21 @@ const playFrames = react.memoizeFunction(() => react.keyframes({
 const reactionRenderingStyle = (args) => {
     var _a;
     const imageUrl = `url(${args.spriteImageUrl})`;
-    const steps = (_a = args.frameCount) !== null && _a !== void 0 ? _a : 51;
+    const steps = (_a = args.frameCount) !== null && _a !== void 0 ? _a : 0;
+    const frameSizePx = args.rawFrameSize;
     return react.mergeStyles({
-        height: '100%',
-        width: '100%',
+        height: `${frameSizePx}px`,
+        width: `${frameSizePx}px`,
         overflow: 'hidden',
-        animationName: playFrames(),
+        animationName: playFrames(frameSizePx, steps),
         backgroundImage: imageUrl,
-        animationDuration: '5.12s',
+        animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,
         animationTimingFunction: `steps(${steps})`,
-        backgroundSize: `cover`,
         animationPlayState: 'running',
         animationIterationCount: 'infinite',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundPosition: `center`,
-        transform: `scale(${DEFAULT_ORIGINAL_EMOJI_SIZE < args.emojiSize
-            ? DEFAULT_ORIGINAL_EMOJI_SIZE / args.emojiSize
-            : args.emojiSize / DEFAULT_ORIGINAL_EMOJI_SIZE})`
+        // Scale the emoji to fit the parent container
+        transform: `scale(${args.emojiSize / frameSizePx})`,
+        transformOrigin: 'top left'
     });
 };
@@ -15458,28 +15546,26 @@ const getEmojiFrameCount = (reactionName, reactionResources) => {
             return 0;
     }
 };
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
 /* @conditional-compile-remove(reaction) */
-/** @private */
-const REACTION_START_DISPLAY_SIZE = 44;
-/* @conditional-compile-remove(reaction) */
-/** @private */
-const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;
-/* @conditional-compile-remove(reaction) */
-/** @private */
-const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;
-/* @conditional-compile-remove(reaction) */
-/** @private */
-const getCombinedKey = (userId, reactionType, receivedAt) => {
-    const receivedTime = receivedAt.toISOString();
-    return userId + reactionType + receivedTime;
-};
-/* @conditional-compile-remove(reaction) */
-/** @private */
-const getReceivedUnixTime = (receivedTime) => {
-    return receivedTime.getTime();
+/**
+ * @private
+ */
+const getEmojiFrameSize = (reactionName, reactionResources) => {
+    var _a, _b, _c, _d, _e;
+    switch (reactionName) {
+        case 'like':
+            return (_a = reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.size;
+        case 'heart':
+            return (_b = reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.size;
+        case 'laugh':
+            return (_c = reactionResources.laughReaction) === null || _c === void 0 ? void 0 : _c.size;
+        case 'applause':
+            return (_d = reactionResources.applauseReaction) === null || _d === void 0 ? void 0 : _d.size;
+        case 'surprised':
+            return (_e = reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.size;
+        default:
+            return undefined;
+    }
 };
 // Copyright (c) Microsoft Corporation.
@@ -15502,6 +15588,9 @@ const ParticipantVideoTileOverlay = React.memo((props) => {
     const frameCount = reaction !== undefined && reactionResources !== undefined
         ? getEmojiFrameCount(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, reactionResources)
         : undefined;
+    const frameSize = reaction !== undefined && reactionResources !== undefined
+        ? getEmojiFrameSize(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, reactionResources)
+        : undefined;
     const currentUnixTimeStamp = Date.now();
     const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;
     const canRenderReaction = (receivedUnixTimestamp
@@ -15520,18 +15609,24 @@ const ParticipantVideoTileOverlay = React.memo((props) => {
     }, [backgroundImageUrl]);
     const spriteImageUrl = backgroundImageUrl !== null && backgroundImageUrl !== void 0 ? backgroundImageUrl : undefined;
     const reactionContainerStyles = React.useCallback(() => reactionRenderingStyle({
-        spriteImageUrl,
+        spriteImageUrl: spriteImageUrl !== null && spriteImageUrl !== void 0 ? spriteImageUrl : '',
         emojiSize: emojiSize,
-        frameCount
-    }), [spriteImageUrl, emojiSize, frameCount]);
+        frameCount: frameCount !== null && frameCount !== void 0 ? frameCount : REACTION_NUMBER_OF_ANIMATION_FRAMES,
+        rawFrameSize: frameSize !== null && frameSize !== void 0 ? frameSize : REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX
+    }), [spriteImageUrl, emojiSize, frameCount, frameSize]);
     return (React.createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent'
+            backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
+            borderRadius: '0.25rem'
         }) },
         React.createElement("div", { style: { height: '33.33%' } }),
-        canRenderReaction && isValidImageSource && (React.createElement("div", { style: { minHeight: '84px', height: '84px', width: '84px' } },
+        canRenderReaction && isValidImageSource && (React.createElement("div", { style: {
+                minHeight: `${emojiSize}px`,
+                height: `${emojiSize}px`,
+                width: `${emojiSize}px`
+            } },
             React.createElement("div", { className: reactionContainerStyles() })))));
 });
@@ -15849,10 +15944,10 @@ const RemoteContentShareReactionOverlay = React.memo((props) => {
         }
         return canRender;
     };
-    const containerHeight = hostDivHeight !== null && hostDivHeight !== void 0 ? hostDivHeight : 0;
-    const containerWidth = hostDivWidth !== null && hostDivWidth !== void 0 ? hostDivWidth : 0;
     const styleBucket = () => getReactionStyleBucket();
     const displaySizePx = () => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;
+    const containerHeight = hostDivHeight !== null && hostDivHeight !== void 0 ? hostDivHeight : 0;
+    const containerWidth = (hostDivWidth !== null && hostDivWidth !== void 0 ? hostDivWidth : 0) - displaySizePx();
     const leftPosition = (position) => generateStartPositionWave(position, containerWidth / 2, true);
     const reactionMovementStyle = (position) => getReactionMovementStyle(leftPosition(position));
     return (React.createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, {
@@ -15887,7 +15982,7 @@ const RemoteContentShareReactionOverlay = React.memo((props) => {
  * Emoji max size
  * @internal
  */
-const DEFAULT_EMOJI_MAX_SIZE_PX = 100;
+const DEFAULT_EMOJI_MAX_SIZE_PX = 70;
 /* @conditional-compile-remove(reaction) */
 /**
  * Emoji min size
@@ -19988,7 +20083,7 @@ const ReactionButton = (props) => {
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
     const classname = react.mergeStyles(reactionEmojiMenuStyles());
-    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { className: classname }, emojis.map((emoji, index) => {
+    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { "data-ui-id": "reaction-sub-menu", className: classname }, emojis.map((emoji, index) => {
         const resourceUrl = emojiResource.get(emoji);
         const frameCount = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;
         const classname = react.mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));
@@ -22937,11 +23032,18 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, options) => __awaiter$v(void 0, void 0, void 0, function* () {
-            const updatedMetadata = (options === null || options === void 0 ? void 0 : options.metadata) ? Object.assign({}, options.metadata) : {};
-            if ((options === null || options === void 0 ? void 0 : options.attachmentMetadata) && (options === null || options === void 0 ? void 0 : options.attachmentMetadata.length) > 0) {
-                // Only create object if there are objects to add.
-                updatedMetadata.fileSharingMetadata = JSON.stringify(options === null || options === void 0 ? void 0 : options.attachmentMetadata);
+        onUpdateMessage: (messageId, content,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        options) => __awaiter$v(void 0, void 0, void 0, function* () {
+            var _a;
+            let updatedMetadata = {};
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            updatedMetadata = (options === null || options === void 0 ? void 0 : options.metadata) ? Object.assign({}, options.metadata) : {};
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            // need to set fileSharingMetadata explicitly to empty array to remove existing attachments
+            // setting it to undefined or empty object will not remove the existing attachments
+            if (updatedMetadata === null || updatedMetadata === void 0 ? void 0 : updatedMetadata.fileSharingMetadata) {
+                updatedMetadata.fileSharingMetadata = JSON.stringify((_a = options === null || options === void 0 ? void 0 : options.attachmentMetadata) !== null && _a !== void 0 ? _a : []);
             }
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
@@ -22962,7 +23064,7 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
             yield chatThreadClient.updateTopic(topicName);
         }),
         onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$v(void 0, void 0, void 0, function* () {
-            var _a, _b, _c;
+            var _b, _c, _d;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
                 // Also allows recovery via retries in case of transient errors.
@@ -22977,12 +23079,12 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
             let earliestTime = Number.MAX_SAFE_INTEGER;
             while (remainingMessagesToGet >= 1) {
                 const message = yield messageIterator.next();
-                if ((_a = message === null || message === void 0 ? void 0 : message.value) === null || _a === void 0 ? void 0 : _a.id) {
+                if ((_b = message === null || message === void 0 ? void 0 : message.value) === null || _b === void 0 ? void 0 : _b.id) {
                     if (parseInt(message.value.id) < earliestTime) {
                         earliestTime = parseInt(message.value.id);
                     }
                 }
-                if (((_b = message.value) === null || _b === void 0 ? void 0 : _b.type) && message.value.type === 'text') {
+                if (((_c = message.value) === null || _c === void 0 ? void 0 : _c.type) && message.value.type === 'text') {
                     remainingMessagesToGet--;
                 }
                 // We have traversed all messages in this thread
@@ -22993,7 +23095,7 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
             }
             // keep fetching read receipts until read receipt time < earlist message time
             let readReceipt = yield readReceiptIterator.next();
-            while (!readReceipt.done && parseInt((_c = readReceipt === null || readReceipt === void 0 ? void 0 : readReceipt.value) === null || _c === void 0 ? void 0 : _c.chatMessageId) >= earliestTime) {
+            while (!readReceipt.done && parseInt((_d = readReceipt === null || readReceipt === void 0 ? void 0 : readReceipt.value) === null || _d === void 0 ? void 0 : _d.chatMessageId) >= earliestTime) {
                 readReceipt = yield readReceiptIterator.next();
             }
             return isAllChatMessagesLoaded;
@@ -23819,7 +23921,7 @@ const findSelector = (component) => {
         return messageThreadSelectorImpl;
     };
     switch (component) {
-        case SendBox$1:
+        case SendBox:
             return sendBoxSelector;
         /* @conditional-compile-remove(rich-text-editor) */
         case RichTextSendBox:
@@ -25191,9 +25293,7 @@ const COMPOSITE_ONLY_ICONS = {
     LocalCameraSwitch: React.createElement(reactIcons.CameraSwitch24Regular, null),
     ControlBarChatButtonActive: React.createElement(reactIcons.Chat20Filled, null),
     ControlBarChatButtonInactive: React.createElement(reactIcons.Chat20Regular, null),
-    /* @conditional-compile-remove(capabilities) */
     ControlButtonCameraProhibited: React.createElement(reactIcons.VideoProhibited20Filled, null),
-    /* @conditional-compile-remove(capabilities) */
     ControlButtonMicProhibited: React.createElement(reactIcons.MicProhibited20Filled, null),
     /* @conditional-compile-remove(spotlight) */
     ControlButtonExitSpotlight: React.createElement(reactIcons.VideoPersonStarOff20Filled, null),
@@ -25214,7 +25314,7 @@ const COMPOSITE_ONLY_ICONS = {
     NoticePageRoomNotValid: React.createElement(reactIcons.Info20Filled, null),
     NoticePageCallRejected: React.createElement(reactIcons.Info20Filled, null),
     NoticePageCallTimeout: React.createElement(reactIcons.Info20Filled, null),
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     SendBoxAttachFile: React.createElement(reactIcons.Attach20Regular, null),
     /* @conditional-compile-remove(PSTN-calls) */
     PeoplePaneAddPerson: React.createElement(reactIcons.PersonAdd20Regular, null),
@@ -25351,7 +25451,7 @@ const AttachmentUploadButton = (props) => {
             } })));
 };
 const SendBoxAttachFileIconTrampoline = () => {
-    // @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload)
+    // @conditional-compile-remove(attachment-upload)
     return React.createElement(ChatCompositeIcon, { iconName: "SendBoxAttachFile" });
 };
 /**
@@ -25364,19 +25464,19 @@ const AttachmentUploadButtonWrapper = (
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 props) => {
     return (React.createElement(React.Fragment, null,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     React.createElement(AttachmentUploadButton, Object.assign({}, props))));
 };
 const uploadAttachmentButtonStringTrampoline = () => {
-    //@conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload)
+    //@conditional-compile-remove(attachment-upload)
     //eslint-disable-next-line react-hooks/rules-of-hooks
     return useLocale().strings.chat.uploadAttachment;
 };
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 /**
  * @internal
  */
@@ -25423,7 +25523,7 @@ class AttachmentUploadContext {
         }));
     }
 }
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 /**
  * @internal
  */
@@ -25507,7 +25607,7 @@ class AzureCommunicationAttachmentUploadAdapter {
         attachmentUpload === null || attachmentUpload === void 0 ? void 0 : attachmentUpload.off('uploadFail', this.updateUploadStatusMessage.bind(this));
     }
 }
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 /**
  * @param attachmentUploadUiState {@link AttachmentUploadsUiState}
  * @private
@@ -25533,7 +25633,7 @@ const convertAttachmentUploadsUiStateToMessageMetadata = (attachmentUploads) =>
     }
     return undefined;
 };
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  */
@@ -25613,7 +25713,7 @@ class ChatContext {
             thread,
             latestErrors: clientState.latestErrors
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         updatedState = Object.assign(Object.assign({}, updatedState), { attachmentUploads: this.state.attachmentUploads });
         this.setState(updatedState);
     }
@@ -25628,7 +25728,7 @@ class AzureCommunicationChatAdapter {
         this.chatClient = chatClient;
         this.chatThreadClient = chatThreadClient;
         this.context = new ChatContext(chatClient.getState(), chatThreadClient.threadId);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.attachmentUploadAdapter = new AzureCommunicationAttachmentUploadAdapter(this.context);
         const onStateChange = (clientState) => {
             // unsubscribe when the instance gets disposed
@@ -25658,19 +25758,19 @@ class AzureCommunicationChatAdapter {
         this.loadPreviousChatMessages = this.loadPreviousChatMessages.bind(this);
         this.on = this.on.bind(this);
         this.off = this.off.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.registerActiveUploads = this.registerActiveUploads.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.registerCompletedUploads = this.registerCompletedUploads.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.clearUploads = this.clearUploads.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.cancelUpload = this.cancelUpload.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadProgress = this.updateUploadProgress.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadStatusMessage = this.updateUploadStatusMessage.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadMetadata = this.updateUploadMetadata.bind(this);
         this.downloadResourceToCache = this.downloadResourceToCache.bind(this);
         this.removeResourceFromCache = this.removeResourceFromCache.bind(this);
@@ -25720,9 +25820,9 @@ class AzureCommunicationChatAdapter {
     sendMessage(content_1) {
         return __awaiter$o(this, arguments, void 0, function* (content, options = {}) {
             yield this.asyncTeeErrorToEventEmitter(() => __awaiter$o(this, void 0, void 0, function* () {
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+                /* @conditional-compile-remove(attachment-upload) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertAttachmentUploadsUiStateToMessageMetadata(this.context.getState().attachmentUploads));
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+                /* @conditional-compile-remove(attachment-upload) */
                 /**
                  * All the current uploads need to be clear from the state before a message has been sent.
                  * This ensures the following behavior:
@@ -25773,9 +25873,9 @@ class AzureCommunicationChatAdapter {
     updateMessage(messageId, content, metadata, options) {
         return __awaiter$o(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$o(this, void 0, void 0, function* () {
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+                /* @conditional-compile-remove(attachment-upload) */
                 const updatedOptions = { attachmentMetadata: options === null || options === void 0 ? void 0 : options.attachmentMetadata, metadata: metadata };
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+                /* @conditional-compile-remove(attachment-upload) */
                 return yield this.handlers.onUpdateMessage(messageId, content, updatedOptions);
             }));
         });
@@ -25787,31 +25887,31 @@ class AzureCommunicationChatAdapter {
             }));
         });
     }
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     registerActiveUploads(files) {
         return this.attachmentUploadAdapter.registerActiveUploads(files);
     }
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     registerCompletedUploads(metadata) {
         return this.attachmentUploadAdapter.registerCompletedUploads(metadata);
     }
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     clearUploads() {
         this.attachmentUploadAdapter.clearUploads();
     }
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     cancelUpload(id) {
         this.attachmentUploadAdapter.cancelUpload(id);
     }
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     updateUploadProgress(id, progress) {
         this.attachmentUploadAdapter.updateUploadProgress(id, progress);
     }
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     updateUploadStatusMessage(id, errorMessage) {
         this.attachmentUploadAdapter.updateUploadStatusMessage(id, errorMessage);
     }
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     updateUploadMetadata(id, metadata) {
         this.attachmentUploadAdapter.updateUploadMetadata(id, metadata);
     }
@@ -26496,13 +26596,17 @@ const createCompositeHandlers$1 = memoizeOne((adapter) => ({
     onRemoveParticipant: adapter.removeParticipant,
     updateThreadTopicName: adapter.setTopic,
     onUpdateMessage: (messageId, content,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     options) => {
-        const metadata = options === null || options === void 0 ? void 0 : options.metadata;
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-        const updatedOptions = (options === null || options === void 0 ? void 0 : options.attachmentMetadata) ? Object.assign({}, options.attachmentMetadata) : {};
+        let metadata = undefined;
+        /* @conditional-compile-remove(attachment-upload) */
+        metadata = options === null || options === void 0 ? void 0 : options.metadata;
+        /* @conditional-compile-remove(attachment-upload) */
+        const updatedOptions = {
+            attachmentMetadata: options === null || options === void 0 ? void 0 : options.attachmentMetadata
+        };
         return adapter.updateMessage(messageId, content, metadata,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ updatedOptions);
+        /* @conditional-compile-remove(attachment-upload) */ updatedOptions);
     },
     onDeleteMessage: adapter.deleteMessage
 }));
@@ -26768,12 +26872,9 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * @private
  */
-/**
- * @private
- */
-const getAttachmentUploads = (state) => {
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    return state === null || state === void 0 ? void 0 : state.attachmentUploads;
+const useSelector$2 = (selector, selectorProps) => {
+    // use selector with no adaptation
+    return useSelectorWithAdaptation$1(selector, (state) => state, selectorProps);
 };
 // Copyright (c) Microsoft Corporation.
@@ -26781,56 +26882,23 @@ const getAttachmentUploads = (state) => {
 /**
  * @private
  */
-const attachmentUploadsSelector = reselect.createSelector([getAttachmentUploads], (attachmentUploads) => {
-    const attachments = Object.values(attachmentUploads || {}).map((attachmentUpload) => (Object.assign(Object.assign({}, attachmentUpload), { uploadComplete: !!attachmentUpload })));
-    return { attachments };
-});
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
 /**
  * @private
  */
-const useSelector$2 = (selector, selectorProps) => {
-    // use selector with no adaptation
-    return useSelectorWithAdaptation$1(selector, (state) => state, selectorProps);
+const getAttachmentUploads = (state) => {
+    /* @conditional-compile-remove(attachment-upload) */
+    return state === null || state === void 0 ? void 0 : state.attachmentUploads;
 };
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(rich-text-editor) */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-B8qxZi1I.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  */
-const SendBox = (props) => {
-    const { options, styles,
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    adapter } = props;
-    const sendBoxProps = usePropsFor$2(SendBox$1);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    const activeAttachmentUploads = useSelector$2(attachmentUploadsSelector).attachments;
-    const sendBoxStyles = React.useMemo(() => {
-        return Object.assign({}, styles);
-    }, [styles]);
-    const simpleSendBox = React.useMemo(() => (React.createElement(SendBox$1, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-        activeAttachmentUploads: activeAttachmentUploads,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-        onCancelAttachmentUpload: adapter.cancelUpload }))), [
-        sendBoxProps,
-        options,
-        sendBoxStyles,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ adapter
-    ]);
-    // /* @conditional-compile-remove(rich-text-editor) */
-    if ((options === null || options === void 0 ? void 0 : options.richTextEditor) === true) {
-        return (React.createElement(React.Suspense, { fallback: simpleSendBox },
-            React.createElement(RichTextSendBoxWrapper, null)));
-    }
-    return simpleSendBox;
-};
+const attachmentUploadsSelector = reselect.createSelector([getAttachmentUploads], (attachmentUploads) => {
+    const attachments = Object.values(attachmentUploads || {}).map((attachmentUpload) => (Object.assign(Object.assign({}, attachmentUpload), { uploadComplete: !!attachmentUpload })));
+    return { attachments };
+});
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -26867,6 +26935,7 @@ const ChatScreen = (props) => {
         fetchData();
     }, [adapter]);
     const messageThreadProps = usePropsFor$2(MessageThread);
+    const sendBoxProps = usePropsFor$2(SendBox);
     const typingIndicatorProps = usePropsFor$2(TypingIndicator);
     const headerProps = useAdaptedSelector$1(getHeaderProps);
     const errorBarProps = usePropsFor$2(ErrorBar);
@@ -26908,15 +26977,18 @@ const ChatScreen = (props) => {
     const typingIndicatorStyles = React.useMemo(() => {
         return Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
     }, [styles === null || styles === void 0 ? void 0 : styles.typingIndicator]);
+    const sendBoxStyles = React.useMemo(() => {
+        return Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
+    }, [styles === null || styles === void 0 ? void 0 : styles.sendBox]);
     const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
     const attachmentUploadButtonOnChange = React.useCallback((files) => {
         var _a;
         if (!files) {
             return;
         }
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         const attachmentUploads = adapter.registerActiveUploads(Array.from(files));
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handler(attachmentUploads);
     }, [adapter, attachmentOptions]);
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
@@ -27025,6 +27097,8 @@ const ChatScreen = (props) => {
         (_d = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _d === void 0 ? void 0 : _d.disableMultipleUploads,
         attachmentUploadButtonOnChange
     ]);
+    /* @conditional-compile-remove(attachment-upload) */
+    const activeAttachmentUploads = useSelector$2(attachmentUploadsSelector).attachments;
     return (React.createElement(react.Stack, { className: chatContainer, grow: true },
         (options === null || options === void 0 ? void 0 : options.topic) !== false && React.createElement(ChatHeader, Object.assign({}, headerProps)),
         React.createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
@@ -27043,9 +27117,11 @@ const ChatScreen = (props) => {
                         formFactor === 'mobile' && (React.createElement(react.Stack, { verticalAlign: "center" },
                             React.createElement(AttachmentButton, null))),
                         React.createElement(react.Stack, { grow: true },
-                            React.createElement(SendBox, { options: options, styles: styles === null || styles === void 0 ? void 0 : styles.sendBox,
-                                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-                                adapter: adapter })),
+                            React.createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles,
+                                /* @conditional-compile-remove(attachment-upload) */
+                                activeAttachmentUploads: activeAttachmentUploads,
+                                /* @conditional-compile-remove(attachment-upload) */
+                                onCancelAttachmentUpload: adapter.cancelUpload }))),
                         formFactor !== 'mobile' && React.createElement(AttachmentButton, null)))),
             /* @conditional-compile-remove(chat-composite-participant-pane) */
             (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
@@ -28232,11 +28308,8 @@ const Camera = (props) => {
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     const adapter = useAdapter();
     const isRoomsCall = adapter.getState().isRoomsCall;
-    /* @conditional-compile-remove(capabilities) */
     const turnVideoOnCapability = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.turnVideoOn;
-    return (React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disableTooltip: props.disableTooltip, disabled: cameraButtonProps.disabled || props.disabled || (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'),
-        /* @conditional-compile-remove(capabilities) */
-        onRenderOffIcon: turnVideoOnCapability && !turnVideoOnCapability.isPresent
+    return (React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disableTooltip: props.disableTooltip, disabled: cameraButtonProps.disabled || props.disabled || (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), onRenderOffIcon: turnVideoOnCapability && !turnVideoOnCapability.isPresent
             ? () => React.createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonCameraProhibited' })
             : undefined, onClickVideoEffects: props.onClickVideoEffects, componentRef: props.componentRef })));
 };
@@ -28423,7 +28496,6 @@ const getMicrophones = (state) => state.devices.microphones;
  * @private
  */
 const getCameras = (state) => state.devices.cameras;
-/* @conditional-compile-remove(capabilities) */
 /**
  * @private
  */
@@ -28480,7 +28552,6 @@ const getCaptionsStatus = (state) => {
  * @private
  */
 const getIsTeamsCall = (state) => state.isTeamsCall;
-/* @conditional-compile-remove(capabilities) */
 /**
  * @private
  */
@@ -28514,7 +28585,6 @@ const Microphone = (props) => {
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const adapter = useAdapter();
     const isRoomsCall = adapter.getState().isRoomsCall;
-    /* @conditional-compile-remove(capabilities) */
     const unmuteMicCapability = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.unmuteMic;
     /**
      * When call is in connecting state, microphone button should be disabled.
@@ -28527,9 +28597,7 @@ const Microphone = (props) => {
     }
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React.createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', disableTooltip: props.disableTooltip, styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled || (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'),
-        /* @conditional-compile-remove(capabilities) */
-        onRenderOffIcon: unmuteMicCapability && !unmuteMicCapability.isPresent
+    return (React.createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', disableTooltip: props.disableTooltip, styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled || (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), onRenderOffIcon: unmuteMicCapability && !unmuteMicCapability.isPresent
             ? () => React.createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonMicProhibited' })
             : undefined })));
 };
@@ -28563,7 +28631,6 @@ const ScreenShare = (props) => {
     const isRoomsCall = adapter.getState().isRoomsCall;
     const screenShareButtonDisabled = () => {
         var _a;
-        /* @conditional-compile-remove(capabilities) */ /* @conditional-compile-remove(PSTN-calls) */
         return (_a = screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) !== null && _a !== void 0 ? _a : isDisabled$2(props.option);
     };
     return (React.createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled() || props.disabled || (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), styles: styles })));
@@ -28824,6 +28891,18 @@ const capabilitySelector = reselect__namespace.createSelector([getCapabilites],
     };
 });
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const callStatusSelector = reselect.createSelector([getCallStatus, getIsScreenShareOn], (callStatus, isScreenShareOn) => {
+    return {
+        callStatus,
+        isScreenShareOn
+    };
+});
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // Enforce a background color on control bar to ensure it matches the composite background color.
@@ -28863,7 +28942,11 @@ const CallControls = (props) => {
     /* @conditional-compile-remove(reaction) */
     const capabilitiesSelector = useSelector$1(capabilitySelector);
     /* @conditional-compile-remove(reaction) */
-    const isReactionAllowed = !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) || capabilitiesSelector.capabilities.useReactions.isPresent;
+    const callState = useSelector$1(callStatusSelector);
+    /* @conditional-compile-remove(reaction) */
+    const isReactionAllowed = callState.callStatus !== 'Connected' ||
+        !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) ||
+        capabilitiesSelector.capabilities.useReactions.isPresent;
     const devicesButtonProps = usePropsFor$1(DevicesButton);
     let numberOfButtons = 0;
     const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
@@ -29881,7 +29964,11 @@ const CommonCallControlBar = (props) => {
     /* @conditional-compile-remove(reaction) */
     const capabilitiesSelector = useSelector$1(capabilitySelector);
     /* @conditional-compile-remove(reaction) */
-    const isReactionAllowed = !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) || capabilitiesSelector.capabilities.useReactions.isPresent;
+    const callState = useSelector$1(callStatusSelector);
+    /* @conditional-compile-remove(reaction) */
+    const isReactionAllowed = callState.callStatus !== 'Connected' ||
+        !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) ||
+        capabilitiesSelector.capabilities.useReactions.isPresent;
     // when options is false then we want to hide the whole control bar.
     if (options === false) {
         return React.createElement(React.Fragment, null);
@@ -30119,18 +30206,6 @@ const textStyle = (theme) => {
 const isSpeakingAndMutedAnimationStyles = Object.assign({}, react.AnimationStyles.fadeIn100);
 const isNotSpeakingAndMutedAnimationStyles = Object.assign(Object.assign({}, react.AnimationStyles.fadeOut200), { display: 'none' });
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const callStatusSelector = reselect.createSelector([getCallStatus, getIsScreenShareOn], (callStatus, isScreenShareOn) => {
-    return {
-        callStatus,
-        isScreenShareOn
-    };
-});
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -32036,8 +32111,6 @@ const ModalLocalAndRemotePIP = (props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(capabilities) */
-/* @conditional-compile-remove(capabilities) */
 /**
  * Notification bar for capabilities changed
  * @private
@@ -32053,7 +32126,6 @@ const CapabilitiesChangedNotificationBar = (props) => {
         return (React.createElement(react.MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: react.MessageBarType.warning, dismissIconProps: { iconName: 'ErrorBarClear' }, onDismiss: () => props.onDismissNotification(notification), messageBarIconProps: iconProps }, message));
     })));
 };
-/* @conditional-compile-remove(capabilities) */
 const getCapabilityChangedNotificationString = (notification, strings) => {
     var _a, _b, _c, _d, _e, _f;
     switch (notification.capabilityName) {
@@ -32082,7 +32154,6 @@ const getCapabilityChangedNotificationString = (notification, strings) => {
     }
     return undefined;
 };
-/* @conditional-compile-remove(capabilities) */
 const getCustomMessageBarIconProps = (notification) => {
     let iconName = undefined;
     switch (notification.capabilityName) {
@@ -32107,7 +32178,6 @@ const getCustomMessageBarIconProps = (notification) => {
     }
     return { iconName, styles: { root: { '> *': { height: '1rem', width: '1rem' } } } };
 };
-/* @conditional-compile-remove(capabilities) */
 const messageBarStyles = {
     innerText: {
         alignSelf: 'center'
@@ -32444,7 +32514,6 @@ const CallArrangement = (props) => {
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
     const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
-    /* @conditional-compile-remove(capabilities) */
     // Filter out shareScreen capability notifications if on mobile
     const filteredCapabilitesChangedNotifications = props.mobileView
         ? (_e = props.capabilitiesChangedNotificationBarProps) === null || _e === void 0 ? void 0 : _e.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
@@ -32490,7 +32559,6 @@ const CallArrangement = (props) => {
                                         React.createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
                                     props.errorBarProps !== false && (React.createElement(react.Stack, { styles: bannerNotificationStyles },
                                         React.createElement(ErrorBar, Object.assign({}, props.errorBarProps, { onDismissError: props.onDismissError, activeErrorMessages: filteredLatestErrors })))),
-                                    /* @conditional-compile-remove(capabilities) */
                                     props.capabilitiesChangedNotificationBarProps &&
                                         props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (React.createElement(react.Stack, { styles: bannerNotificationStyles },
                                         React.createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] })))),
@@ -32999,9 +33067,7 @@ const CallPage = (props) => {
     const onRenderGalleryContentTrampoline = () => {
         var _a;
         if (dtmfDialerPresent) {
-            return (React.createElement(DtmfDialpadPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError,
-                /* @conditional-compile-remove(capabilities) */
-                capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), dtmfDialerPresent: dtmfDialerPresent, compositeAudioContext: compositeAudioContext }));
+            return (React.createElement(DtmfDialpadPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError, capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), dtmfDialerPresent: dtmfDialerPresent, compositeAudioContext: compositeAudioContext }));
         }
         else {
             return (React.createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, drawerMenuHostId: drawerMenuHostId, localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, userSetGalleryLayout: galleryLayout, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants,
@@ -33019,9 +33085,7 @@ const CallPage = (props) => {
                 onFetchParticipantMenuItems: onFetchParticipantMenuItems,
                 options: callControlOptions,
                 increaseFlyoutItemSize: mobileView
-            }, onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (onRenderGalleryContentTrampoline()) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: onCloseChatPane, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, onUserSetOverflowGalleryPositionChange: onSetUserSetOverflowGalleryPosition, onUserSetGalleryLayoutChange: onUserSetGalleryLayoutChange, userSetGalleryLayout: galleryLayout,
-            /* @conditional-compile-remove(capabilities) */
-            capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), dtmfDialerPresent: dtmfDialerPresent,
+            }, onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (onRenderGalleryContentTrampoline()) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: onCloseChatPane, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, onUserSetOverflowGalleryPositionChange: onSetUserSetOverflowGalleryPosition, onUserSetGalleryLayoutChange: onUserSetGalleryLayoutChange, userSetGalleryLayout: galleryLayout, capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), dtmfDialerPresent: dtmfDialerPresent,
             /* @conditional-compile-remove(spotlight) */
             setIsPromptOpen: setIsPromptOpen,
             /* @conditional-compile-remove(spotlight) */
@@ -34219,12 +34283,7 @@ const ConfigurationPage = (props) => {
         hostId: modalLayerHostId
     }), [modalLayerHostId]);
     const filteredErrorBarProps = React.useMemo(() => (Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: filteredLatestErrors })), [errorBarProps, filteredLatestErrors]);
-    const containerStyles = React.useMemo(() => {
-        var _a;
-        return configurationContainerStyle(!mobileView,
-        /* @conditional-compile-remove(custom-branding) */
-        (_a = props.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
-    }, [mobileView, /* @conditional-compile-remove(custom-branding) */ (_d = props.backgroundImage) === null || _d === void 0 ? void 0 : _d.url]);
+    const containerStyles = React.useMemo(() => { var _a; return configurationContainerStyle(!mobileView, (_a = props.backgroundImage) === null || _a === void 0 ? void 0 : _a.url); }, [mobileView, (_d = props.backgroundImage) === null || _d === void 0 ? void 0 : _d.url]);
     return (React.createElement(react.Stack, { styles: containerStyles },
         React.createElement(react.Stack, { styles: bannerNotificationStyles },
             React.createElement(ConfigurationPageErrorBar
@@ -34255,15 +34314,9 @@ const ConfigurationPage = (props) => {
             /* @conditional-compile-remove(unsupported-browser) */
             environmentInfo: environmentInfo, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         React.createElement(react.Stack, { verticalFill: true, grow: true, horizontal: true, className: fillWidth },
-            React.createElement(react.Stack, { className: configurationCenteredContent(mobileWithPreview,
-                /* @conditional-compile-remove(custom-branding) */
-                !!props.logo), verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
+            React.createElement(react.Stack, { className: configurationCenteredContent(mobileWithPreview, !!props.logo), verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
                 React.createElement(react.Stack.Item, { styles: callDetailsContainerStyles },
-                    React.createElement(Logo
-                    /* @conditional-compile-remove(custom-branding) */
-                    , {
-                        /* @conditional-compile-remove(custom-branding) */
-                        logo: props.logo }),
+                    React.createElement(Logo, { logo: props.logo }),
                     title,
                     callDescription),
                 React.createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: deviceConfigurationStackTokens },
@@ -34894,8 +34947,6 @@ const deviceCountSelector = reselect.createSelector([getCameras, getMicrophones]
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(capabilities) */
-/* @conditional-compile-remove(capabilities) */
 /**
  * @private
  */
@@ -34905,8 +34956,6 @@ const capabilitiesChangedInfoAndRoleSelector = reselect__namespace.createSelecto
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(capabilities) */
-/* @conditional-compile-remove(capabilities) */
 /**
  * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.
  *
@@ -34933,7 +34982,6 @@ const useTrackedCapabilityChangedNotifications = (capabilitiesChangedAndRoleInfo
         onDismissNotification: onDismissCapabilityChangedNotification
     };
 };
-/* @conditional-compile-remove(capabilities) */
 /**
  * Take the set of active notifications, and filter to only those that are newer than previously dismissed notifications or have never been dismissed.
  *
@@ -34948,7 +34996,6 @@ const filterLatestCapabilityChangedNotifications = (activeNotifications, tracked
     });
     return filteredNotifications;
 };
-/* @conditional-compile-remove(capabilities) */
 /**
  * Maintain a record of the most recently active notification for each capability name.
  *
@@ -34967,7 +35014,6 @@ const updateTrackedCapabilityChangedNotificationsWithActiveNotifications = (exis
     }
     return trackedNotifications;
 };
-/* @conditional-compile-remove(capabilities) */
 /**
  * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.
  *
@@ -34978,7 +35024,6 @@ const trackCapabilityChangedNotificationAsDismissed = (capabilityName, trackedNo
     const existingNotification = trackedNotifications[capabilityName];
     return Object.assign(Object.assign({}, trackedNotifications), { [capabilityName]: Object.assign(Object.assign({}, (existingNotification || {})), { lastDismissedAt: now }) });
 };
-/* @conditional-compile-remove(capabilities) */
 const updateLatestCapabilityChangedNotificationMap = (capabilitiesChangedInfoAndRole, activeNotifications) => {
     var _a, _b;
     if (!capabilitiesChangedInfoAndRole.capabilitiesChangeInfo) {
@@ -35359,9 +35404,7 @@ const MainScreen = (props) => {
         };
     }, [adapter]);
     const compositeAudioContext = React.useRef(new AudioContext());
-    /* @conditional-compile-remove(capabilities) */
     const capabilitiesChangedInfoAndRole = useSelector$1(capabilitiesChangedInfoAndRoleSelector);
-    /* @conditional-compile-remove(capabilities) */
     const capabilitiesChangedNotificationBarProps = useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);
     // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation
     // This works by tracking the most recent timestamp of any active error type.
@@ -35404,13 +35447,7 @@ const MainScreen = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 onPermissionsTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onPermissionsTroubleshootingClick,
                 /* @conditional-compile-remove(call-readiness) */
-                onNetworkingTroubleShootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onNetworkingTroubleShootingClick,
-                /* @conditional-compile-remove(capabilities) */
-                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps,
-                /* @conditional-compile-remove(custom-branding) */
-                logo: (_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.branding) === null || _h === void 0 ? void 0 : _h.logo,
-                /* @conditional-compile-remove(custom-branding) */
-                backgroundImage: (_k = (_j = props.options) === null || _j === void 0 ? void 0 : _j.branding) === null || _k === void 0 ? void 0 : _k.backgroundImage }));
+                onNetworkingTroubleShootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onNetworkingTroubleShootingClick, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, logo: (_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.branding) === null || _h === void 0 ? void 0 : _h.logo, backgroundImage: (_k = (_j = props.options) === null || _j === void 0 ? void 0 : _j.branding) === null || _k === void 0 ? void 0 : _k.backgroundImage }));
             break;
         case 'accessDeniedTeamsMeeting':
             pageElement = (React.createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -35435,26 +35472,18 @@ const MainScreen = (props) => {
             break;
         }
         case 'lobby':
-            pageElement = (React.createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError,
-                /* @conditional-compile-remove(capabilities) */
-                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
+            pageElement = (React.createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         /* @conditional-compile-remove(call-transfer) */
         case 'transferring':
-            pageElement = (React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError,
-                /* @conditional-compile-remove(capabilities) */
-                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
+            pageElement = (React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
-            pageElement = (React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition,
-                /* @conditional-compile-remove(capabilities) */
-                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants, compositeAudioContext: compositeAudioContext.current }));
+            pageElement = (React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants, compositeAudioContext: compositeAudioContext.current }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         case 'hold':
-            pageElement = (React.createElement(React.Fragment, null, React.createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError,
-                /* @conditional-compile-remove(capabilities) */
-                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps })));
+            pageElement = (React.createElement(React.Fragment, null, React.createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps })));
             break;
     }
     useEndedCallConsoleErrors(endedCall);
@@ -36644,7 +36673,6 @@ class AzureCommunicationCallAdapter {
         (_f = this.call) === null || _f === void 0 ? void 0 : _f.on('roleChanged', this.roleChanged.bind(this));
         /* @conditional-compile-remove(call-transfer) */
         (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Transfer).on('transferAccepted', this.transferAccepted.bind(this));
-        /* @conditional-compile-remove(capabilities) */
         (_h = this.call) === null || _h === void 0 ? void 0 : _h.feature(communicationCalling.Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
         /* @conditional-compile-remove(spotlight) */
         (_j = this.call) === null || _j === void 0 ? void 0 : _j.feature(communicationCalling.Features.Spotlight).on('spotlightChanged', this.spotlightChanged.bind(this));
@@ -36722,7 +36750,6 @@ class AzureCommunicationCallAdapter {
     transferAccepted(args) {
         this.emitter.emit('transferAccepted', args);
     }
-    /* @conditional-compile-remove(capabilities) */
     capabilitiesChanged(data) {
         var _a, _b, _c, _d, _e;
         if (((_a = data.newValue.turnVideoOn) === null || _a === void 0 ? void 0 : _a.isPresent) === false) {
@@ -37447,31 +37474,31 @@ class CallWithChatBackedChatAdapter {
         this.setTopic = (topicName) => __awaiter$3(this, void 0, void 0, function* () {
             throw new Error(`Chat Topics are not supported in CallWithChatComposite.`);
         });
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.registerActiveUploads = (files) => {
             return this.callWithChatAdapter.registerActiveUploads(files);
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.registerCompletedUploads = (metadata) => {
             return this.callWithChatAdapter.registerCompletedUploads(metadata);
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.clearUploads = () => {
             this.callWithChatAdapter.clearUploads();
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.cancelUpload = (id) => {
             this.callWithChatAdapter.cancelUpload(id);
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadProgress = (id, progress) => {
             this.callWithChatAdapter.updateUploadProgress(id, progress);
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadStatusMessage = (id, errorMessage) => {
             this.callWithChatAdapter.updateUploadStatusMessage(id, errorMessage);
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadMetadata = (id, metadata) => {
             this.callWithChatAdapter.updateUploadMetadata(id, metadata);
         };
@@ -37495,7 +37522,7 @@ function chatAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState)
         displayName: callWithChatAdapterState.displayName || '',
         thread: callWithChatAdapterState.chat,
         latestErrors: callWithChatAdapterState.latestChatErrors,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         attachmentUploads: callWithChatAdapterState.attachmentUploads
     };
 }
@@ -37771,7 +37798,6 @@ const CallWithChatScreen = (props) => {
         localVideoTile: props.localVideoTile,
         /* @conditional-compile-remove(end-of-call-survey) */
         surveyOptions: surveyOptions,
-        /* @conditional-compile-remove(custom-branding) */
         branding: {
             logo: props.logo,
             backgroundImage: props.backgroundImage
@@ -37797,9 +37823,7 @@ const CallWithChatScreen = (props) => {
         props.remoteVideoTileMenuOptions,
         /* @conditional-compile-remove(end-of-call-survey) */
         surveyOptions,
-        /* @conditional-compile-remove(custom-branding) */
         props.logo,
-        /* @conditional-compile-remove(custom-branding) */
         props.backgroundImage,
         /* @conditional-compile-remove(spotlight) */
         props.spotlight
@@ -37863,11 +37887,7 @@ const CallWithChatComposite = (props) => {
             /* @conditional-compile-remove(call-readiness) */
             deviceChecks: options === null || options === void 0 ? void 0 : options.deviceChecks, callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme, remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions,
             /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-            attachmentOptions: options === null || options === void 0 ? void 0 : options.attachmentOptions, localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions,
-            /* @conditional-compile-remove(custom-branding) */
-            logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo,
-            /* @conditional-compile-remove(custom-branding) */
-            backgroundImage: (_b = options === null || options === void 0 ? void 0 : options.branding) === null || _b === void 0 ? void 0 : _b.backgroundImage,
+            attachmentOptions: options === null || options === void 0 ? void 0 : options.attachmentOptions, localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo, backgroundImage: (_b = options === null || options === void 0 ? void 0 : options.branding) === null || _b === void 0 ? void 0 : _b.backgroundImage,
             /* @conditional-compile-remove(end-of-call-survey) */
             surveyOptions: options === null || options === void 0 ? void 0 : options.surveyOptions,
             /* @conditional-compile-remove(spotlight) */
@@ -37914,7 +37934,7 @@ function callWithChatAdapterStateFromBackingStates(callAdapter) {
         isTeamsCall: callAdapterState.isTeamsCall,
         latestCallErrors: callAdapterState.latestErrors,
         latestChatErrors: {},
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         attachmentUploads: {},
         /* @conditional-compile-remove(PSTN-calls) */
         alternateCallerId: callAdapterState.alternateCallerId,
@@ -37935,7 +37955,7 @@ function callWithChatAdapterStateFromBackingStates(callAdapter) {
  */
 function mergeChatAdapterStateIntoCallWithChatAdapterState(existingCallWithChatAdapterState, chatAdapterState) {
     return Object.assign(Object.assign({}, existingCallWithChatAdapterState), { chat: chatAdapterState.thread, latestChatErrors: chatAdapterState.latestErrors,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         attachmentUploads: chatAdapterState.attachmentUploads });
 }
 /**
@@ -38016,41 +38036,41 @@ class CallWithChatContext {
  */
 class AzureCommunicationCallWithChatAdapter {
     constructor(callAdapter, chatAdapterPromise) {
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.registerActiveUploads = (files) => {
             var _a, _b;
             return (_b = (_a = this.chatAdapter) === null || _a === void 0 ? void 0 : _a.registerActiveUploads(files)) !== null && _b !== void 0 ? _b : [];
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.registerCompletedUploads = (metadata) => {
             var _a, _b;
             return (_b = (_a = this.chatAdapter) === null || _a === void 0 ? void 0 : _a.registerCompletedUploads(metadata)) !== null && _b !== void 0 ? _b : [];
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.clearUploads = () => {
             this.chatAdapterPromise.then((adapter) => {
                 adapter.clearUploads();
             });
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.cancelUpload = (id) => {
             this.chatAdapterPromise.then((adapter) => {
                 adapter.cancelUpload(id);
             });
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadProgress = (id, progress) => {
             this.chatAdapterPromise.then((adapter) => {
                 adapter.updateUploadProgress(id, progress);
             });
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadStatusMessage = (id, errorMessage) => {
             this.chatAdapterPromise.then((adapter) => {
                 adapter.updateUploadStatusMessage(id, errorMessage);
             });
         };
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadMetadata = (id, metadata) => {
             this.chatAdapterPromise.then((adapter) => {
                 adapter.updateUploadMetadata(id, metadata);
@@ -38114,19 +38134,19 @@ class AzureCommunicationCallWithChatAdapter {
         this.deleteMessage.bind(this);
         this.on.bind(this);
         this.off.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.registerActiveUploads = this.registerActiveUploads.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.registerCompletedUploads = this.registerCompletedUploads.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.clearUploads = this.clearUploads.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.cancelUpload = this.cancelUpload.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadProgress = this.updateUploadProgress.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadStatusMessage = this.updateUploadStatusMessage.bind(this);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadMetadata = this.updateUploadMetadata.bind(this);
         this.downloadResourceToCache = this.downloadResourceToCache.bind(this);
         this.removeResourceFromCache = this.removeResourceFromCache.bind(this);
@@ -38386,7 +38406,7 @@ class AzureCommunicationCallWithChatAdapter {
         return __awaiter$2(this, void 0, void 0, function* () {
             return this.chatAdapterPromise.then((adapter) => {
                 return adapter.updateMessage(messageId, content, metadata,
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ options);
+                /* @conditional-compile-remove(attachment-upload) */ options);
             });
         });
     }
@@ -39420,7 +39440,9 @@ exports.FluentThemeProvider = FluentThemeProvider;
 exports.GridLayout = GridLayout;
 exports.HoldButton = HoldButton;
 exports.ImageOverlay = ImageOverlay;
+exports.InputBoxButton = InputBoxButton;
 exports.LocalizationProvider = LocalizationProvider$1;
+exports.MAXIMUM_LENGTH_OF_MESSAGE = MAXIMUM_LENGTH_OF_MESSAGE;
 exports.MessageStatusIndicator = MessageStatusIndicator;
 exports.MessageThread = MessageThread;
 exports.MicrophoneButton = MicrophoneButton;
@@ -39429,9 +39451,11 @@ exports.ParticipantItem = ParticipantItem;
 exports.ParticipantList = ParticipantList$k;
 exports.ParticipantsButton = ParticipantsButton;
 exports.RaiseHandButton = RaiseHandButton;
+exports.RichTextInputBoxComponent = RichTextInputBoxComponent;
 exports.RichTextSendBox = RichTextSendBox;
+exports.RichTextSendBoxErrors = RichTextSendBoxErrors;
 exports.ScreenShareButton = ScreenShareButton;
-exports.SendBox = SendBox$1;
+exports.SendBox = SendBox;
 exports.StreamMedia = StreamMedia;
 exports.TypingIndicator = TypingIndicator;
 exports.UnsupportedBrowser = UnsupportedBrowser$k;
@@ -39440,6 +39464,7 @@ exports.UnsupportedOperatingSystem = UnsupportedOperatingSystem$k;
 exports.VideoGallery = VideoGallery;
 exports.VideoTile = VideoTile;
 exports._IdentifierProvider = _IdentifierProvider;
+exports._formatString = _formatString;
 exports.createAzureCommunicationCallAdapter = createAzureCommunicationCallAdapter;
 exports.createAzureCommunicationCallAdapterFromClient = createAzureCommunicationCallAdapterFromClient;
 exports.createAzureCommunicationCallWithChatAdapter = createAzureCommunicationCallWithChatAdapter;
@@ -39455,13 +39480,21 @@ exports.createTeamsCallAdapter = createTeamsCallAdapter;
 exports.createTeamsCallAdapterFromClient = createTeamsCallAdapterFromClient;
 exports.darkTheme = darkTheme;
 exports.defaultAttachmentMenuAction = defaultAttachmentMenuAction;
+exports.editBoxRichTextEditorStyle = editBoxRichTextEditorStyle;
+exports.editBoxWidthStyles = editBoxWidthStyles;
 exports.fromFlatCommunicationIdentifier = fromFlatCommunicationIdentifier;
+exports.getMessageState = getMessageState;
+exports.getMessageWithAttachmentMetadata = getMessageWithAttachmentMetadata;
 exports.getSelector = getSelector$1;
 exports.getSelector$1 = getSelector;
 exports.imageOverlayTheme = imageOverlayTheme;
 exports.lightTheme = lightTheme;
+exports.onRenderCancelIcon = onRenderCancelIcon;
+exports.onRenderSubmitIcon = onRenderSubmitIcon;
 exports.onResolveVideoEffectDependency = onResolveVideoEffectDependency;
 exports.onResolveVideoEffectDependencyLazy = onResolveVideoEffectDependencyLazy;
+exports.richTextActionButtonsStyle = richTextActionButtonsStyle;
+exports.richTextEditBoxActionButtonIcon = richTextEditBoxActionButtonIcon;
 exports.toFlatCommunicationIdentifier = toFlatCommunicationIdentifier;
 exports.useAzureCommunicationCallAdapter = useAzureCommunicationCallAdapter;
 exports.useAzureCommunicationCallWithChatAdapter = useAzureCommunicationCallWithChatAdapter;
@@ -39470,13 +39503,15 @@ exports.useCall = useCall;
 exports.useCallAgent = useCallAgent;
 exports.useCallClient = useCallClient;
 exports.useChatClient = useChatClient;
+exports.useChatMessageRichTextEditContainerStyles = useChatMessageRichTextEditContainerStyles;
+exports.useChatMyMessageStyles = useChatMyMessageStyles;
 exports.useChatThreadClient = useChatThreadClient;
 exports.useDeviceManager = useDeviceManager;
-exports.usePropsFor = usePropsFor$2;
-exports.usePropsFor$1 = usePropsFor;
+exports.useLocale = useLocale$1;
+exports.usePropsFor = usePropsFor;
 exports.useSelector = useSelector;
 exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-aOBAWcNI.js.map
+//# sourceMappingURL=index-C4BFVPuO.js.map