@azure/communication-react 1.11.1-alpha-202401140014 → 1.11.1-alpha-202401160013

package/dist/dist-cjs/communication-react/index.js

@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.1-alpha-202401140014';
+var telemetryVersion = '1.11.1-alpha-202401160013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -698,6 +698,18 @@ const raiseHandButtonSelector = reselect__namespace.createSelector([getLocalPart
         disabled: callState === 'InLobby' ? true : (_a = callState === 'Connecting') !== null && _a !== void 0 ? _a : false
     };
 });
+/* @conditional-compile-remove(reaction) */
+/**
+ * Selector for {@link ReactionButton} component.
+ *
+ * @beta
+ */
+const reactionButtonSelector = reselect__namespace.createSelector([getLocalParticipantReactionState, getCallState], (reaction, callState) => {
+    return {
+        checked: reaction ? true : false,
+        disabled: callState !== 'Connected'
+    };
+});
 /**
  * Selector for {@link ScreenShareButton} component.
  *
@@ -922,6 +934,21 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             yield (raiseHandFeature === null || raiseHandFeature === void 0 ? void 0 : raiseHandFeature.raiseHand());
         }
     });
+    /* @conditional-compile-remove(reaction) */
+    const onReactionClicked = (reaction) => __awaiter$M(void 0, void 0, void 0, function* () {
+        var _c;
+        if (reaction === 'like' ||
+            reaction === 'applause' ||
+            reaction === 'heart' ||
+            reaction === 'laugh' ||
+            reaction === 'surprised') {
+            yield ((_c = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Reaction)) === null || _c === void 0 ? void 0 : _c.sendReaction({ reactionType: reaction }));
+        }
+        else {
+            console.warn(`Can not recognize ${reaction} as meeting reaction`);
+        }
+        return;
+    });
     const onToggleMicrophone = () => __awaiter$M(void 0, void 0, void 0, function* () {
         if (!call || !(_isInCall(call.state) || _isInLobbyOrConnecting(call.state))) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
@@ -935,7 +962,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
     /* @conditional-compile-remove(PSTN-calls) */
     const onToggleHold = () => __awaiter$M(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$M(void 0, void 0, void 0, function* () {
-        var _c;
+        var _d;
         if (!call || call.localVideoStreams.length === 0) {
             return;
         }
@@ -947,7 +974,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         if (!localStream) {
             return;
         }
-        const { view } = (_c = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _c !== void 0 ? _c : {};
+        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$M(void 0, void 0, void 0, function* () {
@@ -1074,7 +1101,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
     });
     /* @conditional-compile-remove(video-background-effects) */
     const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$M(void 0, void 0, void 0, function* () {
-        var _d;
+        var _e;
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -1082,13 +1109,13 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
                 throw new Error(`Video background effects dependency not resolved`);
             }
             const createEffect = (options === null || options === void 0 ? void 0 : options.onResolveVideoBackgroundEffectsDependency) &&
-                ((_d = (yield options.onResolveVideoBackgroundEffectsDependency())) === null || _d === void 0 ? void 0 : _d.createBackgroundBlurEffect);
+                ((_e = (yield options.onResolveVideoBackgroundEffectsDependency())) === null || _e === void 0 ? void 0 : _e.createBackgroundBlurEffect);
             return createEffect && stream.feature(communicationCalling.Features.VideoEffects).startEffects(createEffect(backgroundBlurConfig));
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
     const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$M(void 0, void 0, void 0, function* () {
-        var _e;
+        var _f;
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -1096,7 +1123,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
                 throw new Error(`Video background effects dependency not resolved`);
             }
             const createEffect = (options === null || options === void 0 ? void 0 : options.onResolveVideoBackgroundEffectsDependency) &&
-                ((_e = (yield options.onResolveVideoBackgroundEffectsDependency())) === null || _e === void 0 ? void 0 : _e.createBackgroundReplacementEffect);
+                ((_f = (yield options.onResolveVideoBackgroundEffectsDependency())) === null || _f === void 0 ? void 0 : _f.createBackgroundReplacementEffect);
             return (createEffect && stream.feature(communicationCalling.Features.VideoEffects).startEffects(createEffect(backgroundReplacementConfig)));
         }
     });
@@ -1157,6 +1184,8 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         onLowerHand,
         /* @conditional-compile-remove(raise-hand) */
         onToggleRaiseHand,
+        /* @conditional-compile-remove(reaction) */
+        onReactionClicked,
         /* @conditional-compile-remove(PSTN-calls) */
         onAddParticipant: notImplemented,
         onRemoveParticipant: notImplemented,
@@ -6301,6 +6330,14 @@ const GalleryRightButton = () => {
     const rtl = useTheme().rtl;
     return rtl ? React.createElement(reactIcons.ChevronLeft20Regular, null) : React.createElement(reactIcons.ChevronRight20Regular, null);
 };
+const ControlButtonRaiseHandIcon = () => {
+    /* @conditional-compile-remove(reaction) */
+    return React.createElement(reactIcons.HandRight20Regular, null);
+};
+const ControlButtonLowerHandIcon = () => {
+    /* @conditional-compile-remove(reaction) */
+    return React.createElement(reactIcons.HandRightOff20Regular, null);
+};
 /**
  * The default set of icons that are available to use in the UI components.
  *
@@ -6322,9 +6359,9 @@ const DEFAULT_COMPONENT_ICONS = {
     ControlButtonScreenShareStart: React.createElement(reactIcons.ShareScreenStart20Filled, null),
     ControlButtonScreenShareStop: React.createElement(reactIcons.ShareScreenStop20Filled, null),
     /* @conditional-compile-remove(raise-hand) */
-    ControlButtonRaiseHand: React.createElement(reactIcons.HandRight20Filled, null),
+    ControlButtonRaiseHand: React.createElement(ControlButtonRaiseHandIcon, null),
     /* @conditional-compile-remove(raise-hand) */
-    ControlButtonLowerHand: React.createElement(reactIcons.HandRightOff20Filled, null),
+    ControlButtonLowerHand: React.createElement(ControlButtonLowerHandIcon, null),
     /* @conditional-compile-remove(raise-hand) */
     RaiseHandContextualMenuItem: React.createElement(reactIcons.HandRight20Regular, null),
     /* @conditional-compile-remove(raise-hand) */
@@ -12954,10 +12991,11 @@ const raiseHandLimitedSpaceStyles = {
     // position at the bottom
     bottom: 0
 };
+/* @conditional-compile-remove(reaction) */
 /**
  * @private
  */
-const playFrames = react.memoizeFunction(() => react.keyframes({
+const playFrames$1 = react.memoizeFunction(() => react.keyframes({
     from: {
         backgroundPosition: '0px 8568px'
     },
@@ -12973,7 +13011,7 @@ const reactionRenderingStyle = (args) => react.mergeStyles({
     height: '100%',
     width: '100%',
     overflow: 'hidden',
-    animationName: playFrames(),
+    animationName: playFrames$1(),
     backgroundImage: args.backgroundImageUrl,
     animationDuration: '5.12s',
     animationTimingFunction: `steps(102)`,
@@ -17448,6 +17486,117 @@ const raiseHandButtonStyles = (theme) => ({
     labelChecked: { color: react.DefaultPalette.white }
 });
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const playFrames = react.memoizeFunction(() => react.keyframes({
+    from: {
+        backgroundPosition: '0px 8568px'
+    },
+    to: {
+        backgroundPosition: '0px 0px'
+    }
+}));
+/* @conditional-compile-remove(reaction) */
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+const emojiStyles = (backgroundImage, animationPlayState) => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        backgroundImage: backgroundImage,
+        animationName: playFrames(),
+        animationDuration: '8.12s',
+        animationTimingFunction: `steps(102)`,
+        animationPlayState: animationPlayState,
+        animationIterationCount: 'infinite',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: 'center',
+        backgroundSize: `44px 2142px`,
+        transition: 'opacity 2s',
+        backgroundColor: 'transparent',
+        transform: `scale(0.6)`
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+const reactionEmojiMenuStyles = () => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width: '220px',
+        height: '42px'
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(reaction) */
+/**
+ * A button to send reactions.
+ *
+ * Can be used with {@link ControlBar}.
+ *
+ * @beta
+ */
+const ReactionButton = (props) => {
+    var _a, _b;
+    const localeStrings = useLocale$1().strings.reactionButton;
+    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
+    const theme = react.useTheme();
+    const styles = reactionButtonStyles(theme);
+    const onRenderIcon = () => React.createElement(_HighContrastAwareIcon, { iconName: "ReactionButtonIcon" });
+    const [isHoveredMap, setIsHoveredMap] = React.useState(new Map());
+    const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
+    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { style: reactionEmojiMenuStyles() }, emojis.map((emoji, index) => (React.createElement("div", { key: index, onClick: () => {
+            props.onReactionClicked(emoji);
+            setIsHoveredMap((prevMap) => {
+                return new Map(prevMap).set(emoji, false);
+            });
+            dismissMenu();
+        }, style: emojiStyles(reactionEmoji.get(emoji), isHoveredMap.get(emoji) ? 'running' : 'paused'), onMouseEnter: () => setIsHoveredMap((prevMap) => {
+            return new Map(prevMap).set(emoji, true);
+        }), onMouseLeave: () => setIsHoveredMap((prevMap) => {
+            return new Map(prevMap).set(emoji, false);
+        }) })))));
+    const emojiList = [
+        { key: 'reactions', itemType: react.ContextualMenuItemType.Normal, onRender: renderEmoji }
+    ];
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), menuProps: {
+            shouldFocusOnMount: true,
+            items: emojiList
+        }, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null) })));
+};
+/* @conditional-compile-remove(reaction) */
+const reactionButtonStyles = (theme) => ({
+    rootChecked: {
+        background: theme.palette.themePrimary,
+        color: react.DefaultPalette.white
+    },
+    rootCheckedHovered: {
+        background: theme.palette.themePrimary,
+        color: react.DefaultPalette.white
+    },
+    labelChecked: { color: react.DefaultPalette.white }
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
@@ -20233,6 +20382,10 @@ const getSelector$1 = (component) => {
     if (component === RaiseHandButton) {
         return findConditionalCompiledSelector(component);
     }
+    /* @conditional-compile-remove(reaction) */
+    if (component === ReactionButton) {
+        return findConditionalCompiledSelector(component);
+    }
     return findSelector$1(component);
 };
 const findSelector$1 = (component) => {
@@ -20274,6 +20427,10 @@ const findConditionalCompiledSelector = (component) => {
         case RaiseHandButton:
             /* @conditional-compile-remove(raise-hand) */
             return raiseHandButtonSelector;
+        /* @conditional-compile-remove(reaction) */
+        case ReactionButton:
+            /* @conditional-compile-remove(reaction) */
+            return reactionButtonSelector;
     }
 };
 
@@ -24528,7 +24685,7 @@ const disableCallControls = (callControlOptions, disabledControls) => {
  * @returns whether a button is disabled
  * @private
  */
-const isDisabled$3 = (option) => {
+const isDisabled$4 = (option) => {
     if (option === undefined || typeof option === 'boolean') {
         return false;
     }
@@ -24705,6 +24862,10 @@ const createCompositeHandlers = memoizeOne((adapter) => ({
             ? yield adapter.lowerHand()
             : yield adapter.raiseHand();
     }),
+    /* @conditional-compile-remove(reaction) */
+    onReactionClicked: (reaction) => __awaiter$g(void 0, void 0, void 0, function* () {
+        yield adapter.onReactionClicked(reaction);
+    }),
     onSelectCamera: (deviceInfo, options) => __awaiter$g(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
@@ -25367,9 +25528,9 @@ const Participants = (props) => {
         var _a;
         return concatButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.increaseFlyoutItemSize, props.styles]);
-    return (React.createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$2(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
+    return (React.createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$3(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
 };
-const isDisabled$2 = (option) => {
+const isDisabled$3 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -25390,13 +25551,13 @@ const ScreenShare = (props) => {
     const screenShareButtonDisabled = () => {
         var _a;
         /* @conditional-compile-remove(capabilities) */ /* @conditional-compile-remove(PSTN-calls) */
-        return (_a = screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) !== null && _a !== void 0 ? _a : isDisabled$1(props.option);
+        return (_a = screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) !== null && _a !== void 0 ? _a : isDisabled$2(props.option);
     };
     return (React.createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled() ||
             props.disabled ||
             /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), styles: styles })));
 };
-const isDisabled$1 = (option) => {
+const isDisabled$2 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -25639,14 +25800,14 @@ const RaiseHand = (props) => {
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     const callStatus = useSelector$1(getCallStatus);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    let raiseHandButtonDisabled = isDisabled(props.option);
+    let raiseHandButtonDisabled = isDisabled$1(props.option);
     if (_isInLobbyOrConnecting(callStatus)) {
         raiseHandButtonDisabled = true;
     }
     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 = (option) => {
+const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -25736,6 +25897,25 @@ const onFetchCustomButtonPropsTrampoline = (options) => {
     return response;
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(reaction) */
+/** @private */
+const Reaction = (props) => {
+    const reactionButtonProps = usePropsFor$1(ReactionButton);
+    const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
+    const reactionButtonDisabled = isDisabled(props.option) || reactionButtonProps.disabled;
+    return (React.createElement(ReactionButton, Object.assign({ "data-ui-id": "call-composite-reaction-button" }, reactionButtonProps, { showLabel: props.displayType !== 'compact', disabled: reactionButtonDisabled || props.disabled, styles: styles })));
+};
+/* @conditional-compile-remove(reaction) */
+const isDisabled = (option) => {
+    if (option === undefined || option === true || option === false) {
+        return false;
+    }
+    return option.disabled;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // Enforce a background color on control bar to ensure it matches the composite background color.
@@ -25807,6 +25987,12 @@ const CallControls = (props) => {
     if (showParticipantsButtonInControlBar) {
         numberOfButtons++;
     }
+    /* @conditional-compile-remove(reaction) */
+    const showReactionButtonInControlBar = isEnabled$2(options === null || options === void 0 ? void 0 : options.reactionButton) && !props.isMobile;
+    /* @conditional-compile-remove(reaction) */
+    if (showReactionButtonInControlBar) {
+        numberOfButtons++;
+    }
     const moreButtonContextualMenuItems = () => {
         const items = [];
         if (props.isMobile && props.onPeopleButtonClicked && isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton)) {
@@ -25822,7 +26008,7 @@ const CallControls = (props) => {
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
-                disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton),
+                disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.participantsButton),
                 ['data-ui-id']: 'call-composite-more-menu-people-button'
             });
         }
@@ -25838,7 +26024,7 @@ const CallControls = (props) => {
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
-                disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.holdButton),
+                disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.holdButton),
                 ['data-ui-id']: 'hold-button'
             });
         }
@@ -25921,7 +26107,7 @@ const CallControls = (props) => {
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
-            disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.raiseHandButton),
+            disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.raiseHandButton),
             ['data-ui-id']: 'call-composite-more-menu-raise-hand-button'
         });
     }
@@ -25967,15 +26153,17 @@ const CallControls = (props) => {
         React.createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React.createElement(react.Stack.Item, null,
             React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
-                microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
-                cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.cameraButton) })),
+                microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
+                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 && React.createElement(Reaction, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
                 /* @conditional-compile-remove(raise-hand) */ 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$3(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$3(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
+                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) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                React.createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton), disableTooltip: props.isMobile })),
-                showDevicesButtonInControlBar && (React.createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.devicesButton) })), (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
+                React.createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.participantsButton), disableTooltip: props.isMobile })),
+                showDevicesButtonInControlBar && (React.createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.devicesButton) })), (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
                 _b.slice(0, props.isMobile
                     ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
                     : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
@@ -26519,20 +26707,22 @@ const CommonCallControlBar = (props) => {
                                 React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
                                     microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.microphoneButton), disableTooltip: props.mobileView })),
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.microphoneButton), disableTooltip: props.mobileView })),
                                     cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.cameraButton), 
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.cameraButton), 
                                         /* @conditional-compile-remove(video-background-effects) */
                                         onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef, disableTooltip: props.mobileView })),
+                                    /* @conditional-compile-remove(reaction) */
+                                    !props.mobileView && isEnabled$1(options.reactionButton) && (React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen })),
                                     /* @conditional-compile-remove(raise-hand) */ !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) */
-                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.microphoneButton) })),
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.microphoneButton) })),
                                     screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.screenShareButton) })), (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.screenShareButton) })), (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
                                     _b.slice(0, props.mobileView
                                         ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
                                         : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
@@ -26560,7 +26750,7 @@ const CommonCallControlBar = (props) => {
                     React.createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined },
                         isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: props.peopleButtonChecked ? peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.selectedLabel : peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage ||
                                 props.disableButtonsForHoldScreen ||
-                                isDisabled$3(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef })), (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
+                                isDisabled$4(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef })), (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
                         _c.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                             return (React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
                         }))))))));
@@ -26893,7 +27083,7 @@ const MoreDrawer = (props) => {
                 text: mic.name,
                 onItemClick: onMicrophoneItemClick,
                 secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined,
-                disabled: drawerSelectionOptions !== false ? isDisabled$3(drawerSelectionOptions.microphoneButton) : undefined
+                disabled: drawerSelectionOptions !== false ? isDisabled$4(drawerSelectionOptions.microphoneButton) : undefined
             })),
             secondaryText: (_b = props.selectedMicrophone) === null || _b === void 0 ? void 0 : _b.name
         });
@@ -26961,14 +27151,14 @@ const MoreDrawer = (props) => {
             text: props.strings.peopleButtonLabel,
             iconProps: { iconName: 'MoreDrawerPeople' },
             onItemClick: props.onPeopleButtonClicked,
-            disabled: isDisabled$3(drawerSelectionOptions.peopleButton) || props.disableButtonsForHoldScreen
+            disabled: isDisabled$4(drawerSelectionOptions.peopleButton) || props.disableButtonsForHoldScreen
         });
     }
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.holdButton)) {
         drawerMenuItems.push({
             itemKey: 'holdButtonKey',
-            disabled: props.disableButtonsForHoldScreen || isDisabled$3(drawerSelectionOptions.holdButton),
+            disabled: props.disableButtonsForHoldScreen || isDisabled$4(drawerSelectionOptions.holdButton),
             text: localeStrings.component.strings.holdButton.tooltipOffContent,
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
@@ -26988,7 +27178,7 @@ const MoreDrawer = (props) => {
         const raiseHandIcon = raiseHandButtonProps.checked ? 'LowerHandContextualMenuItem' : 'RaiseHandContextualMenuItem';
         drawerMenuItems.push({
             itemKey: 'raiseHandButtonKey',
-            disabled: props.disableButtonsForHoldScreen || isDisabled$3(drawerSelectionOptions.raiseHandButton),
+            disabled: props.disableButtonsForHoldScreen || isDisabled$4(drawerSelectionOptions.raiseHandButton),
             text: raiseHandButtonProps.checked
                 ? localeStrings.component.strings.raiseHandButton.onLabel
                 : localeStrings.component.strings.raiseHandButton.offLabel,
@@ -28817,7 +29007,7 @@ const CallArrangement = (props) => {
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$3((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled }),
+                            isDisabled$4((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled }),
                     props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
@@ -32274,7 +32464,8 @@ class AzureCommunicationCallAdapter {
         this.stopScreenShare.bind(this);
         /* @conditional-compile-remove(raise-hand) */
         this.raiseHand.bind(this);
-        /* @conditional-compile-remove(raise-hand) */
+        /* @conditional-compile-remove(reaction) */
+        this.onReactionClicked.bind(this);
         this.lowerHand.bind(this);
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
@@ -32598,6 +32789,14 @@ class AzureCommunicationCallAdapter {
             }));
         });
     }
+    /* @conditional-compile-remove(reaction) */
+    onReactionClicked(reaction) {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+                yield this.handlers.onReactionClicked(reaction);
+            }));
+        });
+    }
     /* @conditional-compile-remove(unsupported-browser) */
     allowUnsupportedBrowserVersion() {
         this.context.setAllowedUnsupportedBrowser();
@@ -33402,6 +33601,8 @@ class CallWithChatBackedCallAdapter {
         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.onReactionClicked = (reaction) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.onReactionClicked(reaction); });
         this.removeParticipant = (userId) => __awaiter$4(this, void 0, void 0, function* () {
             let participant = userId;
             /* @conditional-compile-remove(PSTN-calls) */
@@ -34058,7 +34259,7 @@ const checkShowChatButton = (callControls) => {
     return callControls.chatButton !== false;
 };
 const checkChatButtonIsDisabled = (callControls) => {
-    return typeof callControls === 'object' && isDisabled$3(callControls === null || callControls === void 0 ? void 0 : callControls.chatButton);
+    return typeof callControls === 'object' && isDisabled$4(callControls === null || callControls === void 0 ? void 0 : callControls.chatButton);
 };
 const isOnHoldTrampoline = (page) => {
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -34261,6 +34462,8 @@ class AzureCommunicationCallWithChatAdapter {
         this.raiseHand.bind(this);
         /* @conditional-compile-remove(raise-hand) */
         this.lowerHand.bind(this);
+        /* @conditional-compile-remove(reaction) */
+        this.onReactionClicked.bind(this);
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
         this.disposeStreamView.bind(this);
@@ -34459,6 +34662,12 @@ class AzureCommunicationCallWithChatAdapter {
             yield this.callAdapter.lowerHand();
         });
     }
+    /* @conditional-compile-remove(reaction) */
+    onReactionClicked(reaction) {
+        return __awaiter$2(this, void 0, void 0, function* () {
+            yield this.callAdapter.onReactionClicked(reaction);
+        });
+    }
     /** Create a stream view for a remote participants video feed. */
     createStreamView(remoteUserId, options) {
         return __awaiter$2(this, void 0, void 0, function* () {