@azure/communication-react 1.14.0-alpha-202403150012 → 1.14.0-alpha-202403190012

package/dist/dist-cjs/communication-react/{index-Db9LOYoW.js → index-DyaTe_Bz.js}

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.0-alpha-202403150012';
+var telemetryVersion = '1.14.0-alpha-202403190012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -408,7 +408,6 @@ const getRemoteParticipants$1 = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.remoteParticipants;
 };
-/* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -440,7 +439,6 @@ const getIsScreenSharingOn = (state, props) => { var _a; return (_a = state.call
  * @private
  */
 const getIsMuted = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.isMuted; };
-/* @conditional-compile-remove(optimal-video-count) */
 /**
  * @private
  */
@@ -469,7 +467,6 @@ const getLatestErrors$1 = (state) => state.latestErrors;
  * @private
  */
 const getDiagnostics = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.diagnostics; };
-/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -695,7 +692,6 @@ const cameraButtonSelector = reselect__namespace.createSelector([
         selectedCamera: deviceManager.selectedCamera
     };
 });
-/* @conditional-compile-remove(raise-hand) */
 /**
  * Selector for {@link RaiseHandButton} component.
  *
@@ -928,11 +924,8 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             }, options);
         }
     });
-    /* @conditional-compile-remove(raise-hand) */
     const onRaiseHand = () => __awaiter$Q(void 0, void 0, void 0, function* () { var _a; return yield ((_a = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _a === void 0 ? void 0 : _a.raiseHand()); });
-    /* @conditional-compile-remove(raise-hand) */
     const onLowerHand = () => __awaiter$Q(void 0, void 0, void 0, function* () { var _b; return yield ((_b = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _b === void 0 ? void 0 : _b.lowerHand()); });
-    /* @conditional-compile-remove(raise-hand) */
     const onToggleRaiseHand = () => __awaiter$Q(void 0, void 0, void 0, function* () {
         const raiseHandFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand);
         const localUserId = callClient.getState().userId;
@@ -971,7 +964,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
     const onHangUp = (forEveryone) => __awaiter$Q(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
     /* @conditional-compile-remove(PSTN-calls) */
     const onToggleHold = () => __awaiter$Q(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$Q(void 0, void 0, void 0, function* () {
+    const onCreateLocalStreamView = (...args_1) => __awaiter$Q(void 0, [...args_1], void 0, function* (options = { scalingMode: 'Crop', isMirrored: true }) {
         var _d;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -987,7 +980,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         const { view } = (_d = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _d !== void 0 ? _d : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$Q(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId_1, ...args_2) => __awaiter$Q(void 0, [userId_1, ...args_2], void 0, function* (userId, options = { scalingMode: 'Crop' }) {
         if (!call) {
             return;
         }
@@ -1218,11 +1211,8 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         onDisposeLocalStreamView,
         onDisposeRemoteScreenShareStreamView,
         onDisposeRemoteVideoStreamView,
-        /* @conditional-compile-remove(raise-hand) */
         onRaiseHand,
-        /* @conditional-compile-remove(raise-hand) */
         onLowerHand,
-        /* @conditional-compile-remove(raise-hand) */
         onToggleRaiseHand,
         /* @conditional-compile-remove(reaction) */
         onReactionClick: onReactionClick,
@@ -1785,7 +1775,6 @@ function convertSdkParticipantToDeclarativeParticipant(participant) {
         videoStreams: declarativeVideoStreams,
         isMuted: participant.isMuted,
         isSpeaking: participant.isSpeaking,
-        /* @conditional-compile-remove(raise-hand) */
         raisedHand: undefined,
         /* @conditional-compile-remove(hide-attendee-name) */
         role: participant.role,
@@ -1826,9 +1815,10 @@ function convertSdkCallToDeclarativeCall(call) {
         remoteParticipants: declarativeRemoteParticipants,
         remoteParticipantsEnded: {},
         recording: { isRecordingActive: false },
+        /* @conditional-compile-remove(local-recording-notification) */
+        localRecording: { isLocalRecordingActive: false },
         /* @conditional-compile-remove(ppt-live) */
         pptLive: { isActive: false },
-        /* @conditional-compile-remove(raise-hand) */
         raiseHand: { raisedHands: [] },
         /* @conditional-compile-remove(reaction) */
         localParticipantReaction: undefined,
@@ -1852,7 +1842,6 @@ function convertSdkCallToDeclarativeCall(call) {
         transfer: {
             acceptedTransfers: {}
         },
-        /* @conditional-compile-remove(optimal-video-count) */
         optimalVideoCount: {
             maxRemoteVideoStreams: call.feature(communicationCalling.Features.OptimalVideoCount).optimalVideoCount
         },
@@ -1903,7 +1892,6 @@ function convertFromSDKToDeclarativeVideoStreamVideoEffects(videoEffects) {
         activeEffects: videoEffects
     };
 }
-/* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -2029,14 +2017,11 @@ let CallContext$2 = class CallContext {
                 existingCall.localVideoStreams = call.localVideoStreams;
                 existingCall.remoteParticipants = call.remoteParticipants;
                 existingCall.transcription.isTranscriptionActive = call.transcription.isTranscriptionActive;
-                /* @conditional-compile-remove(optimal-video-count) */
                 existingCall.optimalVideoCount.maxRemoteVideoStreams = call.optimalVideoCount.maxRemoteVideoStreams;
                 existingCall.recording.isRecordingActive = call.recording.isRecordingActive;
-                /* @conditional-compile-remove(raise-hand) */
                 existingCall.raiseHand.raisedHands = call.raiseHand.raisedHands;
                 /* @conditional-compile-remove(ppt-live) */
                 existingCall.pptLive.isActive = call.pptLive.isActive;
-                /* @conditional-compile-remove(raise-hand) */
                 existingCall.raiseHand.localParticipantRaisedHand = call.raiseHand.localParticipantRaisedHand;
                 /* @conditional-compile-remove(rooms) */
                 existingCall.role = call.role;
@@ -2216,6 +2201,35 @@ let CallContext$2 = class CallContext {
             }
         });
     }
+    /* @conditional-compile-remove(local-recording-notification) */
+    setCallRecordingInfos(callId, recordingInfosAdded, lastStoppedRecording) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.recording.activeRecordings = recordingInfosAdded;
+                call.recording.lastStoppedRecording = lastStoppedRecording;
+            }
+        });
+    }
+    /* @conditional-compile-remove(local-recording-notification) */
+    setCallLocalRecordingActive(callId, isRecordingActive) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.localRecording.isLocalRecordingActive = isRecordingActive;
+            }
+        });
+    }
+    /* @conditional-compile-remove(local-recording-notification) */
+    setCallLocalRecordingInfos(callId, localRecordingInfosAdded, lastStoppedRecording) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.localRecording.activeLocalRecordings = localRecordingInfosAdded;
+                call.localRecording.lastStoppedLocalRecording = lastStoppedRecording;
+            }
+        });
+    }
     /* @conditional-compile-remove(ppt-live) */
     setCallPPTLiveActive(callId, isActive) {
         this.modifyState((draft) => {
@@ -2238,7 +2252,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     setCallRaisedHands(callId, raisedHands) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2256,7 +2269,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     setParticipantIsRaisedHand(callId, participantKey, raisedHand) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2394,7 +2406,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(optimal-video-count) */
     setOptimalVideoCount(callId, optimalVideoCount) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3745,13 +3756,21 @@ class RecordingSubscriber {
     constructor(callIdRef, context, recording) {
         this.subscribe = () => {
             this._recording.on('isRecordingActiveChanged', this.isAvailableChanged);
+            /* @conditional-compile-remove(local-recording-notification) */
+            this._recording.on('recordingsUpdated', this.isRecordingsUpdated);
         };
         this.unsubscribe = () => {
             this._recording.off('isRecordingActiveChanged', this.isAvailableChanged);
+            /* @conditional-compile-remove(local-recording-notification) */
+            this._recording.off('recordingsUpdated', this.isRecordingsUpdated);
         };
         this.isAvailableChanged = () => {
             this._context.setCallRecordingActive(this._callIdRef.callId, this._recording.isRecordingActive);
         };
+        /* @conditional-compile-remove(local-recording-notification) */
+        this.isRecordingsUpdated = (data) => {
+            this._context.setCallRecordingInfos(this._callIdRef.callId, this._recording.recordings, data.removed);
+        };
         this._callIdRef = callIdRef;
         this._context = context;
         this._recording = recording;
@@ -3759,6 +3778,9 @@ class RecordingSubscriber {
         // be an event for it.
         if (this._recording.isRecordingActive) {
             this._context.setCallRecordingActive(this._callIdRef.callId, this._recording.isRecordingActive);
+            /* @conditional-compile-remove(local-recording-notification) */
+            // recordings getter only returns a list of active recordings, so we can set the list of recordings here
+            this._context.setCallRecordingInfos(this._callIdRef.callId, this._recording.recordings, []);
         }
         this.subscribe();
     }
@@ -3915,8 +3937,6 @@ const latestFromEvent = (args) => ({
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
-/* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -3949,7 +3969,6 @@ class RaiseHandSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(optimal-video-count) */
 /**
  * Subscribes to a Optimal Video Count Feature events and updates the call context appropriately.
  * @private
@@ -4053,6 +4072,42 @@ class SpotlightSubscriber {
     }
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(local-recording-notification) */
+/**
+ * @private
+ */
+class LocalRecordingSubscriber {
+    constructor(callIdRef, context, recording) {
+        this.subscribe = () => {
+            this._recording.on('isLocalRecordingActiveChanged', this.isAvailableChanged);
+            this._recording.on('localRecordingsUpdated', this.isRecordingsUpdated);
+        };
+        this.unsubscribe = () => {
+            this._recording.off('isLocalRecordingActiveChanged', this.isAvailableChanged);
+            this._recording.off('localRecordingsUpdated', this.isRecordingsUpdated);
+        };
+        this.isAvailableChanged = () => {
+            this._context.setCallLocalRecordingActive(this._callIdRef.callId, this._recording.isRecordingActive);
+        };
+        this.isRecordingsUpdated = (data) => {
+            this._context.setCallLocalRecordingInfos(this._callIdRef.callId, this._recording.recordings, data.removed);
+        };
+        this._callIdRef = callIdRef;
+        this._context = context;
+        this._recording = recording;
+        // If recording as already started when we joined the call, make sure it is reflected in state as there may not
+        // be an event for it.
+        if (this._recording.isRecordingActive) {
+            this._context.setCallLocalRecordingActive(this._callIdRef.callId, this._recording.isRecordingActive);
+            // recordings getter only returns a list of active recordings, so we can set the list of recordings here
+            this._context.setCallLocalRecordingInfos(this._callIdRef.callId, this._recording.recordings, []);
+        }
+        this.subscribe();
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -4114,7 +4169,8 @@ class CallSubscriber {
             this._diagnosticsSubscriber.unsubscribe();
             this._recordingSubscriber.unsubscribe();
             this._transcriptionSubscriber.unsubscribe();
-            /* @conditional-compile-remove(optimal-video-count) */
+            /* @conditional-compile-remove(local-recording-notification) */
+            this._localRecordingSubscriber.unsubscribe();
             this._optimalVideoCountSubscriber.unsubscribe();
             /* @conditional-compile-remove(ppt-live) */
             this._pptLiveSubscriber.unsubscribe();
@@ -4122,7 +4178,6 @@ class CallSubscriber {
             (_a = this._TeamsCaptionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
             /* @conditional-compile-remove(acs-close-captions) */
             (_b = this._CaptionsSubscriber) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-            /* @conditional-compile-remove(raise-hand) */
             (_c = this._raiseHandSubscriber) === null || _c === void 0 ? void 0 : _c.unsubscribe();
             /* @conditional-compile-remove(capabilities) */
             this._capabilitiesSubscriber.unsubscribe();
@@ -4221,14 +4276,14 @@ class CallSubscriber {
         this._diagnosticsSubscriber = new UserFacingDiagnosticsSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.UserFacingDiagnostics));
         this._participantSubscribers = new Map();
         this._recordingSubscriber = new RecordingSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Recording));
+        /* @conditional-compile-remove(local-recording-notification) */
+        this._localRecordingSubscriber = new LocalRecordingSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.LocalRecording));
         /* @conditional-compile-remove(ppt-live) */
         this._pptLiveSubscriber = new PPTLiveSubscriber(this._callIdRef, this._context, this._call);
         this._transcriptionSubscriber = new TranscriptionSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Transcription));
-        /* @conditional-compile-remove(raise-hand) */
         this._raiseHandSubscriber = new RaiseHandSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.RaiseHand));
         /* @conditional-compile-remove(reaction) */
         this._reactionSubscriber = new ReactionSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Reaction));
-        /* @conditional-compile-remove(optimal-video-count) */
         this._optimalVideoCountSubscriber = new OptimalVideoCountSubscriber({
             callIdRef: this._callIdRef,
             context: this._context,
@@ -6417,7 +6472,6 @@ const lightTheme = {
         callRedDark: '#8b2c3d',
         callRedDarker: '#772a38',
         iconWhite: '#ffffff',
-        /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
     semanticColors: {
@@ -6460,7 +6514,6 @@ const darkTheme = {
         callRedDark: '#a42e43',
         callRedDarker: '#8b2c3d',
         iconWhite: '#ffffff',
-        /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
     semanticColors: {
@@ -6655,13 +6708,9 @@ const DEFAULT_COMPONENT_ICONS = {
     ControlButtonParticipantsContextualMenuItem: React.createElement(reactIcons.People20Regular, null),
     ControlButtonScreenShareStart: React.createElement(reactIcons.ShareScreenStart20Filled, null),
     ControlButtonScreenShareStop: React.createElement(reactIcons.ShareScreenStop20Filled, null),
-    /* @conditional-compile-remove(raise-hand) */
     ControlButtonRaiseHand: React.createElement(ControlButtonRaiseHandIcon, null),
-    /* @conditional-compile-remove(raise-hand) */
     ControlButtonLowerHand: React.createElement(ControlButtonLowerHandIcon, null),
-    /* @conditional-compile-remove(raise-hand) */
     RaiseHandContextualMenuItem: React.createElement(reactIcons.HandRight20Regular, null),
-    /* @conditional-compile-remove(raise-hand) */
     LowerHandContextualMenuItem: React.createElement(reactIcons.HandRightOff20Regular, null),
     /* @conditional-compile-remove(reaction) */
     ReactionButtonIcon: React.createElement(reactIcons.Emoji20Regular, null),
@@ -8285,8 +8334,8 @@ const TextFieldWithMention = (props) => {
             });
         }
     }, [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]);
-    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$D(void 0, void 0, void 0, function* () {
-        var _b;
+    const handleOnChange = React.useCallback((_b) => __awaiter$D(void 0, [_b], void 0, function* ({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) {
+        var _c;
         debouncedQueryUpdate.cancel();
         if (event.currentTarget === null) {
             return;
@@ -8295,7 +8344,7 @@ const TextFieldWithMention = (props) => {
         // onSelect is not called for backspace as selection is not changed and local caret index is outdated
         setCaretIndex(undefined);
         const newValue = updatedValue !== null && updatedValue !== void 0 ? updatedValue : '';
-        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
+        const triggerText = (_c = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _c !== void 0 ? _c : DEFAULT_MENTION_TRIGGER;
         const newTextLength = newValue.length;
         // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly
         const currentSelectionEndValue = getValidatedIndexInRange({
@@ -11080,6 +11129,63 @@ function createStyleFromV8Style(v8Style) {
     return result;
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const systemMessageIconStyle = react.mergeStyles({
+    marginInlineEnd: '0.688rem'
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const SystemMessage = (props) => {
+    const { iconName, content } = props;
+    const Icon = React.createElement(react.FontIcon, { iconName: iconName, className: react.mergeStyles(systemMessageIconStyle) });
+    return (React.createElement(react.Stack, { horizontal: true, className: react.mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), tabIndex: 0 },
+        Icon,
+        React.createElement(react.Text, { style: { wordBreak: 'break-word' }, role: "status", title: content, variant: 'small' }, content)));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const DefaultSystemMessage = (props) => {
+    var _a;
+    const message = props.message;
+    switch (message.messageType) {
+        case 'system':
+            switch (message.systemMessageType) {
+                case 'content':
+                    return (React.createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
+                case 'participantAdded':
+                case 'participantRemoved':
+                    return (React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
+            }
+    }
+    return React.createElement(React.Fragment, null);
+};
+const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
+    const { strings } = useLocale$1();
+    const participantsStr = generateParticipantsStr(message.participants, defaultName);
+    const messageSuffix = message.systemMessageType === 'participantAdded'
+        ? strings.messageThread.participantJoined
+        : strings.messageThread.participantLeft;
+    if (participantsStr !== '') {
+        return (React.createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
+    }
+    return React.createElement(React.Fragment, null);
+};
+const generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
+    .join(', ');
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -11175,85 +11281,6 @@ const ChatMessageComponentAsEditBox = (props) => {
         } }, getContent()));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const formatTimeForChatMessage = (messageDate) => {
-    return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
-};
-/**
- * @private
- */
-const formatDateForChatMessage = (messageDate) => {
-    return messageDate.toLocaleDateString();
-};
-/**
- * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
- * using the system locale.
- * <time in locale format>.
- * Yesterday <time in locale format>.
- * <dateStrings day of week> <time in locale format>.
- * <date in locale format> <time in locale format>.
- *
- * If message is after yesterday, then only show the time.
- * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
- * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
- *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
- * If message is in previous or older weeks, then show date string plus the time.
- *
- * @param messageDate - date of message
- * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)
- *
- * @private
- */
-const formatTimestampForChatMessage = (messageDate, todayDate, dateStrings) => {
-    // If message was in the same day timestamp string is just the time like '1:30 p.m.'.
-    const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
-    if (messageDate > startOfDay) {
-        return formatTimeForChatMessage(messageDate);
-    }
-    // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.
-    const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);
-    if (messageDate > yesterdayDate) {
-        return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message was before Sunday and today is Sunday (start of week) then timestamp string is like
-    // '2021-01-10 1:30 p.m.'.
-    const weekDay = todayDate.getDay();
-    if (weekDay === 0) {
-        return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.
-    const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);
-    if (messageDate > firstDayOfTheWeekDate) {
-        return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.
-    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
-};
-const dayToDayName = (day, dateStrings) => {
-    switch (day) {
-        case 0:
-            return dateStrings.sunday;
-        case 1:
-            return dateStrings.monday;
-        case 2:
-            return dateStrings.tuesday;
-        case 3:
-            return dateStrings.wednesday;
-        case 4:
-            return dateStrings.thursday;
-        case 5:
-            return dateStrings.friday;
-        case 6:
-            return dateStrings.saturday;
-        default:
-            throw new Error(`Invalid day [${day}] passed`);
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -11426,6 +11453,29 @@ const preventUnwantedDismissProps = {
 };
 const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: { root: { marginRight: '3px' } } });
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * Props for the Chat.Message action menu.
+ * This is the 3 dots that appear when hovering over one of your own chat messages.
+ *
+ * @private
+ */
+const chatMessageActionMenuProps = (menuProps) => {
+    const { ariaLabel, enabled, theme, menuExpanded } = menuProps;
+    // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
+    const showActionMenu = enabled || menuExpanded;
+    const actionMenuProps = {
+        children: (React.createElement("div", { tabIndex: showActionMenu ? 0 : undefined, key: "menuButton", "data-ui-id": "chat-composite-message-action-icon", ref: menuProps.menuButtonRef, onClick: showActionMenu ? () => menuProps.onActionButtonClick() : undefined, style: { margin: showActionMenu ? '1px' : 0, minHeight: showActionMenu ? undefined : '30px' }, role: "button", "aria-label": showActionMenu ? ariaLabel : undefined, "aria-haspopup": showActionMenu, "aria-expanded": menuExpanded, onKeyDown: (e) => {
+                // simulate <button> tag behavior
+                if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {
+                    menuProps.onActionButtonClick();
+                }
+            } }, showActionMenu ? (React.createElement(react.Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) })) : undefined))
+    };
+    return actionMenuProps;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -11567,29 +11617,6 @@ const processHtmlToReact = (props) => {
     return React.createElement(React.Fragment, null, parse((_a = props.message.content) !== null && _a !== void 0 ? _a : '', options));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * Props for the Chat.Message action menu.
- * This is the 3 dots that appear when hovering over one of your own chat messages.
- *
- * @private
- */
-const chatMessageActionMenuProps = (menuProps) => {
-    const { ariaLabel, enabled, theme, menuExpanded } = menuProps;
-    // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
-    const showActionMenu = enabled || menuExpanded;
-    const actionMenuProps = {
-        children: (React.createElement("div", { tabIndex: showActionMenu ? 0 : undefined, key: "menuButton", "data-ui-id": "chat-composite-message-action-icon", ref: menuProps.menuButtonRef, onClick: showActionMenu ? () => menuProps.onActionButtonClick() : undefined, style: { margin: showActionMenu ? '1px' : 0, minHeight: showActionMenu ? undefined : '30px' }, role: "button", "aria-label": showActionMenu ? ariaLabel : undefined, "aria-haspopup": showActionMenu, "aria-expanded": menuExpanded, onKeyDown: (e) => {
-                // simulate <button> tag behavior
-                if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {
-                    menuProps.onActionButtonClick();
-                }
-            } }, showActionMenu ? (React.createElement(react.Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) })) : undefined))
-    };
-    return actionMenuProps;
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -11677,6 +11704,138 @@ const useLocaleStringsTrampoline = () => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/**
+ * @private
+ */
+const formatTimeForChatMessage = (messageDate) => {
+    return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+};
+/**
+ * @private
+ */
+const formatDateForChatMessage = (messageDate) => {
+    return messageDate.toLocaleDateString();
+};
+/**
+ * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
+ * using the system locale.
+ * <time in locale format>.
+ * Yesterday <time in locale format>.
+ * <dateStrings day of week> <time in locale format>.
+ * <date in locale format> <time in locale format>.
+ *
+ * If message is after yesterday, then only show the time.
+ * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
+ * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
+ *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
+ * If message is in previous or older weeks, then show date string plus the time.
+ *
+ * @param messageDate - date of message
+ * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)
+ *
+ * @private
+ */
+const formatTimestampForChatMessage = (messageDate, todayDate, dateStrings) => {
+    // If message was in the same day timestamp string is just the time like '1:30 p.m.'.
+    const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
+    if (messageDate > startOfDay) {
+        return formatTimeForChatMessage(messageDate);
+    }
+    // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.
+    const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);
+    if (messageDate > yesterdayDate) {
+        return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);
+    }
+    // If message was before Sunday and today is Sunday (start of week) then timestamp string is like
+    // '2021-01-10 1:30 p.m.'.
+    const weekDay = todayDate.getDay();
+    if (weekDay === 0) {
+        return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
+    }
+    // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.
+    const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);
+    if (messageDate > firstDayOfTheWeekDate) {
+        return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);
+    }
+    // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.
+    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
+};
+const dayToDayName = (day, dateStrings) => {
+    switch (day) {
+        case 0:
+            return dateStrings.sunday;
+        case 1:
+            return dateStrings.monday;
+        case 2:
+            return dateStrings.tuesday;
+        case 3:
+            return dateStrings.wednesday;
+        case 4:
+            return dateStrings.thursday;
+        case 5:
+            return dateStrings.friday;
+        case 6:
+            return dateStrings.saturday;
+        default:
+            throw new Error(`Invalid day [${day}] passed`);
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @private
+ * Return the string value for the FluentUI message attached prop based on the message's attached status.
+ * @param attached - The message's attached status.
+ */
+const getFluentUIAttachedValue = (messageAttachedStatus) => {
+    return messageAttachedStatus === 'top' || messageAttachedStatus === false ? 'top' : 'center';
+};
+/**
+ * @private
+ *  Get the message bubble content for the message.
+ */
+function getMessageBubbleContent(message, strings, userId, 
+/* @conditional-compile-remove(image-overlay) */
+inlineImageOptions, 
+/* @conditional-compile-remove(file-sharing) */
+onRenderFileDownloads, 
+/* @conditional-compile-remove(mention) */
+mentionDisplayOptions, 
+/* @conditional-compile-remove(file-sharing) */
+fileDownloadHandler) {
+    /* @conditional-compile-remove(data-loss-prevention) */
+    if (message.messageType === 'blocked') {
+        return (React.createElement("div", { tabIndex: 0 },
+            React.createElement(BlockedMessageContent, { message: message, strings: strings })));
+    }
+    return (React.createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
+        React.createElement(ChatMessageContent, { message: message, strings: strings, 
+            /* @conditional-compile-remove(mention) */
+            mentionDisplayOptions: mentionDisplayOptions, 
+            /* @conditional-compile-remove(image-overlay) */
+            inlineImageOptions: inlineImageOptions }),
+        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads
+            ? onRenderFileDownloads(userId, message)
+            : defaultOnRenderFileDownloads(userId, message, strings, 
+            /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler)));
+}
+/**
+ * Default component for rendering file downloads.
+ */
+/* @conditional-compile-remove(file-sharing) */
+const defaultOnRenderFileDownloads = (userId, message, strings, 
+/* @conditional-compile-remove(file-sharing) */
+fileDownloadHandler) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return (React.createElement(_FileDownloadCards, { userId: userId, 
+        /* @conditional-compile-remove(file-sharing) */
+        fileMetadata: message.files || [], 
+        /* @conditional-compile-remove(file-sharing) */
+        downloadHandler: fileDownloadHandler, 
+        /* @conditional-compile-remove(file-sharing) */
+        strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } }));
+};
+/** @private */
 const generateDefaultTimestamp = (createdOn, showDate, strings) => {
     const formattedTimestamp = showDate
         ? formatTimestampForChatMessage(createdOn, new Date(), strings)
@@ -11684,16 +11843,31 @@ const generateDefaultTimestamp = (createdOn, showDate, strings) => {
     return formattedTimestamp;
 };
 // onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
-const generateCustomizedTimestamp = (props, createdOn, locale) => {
+/** @private */
+const generateCustomizedTimestamp = (createdOn, locale, onDisplayDateTimeString) => {
     /* @conditional-compile-remove(date-time-customization) */
-    return props.onDisplayDateTimeString
-        ? props.onDisplayDateTimeString(createdOn)
+    return onDisplayDateTimeString
+        ? onDisplayDateTimeString(createdOn)
         : locale.onDisplayDateTimeString
             ? locale.onDisplayDateTimeString(createdOn)
             : '';
 };
+/**
+ * @private
+ *  Get the edited tag for the message if it is edited.
+ */
+const getMessageEditedDetails = (message, theme, editedTag) => {
+    const editedOn = 'editedOn' in message ? message.editedOn : undefined;
+    if (message.messageType === 'chat' && editedOn) {
+        return React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, editedTag);
+    }
+    return undefined;
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /** @private */
-const MessageBubble = (props) => {
+const MessageBubble$1 = (props) => {
     var _a;
     const ids = useIdentifiers();
     const theme = useTheme();
@@ -11702,12 +11876,20 @@ const MessageBubble = (props) => {
     /* @conditional-compile-remove(file-sharing) */
     fileDownloadHandler, 
     /* @conditional-compile-remove(image-overlay) */
-    inlineImageOptions, shouldOverlapAvatarAndMessage } = props;
-    const defaultTimeStamp = message.createdOn
-        ? generateDefaultTimestamp(message.createdOn, showDate, strings)
-        : undefined;
-    const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';
-    const formattedTimestamp = customTimestamp || defaultTimeStamp;
+    inlineImageOptions, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionDisplayOptions, onDisplayDateTimeString } = props;
+    const formattedTimestamp = React.useMemo(() => {
+        const defaultTimeStamp = message.createdOn
+            ? generateDefaultTimestamp(message.createdOn, showDate, strings)
+            : undefined;
+        const customTimestamp = message.createdOn
+            ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)
+            : '';
+        return customTimestamp || defaultTimeStamp;
+    }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);
     // Track if the action menu was opened by touch - if so we increase the touch targets for the items
     const [wasInteractionByTouch, setWasInteractionByTouch] = React.useState(false);
     // `focused` state is used for show/hide actionMenu
@@ -11741,139 +11923,95 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
-    const defaultOnRenderFileDownloads = React.useCallback(() => {
-        /* @conditional-compile-remove(file-sharing) */
-        return (React.createElement(_FileDownloadCards, { userId: userId, 
-            /* @conditional-compile-remove(file-sharing) */
-            fileMetadata: message.files || [], 
-            /* @conditional-compile-remove(file-sharing) */
-            downloadHandler: fileDownloadHandler, 
-            /* @conditional-compile-remove(file-sharing) */
-            strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } }));
-    }, [
-        userId,
-        message,
-        /* @conditional-compile-remove(file-sharing) */
-        strings,
-        /* @conditional-compile-remove(file-sharing) */
-        fileDownloadHandler
-    ]);
-    const editedOn = 'editedOn' in message ? message.editedOn : undefined;
     const getMessageDetails = React.useCallback(() => {
         if (messageStatus === 'failed') {
             return React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
         }
-        else if (message.messageType === 'chat' && editedOn) {
-            return React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag);
+        else {
+            return getMessageEditedDetails(message, theme, strings.editedTag);
         }
-        return undefined;
-    }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
+    }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     const getContent = React.useCallback(() => {
-        /* @conditional-compile-remove(data-loss-prevention) */
-        if (message.messageType === 'blocked') {
-            return (React.createElement("div", { tabIndex: 0 },
-                React.createElement(BlockedMessageContent, { message: message, strings: strings })));
-        }
-        return (React.createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
-            React.createElement(ChatMessageContent, { message: message, strings: strings, 
-                /* @conditional-compile-remove(mention) */
-                mentionDisplayOptions: props.mentionDisplayOptions, 
-                /* @conditional-compile-remove(image-overlay) */
-                inlineImageOptions: inlineImageOptions }),
-            /* @conditional-compile-remove(file-sharing) */ props.onRenderFileDownloads
-                ? props.onRenderFileDownloads(userId, message)
-                : defaultOnRenderFileDownloads()));
+        return getMessageBubbleContent(message, strings, userId, 
+        /* @conditional-compile-remove(image-overlay) */
+        inlineImageOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        onRenderFileDownloads, 
+        /* @conditional-compile-remove(mention) */
+        mentionDisplayOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler);
     }, [
-        defaultOnRenderFileDownloads,
+        /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler,
         /* @conditional-compile-remove(image-overlay) */ inlineImageOptions,
+        /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
         message,
-        props,
+        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads,
         strings,
         userId
     ]);
     const isBlockedMessage = /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
-    const chatMessageStyles = useChatMessageStyles();
-    const chatItemMessageContainerClassName = reactComponents.mergeClasses(
-    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-    chatMessageStyles.body, 
-    // disable placeholder functionality for GA releases as it might confuse users
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    chatMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
-        ? chatMessageCommonStyles.blocked
-        : props.message.status === 'failed'
-            ? chatMessageCommonStyles.failed
-            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
-        ? chatMessageStyles.bodyWithAvatar
-        : chatMessageStyles.bodyWithoutAvatar, react.mergeStyles(messageContainerStyle));
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     const chatMessage = (React.createElement(React.Fragment, null,
-        React.createElement("div", { key: props.message.messageId }, message.mine ? (React.createElement(reactChat.ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
-                // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-                className: reactComponents.mergeClasses(chatMyMessageStyles.body, isBlockedMessage
-                    ? chatMessageCommonStyles.blocked
-                    : props.message.status === 'failed'
-                        ? chatMessageCommonStyles.failed
-                        : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, react.mergeStyles(messageContainerStyle)),
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
-                ref: messageRef
-            }, root: {
-                className: chatMyMessageStyles.root,
-                onBlur: (e) => {
-                    // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
-                    // with keyboard the focused element will be changed and there is no way to use `:focus` selector
-                    if (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) {
-                        // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu
+        React.createElement("div", { key: props.message.messageId },
+            React.createElement(reactChat.ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
+                    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
+                    className: reactComponents.mergeClasses(chatMyMessageStyles.body, isBlockedMessage
+                        ? chatMessageCommonStyles.blocked
+                        : props.message.status === 'failed'
+                            ? chatMessageCommonStyles.failed
+                            : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, react.mergeStyles(messageContainerStyle)),
+                    style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
+                    ref: messageRef
+                }, root: {
+                    className: chatMyMessageStyles.root,
+                    onBlur: (e) => {
+                        // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
+                        // with keyboard the focused element will be changed and there is no way to use `:focus` selector
+                        if (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) {
+                            // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu
+                            return;
+                        }
+                        const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);
+                        setFocused(shouldPreserveFocusState);
+                    },
+                    onFocus: () => {
+                        // react onFocus is called even when nested component receives focus (i.e. it bubbles)
+                        // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
+                        setFocused(true);
+                    },
+                    // make body not focusable to remove repetitions from narrators.
+                    // inner components are already focusable
+                    role: 'none',
+                    tabIndex: -1
+                }, "data-ui-id": "chat-composite-message", author: React.createElement(react.Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
+                    children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
+                    className: reactComponents.mergeClasses(chatMyMessageStyles.menu, 
+                    // Make actions menu visible when the message is focused or the flyout is shown
+                    focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
+                        ? chatMyMessageStyles.menuVisible
+                        : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
+                }, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => {
+                    if (!wasInteractionByTouch) {
                         return;
                     }
-                    const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);
-                    setFocused(shouldPreserveFocusState);
-                },
-                onFocus: () => {
-                    // react onFocus is called even when nested component receives focus (i.e. it bubbles)
-                    // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
-                    setFocused(true);
-                },
-                // make body not focusable to remove repetitions from narrators.
-                // inner components are already focusable
-                role: 'none',
-                tabIndex: -1
-            }, "data-ui-id": "chat-composite-message", author: React.createElement(react.Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
-                children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
-                className: reactComponents.mergeClasses(chatMyMessageStyles.menu, 
-                // Make actions menu visible when the message is focused or the flyout is shown
-                focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
-                    ? chatMyMessageStyles.menuVisible
-                    : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
-            }, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => {
-                if (!wasInteractionByTouch) {
-                    return;
-                }
-                // If the message was touched via touch we immediately open the menu
-                // flyout (when using mouse the 3-dot menu that appears on hover
-                // must be clicked to open the flyout).
-                // In doing so here we set the target of the flyout to be the message and
-                // not the 3-dot menu button to position the flyout correctly.
-                setChatMessageActionFlyoutTarget(messageRef);
-                if (message.messageType === 'chat') {
-                    props.onActionButtonClick(message, setMessageReadBy);
-                }
-            } }, getContent())) : (React.createElement(reactChat.ChatMessage, { attached: attached, key: props.message.messageId, root: {
-                className: chatMessageStyles.root,
-                // make body not focusable to remove repetitions from narrators.
-                // inner components are already focusable
-                tabIndex: -1,
-                role: 'none'
-            }, author: React.createElement(react.Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
-                className: chatItemMessageContainerClassName,
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
-            }, "data-ui-id": "chat-composite-message", timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails() }, getContent()))),
+                    // If the message was touched via touch we immediately open the menu
+                    // flyout (when using mouse the 3-dot menu that appears on hover
+                    // must be clicked to open the flyout).
+                    // In doing so here we set the target of the flyout to be the message and
+                    // not the 3-dot menu button to position the flyout correctly.
+                    setChatMessageActionFlyoutTarget(messageRef);
+                    if (message.messageType === 'chat') {
+                        props.onActionButtonClick(message, setMessageReadBy);
+                    }
+                } }, getContent())),
         chatActionsEnabled && (React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }))));
     return chatMessage;
 };
 /** @private */
-const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);
+const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble$1);
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -11889,7 +12027,7 @@ var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments,
 /**
  * @private
  */
-const ChatMessageComponent = (props) => {
+const ChatMyMessageComponent = (props) => {
     var _a, _b;
     const { onDeleteMessage, onSendMessage, message } = props;
     const [isEditing, setIsEditing] = React.useState(false);
@@ -11923,7 +12061,7 @@ const ChatMessageComponent = (props) => {
             mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions }));
     }
     else {
-        return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
+        return (React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
             /* @conditional-compile-remove(date-time-customization) */
             onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
             /* @conditional-compile-remove(image-overlay) */
@@ -11943,7 +12081,7 @@ const ChatMessageComponent = (props) => {
  *
  * @private
  */
-const FluentChatMessageComponentWrapper = (props) => {
+const FluentChatMyMessageComponent = (props) => {
     const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, 
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString, 
@@ -11965,7 +12103,7 @@ const FluentChatMessageComponentWrapper = (props) => {
     const defaultChatMessageRenderer = React.useCallback((messageProps) => {
         if (messageProps.message.messageType === 'chat' ||
             /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
-            return (React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { 
+            return (React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { 
                 /* @conditional-compile-remove(file-sharing) */
                 onRenderFileDownloads: onRenderFileDownloadsMemo, 
                 /* @conditional-compile-remove(file-sharing) */
@@ -12007,12 +12145,9 @@ const FluentChatMessageComponentWrapper = (props) => {
     const messageStatusRenderer = React.useCallback((onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) => {
         return showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: message.status })) : (defaultStatusRenderer(message, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0, message.status))) : (React.createElement("div", { className: react.mergeStyles(noMessageStatusStyle) }));
     }, [message, statusToRender]);
-    const shouldShowAvatar = React.useMemo(() => {
-        return message.attached === 'top' || message.attached === false;
-    }, [message.attached]);
     const attached = React.useMemo(() => {
-        return shouldShowAvatar ? 'top' : 'center';
-    }, [shouldShowAvatar]);
+        return getFluentUIAttachedValue(message.attached);
+    }, [message.attached]);
     const myMessageRootProps = React.useMemo(() => {
         return {
             // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
@@ -12048,6 +12183,166 @@ const FluentChatMessageComponentWrapper = (props) => {
         showMessageStatus,
         styles
     ]);
+    // Fluent UI message components are used here as for default message renderer,
+    // timestamp and author name should be shown but they aren't shown for custom renderer.
+    // More investigations are needed to check if this can be simplified with states.
+    // Status and avatar should be shown for both custom and default renderers.
+    return (React.createElement(reactChat.ChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props))));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @private */
+const MessageBubble = (props) => {
+    const ids = useIdentifiers();
+    const theme = useTheme();
+    const locale = useLocale$1();
+    const { userId, message, showDate, messageContainerStyle, strings, 
+    /* @conditional-compile-remove(file-sharing) */
+    fileDownloadHandler, 
+    /* @conditional-compile-remove(image-overlay) */
+    inlineImageOptions, shouldOverlapAvatarAndMessage, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionDisplayOptions, onDisplayDateTimeString } = props;
+    const formattedTimestamp = React.useMemo(() => {
+        const defaultTimeStamp = message.createdOn
+            ? generateDefaultTimestamp(message.createdOn, showDate, strings)
+            : undefined;
+        const customTimestamp = message.createdOn
+            ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)
+            : '';
+        return customTimestamp || defaultTimeStamp;
+    }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);
+    const getMessageDetails = React.useCallback(() => {
+        return getMessageEditedDetails(message, theme, strings.editedTag);
+    }, [strings.editedTag, theme, message]);
+    const getContent = React.useCallback(() => {
+        return getMessageBubbleContent(message, strings, userId, 
+        /* @conditional-compile-remove(image-overlay) */
+        inlineImageOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        onRenderFileDownloads, 
+        /* @conditional-compile-remove(mention) */
+        mentionDisplayOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler);
+    }, [
+        /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler,
+        /* @conditional-compile-remove(image-overlay) */ inlineImageOptions,
+        /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
+        message,
+        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads,
+        strings,
+        userId
+    ]);
+    const isBlockedMessage = /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
+    const chatMessageCommonStyles = useChatMessageCommonStyles();
+    const chatMessageStyles = useChatMessageStyles();
+    const chatItemMessageContainerClassName = reactComponents.mergeClasses(
+    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
+    chatMessageStyles.body, 
+    // disable placeholder functionality for GA releases as it might confuse users
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    chatMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
+        ? chatMessageCommonStyles.blocked
+        : props.message.status === 'failed'
+            ? chatMessageCommonStyles.failed
+            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
+        ? chatMessageStyles.bodyWithAvatar
+        : chatMessageStyles.bodyWithoutAvatar, react.mergeStyles(messageContainerStyle));
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    const chatMessage = (React.createElement(React.Fragment, null,
+        React.createElement("div", { key: props.message.messageId },
+            React.createElement(reactChat.ChatMessage, { attached: attached, key: props.message.messageId, root: {
+                    className: chatMessageStyles.root,
+                    // make body not focusable to remove repetitions from narrators.
+                    // inner components are already focusable
+                    tabIndex: -1,
+                    role: 'none'
+                }, author: React.createElement(react.Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
+                    className: chatItemMessageContainerClassName,
+                    style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
+                }, "data-ui-id": "chat-composite-message", timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails() }, getContent()))));
+    return chatMessage;
+};
+/** @private */
+const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * The component for rendering a chat message using Fluent UI components
+ * and handling default and custom renderers.
+ * This component handles rendering for chat message body, avatar and message status.
+ * The chat message body, avatar and message status should be shown for both default and custom renderers.
+ *
+ * @private
+ */
+const FluentChatMessageComponent = (props) => {
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, 
+    /* @conditional-compile-remove(date-time-customization) */
+    onDisplayDateTimeString, 
+    /* @conditional-compile-remove(image-overlay) */
+    inlineImageOptions, 
+    /* @conditional-compile-remove(file-sharing) */
+    fileDownloadHandler, userId, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionOptions } = props;
+    const chatMessageRenderStyles = useChatMessageRenderStyles();
+    const onRenderFileDownloadsMemo = React.useMemo(() => {
+        /* @conditional-compile-remove(file-sharing) */
+        return onRenderFileDownloads;
+    }, [/* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads]);
+    // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
+    // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
+    const defaultChatMessageRenderer = React.useCallback((messageProps) => {
+        if (messageProps.message.messageType === 'chat' ||
+            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
+            return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, messageProps, { 
+                /* @conditional-compile-remove(file-sharing) */
+                onRenderFileDownloads: onRenderFileDownloadsMemo, 
+                /* @conditional-compile-remove(file-sharing) */
+                strings: messageProps.strings, message: messageProps.message, userId: userId, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, 
+                /* @conditional-compile-remove(date-time-customization) */
+                onDisplayDateTimeString: onDisplayDateTimeString, 
+                /* @conditional-compile-remove(image-overlay) */
+                inlineImageOptions: inlineImageOptions, 
+                /* @conditional-compile-remove(file-sharing) */
+                fileDownloadHandler: fileDownloadHandler, 
+                /* @conditional-compile-remove(mention) */
+                mentionDisplayOptions: mentionOptions === null || mentionOptions === void 0 ? void 0 : mentionOptions.displayOptions })));
+        }
+        return React.createElement(React.Fragment, null);
+    }, [
+        onRenderFileDownloadsMemo,
+        shouldOverlapAvatarAndMessage,
+        userId,
+        /* @conditional-compile-remove(date-time-customization) */
+        onDisplayDateTimeString,
+        /* @conditional-compile-remove(image-overlay) */
+        inlineImageOptions,
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler,
+        /* @conditional-compile-remove(mention) */
+        mentionOptions,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        new Date().toDateString()
+    ]);
+    const messageRenderer = React.useCallback((messageProps) => {
+        return onRenderMessage === undefined
+            ? defaultChatMessageRenderer(Object.assign({}, messageProps))
+            : onRenderMessage(messageProps, defaultChatMessageRenderer);
+    }, [defaultChatMessageRenderer, onRenderMessage]);
+    const shouldShowAvatar = React.useMemo(() => {
+        return message.attached === 'top' || message.attached === false;
+    }, [message.attached]);
+    const attached = React.useMemo(() => {
+        return getFluentUIAttachedValue(message.attached);
+    }, [message.attached]);
     const messageRootProps = React.useMemo(() => {
         return { className: reactComponents.mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
@@ -12084,74 +12379,10 @@ const FluentChatMessageComponentWrapper = (props) => {
     // Fluent UI message components are used here as for default message renderer,
     // timestamp and author name should be shown but they aren't shown for custom renderer.
     // More investigations are needed to check if this can be simplified with states.
-    // Status and avatar should be shown for both custom and default renderers.
-    if (message.mine === true) {
-        return (React.createElement("div", null,
-            React.createElement(reactChat.ChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props)))));
-    }
-    else {
-        return (React.createElement("div", null,
-            React.createElement(reactChat.ChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props)))));
-    }
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const systemMessageIconStyle = react.mergeStyles({
-    marginInlineEnd: '0.688rem'
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const SystemMessage = (props) => {
-    const { iconName, content } = props;
-    const Icon = React.createElement(react.FontIcon, { iconName: iconName, className: react.mergeStyles(systemMessageIconStyle) });
-    return (React.createElement(react.Stack, { horizontal: true, className: react.mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), tabIndex: 0 },
-        Icon,
-        React.createElement(react.Text, { style: { wordBreak: 'break-word' }, role: "status", title: content, variant: 'small' }, content)));
+    // Avatar should be shown for both custom and default renderers.
+    return (React.createElement(reactChat.ChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props))));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const DefaultSystemMessage = (props) => {
-    var _a;
-    const message = props.message;
-    switch (message.messageType) {
-        case 'system':
-            switch (message.systemMessageType) {
-                case 'content':
-                    return (React.createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
-                case 'participantAdded':
-                case 'participantRemoved':
-                    return (React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
-            }
-    }
-    return React.createElement(React.Fragment, null);
-};
-const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
-    const { strings } = useLocale$1();
-    const participantsStr = generateParticipantsStr(message.participants, defaultName);
-    const messageSuffix = message.systemMessageType === 'participantAdded'
-        ? strings.messageThread.participantJoined
-        : strings.messageThread.participantLeft;
-    if (participantsStr !== '') {
-        return (React.createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
-    }
-    return React.createElement(React.Fragment, null);
-};
-const generateParticipantsStr = (participants, defaultName) => participants
-    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
-    .join(', ');
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -12178,7 +12409,7 @@ const ChatMessageComponentWrapper = (props) => {
             : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
         const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
         const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
-        return (React.createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle })));
+        return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
     }
     switch (message.messageType) {
         case 'chat': {
@@ -12187,7 +12418,7 @@ const ChatMessageComponentWrapper = (props) => {
                 : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
             const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
             const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-            return (React.createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle })));
+            return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
         }
         case 'system': {
             const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
@@ -12201,6 +12432,14 @@ const ChatMessageComponentWrapper = (props) => {
         }
     }
 };
+const fluentChatComponent = (props) => {
+    if (props.message.mine === true) {
+        return React.createElement(FluentChatMyMessageComponent, Object.assign({}, props));
+    }
+    else {
+        return React.createElement(FluentChatMessageComponent, Object.assign({}, props));
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -12970,8 +13209,6 @@ const participantStateStringTrampoline$1 = (props, strings) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
-/* @conditional-compile-remove(raise-hand) */
 /**
  * Raised hand icon for ParticipantList and VideoTitle.
  *
@@ -13240,16 +13477,12 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     };
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
-    /* @conditional-compile-remove(raise-hand) */
     const callingPalette = theme.callingPalette;
-    const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) ||
-        (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) ||
-        (
-        /* @conditional-compile-remove(raise-hand) */ callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand)
+    const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand)
         ? () => {
             var _a;
             return (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
-                /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
+                callingParticipant.raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
                         alignItems: 'center',
                         padding: '0.1rem 0.2rem',
                         backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
@@ -13264,7 +13497,6 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
                 /* @conditional-compile-remove(spotlight) */ callingParticipant.spotlight && (React.createElement(react.Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles$2 }))));
         }
         : () => null;
-    /* @conditional-compile-remove(raise-hand) */
     const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) && onRenderAvatar
         ? (userId, options, defaultOnRender) => onRenderAvatar(userId, Object.assign(Object.assign({}, options), { styles: { root: { border: callingPalette.raiseHandGold } } }), defaultOnRender)
         : onRenderAvatar;
@@ -13277,11 +13509,9 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
  * Sort participants by raised hand order position
  */
 const sortParticipants = (participants) => {
-    /* @conditional-compile-remove(raise-hand) */
     const isParticipantListCallParticipant = function (participant) {
         return 'raisedHand' in participant;
     };
-    /* @conditional-compile-remove(raise-hand) */
     participants.sort((a, b) => {
         if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {
             return 0;
@@ -13327,7 +13557,6 @@ const ParticipantList$k = (props) => {
     totalParticipantCount, 
     /* @conditional-compile-remove(total-participant-count) */
     strings, participantAriaLabelledBy } = props;
-    /* @conditional-compile-remove(raise-hand) */
     const theme = useTheme();
     const ids = useIdentifiers();
     const participantItemStrings = useLocale$1().strings.participantItem;
@@ -13362,7 +13591,6 @@ const ParticipantList$k = (props) => {
         onFetchParticipantMenuItems,
         onRemoveParticipant,
         (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles,
-        /* @conditional-compile-remove(raise-hand) */
         participantItemStrings.removeButtonLabel
     ]);
     const participantItemStyles = React.useMemo(() => { var _a; return react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
@@ -13371,9 +13599,7 @@ const ParticipantList$k = (props) => {
     return (React.createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.root), role: 'menu' },
         displayedParticipants.map((participant) => onRenderParticipant
             ? onRenderParticipant(participant)
-            : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, 
-            /* @conditional-compile-remove(raise-hand) */
-            theme)),
+            : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme)),
         /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&
             totalParticipantCount &&
             totalParticipantCount > displayedParticipants.length && (React.createElement(react.Text, { style: { fontWeight: 400, margin: '0.5rem' } }, _formatString(overflowParticipantCountString, {
@@ -14370,7 +14596,7 @@ function useLongPress(props) {
  * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
  */
 const smartDominantSpeakerParticipants = (args) => {
-    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
+    const { participants, dominantSpeakers = [], currentParticipants = [], maxDominantSpeakers } = args;
     // Don't apply any logic if total number of video streams is less than max dominant speakers.
     if (participants.length <= maxDominantSpeakers) {
         return participants;
@@ -14378,7 +14604,7 @@ const smartDominantSpeakerParticipants = (args) => {
     const participantsMap = participantsById(participants);
     // Only use the Max allowed dominant speakers that exist in participants
     const dominantSpeakerIds = dominantSpeakers.filter((id) => !!participantsMap[id]).slice(0, maxDominantSpeakers);
-    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
+    const newVisibleParticipantIds = currentParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
     const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
     // Remove participants that are no longer dominant and replace them with new dominant speakers.
     for (let index = 0; index < maxDominantSpeakers; index++) {
@@ -14414,99 +14640,61 @@ const participantsById = (participants) => {
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const DEFAULT_MAX_VIDEO_SREAMS = 4;
 const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
-const _useOrganizedParticipants = (props) => {
-    const visibleGridParticipants = React.useRef([]);
-    const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], layout } = props;
-    const calculateMaxRemoteVideoStreams = () => {
-        if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
-            return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
-        }
-        else {
-            return maxRemoteVideoStreams;
-        }
-    };
-    const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
+const getOrganizedParticipants = (props) => {
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, layout, previousGridParticipants = [], previousOverflowParticipants = [] } = props;
+    const maxRemoteVideoStreamsToUse = maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY
+        ? MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY
+        : maxRemoteVideoStreams;
+    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
-    const participantsToSortTrampoline = () => {
-        return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
-    };
-    visibleGridParticipants.current =
-        pinnedParticipantUserIds.length > 0 || isScreenShareActive
-            ? []
-            : smartDominantSpeakerParticipants({
-                participants: participantsToSortTrampoline(),
-                dominantSpeakers,
-                lastVisibleParticipants: visibleGridParticipants.current,
-                maxDominantSpeakers: maxRemoteVideoStreamsToUse
-            }).slice(0, maxRemoteVideoStreamsToUse);
+    const participants = layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;
+    let newGridParticipants = smartDominantSpeakerParticipants({
+        participants: participants,
+        dominantSpeakers,
+        currentParticipants: previousGridParticipants,
+        maxDominantSpeakers: maxRemoteVideoStreamsToUse
+    }).slice(0, maxRemoteVideoStreamsToUse);
     const dominantSpeakerToGrid = layout === 'speaker'
         ? dominantSpeakers && dominantSpeakers[0]
-            ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])
-            : [visibleGridParticipants.current[0]]
+            ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])
+            : [newGridParticipants[0]]
         : [];
     if (dominantSpeakerToGrid[0]) {
-        visibleGridParticipants.current = dominantSpeakerToGrid;
+        newGridParticipants = dominantSpeakerToGrid;
     }
-    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));
-    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
+    const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' ));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
-    visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter((p) => !visibleGridParticipantsSet.has(p.userId) &&
+    const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({
+        participants: remoteParticipantsOrdered.filter((p) => !gridParticipantSet.has(p.userId) &&
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
-        lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
+        currentParticipants: previousOverflowParticipants,
         maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
     });
-    const getGridParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            return [];
-        }
-        // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
-        // we will use the max streams provided to the function to find the max participants that can go in the grid
-        // if there are less participants than max streams then we will use all participants including joining in the grid
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleGridParticipants.current.length > 0
-            ? visibleGridParticipants.current
-            : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
-                ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)
-                : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+    const gridParticipants = getGridParticipants({
         isScreenShareActive,
-        maxRemoteVideoStreamsToUse
-    ]);
-    const gridParticipants = getGridParticipants();
-    const getOverflowGalleryRemoteParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            // If screen sharing is active, assign video and audio participants as overflow gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
-        }
-        else {
-            // If screen sharing is not active, then assign all video tiles as grid tiles.
-            // If there are no video tiles, then assign audio tiles as grid tiles.
-            // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
-            // overflow should be empty if total participants including calling participants is less than max streams
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.length > 0
-                ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)
-                : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
-                    ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)
-                    : [];
-        }
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        gridParticipants: newGridParticipants,
+        overflowGalleryParticipants: newOverflowGalleryParticipants,
+        maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+    });
+    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({
         isScreenShareActive,
-        maxRemoteVideoStreamsToUse
-    ]);
-    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
-    return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
+        gridParticipants: newGridParticipants,
+        overflowGalleryParticipants: newOverflowGalleryParticipants,
+        maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+    });
+    return { gridParticipants, overflowGalleryParticipants };
 };
-const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
+/**
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
+ * @private
+ */
+const useOrganizedParticipants = (props) => {
     var _a, _b;
     // map remote participants by userId
     const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
@@ -14514,35 +14702,62 @@ const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
         return map;
     }, {});
     const spotlightedParticipantUserIds = (_a = props.spotlightedParticipantUserIds) !== null && _a !== void 0 ? _a : [];
-    // declare focused participant user ids as spotlighted participants user ids followed by
-    // pinned participants user ids
-    const focusedParticipantUserIds = [
-        ...new Set(spotlightedParticipantUserIds.concat((_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : []))
-    ];
+    const pinnedParticipantUserIds = (_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : [];
+    // declare set of focused participant user ids as spotlighted participants user ids followed by
+    // pinned participants user ids which is deduplicated while maintaining order
+    const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p]));
     // get focused participants from map of remote participants in the order of the user ids
-    const focusedParticipants = [];
-    focusedParticipantUserIds.forEach((id) => {
-        const pinnedParticipant = remoteParticipantMap[id];
-        if (pinnedParticipant) {
-            focusedParticipants.push(pinnedParticipant);
-        }
-    });
-    // get unfocused participants by filtering out set of focused participant user ids from all remote participants
-    const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);
+    const focusedParticipants = [...focusedParticipantUserIdSet].map((p) => remoteParticipantMap[p]);
+    const currentGridParticipants = React.useRef([]);
+    const currentOverflowGalleryParticipants = React.useRef([]);
     const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
     const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
-        // if there are pinned participants then we should only consider unpinned participants
-        remoteParticipants: unfocusedParticipants });
-    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
-    if (focusedParticipants.length === 0) {
-        return useOrganizedParticipantsResult;
+        // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0
+        maxRemoteVideoStreams: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxRemoteVideoStreams, remoteParticipants: unfocusedParticipants, previousGridParticipants: currentGridParticipants.current, previousOverflowParticipants: currentOverflowGalleryParticipants.current });
+    const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);
+    currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;
+    currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;
+    return focusedParticipants.length > 0
+        ? {
+            gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
+            overflowGalleryParticipants: props.isScreenShareActive
+                ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+                : useOrganizedParticipantsResult.overflowGalleryParticipants
+        }
+        : useOrganizedParticipantsResult;
+};
+const getGridParticipants = (args) => {
+    if (args.isScreenShareActive) {
+        return [];
+    }
+    // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
+    // we will use the max streams provided to the function to find the max participants that can go in the grid
+    // if there are less participants than max streams then we will use all participants including joining in the grid
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    return args.gridParticipants.length > 0
+        ? args.gridParticipants
+        : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams
+            ? args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams)
+            : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams).concat(args.callingParticipants);
+};
+const getOverflowGalleryRemoteParticipants = (args) => {
+    if (args.isScreenShareActive) {
+        // If screen sharing is active, assign video and audio participants as overflow gallery participants
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));
+    }
+    else {
+        // If screen sharing is not active, then assign all video tiles as grid tiles.
+        // If there are no video tiles, then assign audio tiles as grid tiles.
+        // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
+        // overflow should be empty if total participants including calling participants is less than max streams
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return args.gridParticipants.length > 0
+            ? args.overflowGalleryParticipants.concat(args.callingParticipants)
+            : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams
+                ? args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams).concat(args.callingParticipants)
+                : [];
     }
-    return {
-        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
-        overflowGalleryParticipants: props.isScreenShareActive
-            ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-    };
 };
 const putVideoParticipantsFirst = (remoteParticipants) => {
     const videoParticipants = [];
@@ -14559,13 +14774,6 @@ const putVideoParticipantsFirst = (remoteParticipants) => {
     const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
     return remoteParticipantSortedByVideo;
 };
-/**
- * Hook to determine which participants should be in grid and overflow gallery and their order respectively
- * @private
- */
-const useOrganizedParticipants = (args) => {
-    return _useOrganizedParticipantsWithFocusedParticipants(args);
-};
 /* @conditional-compile-remove(reaction) */
 /**
  * @private
@@ -14623,9 +14831,7 @@ const VideoTileMoreOptionsButton = (props) => {
 const VideoTile = (props) => {
     const { children, displayName, initialsName, isMirrored, isMuted, 
     /* @conditional-compile-remove(spotlight) */
-    isSpotlighted, isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
-    /* @conditional-compile-remove(raise-hand) */
-    raisedHand, 
+    isSpotlighted, isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, raisedHand, 
     /* @conditional-compile-remove(reaction) */
     reaction, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, contextualMenu, 
     /* @conditional-compile-remove(reaction) */
@@ -14689,9 +14895,7 @@ const VideoTile = (props) => {
     const participantStateString = participantStateStringTrampoline(props, locale);
     const canShowContextMenuButton = isHovered || isFocused;
     let raisedHandBackgroundColor = '';
-    /* @conditional-compile-remove(raise-hand) */
     const callingPalette = theme.callingPalette;
-    /* @conditional-compile-remove(raise-hand) */
     raisedHandBackgroundColor = callingPalette.raiseHandGold;
     /* @conditional-compile-remove(reaction) */
     const backgroundImageUrl = reaction !== undefined && reactionResources !== undefined
@@ -14726,7 +14930,7 @@ const VideoTile = (props) => {
     return (React.createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
             borderRadius: theme.effects.roundedCorner4
-        }, (isSpeaking || /* @conditional-compile-remove(raise-hand) */ raisedHand) && {
+        }, (isSpeaking || raisedHand) && {
             '&::after': {
                 content: `''`,
                 position: 'absolute',
@@ -14767,7 +14971,7 @@ const VideoTile = (props) => {
                         React.createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) }))),
                     React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, canShowContextMenuButton: canShowContextMenuButton })))),
             children && (React.createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)),
-            /* @conditional-compile-remove(raise-hand) */ raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
+            raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
                 React.createElement(react.Stack.Item, null,
                     React.createElement(react.Text, null, raisedHand.raisedHandOrderPosition)),
                 React.createElement(react.Stack.Item, null,
@@ -14889,9 +15093,7 @@ const _RemoteVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
     return (React.createElement(react.Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
-            /* @conditional-compile-remove(raise-hand) */
-            raisedHand: remoteParticipant.raisedHand, 
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, 
             /* @conditional-compile-remove(reaction) */
             reaction: remoteParticipant.reaction, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
             /* @conditional-compile-remove(one-to-n-calling) */
@@ -15146,9 +15348,7 @@ const LocalVideoCameraCycleButton = (props) => {
  * @internal
  */
 const _LocalVideoTile = React.memo((props) => {
-    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, 
-    /* @conditional-compile-remove(raise-hand) */
-    raisedHand, 
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, 
     /* @conditional-compile-remove(reaction) */
     reaction, 
     /* @conditional-compile-remove(spotlight) */
@@ -15253,9 +15453,7 @@ const _LocalVideoTile = React.memo((props) => {
     ]);
     return (React.createElement(react.Stack, { className: react.mergeStyles({ width: '100%', height: '100%' }), 
         /* @conditional-compile-remove(spotlight) */ onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
-        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, 
-            /* @conditional-compile-remove(raise-hand) */
-            raisedHand: raisedHand, 
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, 
             /* @conditional-compile-remove(reaction) */
             reaction: reaction, 
             /* @conditional-compile-remove(spotlight) */
@@ -17447,9 +17645,7 @@ const VideoGallery = (props) => {
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
         };
         return (React.createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
-            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
-                /* @conditional-compile-remove(raise-hand) */
-                raisedHand: localParticipant.raisedHand, 
+            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, 
                 /* @conditional-compile-remove(reaction) */
                 reaction: localParticipant.reaction, 
                 /* @conditional-compile-remove(spotlight) */
@@ -18804,8 +19000,6 @@ const screenshareButtonStyles = (theme) => ({
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
-/* @conditional-compile-remove(raise-hand) */
 /**
  * A button to start / stop screen sharing.
  *
@@ -18823,7 +19017,6 @@ const RaiseHandButton = (props) => {
     const onRenderLowerHandIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonLowerHand" }));
     return (React.createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', disabled: props.disabled })));
 };
-/* @conditional-compile-remove(raise-hand) */
 const raiseHandButtonStyles = (theme) => ({
     rootChecked: {
         background: theme.palette.themePrimary,
@@ -21120,47 +21313,41 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeN
             displayName = maskDisplayNameWithRole(displayName, localUserRole, participant.role, isHideAttendeeNamesEnabled);
             /* @conditional-compile-remove(reaction) */
             const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);
-            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, displayName, 
-            /* @conditional-compile-remove(raise-hand) */
-            participant.raisedHand, 
+            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, displayName, participant.raisedHand, 
+            /* @conditional-compile-remove(ppt-live) */
+            participant.contentSharingStream, 
             /* @conditional-compile-remove(reaction) */
             remoteParticipantReaction, 
             /* @conditional-compile-remove(spotlight) */
-            participant.spotlight, 
-            /* @conditional-compile-remove(ppt-live) */
-            participant.contentSharingStream);
+            participant.spotlight);
         }));
     });
 };
-const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, // temp unknown type to build stable
+const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, // temp unknown type to build stable
+/* @conditional-compile-remove(ppt-live) */
+contentSharingStream, 
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
-spotlight, // temp unknown type to build stable
-/* @conditional-compile-remove(ppt-live) */
-contentSharingStream) => {
-    return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, 
-    /* @conditional-compile-remove(raise-hand) */
-    raisedHand, 
+spotlight // temp unknown type to build stable
+) => {
+    return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, 
+    /* @conditional-compile-remove(ppt-live) */
+    contentSharingStream, 
     /* @conditional-compile-remove(reaction) */
     reaction, 
     /* @conditional-compile-remove(spotlight) */
-    spotlight, 
-    /* @conditional-compile-remove(ppt-live) */
-    contentSharingStream);
+    spotlight);
 });
 /** @private */
-const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, // temp unknown type to build stable
+const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, // temp unknown type to build stable
+/* @conditional-compile-remove(ppt-live) */
+contentSharingStream, 
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
-spotlight, // temp unknown type to build stable
-/* @conditional-compile-remove(ppt-live) */
-contentSharingStream) => {
+spotlight // temp unknown type to build stable
+) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
     let screenShareStream = undefined;
@@ -21189,7 +21376,6 @@ contentSharingStream) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
         state,
-        /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
         reaction: reaction,
@@ -21221,8 +21407,7 @@ const convertRemoteContentSharingStreamToVideoGalleryStream = (stream) => {
 };
 /** @private */
 const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
-/* @conditional-compile-remove(rooms) */ role, 
-/* @conditional-compile-remove(raise-hand) */ raisedHand, 
+/* @conditional-compile-remove(rooms) */ role, raisedHand, 
 /* @conditional-compile-remove(reaction) */ reaction, 
 /* @conditional-compile-remove(spotlight) */ localSpotlight, 
 /* @conditional-compile-remove(spotlight) */ capabilities) => {
@@ -21239,7 +21424,6 @@ const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, is
         },
         /* @conditional-compile-remove(rooms) */
         role,
-        /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
         reaction: reaction,
@@ -21286,11 +21470,9 @@ const videoGallerySelector = reselect.createSelector([
     getDisplayName$2,
     getIdentifier,
     getDominantSpeakers,
-    /* @conditional-compile-remove(optimal-video-count) */
     getOptimalVideoCount,
     /* @conditional-compile-remove(rooms) */
     getRole$1,
-    /* @conditional-compile-remove(raise-hand) */
     getLocalParticipantRaisedHand$1,
     /* @conditional-compile-remove(hide-attendee-name) */
     isHideAttendeeNamesEnabled,
@@ -21300,13 +21482,9 @@ const videoGallerySelector = reselect.createSelector([
     getSpotlightCallFeature,
     /* @conditional-compile-remove(spotlight) */
     getCapabilities
-], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
-/* @conditional-compile-remove(optimal-video-count) */
-optimalVideoCount, 
+], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, optimalVideoCount, 
 /* @conditional-compile-remove(rooms) */
-role, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, 
+role, raisedHand, 
 /* @conditional-compile-remove(hide-attendee-name) */
 isHideAttendeeNamesEnabled, 
 /* @conditional-compile-remove(reaction) */
@@ -21328,17 +21506,15 @@ capabilities) => {
     const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.spotlightedParticipants);
     return {
         screenShareParticipant: screenShareRemoteParticipant
-            ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, 
-            /* @conditional-compile-remove(raise-hand) */
-            screenShareRemoteParticipant.raisedHand, 
+            ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, screenShareRemoteParticipant.raisedHand, 
+            /* @conditional-compile-remove(ppt-live) */
+            screenShareRemoteParticipant.contentSharingStream, 
             /* @conditional-compile-remove(spotlight) */
             screenShareRemoteParticipant.spotlight)
             : undefined,
         localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
         /* @conditional-compile-remove(rooms) */
-        role, 
-        /* @conditional-compile-remove(raise-hand) */
-        raisedHand, 
+        role, raisedHand, 
         /* @conditional-compile-remove(reaction) */
         localParticipantReactionState, 
         /* @conditional-compile-remove(spotlight) */
@@ -21351,7 +21527,6 @@ capabilities) => {
         /* @conditional-compile-remove(hide-attendee-name) */
         role),
         dominantSpeakers: dominantSpeakerIds,
-        /* @conditional-compile-remove(optimal-video-count) */
         maxRemoteVideoStreams: optimalVideoCount,
         /* @conditional-compile-remove(spotlight) */
         spotlightedParticipants: spotlightedParticipantIds,
@@ -21395,9 +21570,7 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
             const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);
             /* @conditional-compile-remove(spotlight) */
             const spotlight = memoizedSpotlight(spotlightedParticipants, toFlatCommunicationIdentifier(participant.identifier));
-            return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking, 
-            /* @conditional-compile-remove(raise-hand) */
-            participant.raisedHand, localUserCanRemoveOthers, 
+            return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking, participant.raisedHand, localUserCanRemoveOthers, 
             /* @conditional-compile-remove(reaction) */
             remoteParticipantReaction, 
             /* @conditional-compile-remove(spotlight) */
@@ -21432,7 +21605,7 @@ const participantListSelector = reselect.createSelector([
     getRemoteParticipantsExcludingConsumers,
     getIsScreenSharingOn,
     getIsMuted,
-    /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand$1,
+    getLocalParticipantRaisedHand$1,
     getRole$1,
     getParticipantCount,
     /* @conditional-compile-remove(hide-attendee-name) */
@@ -21441,9 +21614,7 @@ const participantListSelector = reselect.createSelector([
     getLocalParticipantReactionState,
     /* @conditional-compile-remove(spotlight) */
     getSpotlightCallFeature
-], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, role, partitipantCount, 
+], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, raisedHand, role, partitipantCount, 
 /* @conditional-compile-remove(hide-attendee-name) */
 isHideAttendeeNamesEnabled, 
 /* @conditional-compile-remove(reaction) */
@@ -21467,7 +21638,6 @@ spotlightCallFeature) => {
         displayName: displayName,
         isScreenSharing: isScreenSharingOn,
         isMuted: isMuted,
-        /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         state: 'Connected',
         // Local participant can never remove themselves.
@@ -21782,10 +21952,6 @@ const getSelector$1 = (component) => {
     if (component === HoldButton) {
         return findConditionalCompiledSelector(component);
     }
-    /* @conditional-compile-remove(raise-hand) */
-    if (component === RaiseHandButton) {
-        return findConditionalCompiledSelector(component);
-    }
     /* @conditional-compile-remove(reaction) */
     if (component === ReactionButton) {
         return findConditionalCompiledSelector(component);
@@ -21817,20 +21983,18 @@ const findSelector$1 = (component) => {
             return emptySelector;
         case ErrorBar:
             return errorBarSelector$1;
+        case RaiseHandButton:
+            return raiseHandButtonSelector;
     }
     return undefined;
 };
-/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(raise-hand) */
+/* @conditional-compile-remove(PSTN-calls) */
 const findConditionalCompiledSelector = (component) => {
     switch (component) {
         /* @conditional-compile-remove(PSTN-calls) */
         case HoldButton:
             /* @conditional-compile-remove(PSTN-calls) */
             return holdButtonSelector;
-        /* @conditional-compile-remove(raise-hand) */
-        case RaiseHandButton:
-            /* @conditional-compile-remove(raise-hand) */
-            return raiseHandButtonSelector;
         /* @conditional-compile-remove(reaction) */
         case ReactionButton:
             /* @conditional-compile-remove(reaction) */
@@ -22908,8 +23072,8 @@ class ResourceDownloadQueue {
         });
     }
     downloadAllPreviewUrls(message, operation) {
-        var _a;
         return __awaiter$t(this, void 0, void 0, function* () {
+            var _a;
             const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
             if (message.type === 'html' && attachments) {
                 if (message.resourceCache === undefined) {
@@ -23067,8 +23231,8 @@ let ChatContext$1 = class ChatContext {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadResourceToCache(threadId, messageId, resourceUrl) {
-        var _a;
         return __awaiter$s(this, void 0, void 0, function* () {
+            var _a;
             let message = (_a = this.getState().threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
             if (message && this._fullsizeImageQueue) {
                 if (!message.resourceCache) {
@@ -24198,7 +24362,6 @@ const COMPOSITE_ONLY_ICONS = {
     FloatingLocalVideoGalleryLayout: React.createElement(reactIcons.BoardSplit20Regular, null),
     FocusedContentGalleryLayout: React.createElement(reactIcons.ContentView20Regular, null),
     LargeGalleryLayout: React.createElement(reactIcons.Table20Regular, null),
-    /* @conditional-compile-remove(control-bar-button-injection) */
     DefaultCustomButton: React.createElement(reactIcons.Circle20Regular, null),
     DtmfDialpadButton: React.createElement(reactIcons.Dialpad20Regular, null),
     /* @conditional-compile-remove(spotlight) */
@@ -24663,8 +24826,8 @@ class AzureCommunicationChatAdapter {
     offStateChange(handler) {
         this.context.offStateChange(handler);
     }
-    sendMessage(content, options = {}) {
-        return __awaiter$n(this, void 0, void 0, function* () {
+    sendMessage(content_1) {
+        return __awaiter$n(this, arguments, void 0, function* (content, options = {}) {
             yield this.asyncTeeErrorToEventEmitter(() => __awaiter$n(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
@@ -24893,7 +25056,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$n(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = (_a) => __awaiter$n(void 0, [_a], void 0, function* ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) {
     return _createAzureCommunicationChatAdapterInner(endpointUrl, userId, displayName, credential, threadId);
 });
 /**
@@ -24901,7 +25064,7 @@ const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, di
  *
  * @internal
  */
-const _createAzureCommunicationChatAdapterInner = (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') => __awaiter$n(void 0, void 0, void 0, function* () {
+const _createAzureCommunicationChatAdapterInner = (endpoint_1, userId_1, displayName_1, credential_1, threadId_1, ...args_1) => __awaiter$n(void 0, [endpoint_1, userId_1, displayName_1, credential_1, threadId_1, ...args_1], void 0, function* (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -25284,9 +25447,7 @@ const AvatarPersona = (props) => {
             }
         }))();
     }, [data, dataProvider, userId]);
-    /* @conditional-compile-remove(raise-hand) */
     let activePersona = '';
-    /* @conditional-compile-remove(raise-hand) */
     if (props.allowActiveBorder) {
         // Display a border for raised handed participants in participant list
         activePersona = react.mergeStyles({
@@ -25299,9 +25460,7 @@ const AvatarPersona = (props) => {
         });
         react.mergeStyles(activePersona, props.styles);
     }
-    return (React.createElement(react.Persona, Object.assign({}, props, { 
-        /* @conditional-compile-remove(raise-hand) */
-        className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
+    return (React.createElement(react.Persona, Object.assign({}, props, { className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
         // default disable tooltip unless specified
         showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false, 
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -25615,9 +25774,7 @@ const ParticipantListWithHeading = (props) => {
         /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount)),
         React.createElement(react.FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
             React.createElement(ParticipantList$k, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React.createElement(React.Fragment, null,
-                    React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text), dataProvider: onFetchAvatarPersonaData, 
-                        /* @conditional-compile-remove(raise-hand) */
-                        allowActiveBorder: true })),
+                    React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text), dataProvider: onFetchAvatarPersonaData, allowActiveBorder: true })),
                     (options === null || options === void 0 ? void 0 : options.text) && (React.createElement(react.Text, { nowrap: true, styles: displayNameStyles$1 }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId })))));
 };
 const paneTitleTrampoline = (paneTitle, totalParticipantCount) => {
@@ -25695,7 +25852,7 @@ const useSelector$2 = (selector, selectorProps) => {
 // 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-UUKnVH43.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-Bw9vaT1f.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  */
@@ -26668,15 +26825,12 @@ const createCompositeHandlers = memoizeOne((adapter) => {
                 yield adapter.removeParticipant(_toCommunicationIdentifier(userId));
             }
         }),
-        /* @conditional-compile-remove(raise-hand) */
         onRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
             yield adapter.raiseHand();
         }),
-        /* @conditional-compile-remove(raise-hand) */
         onLowerHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
             yield adapter.lowerHand();
         }),
-        /* @conditional-compile-remove(raise-hand) */
         onToggleRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
             var _b;
             ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.raiseHand.localParticipantRaisedHand)
@@ -27236,7 +27390,6 @@ const getDeviceManager = (state) => state.devices;
  * @private
  */
 const getIsScreenShareOn = (state) => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn) !== null && _b !== void 0 ? _b : false; };
-/* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -27523,7 +27676,6 @@ const callArrangementContainerStyles = (verticalControlBar) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
 /** @private */
 const RaiseHand = (props) => {
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
@@ -27535,7 +27687,6 @@ const RaiseHand = (props) => {
     }
     return (React.createElement(RaiseHandButton, Object.assign({ "data-ui-id": "call-composite-raisehand-button" }, raiseHandButtonProps, { showLabel: props.displayType !== 'compact', disabled: raiseHandButtonDisabled || props.disabled, styles: styles })));
 };
-/* @conditional-compile-remove(raise-hand) */
 const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
@@ -27683,7 +27834,6 @@ const CallControls = (props) => {
     const options = React.useMemo(() => inferCallControlOptions(!!props.isMobile, props.options), [props.isMobile, props.options]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(rooms) */
     const adapter = useAdapter();
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const peopleButtonStrings = React.useMemo(() => ({
@@ -27691,14 +27841,12 @@ const CallControls = (props) => {
         tooltipOffContent: localeStrings.strings.call.peopleButtonTooltipOpen,
         tooltipOnContent: localeStrings.strings.call.peopleButtonTooltipClose
     }), [localeStrings]);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const moreButtonStrings = React.useMemo(() => ({
         label: localeStrings.strings.call.moreButtonCallingLabel,
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
-    /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     /* @conditional-compile-remove(reaction) */
     const capabilitiesSelector = useSelector$1(capabilitySelector);
@@ -27788,15 +27936,12 @@ const CallControls = (props) => {
     }
     /* @conditional-compile-remove(reaction) */
     const reactionResources = adapter.getState().reactions;
-    /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.raiseHandButton);
-    /* @conditional-compile-remove(raise-hand) */
     let showRaiseHandButtonInControlBar = raiseHandButtonIsEnabled;
     /* @conditional-compile-remove(rooms) */
     const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     /* @conditional-compile-remove(rooms) */
     const hideRaiseHandButtonInRoomsCall = adapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
-    /* @conditional-compile-remove(raise-hand) */
     if (showRaiseHandButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
         numberOfButtons++;
     }
@@ -27818,7 +27963,6 @@ const CallControls = (props) => {
             ['data-ui-id']: 'call-composite-more-menu-devices-button'
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     if (!showRaiseHandButtonInControlBar && /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall) {
         moreButtonMenuItems.push({
             key: 'raiseHandButtonKey',
@@ -27876,7 +28020,7 @@ const CallControls = (props) => {
                 cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.cameraButton) })),
                 /* @conditional-compile-remove(reaction) */
                 showReactionButtonInControlBar && reactionResources && (React.createElement(Reaction, { displayType: options === null || options === void 0 ? void 0 : options.displayType, reactionResource: reactionResources })),
-                /* @conditional-compile-remove(raise-hand) */ showRaiseHandButtonInControlBar &&
+                showRaiseHandButtonInControlBar &&
                     /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options === null || options === void 0 ? void 0 : options.displayType })),
                 screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
                 showParticipantsButtonInControlBar && (React.createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
@@ -27890,7 +28034,6 @@ const CallControls = (props) => {
                         // styles={commonButtonStyles}
                         showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', disableTooltip: props.isMobile }));
                 }),
-                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
                 showMoreButton && (React.createElement(MoreButton, { disableTooltip: props.isMobile, "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonMenuItems }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React.createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
@@ -28395,15 +28538,12 @@ const DesktopMoreButton = (props) => {
         (_h = (_g = galleryOptions.subMenuProps) === null || _g === void 0 ? void 0 : _g.items) === null || _h === void 0 ? void 0 : _h.push(overflowGalleryOption);
         moreButtonContextualMenuItems.push(galleryOptions);
     }
-    /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = React.useMemo(() => generateCustomCallDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).forEach((element) => {
         moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['secondary']
         .slice(CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)
         .forEach((element) => {
@@ -28411,7 +28551,6 @@ const DesktopMoreButton = (props) => {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['overflow'].forEach((element) => {
         moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -28656,7 +28795,7 @@ const CommonCallControlBar = (props) => {
                                         isReactionAllowed &&
                                         isEnabled$1(options.reactionButton) &&
                                         reactionResources && (React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen, reactionResource: reactionResources })),
-                                    /* @conditional-compile-remove(raise-hand) */ !props.mobileView &&
+                                    !props.mobileView &&
                                         isEnabled$1(options.raiseHandButton) &&
                                         /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -28679,9 +28818,7 @@ const CommonCallControlBar = (props) => {
                                     props.mobileView && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView })),
                                     !props.mobileView && showDesktopMoreButton && (React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, 
                                         /*@conditional-compile-remove(PSTN-calls) */
-                                        onClickShowDialpad: props.onClickShowDialpad, 
-                                        /* @conditional-compile-remove(control-bar-button-injection) */
-                                        callControls: props.callControls, 
+                                        onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, 
                                         /* @conditional-compile-remove(close-captions) */
                                         isCaptionsSupported: props.isCaptionsSupported, 
                                         /* @conditional-compile-remove(close-captions) */
@@ -28999,14 +29136,12 @@ const MoreDrawer = (props) => {
     const callAdapter = useAdapter();
     const drawerMenuItems = [];
     const { speakers, onSelectSpeaker, onLightDismiss } = props;
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
     const callees = useSelector$1(getTargetCallees);
     const allowDtmfDialer = showDtmfDialer(callees);
     const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_a = props.dtmfDialerPresent) !== null && _a !== void 0 ? _a : false);
-    /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     const onSpeakerItemClick = React.useCallback((_ev, itemKey) => {
         const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find((speaker) => speaker.id === itemKey);
@@ -29184,7 +29319,6 @@ const MoreDrawer = (props) => {
     const role = (_e = callAdapter.getState().call) === null || _e === void 0 ? void 0 : _e.role;
     /*@conditional-compile-remove(rooms) */
     const hideRaiseHandButtonInRoomsCall = callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
-    /* @conditional-compile-remove(raise-hand) */
     if (drawerSelectionOptions !== false &&
         isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.raiseHandButton) &&
         /*@conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall) {
@@ -29308,17 +29442,13 @@ const MoreDrawer = (props) => {
             });
         }
     }
-    /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = React.useMemo(() => generateCustomCallDrawerButtons(onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined), drawerSelectionOptions !== false ? drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.displayType : undefined), [drawerSelectionOptions]);
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS).forEach((element) => {
         drawerMenuItems.push(element);
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['secondary'].forEach((element) => {
         drawerMenuItems.push(element);
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['overflow'].forEach((element) => {
         drawerMenuItems.push(element);
     });
@@ -30573,7 +30703,6 @@ const LocalAndRemotePIP = (props) => {
             showCameraSwitcherInLocalPreview: false,
             isAvailable: (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
             renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
-            /* @conditional-compile-remove(raise-hand) */
             raisedHand: localParticipant.raisedHand
         });
     }, [
@@ -30582,7 +30711,6 @@ const LocalAndRemotePIP = (props) => {
         (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
         onCreateLocalStreamView,
         onDisposeLocalStreamView,
-        /* @conditional-compile-remove(raise-hand) */
         localParticipant.raisedHand
     ]);
     const remoteVideoTileProps = React.useMemo(() => {
@@ -30672,18 +30800,11 @@ const updateUserDisplayNamesTrampoline = (remoteParticipants) => {
  * Picture in picture in picture needs to display the most-dominant remote speaker, as well as the local participant video.
  * @private
  */
-const localAndRemotePIPSelector = reselect__namespace.createSelector([
-    getDisplayName,
-    dominantRemoteParticipantSelector,
-    localVideoSelector,
-    /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand
-], (displayName, dominantRemoteParticipant, localVideoStreamInfo, 
-/* @conditional-compile-remove(raise-hand) */ raisedHand) => {
+const localAndRemotePIPSelector = reselect__namespace.createSelector([getDisplayName, dominantRemoteParticipantSelector, localVideoSelector, getLocalParticipantRaisedHand], (displayName, dominantRemoteParticipant, localVideoStreamInfo, raisedHand) => {
     return {
         localParticipant: {
             displayName,
             videoStream: localVideoStreamInfo,
-            /* @conditional-compile-remove(raise-hand) */
             raisedHand: raisedHand
         },
         dominantRemoteParticipant
@@ -34964,7 +35085,6 @@ class AzureCommunicationCallAdapter {
         this.startCall.bind(this);
         this.startScreenShare.bind(this);
         this.stopScreenShare.bind(this);
-        /* @conditional-compile-remove(raise-hand) */
         this.raiseHand.bind(this);
         /* @conditional-compile-remove(reaction) */
         this.onReactionClick.bind(this);
@@ -35277,7 +35397,6 @@ class AzureCommunicationCallAdapter {
             }));
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     raiseHand() {
         return __awaiter$5(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
@@ -35285,7 +35404,6 @@ class AzureCommunicationCallAdapter {
             }));
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     lowerHand() {
         return __awaiter$5(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
@@ -35405,8 +35523,8 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(PSTN-calls) */
     holdCall() {
-        var _a, _b;
         return __awaiter$5(this, void 0, void 0, function* () {
+            var _a, _b;
             if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) !== 'LocalHold') {
                 if ((_b = this.call) === null || _b === void 0 ? void 0 : _b.isLocalVideoStarted) {
                     this.stopCamera().then(() => {
@@ -35421,8 +35539,8 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(PSTN-calls) */
     resumeCall() {
-        var _a;
         return __awaiter$5(this, void 0, void 0, function* () {
+            var _a;
             if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold') {
                 this.handlers.onToggleHold().then(() => {
                     var _a;
@@ -35749,9 +35867,9 @@ function createAzureCommunicationCallAdapter(args) {
  *
  * @internal
  */
-const _createAzureCommunicationCallAdapterInner = ({ userId, displayName, credential, locator, targetCallees, 
+const _createAzureCommunicationCallAdapterInner = (_a) => __awaiter$5(void 0, [_a], void 0, function* ({ userId, displayName, credential, locator, targetCallees, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
-/* @conditional-compile-remove(video-background-effects) */ options, telemetryImplementationHint = 'Call' }) => __awaiter$5(void 0, void 0, void 0, function* () {
+/* @conditional-compile-remove(video-background-effects) */ options, telemetryImplementationHint = 'Call' }) {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Invalid identifier. Please provide valid identifier object.');
     }
@@ -35778,7 +35896,7 @@ const _createAzureCommunicationCallAdapterInner = ({ userId, displayName, creden
 /**
  * @beta
  */
-const createTeamsCallAdapter = ({ userId, credential, locator, options }) => __awaiter$5(void 0, void 0, void 0, function* () {
+const createTeamsCallAdapter = (_b) => __awaiter$5(void 0, [_b], void 0, function* ({ userId, credential, locator, options }) {
     if (communicationCommon.isCommunicationUserIdentifier(userId)) {
         throw new Error('Communication User identifier is not supported by TeamsCallAdapter, please use our AzureCommunicationCallAdapter.');
     }
@@ -36164,9 +36282,7 @@ class CallWithChatBackedCallAdapter {
         this.unmute = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.unmute(); });
         this.startScreenShare = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.startScreenShare(); });
         this.stopScreenShare = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.stopScreenShare(); });
-        /* @conditional-compile-remove(raise-hand) */
         this.raiseHand = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.raiseHand(); });
-        /* @conditional-compile-remove(raise-hand) */
         this.lowerHand = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.lowerHand(); });
         /* @conditional-compile-remove(reaction) */
         this.onReactionClick = (reaction) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.onReactionClick(reaction); });
@@ -36690,7 +36806,6 @@ const CallWithChatScreen = (props) => {
     const callControlOptionsFromProps = React.useMemo(() => (Object.assign({}, (typeof props.callControls === 'object' ? props.callControls : {}))), [props.callControls]);
     const injectedCustomButtonsFromProps = React.useMemo(() => {
         var _a;
-        /* @conditional-compile-remove(control-bar-button-injection) */
         return [...((_a = callControlOptionsFromProps.onFetchCustomButtonProps) !== null && _a !== void 0 ? _a : [])];
     }, [callControlOptionsFromProps]);
     const callCompositeOptions = React.useMemo(() => ({
@@ -36698,7 +36813,6 @@ const CallWithChatScreen = (props) => {
             ? false
             : Object.assign(Object.assign({}, callControlOptionsFromProps), { onFetchCustomButtonProps: [
                     ...(showChatButton ? [customChatButton] : []),
-                    /* @conditional-compile-remove(control-bar-button-injection) */
                     ...injectedCustomButtonsFromProps
                 ], legacyControlBarExperience: false }),
         /* @conditional-compile-remove(call-readiness) */
@@ -37037,9 +37151,7 @@ class AzureCommunicationCallWithChatAdapter {
         this.unmute.bind(this);
         this.startScreenShare.bind(this);
         this.stopScreenShare.bind(this);
-        /* @conditional-compile-remove(raise-hand) */
         this.raiseHand.bind(this);
-        /* @conditional-compile-remove(raise-hand) */
         this.lowerHand.bind(this);
         /* @conditional-compile-remove(reaction) */
         this.onReactionClick.bind(this);
@@ -37234,14 +37346,12 @@ class AzureCommunicationCallWithChatAdapter {
             yield this.callAdapter.stopScreenShare();
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     /** Raise hand for local user. */
     raiseHand() {
         return __awaiter$2(this, void 0, void 0, function* () {
             yield this.callAdapter.raiseHand();
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     /** Lower hand for local user. */
     lowerHand() {
         return __awaiter$2(this, void 0, void 0, function* () {
@@ -37604,9 +37714,9 @@ class AzureCommunicationCallWithChatAdapter {
  *
  * @public
  */
-const createAzureCommunicationCallWithChatAdapter = ({ userId, displayName, credential, endpoint, locator, 
+const createAzureCommunicationCallWithChatAdapter = (_a) => __awaiter$2(void 0, [_a], void 0, function* ({ userId, displayName, credential, endpoint, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
-/* @conditional-compile-remove(video-background-effects) */ callAdapterOptions }) => __awaiter$2(void 0, void 0, void 0, function* () {
+/* @conditional-compile-remove(video-background-effects) */ callAdapterOptions }) {
     const callAdapterLocator = isTeamsMeetingLinkLocator(locator) ? locator : locator.callLocator;
     const createCallAdapterPromise = _createAzureCommunicationCallAdapterInner({
         userId,
@@ -37750,9 +37860,9 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationCallWithChatAdapterFromClients = ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, 
+const createAzureCommunicationCallWithChatAdapterFromClients = (_b) => __awaiter$2(void 0, [_b], void 0, function* ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, 
 /* @conditional-compile-remove(video-background-effects) */
-callAdapterOptions }) => __awaiter$2(void 0, void 0, void 0, function* () {
+callAdapterOptions }) {
     const createCallAdapterPromise = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, callLocator, 
     /* @conditional-compile-remove(video-background-effects) */
     callAdapterOptions);
@@ -38319,4 +38429,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-Db9LOYoW.js.map
+//# sourceMappingURL=index-DyaTe_Bz.js.map