@azure/communication-react 1.17.0-alpha-202405290014 → 1.17.0-alpha-202406010014

package/dist/dist-cjs/communication-react/{index-CYkd_Ir9.js → index-HwuTcEP-.js}

@@ -174,7 +174,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.17.0-alpha-202405290014';
+var telemetryVersion = '1.17.0-alpha-202406010014';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -1100,7 +1100,6 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield captionsFeature.setCaptionLanguage(language);
     });
-    /* @conditional-compile-remove(end-of-call-survey) */
     const onSubmitSurvey = (survey) => __awaiter$R(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.CallSurvey).submitSurvey(survey)); });
     /* @conditional-compile-remove(spotlight) */
     const onStartSpotlight = (userIds) => __awaiter$R(void 0, void 0, void 0, function* () {
@@ -1116,6 +1115,18 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
     const onStopAllSpotlight = () => __awaiter$R(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopAllSpotlight());
     });
+    /* @conditional-compile-remove(soft-mute) */
+    const onMuteParticipant = (userId) => __awaiter$R(void 0, void 0, void 0, function* () {
+        if (call === null || call === void 0 ? void 0 : call.remoteParticipants) {
+            call === null || call === void 0 ? void 0 : call.remoteParticipants.forEach((participant) => __awaiter$R(void 0, void 0, void 0, function* () {
+                // Using toFlatCommunicationIdentifier to convert the CommunicationIdentifier to string
+                // as _toCommunicationIdentifier(userId) comparison to participant.identifier did not work for this case
+                if (toFlatCommunicationIdentifier(participant.identifier) === userId) {
+                    yield participant.mute();
+                }
+            }));
+        }
+    });
     /* @conditional-compile-remove(spotlight) */
     const canStartSpotlight = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Capabilities).capabilities.spotlightParticipant.isPresent;
     /* @conditional-compile-remove(spotlight) */
@@ -1181,7 +1192,6 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         onStopCaptions,
         onSetCaptionLanguage,
         onSetSpokenLanguage,
-        /* @conditional-compile-remove(end-of-call-survey) */
         onSubmitSurvey,
         /* @conditional-compile-remove(spotlight) */
         onStartSpotlight,
@@ -1196,7 +1206,9 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         /* @conditional-compile-remove(spotlight) */
         onStartRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */
-        onStopRemoteSpotlight
+        onStopRemoteSpotlight,
+        /* @conditional-compile-remove(soft-mute) */
+        onMuteParticipant
     };
 });
 
@@ -1845,7 +1857,9 @@ function convertSdkCallToDeclarativeCall(call) {
         /* @conditional-compile-remove(hide-attendee-name) */
         hideAttendeeNames,
         /* @conditional-compile-remove(meeting-id) */
-        info: callInfo
+        info: callInfo,
+        /* @conditional-compile-remove(teams-meeting-conference) */
+        teamsMeetingConference: undefined
     };
 }
 /**
@@ -2029,6 +2043,8 @@ let CallContext$2 = class CallContext {
                 existingCall.captionsFeature.currentCaptionLanguage = call.captionsFeature.currentCaptionLanguage;
                 /* @conditional-compile-remove(meeting-id) */
                 existingCall.info = call.info;
+                /* @conditional-compile-remove(teams-meeting-conference) */
+                existingCall.teamsMeetingConference = call.teamsMeetingConference;
             }
             else {
                 draft.calls[latestCallId] = call;
@@ -2339,6 +2355,15 @@ let CallContext$2 = class CallContext {
             }
         });
     }
+    /* @conditional-compile-remove(teams-meeting-conference) */
+    setTeamsMeetingConference(callId, teamsMeetingConferenceDetails) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.teamsMeetingConference = teamsMeetingConferenceDetails;
+            }
+        });
+    }
     /* @conditional-compile-remove(spotlight) */
     setParticipantSpotlighted(callId, spotlightedParticipant) {
         this.modifyState((draft) => {
@@ -4171,6 +4196,8 @@ class CallSubscriber {
         this.subscribe = () => {
             this._call.on('stateChanged', this.stateChanged);
             this._call.on('stateChanged', this.initCaptionSubscriber);
+            /* @conditional-compile-remove(teams-meeting-conference) */
+            this._call.on('stateChanged', this.initTeamsMeetingConference);
             /* @conditional-compile-remove(local-recording-notification) */
             this._call.on('stateChanged', this.initLocalRecordingNotificationSubscriber);
             this._call.on('idChanged', this.idChanged);
@@ -4198,6 +4225,8 @@ class CallSubscriber {
             this._call.off('stateChanged', this.initCaptionSubscriber);
             /* @conditional-compile-remove(local-recording-notification) */
             this._call.off('stateChanged', this.initLocalRecordingNotificationSubscriber);
+            /* @conditional-compile-remove(teams-meeting-conference) */
+            this._call.off('stateChanged', this.initTeamsMeetingConference);
             this._call.off('idChanged', this.idChanged);
             this._call.off('isScreenSharingOnChanged', this.isScreenSharingOnChanged);
             this._call.off('remoteParticipantsUpdated', this.remoteParticipantsUpdated);
@@ -4241,6 +4270,18 @@ class CallSubscriber {
                 this._call.off('stateChanged', this.initCaptionSubscriber);
             }
         };
+        /* @conditional-compile-remove(teams-meeting-conference) */
+        this.initTeamsMeetingConference = () => {
+            if (this._call.state === 'Connected' && this._call.kind === 'TeamsCall') {
+                this._call
+                    .feature(communicationCalling.Features.TeamsMeetingAudioConferencing)
+                    .getTeamsMeetingAudioConferencingDetails()
+                    .then((teamsMeetingConferenceDetails) => {
+                    this._context.setTeamsMeetingConference(this._callIdRef.callId, teamsMeetingConferenceDetails);
+                });
+                this._call.off('stateChanged', this.initTeamsMeetingConference);
+            }
+        };
         /* @conditional-compile-remove(local-recording-notification) */
         this.initLocalRecordingNotificationSubscriber = () => {
             // Subscribe to LocalRecordingFeature as it is only available in interop scenarios
@@ -4768,9 +4809,15 @@ class ProxyTeamsCaptions {
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$J(this, void 0, void 0, function* () {
                     var _a, _b;
                     this._context.setStartCaptionsInProgress(this._call.id, true);
-                    const ret = yield target.startCaptions(...args);
-                    this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
-                    return ret;
+                    try {
+                        const ret = yield target.startCaptions(...args);
+                        this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
+                        return ret;
+                    }
+                    catch (e) {
+                        this._context.setStartCaptionsInProgress(this._call.id, false);
+                        throw e;
+                    }
                 }), 'Call.feature');
             case 'stopCaptions':
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$J(this, void 0, void 0, function* () {
@@ -4812,9 +4859,15 @@ class ProxyCaptions {
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$J(this, void 0, void 0, function* () {
                     var _a, _b;
                     this._context.setStartCaptionsInProgress(this._call.id, true);
-                    const ret = yield target.startCaptions(...args);
-                    this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
-                    return ret;
+                    try {
+                        const ret = yield target.startCaptions(...args);
+                        this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
+                        return ret;
+                    }
+                    catch (e) {
+                        this._context.setStartCaptionsInProgress(this._call.id, false);
+                        throw e;
+                    }
                 }), 'Call.feature');
             case 'stopCaptions':
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$J(this, void 0, void 0, function* () {
@@ -6873,9 +6926,7 @@ const DEFAULT_COMPONENT_ICONS = {
     ContextMenuMicIcon: React.createElement(reactIcons.Mic20Regular, null),
     ContextMenuSpeakerIcon: React.createElement(reactIcons.Speaker220Regular, null),
     ContextMenuRemoveParticipant: React.createElement(reactIcons.PersonDelete20Regular, null),
-    /* @conditional-compile-remove(end-of-call-survey) */
     SurveyStarIcon: React.createElement(reactIcons.Star28Regular, null),
-    /* @conditional-compile-remove(end-of-call-survey) */
     SurveyStarIconFilled: React.createElement(reactIcons.Star28Filled, null),
     /* @conditional-compile-remove(spotlight) */
     StartSpotlightContextualMenuItem: React.createElement(reactIcons.VideoPersonStar20Filled, null),
@@ -6910,7 +6961,9 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(rich-text-editor) */
     RichTextTableInsertMenuIcon: React.createElement(reactIcons.TableAdd20Regular, null),
     /* @conditional-compile-remove(rich-text-editor) */
-    RichTextTableDeleteMenuIcon: React.createElement(reactIcons.TableDismiss20Regular, null)
+    RichTextTableDeleteMenuIcon: React.createElement(reactIcons.TableDismiss20Regular, null),
+    /* @conditional-compile-remove(soft-mute) */
+    ContextualMenuMicMutedIcon: React.createElement(reactIcons.MicOff20Regular, null)
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9499,7 +9552,7 @@ const mapBorderRadiusTokens = (effects) => {
  */
 const createV9Theme = (themeV8, baseThemeV9) => {
     const baseTheme = baseThemeV9 !== null && baseThemeV9 !== void 0 ? baseThemeV9 : reactComponents.webLightTheme;
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseTheme), mapAliasColors(themeV8.palette, themeV8.isInverted)), mapShadowTokens(themeV8.effects)), mapBorderRadiusTokens(themeV8.effects)), { colorBrandBackground2: themeV8.palette.themeLight, colorBrandBackground2Hover: themeV8.palette.themeLight, colorBrandBackground2Pressed: themeV8.palette.themeLight, colorStatusWarningBackground3: '#D83B01', errorText: themeV8.semanticColors.errorText, colorNeutralStroke1Selected: themeV8.palette.neutralQuaternary, colorNeutralForeground2: themeV8.palette.neutralSecondary, colorBrandForegroundLink: themeV8.palette.themePrimary, colorBrandForegroundLinkHover: themeV8.palette.themeDarker, colorNeutralBackground1Selected: themeV8.palette.neutralQuaternaryAlt, 
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseTheme), mapAliasColors(themeV8.palette, themeV8.isInverted)), mapShadowTokens(themeV8.effects)), mapBorderRadiusTokens(themeV8.effects)), { colorBrandBackground2: themeV8.palette.themeLight, colorBrandBackground2Hover: themeV8.palette.themeLight, colorBrandBackground2Pressed: themeV8.palette.themeLight, colorStatusWarningBackground3: '#D83B01', errorText: themeV8.semanticColors.errorText, colorNeutralStroke1Selected: themeV8.palette.neutralQuaternary, colorNeutralForeground2: themeV8.palette.neutralSecondary, colorBrandForegroundLink: themeV8.palette.themePrimary, colorBrandForegroundLinkHover: themeV8.palette.themeDarker, colorNeutralBackground1Selected: themeV8.palette.neutralQuaternaryAlt, colorNeutralStroke2: themeV8.palette.neutralTertiaryAlt, 
         // Fix for an issue with black borders for iOS that are added with 'after' selector
         colorStrokeFocus2: 'transparent' });
 };
@@ -9983,10 +10036,10 @@ const richTextEditorWrapperStyle = (theme, addTopOffset) => {
             tableLayout: 'auto',
             '& tr': {
                 background: 'transparent',
-                border: `1px solid ${theme.palette.neutralLight}`,
+                border: `1px solid ${theme.palette.neutralTertiaryAlt}`,
                 '& td': {
                     background: 'transparent',
-                    border: `1px solid ${theme.palette.neutralLight}`,
+                    border: `1px solid ${theme.palette.neutralTertiaryAlt}`,
                     wordBreak: 'normal',
                     padding: '0.125rem 0.25rem',
                     verticalAlign: 'top'
@@ -10177,14 +10230,11 @@ const sendBoxRichTextEditorStyle = (isExpanded) => {
  */
 const insertTableMenuCellButtonStyles = (theme) => {
     return {
-        width: '1rem',
-        height: '1rem',
-        border: `solid 0.0625rem ${theme.palette.neutralTertiaryAlt}`,
-        display: 'inline-block',
+        width: '16px',
+        height: '16px',
+        border: `solid 1px ${theme.palette.neutralTertiaryAlt}`,
         cursor: 'pointer',
-        background: 'transparent',
-        // include border into width value as the parent element has fixed width
-        boxSizing: 'border-box'
+        background: 'transparent'
     };
 };
 /**
@@ -10199,7 +10249,7 @@ const insertTableMenuCellButtonSelectedStyles = (theme) => {
  * @private
  */
 const insertTableMenuTablePane = react.mergeStyles({
-    padding: '0.5rem 0.625rem 0.75rem 0.625rem',
+    padding: '8px 10px 12px 10px',
     boxSizing: 'content-box',
     minWidth: 'auto'
 });
@@ -10208,12 +10258,9 @@ const insertTableMenuTablePane = react.mergeStyles({
  */
 const insertTableMenuFocusZone = (theme) => {
     return react.mergeStyles({
-        lineHeight: '12px',
-        // fixed width is required to show columns in a grid correctly
-        width: '5rem',
-        border: `solid 0.0625rem ${theme.palette.neutralTertiaryAlt}`,
-        // don't include border into width value as otherwise it may be broken when zoom value is changed
-        boxSizing: 'content-box'
+        display: 'inline-grid',
+        gridTemplateColumns: 'auto auto auto auto auto',
+        border: `solid 1px ${theme.palette.neutralTertiaryAlt}`
     });
 };
 /**
@@ -10599,6 +10646,9 @@ const RichTextInsertTablePane = (props) => {
     const onMouseEnter = React.useCallback((e) => {
         updateSize(e.target);
     }, [updateSize]);
+    const onTouchStart = React.useCallback((e) => {
+        updateSize(e.target);
+    }, [updateSize]);
     const onClickButton = React.useCallback(() => {
         onClick(createKey(formatRowColumnText(row), formatRowColumnText(column)));
     }, [row, column, onClick]);
@@ -10609,11 +10659,11 @@ const RichTextInsertTablePane = (props) => {
             for (let j = 0; j < maxColumnsNumber; j++) {
                 const key = `cell_${i}_${j}`;
                 const isSelected = j <= column && i <= row;
-                items.push(React.createElement("button", { className: react.mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(i), formatRowColumnText(j)), "data-testid": key }));
+                items.push(React.createElement("button", { className: react.mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, onTouchStart: onTouchStart, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(i), formatRowColumnText(j)), "data-testid": key }));
             }
         }
         return items;
-    }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, item.text]);
+    }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, onTouchStart, item.text]);
     const text = React.useMemo(() => {
         var _a;
         return formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(row), formatRowColumnText(column));
@@ -11073,6 +11123,7 @@ const RichTextEditor = React.forwardRef((props, ref) => {
     const editorDiv = React.useRef(null);
     const theme = useTheme();
     const [contextMenuProps, setContextMenuProps] = React.useState(null);
+    const tableCellSelectionLightThemeBackgroundColor = React.useRef(undefined);
     React.useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -11112,6 +11163,16 @@ const RichTextEditor = React.forwardRef((props, ref) => {
         var _a;
         (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setDarkModeState(isDarkThemedValue);
     }, [isDarkThemedValue]);
+    // remember light color to correctly set it in the dark theme
+    React.useEffect(() => {
+        var _a, _b, _c;
+        // focus to update selection color for table, otherwise the existing selection color for table won't be updated
+        (_a = editor.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (!isDarkThemedValue) {
+            tableCellSelectionLightThemeBackgroundColor.current =
+                (_c = (_b = lightTheme.palette) === null || _b === void 0 ? void 0 : _b.neutralLight) !== null && _c !== void 0 ? _c : theme.palette.neutralLight;
+        }
+    }, [theme.palette.neutralLight, isDarkThemedValue]);
     const placeholderPlugin = React.useMemo(() => {
         return new PlaceholderPlugin('');
     }, []);
@@ -11163,6 +11224,13 @@ const RichTextEditor = React.forwardRef((props, ref) => {
     const onContextMenuDismiss = React.useCallback(() => {
         setContextMenuProps(null);
     }, []);
+    const getDarkColor = React.useCallback((lightColor, _baseLValue, colorType) => {
+        var _a, _b;
+        if (lightColor === tableCellSelectionLightThemeBackgroundColor.current && colorType === 'background') {
+            return (_b = (_a = darkTheme.palette) === null || _a === void 0 ? void 0 : _a.neutralLight) !== null && _b !== void 0 ? _b : theme.palette.neutralLight;
+        }
+        return lightColor;
+    }, [theme.palette.neutralLight]);
     const plugins = React.useMemo(() => {
         const contentEdit = new roosterjsContentModelPlugins.EditPlugin();
         // AutoFormatPlugin previously was a part of the edit plugin
@@ -11195,7 +11263,7 @@ const RichTextEditor = React.forwardRef((props, ref) => {
         tableContextMenuPlugin
     ]);
     React.useEffect(() => {
-        var _a;
+        var _a, _b;
         const initialModel = createEditorInitialModel(initialContent, contentModel);
         if (editorDiv.current) {
             editor.current = new roosterjsContentModelCore.Editor(editorDiv.current, {
@@ -11204,6 +11272,7 @@ const RichTextEditor = React.forwardRef((props, ref) => {
                 doNotAdjustEditorColor: true,
                 // TODO: confirm the color during inline images implementation
                 imageSelectionBorderColor: 'blue',
+                tableCellSelectionBackgroundColor: ((_a = lightTheme.palette) === null || _a === void 0 ? void 0 : _a.neutralLight) && theme.palette.neutralLight,
                 plugins: plugins,
                 initialModel: initialModel,
                 defaultModelToDomOptions: {
@@ -11212,11 +11281,12 @@ const RichTextEditor = React.forwardRef((props, ref) => {
                         border: borderApplier,
                         dataset: dataSetApplier
                     }
-                }
+                },
+                getDarkColor: getDarkColor
             });
         }
         if (autoFocus === 'sendBoxTextField') {
-            (_a = editor.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = editor.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
         return () => {
             if (editor.current) {
@@ -11792,6 +11862,10 @@ const useChatMessageRenderStyles = reactComponents.makeStyles({
         marginLeft: `${AVATAR_MARGIN_LEFT}rem`,
         marginTop: '0'
     },
+    bodyHiddenAvatar: {
+        marginLeft: 0,
+        marginTop: 0
+    },
     bodyWithAvatar: {
         marginLeft: `0`,
         marginTop: '0.75rem'
@@ -11922,7 +11996,13 @@ const useChatMessageStyles = reactComponents.makeStyles({
  */
 const useChatMessageCommonStyles = reactComponents.makeStyles({
     body: {
-        '& table': Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted }, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderCollapse: 'collapse', tableLayout: 'auto', width: '100%', '& tr': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke1Selected}`)), { '& td': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke1Selected}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) }) })
+        '& table': {
+            backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted,
+            borderCollapse: 'collapse',
+            tableLayout: 'auto',
+            width: '100%',
+            '& tr': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke2}`)), { '& td': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke2}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) })
+        }
     },
     failed: {
         //TODO: can we reuse a theme color here?
@@ -12633,7 +12713,16 @@ const ChatMessageActionFlyout = (props) => {
             key: person.displayName,
             text: person.displayName,
             itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
-            onRenderIcon: () => { var _a; return onRenderAvatar ? onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions) : React.createElement(react.Persona, Object.assign({}, personaOptions)); },
+            onRenderIcon: () => {
+                var _a;
+                if (onRenderAvatar) {
+                    const rendered = onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions);
+                    if (rendered) {
+                        return rendered;
+                    }
+                }
+                return React.createElement(react.Persona, Object.assign({}, personaOptions));
+            },
             iconProps: {
                 styles: menuIconStyleSet
             }
@@ -12959,6 +13048,13 @@ const processHtmlToReact = (props) => {
                         ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
                         : defaultOnRenderInlineImage(inlineImageProps);
                 }
+                // Transform links to open in new tab
+                if (domNode.name === 'a' && React.isValidElement(reactNode)) {
+                    return React.cloneElement(reactNode, {
+                        target: '_blank',
+                        rel: 'noreferrer noopener'
+                    });
+                }
             }
             // Pass through the original node
             return reactNode;
@@ -13197,7 +13293,7 @@ actionsForAttachment) {
         return (React.createElement("div", { tabIndex: 0 },
             React.createElement(BlockedMessageContent, { message: message, strings: strings })));
     }
-    return (React.createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
+    return (React.createElement("div", { className: "ui-chat__message__content" },
         React.createElement(ChatMessageContent, { message: message, strings: strings, 
             /* @conditional-compile-remove(mention) */
             mentionDisplayOptions: mentionDisplayOptions, inlineImageOptions: inlineImageOptions }),
@@ -13375,12 +13471,8 @@ const MessageBubble$1 = (props) => {
                         // 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: {
+                    }
+                }, "data-ui-id": "chat-composite-message", author: React.createElement(react.Text, { className: chatMessageDateStyle }, message.senderDisplayName), timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, 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
@@ -13539,7 +13631,7 @@ class _ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DnFVPZv-.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-SEDy46f4.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -13547,7 +13639,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DnFVPZv-.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-SEDy46f4.js'); });
 /**
  * @private
  */
@@ -13741,11 +13833,7 @@ const FluentChatMyMessageComponent = (props) => {
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer]);
     const myMessageBodyProps = React.useMemo(() => {
         return {
-            className: reactComponents.mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
-            // make body not focusable to remove repetitions from narrators.
-            // inner components are already focusable
-            tabIndex: -1,
-            role: 'none'
+            className: reactComponents.mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)
         };
     }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);
     const myMessageStatusIcon = React.useMemo(() => {
@@ -13838,11 +13926,7 @@ const MessageBubble = (props) => {
     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'
+                    className: chatMessageStyles.root
                 }, author: React.createElement(react.Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
                     className: chatItemMessageContainerClassName,
                     style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
@@ -13920,36 +14004,48 @@ const FluentChatMessageComponent = (props) => {
     const messageRootProps = React.useMemo(() => {
         return { className: reactComponents.mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
+    const avatar = React.useMemo(() => {
+        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
+        const personaOptions = {
+            hidePersonaDetails: true,
+            size: react.PersonaSize.size32,
+            text: message.senderDisplayName,
+            showOverflowTooltip: false
+        };
+        let renderedAvatar;
+        if (onRenderAvatar) {
+            const avatarComponent = onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions);
+            if (!avatarComponent) {
+                return undefined;
+            }
+            else {
+                renderedAvatar = avatarComponent;
+            }
+        }
+        return (React.createElement("div", { className: react.mergeStyles(chatAvatarStyle) }, renderedAvatar ? renderedAvatar : React.createElement(react.Persona, Object.assign({}, personaOptions))));
+    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
     const messageBodyProps = React.useMemo(() => {
         return {
             // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
-            className: reactComponents.mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
-            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {},
-            // make body not focusable to remove repetitions from narrators.
-            // inner components are already focusable
-            tabIndex: -1,
-            role: 'none'
+            className: reactComponents.mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar
+                ? avatar
+                    ? chatMessageRenderStyles.bodyWithoutAvatar
+                    : chatMessageRenderStyles.bodyHiddenAvatar
+                : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
+            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {}
         };
     }, [
-        chatMessageRenderStyles.avatarNoOverlap,
-        chatMessageRenderStyles.avatarOverlap,
         chatMessageRenderStyles.bodyCommon,
-        chatMessageRenderStyles.bodyWithAvatar,
         chatMessageRenderStyles.bodyWithoutAvatar,
-        shouldOverlapAvatarAndMessage,
+        chatMessageRenderStyles.bodyHiddenAvatar,
+        chatMessageRenderStyles.bodyWithAvatar,
+        chatMessageRenderStyles.avatarOverlap,
+        chatMessageRenderStyles.avatarNoOverlap,
         shouldShowAvatar,
+        avatar,
+        shouldOverlapAvatarAndMessage,
         styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer
     ]);
-    const avatar = React.useMemo(() => {
-        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
-        const personaOptions = {
-            hidePersonaDetails: true,
-            size: react.PersonaSize.size32,
-            text: message.senderDisplayName,
-            showOverflowTooltip: false
-        };
-        return (React.createElement("div", { className: react.mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(react.Persona, Object.assign({}, personaOptions))));
-    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
     // 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.
@@ -14771,7 +14867,7 @@ const ParticipantItem = (props) => {
     };
     const menuButton = React.useMemo(() => (React.createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: react.mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary }), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
         React.createElement(react.Icon, { iconName: "ParticipantItemOptionsHovered", className: react.mergeStyles(iconStyles$3, !showMenuIcon ? displayNoneStyle : {}) }))), [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);
-    return (React.createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-disabled": (menuItems && menuItems.length > 0) || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);
@@ -15743,7 +15839,8 @@ const useVideoTileContextualMenuProps = (props) => {
     /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
     /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
     /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, 
-    /* @conditional-compile-remove(spotlight) */ myUserId } = props;
+    /* @conditional-compile-remove(spotlight) */ myUserId, 
+    /* @conditional-compile-remove(soft-mute) */ onMuteParticipant } = props;
     const scalingMode = React.useMemo(() => {
         var _a;
         return (_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
@@ -15837,6 +15934,21 @@ const useVideoTileContextualMenuProps = (props) => {
                 });
             }
         }
+        /* @conditional-compile-remove(soft-mute) */
+        if (onMuteParticipant) {
+            items.push({
+                key: 'mute',
+                text: 'Mute',
+                iconProps: {
+                    iconName: 'ContextualMenuMicMutedIcon',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                onClick: () => onMuteParticipant(participant.userId),
+                'data-ui-id': 'video-tile-mute-participant',
+                ariaLabel: 'Mute',
+                disabled: participant.isMuted
+            });
+        }
         if (scalingMode) {
             if (scalingMode === 'Crop' && (strings === null || strings === void 0 ? void 0 : strings.fitRemoteParticipantToFrame)) {
                 items.push({
@@ -15892,7 +16004,9 @@ const useVideoTileContextualMenuProps = (props) => {
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
         /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
-        /* @conditional-compile-remove(spotlight) */ myUserId
+        /* @conditional-compile-remove(spotlight) */ myUserId,
+        /* @conditional-compile-remove(soft-mute) */ onMuteParticipant,
+        /* @conditional-compile-remove(soft-mute) */ participant.isMuted
     ]);
     return contextualMenuProps;
 };
@@ -17082,7 +17196,8 @@ const _RemoteVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
     /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
     /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
-    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId } = props;
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(soft-mute) */ onMuteParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -17122,7 +17237,8 @@ const _RemoteVideoTile = React.memo((props) => {
         /* @conditional-compile-remove(spotlight) */ isSpotlighted,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
-        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(soft-mute) */ onMuteParticipant
     });
     const videoTileContextualMenuProps = React.useMemo(() => {
         if (menuKind !== 'contextual' || !contextualMenuProps) {
@@ -19562,7 +19678,9 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(spotlight) */
     onStopRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    maxParticipantsToSpotlight, reactionResources, videoTilesOptions } = props;
+    maxParticipantsToSpotlight, reactionResources, videoTilesOptions, 
+    /* @conditional-compile-remove(soft-mute) */
+    onMuteParticipant } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -19734,7 +19852,9 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(spotlight) */
             onStopSpotlight: onStopRemoteSpotlight, 
             /* @conditional-compile-remove(spotlight) */
-            maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources }));
+            maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources, 
+            /* @conditional-compile-remove(soft-mute) */
+            onMuteParticipant: onMuteParticipant }));
     }, [
         onCreateRemoteStreamView,
         onDisposeRemoteVideoStreamView,
@@ -19755,6 +19875,7 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(soft-mute) */ onMuteParticipant,
         reactionResources,
         videoTilesOptions
     ]);
@@ -22471,7 +22592,7 @@ const videoEffectsItemContainerStyles = (args) => {
  * @internal
  */
 const _VideoEffectsItem = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const theme = react.useTheme();
     const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
     const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
@@ -22486,7 +22607,7 @@ const _VideoEffectsItem = (props) => {
     }), [backgroundImage, disabled, isSelected, theme]);
     return (React.createElement(react.TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(react.Stack, { key: props.itemKey, className: react.mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
-            React.createElement(react.DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, "aria-label": (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : props.itemKey, "aria-disabled": props.disabled },
+            React.createElement(react.DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_j = (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : (_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : props.itemKey, "aria-disabled": props.disabled },
                 React.createElement(react.Stack, { horizontalAlign: 'center' },
                     props.iconProps && (React.createElement(react.Stack.Item, { className: iconContainerStyles },
                         React.createElement(react.Icon, Object.assign({}, props.iconProps)))),
@@ -27823,7 +27944,7 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
  */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-DfoveBvm.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BHdu0XqK.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -27831,7 +27952,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
  *
 /* @conditional-compile-remove(rich-text-editor-composite-support)
  */
-const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-DfoveBvm.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BHdu0XqK.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -28982,7 +29103,6 @@ const createCompositeHandlers = memoizeOne((adapter, capabilities) => {
         onSetCaptionLanguage: (language) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield adapter.setCaptionLanguage(language);
         }),
-        /* @conditional-compile-remove(end-of-call-survey) */
         onSubmitSurvey: (survey) => __awaiter$k(void 0, void 0, void 0, function* () {
             return yield adapter.submitSurvey(survey);
         }),
@@ -29019,7 +29139,11 @@ const createCompositeHandlers = memoizeOne((adapter, capabilities) => {
             ? (userIds) => __awaiter$k(void 0, void 0, void 0, function* () {
                 yield adapter.stopSpotlight(userIds);
             })
-            : undefined
+            : undefined,
+        /* @conditional-compile-remove(soft-mute) */
+        onMuteParticipant: (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
+            yield adapter.muteParticipant(userId);
+        })
     };
 });
 
@@ -32526,13 +32650,17 @@ const usePeoplePane = (props) => {
     /* @conditional-compile-remove(spotlight) */
     onStopAllSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    maxParticipantsToSpotlight } = props;
+    maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(soft-mute) */
+    onMuteParticipant } = props;
     const closePane = React.useCallback(() => {
         var _a;
         updateSidePaneRenderer(undefined);
         (_a = peopleButtonRef === null || peopleButtonRef === void 0 ? void 0 : peopleButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [peopleButtonRef, updateSidePaneRenderer]);
     const localeStrings = useLocale().strings.call;
+    /* @conditional-compile-remove(soft-mute) */
+    const remoteParticipants = useSelector$1(getRemoteParticipants);
     /* @conditional-compile-remove(spotlight) */
     const sidePaneHeaderMenuProps = React.useMemo(() => {
         const menuItems = [];
@@ -32552,11 +32680,15 @@ const usePeoplePane = (props) => {
         };
     }, [onStopAllSpotlight, spotlightedParticipantUserIds, localeStrings.stopAllSpotlightMenuLabel]);
     const onRenderHeader = React.useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false })), [mobileView, closePane, localeStrings]);
-    /* @conditional-compile-remove(spotlight) */
+    /* @conditional-compile-remove(spotlight) */ /* @conditional-compile-remove(soft-mute) */
     const onFetchParticipantMenuItemsForCallComposite = React.useCallback((participantId, myUserId, defaultMenuItems) => {
+        var _a;
         const _defaultMenuItems = defaultMenuItems !== null && defaultMenuItems !== void 0 ? defaultMenuItems : [];
+        /* @conditional-compile-remove(spotlight) */
         const isSpotlighted = spotlightedParticipantUserIds === null || spotlightedParticipantUserIds === void 0 ? void 0 : spotlightedParticipantUserIds.find((p) => p === participantId);
+        /* @conditional-compile-remove(spotlight) */
         const isMe = myUserId === participantId;
+        /* @conditional-compile-remove(spotlight) */
         if (isSpotlighted) {
             const stopSpotlightMenuText = isMe
                 ? localeStrings.stopSpotlightOnSelfMenuLabel
@@ -32612,6 +32744,24 @@ const usePeoplePane = (props) => {
                 });
             }
         }
+        /* @conditional-compile-remove(soft-mute) */
+        if (onMuteParticipant && !isMe) {
+            const isMuted = remoteParticipants && ((_a = remoteParticipants[participantId]) === null || _a === void 0 ? void 0 : _a.isMuted);
+            _defaultMenuItems.push({
+                key: 'mute',
+                text: 'Mute',
+                iconProps: {
+                    iconName: 'ContextualMenuMicMutedIcon',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                onClick: () => {
+                    onMuteParticipant(participantId);
+                },
+                'data-ui-id': 'participant-item-mute-participant',
+                ariaLabel: 'Mute',
+                disabled: isMuted
+            });
+        }
         return onFetchParticipantMenuItems
             ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems)
             : _defaultMenuItems;
@@ -32622,6 +32772,10 @@ const usePeoplePane = (props) => {
         onStartRemoteSpotlight,
         onStopRemoteSpotlight,
         onFetchParticipantMenuItems,
+        /* @conditional-compile-remove(soft-mute) */
+        onMuteParticipant,
+        /* @conditional-compile-remove(soft-mute) */
+        remoteParticipants,
         localeStrings.stopSpotlightMenuLabel,
         localeStrings.stopSpotlightOnSelfMenuLabel,
         localeStrings.addSpotlightMenuLabel,
@@ -33450,22 +33604,36 @@ const CallArrangement = (props) => {
         setParticipantActioned
     ]);
     const locale = useLocale();
+    const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     /* @conditional-compile-remove(spotlight) */
     const videoGalleryProps = usePropsFor$1(VideoGallery);
     /* @conditional-compile-remove(spotlight) */
     const { setPromptProps, setIsPromptOpen, hideSpotlightButtons } = props;
     /* @conditional-compile-remove(spotlight) */
-    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant } = videoGalleryProps;
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, 
+    /* @conditional-compile-remove(soft-mute) */
+    onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant } = videoGalleryProps;
     /* @conditional-compile-remove(spotlight) */
     const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     /* @conditional-compile-remove(spotlight) */
     const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     /* @conditional-compile-remove(spotlight) */
-    const canRemoveSpotlight = (_c = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.capabilitiesFeature) === null || _c === void 0 ? void 0 : _c.capabilities.removeParticipantsSpotlight.isPresent;
+    const canRemoveSpotlight = (_d = (_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.capabilitiesFeature) === null || _d === void 0 ? void 0 : _d.capabilities.removeParticipantsSpotlight.isPresent;
     /* @conditional-compile-remove(spotlight) */
     const stopAllSpotlight = React.useMemo(() => (canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined), [canRemoveSpotlight, adapter]);
     /* @conditional-compile-remove(spotlight) */
     const { stopAllSpotlightWithPrompt } = useStopAllSpotlightCallbackWithPrompt(stopAllSpotlight, setIsPromptOpen, setPromptProps);
+    const onMuteParticipantPeoplePaneProps = React.useMemo(() => {
+        /* @conditional-compile-remove(soft-mute) */
+        return {
+            onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '')
+                ? onMuteParticipant
+                : undefined
+        };
+    }, [
+        /* @conditional-compile-remove(soft-mute) */ onMuteParticipant,
+        /* @conditional-compile-remove(soft-mute) */ role
+    ]);
     const spotlightPeoplePaneProps = React.useMemo(() => {
         /* @conditional-compile-remove(spotlight) */
         return {
@@ -33487,7 +33655,7 @@ const CallArrangement = (props) => {
         /* @conditional-compile-remove(spotlight) */ stopAllSpotlightWithPrompt,
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipants
     ]);
-    const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign({}, peoplePaneProps), spotlightPeoplePaneProps));
+    const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign(Object.assign({}, peoplePaneProps), spotlightPeoplePaneProps), onMuteParticipantPeoplePaneProps));
     const togglePeoplePane = React.useCallback(() => {
         if (isPeoplePaneOpen) {
             closePeoplePane();
@@ -33538,7 +33706,6 @@ const CallArrangement = (props) => {
         togglePeoplePane();
     }, [togglePeoplePane]);
     const drawerContainerStylesValue = React.useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
-    const role = (_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.role;
     const canUnmute = role !== 'Consumer' ? true : false;
     let filteredLatestErrors = props.errorBarProps !== false ? props.latestErrors : [];
     const isCameraOn = useSelector$1(localVideoSelector).isAvailable;
@@ -33746,7 +33913,11 @@ const MediaGallery = (props) => {
             /* @conditional-compile-remove(spotlight) */
             onStartRemoteSpotlight: hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt, 
             /* @conditional-compile-remove(spotlight) */
-            onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt })));
+            onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt, 
+            /* @conditional-compile-remove(soft-mute) */
+            onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(userRole !== null && userRole !== void 0 ? userRole : '')
+                ? videoGalleryProps.onMuteParticipant
+                : undefined })));
     }, [
         videoGalleryProps,
         props.isMobile,
@@ -36101,13 +36272,9 @@ const useEndedCallConsoleErrors = (endedCall) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
-const StarSurvey = (
-/* @conditional-compile-remove(end-of-call-survey) */ props) => {
-    /* @conditional-compile-remove(end-of-call-survey) */
+const StarSurvey = (props) => {
     const { onStarRatingSelected } = props;
-    /* @conditional-compile-remove(end-of-call-survey) */
     const strings = useLocale().strings.call;
-    /* @conditional-compile-remove(end-of-call-survey) */
     const StarSurveyStrings = {
         starSurveyHelperText: strings.starSurveyHelperText,
         starSurveyOneStarText: strings.starSurveyOneStarText,
@@ -36117,24 +36284,19 @@ const StarSurvey = (
         starSurveyFiveStarText: strings.starSurveyFiveStarText,
         starRatingAriaLabel: strings.starRatingAriaLabel
     };
-    /* @conditional-compile-remove(end-of-call-survey) */
     return React.createElement(_StarSurvey, { strings: StarSurveyStrings, onStarRatingSelected: onStarRatingSelected });
 };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
-const TagsSurvey = (
-/* @conditional-compile-remove(end-of-call-survey) */ props) => {
-    /* @conditional-compile-remove(end-of-call-survey) */
+const TagsSurvey = (props) => {
     const strings = useLocale().strings.call;
-    /* @conditional-compile-remove(end-of-call-survey) */
     const tagsSurveyStrings = {
         tagsSurveyQuestion: strings.tagsSurveyQuestion,
         tagsSurveyHelperText: strings.tagsSurveyHelperText,
         tagsSurveyTextFieldDefaultText: strings.tagsSurveyTextFieldDefaultText
     };
-    /* @conditional-compile-remove(end-of-call-survey) */
     return (React.createElement(_TagsSurvey, { callIssuesToTag: strings.surveyIssues, categoryHeadings: strings.surveyIssuesHeadingStrings, onConfirm: props.onConfirm, strings: tagsSurveyStrings, showFreeFormTextField: props.showFreeFormTextField }));
 };
 
@@ -36143,11 +36305,8 @@ const TagsSurvey = (
 /**
  * @private
  */
-const SurveyContent = (
-/* @conditional-compile-remove(end-of-call-survey) */ props) => {
-    /* @conditional-compile-remove(end-of-call-survey) */
+const SurveyContent = (props) => {
     const [showTagsSurvey, setShowTagsSurvey] = React.useState(false);
-    /* @conditional-compile-remove(end-of-call-survey) */
     const onStarRatingSelected = (ratings) => {
         if (ratings < 5) {
             setShowTagsSurvey(true);
@@ -36158,7 +36317,6 @@ const SurveyContent = (
         }
         props.setRatings(ratings);
     };
-    /* @conditional-compile-remove(end-of-call-survey) */
     const onIssuesSelected = (selectedTags, improvementSuggestions) => {
         props.setIssuesSelected(selectedTags);
         props.setShowSubmitFeedbackButton(true);
@@ -36166,7 +36324,6 @@ const SurveyContent = (
             props.setImprovementSuggestions(improvementSuggestions);
         }
     };
-    /* @conditional-compile-remove(end-of-call-survey) */
     return (React.createElement(react.Stack, { "data-ui-id": "call-composite-survey" },
         React.createElement(StarSurvey, { onStarRatingSelected: onStarRatingSelected }),
         showTagsSurvey && (React.createElement(TagsSurvey, { onConfirm: onIssuesSelected, showFreeFormTextField: !(props.setImprovementSuggestions === undefined) }))));
@@ -36178,11 +36335,8 @@ const SurveyContent = (
  * Page shown after the survey is submitted.
  * @private
  */
-function ThankYouForFeedbackPage(
-/* @conditional-compile-remove(end-of-call-survey) */ props) {
-    /* @conditional-compile-remove(end-of-call-survey) */
+function ThankYouForFeedbackPage(props) {
     const strings = useLocale().strings.call;
-    /* @conditional-compile-remove(end-of-call-survey) */
     return (React.createElement(react.Stack, { verticalFill: true, verticalAlign: "center", horizontalAlign: "center", "data-ui-id": 'thank-you-page', "aria-atomic": true },
         React.createElement(react.Stack, { className: react.mergeStyles(containerStyle), tokens: containerItemGap },
             props.iconName && React.createElement(CallCompositeIcon, { iconName: props.iconName }),
@@ -36191,8 +36345,6 @@ function ThankYouForFeedbackPage(
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(end-of-call-survey) */
-/* @conditional-compile-remove(end-of-call-survey) */
 /**
  * @private
  */
@@ -36202,7 +36354,6 @@ const questionTextStyle = (theme) => react.mergeStyles({
     lineHeight: _pxToRem(20),
     color: theme.palette.neutralPrimary
 });
-/* @conditional-compile-remove(end-of-call-survey) */
 /**
  * @private
  */
@@ -36235,27 +36386,16 @@ var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments,
 };
 /** @private */
 const Survey = (props) => {
-    /* @conditional-compile-remove(end-of-call-survey) */
     const { onSubmitSurvey, onSurveySubmittedCustom, onSurveyClosed, iconName, title, moreDetails, disableStartCallButton, isMobile } = props;
-    /* @conditional-compile-remove(end-of-call-survey) */
     const strings = useLocale().strings.call;
-    /* @conditional-compile-remove(end-of-call-survey) */
     const [ratings, setRatings] = React.useState(0);
-    /* @conditional-compile-remove(end-of-call-survey) */
     const [issuesSelected, setIssuesSelected] = React.useState();
-    /* @conditional-compile-remove(end-of-call-survey) */
     const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = React.useState(false);
-    /* @conditional-compile-remove(end-of-call-survey) */
     const [improvementSuggestions, setImprovementSuggestions] = React.useState({});
-    /* @conditional-compile-remove(end-of-call-survey) */
     const [showDefaultAfterSubmitScreen, setShowDefaultAfterSubmitScreen] = React.useState(false);
-    /* @conditional-compile-remove(end-of-call-survey) */
     const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = React.useState(false);
-    /* @conditional-compile-remove(end-of-call-survey) */
     const [submitButtonDisabled, setSubmitButtonDisabled] = React.useState(false);
-    /* @conditional-compile-remove(end-of-call-survey) */
     const theme = react.useTheme();
-    /* @conditional-compile-remove(end-of-call-survey) */
     return (React.createElement(React.Fragment, null,
         showDefaultAfterSubmitScreen && React.createElement(ThankYouForFeedbackPage, { iconName: iconName }),
         showDefaultAfterDismissedScreen && (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton })),
@@ -36344,9 +36484,7 @@ const Survey = (props) => {
  */
 function SurveyPage(props) {
     var _a, _b;
-    /* @conditional-compile-remove(end-of-call-survey) */
     const handlers = useHandlers();
-    /* @conditional-compile-remove(end-of-call-survey) */
     return (React.createElement(react.Stack, { verticalFill: true, verticalAlign: "center", horizontalAlign: "center", "data-ui-id": props.dataUiId, "aria-atomic": true },
         React.createElement(react.Stack, { className: react.mergeStyles(containerStyle$1), tokens: containerItemGap },
             React.createElement(Survey, Object.assign({}, handlers, props, { onSurveySubmittedCustom: (_a = props.surveyOptions) === null || _a === void 0 ? void 0 : _a.onSurveySubmitted, onSurveyClosed: (_b = props.surveyOptions) === null || _b === void 0 ? void 0 : _b.onSurveyClosed, isMobile: props.mobileView })))));
@@ -36486,7 +36624,6 @@ const MainScreen = (props) => {
         }
         case 'leftCall': {
             const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
-            /* @conditional-compile-remove(end-of-call-survey) */
             if (!((_o = (_m = props.options) === null || _m === void 0 ? void 0 : _m.surveyOptions) === null || _o === void 0 ? void 0 : _o.disableSurvey)) {
                 pageElement = (React.createElement(SurveyPage, { dataUiId: 'left-call-page', surveyOptions: (_p = props.options) === null || _p === void 0 ? void 0 : _p.surveyOptions, iconName: iconName, title: title, moreDetails: moreDetails, disableStartCallButton: disableStartCallButton, mobileView: props.mobileView }));
                 break;
@@ -37129,7 +37266,6 @@ class AzureCommunicationCallAdapter {
         this.startVideoBackgroundEffect.bind(this);
         this.stopVideoBackgroundEffects.bind(this);
         this.updateBackgroundPickerImages.bind(this);
-        /* @conditional-compile-remove(end-of-call-survey) */
         this.submitSurvey.bind(this);
         /* @conditional-compile-remove(spotlight) */
         this.startSpotlight.bind(this);
@@ -37137,6 +37273,8 @@ class AzureCommunicationCallAdapter {
         this.stopSpotlight.bind(this);
         /* @conditional-compile-remove(spotlight) */
         this.stopAllSpotlight.bind(this);
+        /* @conditional-compile-remove(soft-mute) */
+        this.muteParticipant.bind(this);
     }
     dispose() {
         this.resetDiagnosticsForwarder();
@@ -37588,12 +37726,17 @@ class AzureCommunicationCallAdapter {
             this.handlers.onSetSpokenLanguage(language);
         });
     }
-    /* @conditional-compile-remove(end-of-call-survey) */
     submitSurvey(survey) {
         return __awaiter$5(this, void 0, void 0, function* () {
             return this.handlers.onSubmitSurvey(survey);
         });
     }
+    /* @conditional-compile-remove(soft-mute) */
+    muteParticipant(userId) {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            this.handlers.onMuteParticipant(userId);
+        });
+    }
     /* @conditional-compile-remove(spotlight) */
     startSpotlight(userIds) {
         return __awaiter$5(this, void 0, void 0, function* () {
@@ -38370,7 +38513,6 @@ class CallWithChatBackedCallAdapter {
     updateSelectedVideoBackgroundEffect(selectedVideoBackground) {
         return this.callWithChatAdapter.updateSelectedVideoBackgroundEffect(selectedVideoBackground);
     }
-    /* @conditional-compile-remove(end-of-call-survey) */
     submitSurvey(survey) {
         return __awaiter$4(this, void 0, void 0, function* () {
             return this.callWithChatAdapter.submitSurvey(survey);
@@ -38394,6 +38536,12 @@ class CallWithChatBackedCallAdapter {
             return this.callWithChatAdapter.stopAllSpotlight();
         });
     }
+    /* @conditional-compile-remove(soft-mute) */
+    muteParticipant(userId) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return this.callWithChatAdapter.muteParticipant(userId);
+        });
+    }
 }
 function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState) {
     return {
@@ -38707,7 +38855,6 @@ const validNewChatMessage = (message) => !!message.senderDisplayName && (message
 // Licensed under the MIT License.
 const CallWithChatScreen = (props) => {
     const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;
-    /* @conditional-compile-remove(end-of-call-survey) */
     const { surveyOptions } = props;
     const mobileView = formFactor === 'mobile';
     if (!callWithChatAdapter) {
@@ -38822,7 +38969,6 @@ const CallWithChatScreen = (props) => {
         remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,
         galleryOptions: props.galleryOptions,
         localVideoTile: props.localVideoTile,
-        /* @conditional-compile-remove(end-of-call-survey) */
         surveyOptions: surveyOptions,
         branding: {
             logo: props.logo,
@@ -38847,7 +38993,6 @@ const CallWithChatScreen = (props) => {
         props.galleryOptions,
         props.localVideoTile,
         props.remoteVideoTileMenuOptions,
-        /* @conditional-compile-remove(end-of-call-survey) */
         surveyOptions,
         props.logo,
         props.backgroundImage,
@@ -38917,9 +39062,7 @@ const CallWithChatComposite = (props) => {
             /* @conditional-compile-remove(call-readiness) */
             deviceChecks: options === null || options === void 0 ? void 0 : options.deviceChecks, callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme, remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-            attachmentOptions: options === null || options === void 0 ? void 0 : options.attachmentOptions, localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo, backgroundImage: (_b = options === null || options === void 0 ? void 0 : options.branding) === null || _b === void 0 ? void 0 : _b.backgroundImage, 
-            /* @conditional-compile-remove(end-of-call-survey) */
-            surveyOptions: options === null || options === void 0 ? void 0 : options.surveyOptions, 
+            attachmentOptions: options === null || options === void 0 ? void 0 : options.attachmentOptions, localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo, backgroundImage: (_b = options === null || options === void 0 ? void 0 : options.branding) === null || _b === void 0 ? void 0 : _b.backgroundImage, surveyOptions: options === null || options === void 0 ? void 0 : options.surveyOptions, 
             /* @conditional-compile-remove(spotlight) */
             spotlight: options === null || options === void 0 ? void 0 : options.spotlight }))));
 };
@@ -39452,7 +39595,6 @@ class AzureCommunicationCallWithChatAdapter {
     updateSelectedVideoBackgroundEffect(selectedVideoBackground) {
         return this.callAdapter.updateSelectedVideoBackgroundEffect(selectedVideoBackground);
     }
-    /* @conditional-compile-remove(end-of-call-survey) */
     submitSurvey(survey) {
         return __awaiter$2(this, void 0, void 0, function* () {
             return this.callAdapter.submitSurvey(survey);
@@ -39476,6 +39618,12 @@ class AzureCommunicationCallWithChatAdapter {
             return this.callAdapter.stopAllSpotlight();
         });
     }
+    /* @conditional-compile-remove(soft-mute) */
+    muteParticipant(userId) {
+        return __awaiter$2(this, void 0, void 0, function* () {
+            return this.callAdapter.muteParticipant(userId);
+        });
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     on(event, listener) {
         switch (event) {
@@ -40539,4 +40687,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-CYkd_Ir9.js.map
+//# sourceMappingURL=index-HwuTcEP-.js.map