@azure/communication-react 1.2.3-alpha-202205010016.0 → 1.2.3-alpha-202205050013.0

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

@@ -191,7 +191,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.2.3-alpha-202205010016.0';
+var telemetryVersion = '1.2.3-alpha-202205050013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -387,13 +387,9 @@ const microphoneButtonSelector = reselect__namespace.createSelector([getCallExis
     return {
         disabled: !callExists || !permission,
         checked: callExists ? !isMuted : false,
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
         microphones: deviceManager.microphones,
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
         speakers: deviceManager.speakers,
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
         selectedMicrophone: deviceManager.selectedMicrophone,
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
         selectedSpeaker: deviceManager.selectedSpeaker
     };
 });
@@ -409,9 +405,7 @@ const cameraButtonSelector = reselect__namespace.createSelector([getLocalVideoSt
     return {
         disabled: !deviceManager.selectedCamera || !permission,
         checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
         cameras: deviceManager.cameras,
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
         selectedCamera: deviceManager.selectedCamera
     };
 });
@@ -2180,8 +2174,9 @@ const SendBox = (props) => {
             return;
         }
         // we dont want to send empty messages including spaces, newlines, tabs
-        if (!EMPTY_MESSAGE_REGEX.test(textValue)) {
-            onSendMessage && onSendMessage(textValue);
+        // Message can be empty if there is a valid file upload
+        if (!EMPTY_MESSAGE_REGEX.test(textValue) || hasFile(props)) {
+            onSendMessage && onSendMessage(sanitizeText(textValue));
             setTextValue('');
         }
         (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -2203,9 +2198,10 @@ const SendBox = (props) => {
     const mergedSendButtonStyle = React.useMemo(() => react.mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = React.useMemo(() => react.concatStyleSets(styles), [styles]);
     const hasText = !!textValue;
+    const hasTextOrFile = hasText || hasFile(props);
     const mergedSendIconStyle = React.useMemo(() => react.mergeStyles(sendIconStyle, {
-        color: !!errorMessage || !hasText ? theme.palette.neutralTertiary : theme.palette.themePrimary
-    }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasText, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
+        color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary
+    }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
     const onRenderSendIcon = React.useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React__default['default'].createElement(react.Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     /* @conditional-compile-remove(file-sharing) */
     // Ensure that errors are cleared when there are no files in sendbox
@@ -2264,6 +2260,19 @@ const hasIncompleteFileUploads = (props) => {
     return !!(((_a = props.activeFileUploads) === null || _a === void 0 ? void 0 : _a.length) &&
         !props.activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete));
 };
+const hasFile = (props) => {
+    var _a;
+    /* @conditional-compile-remove(file-sharing) */
+    return !!((_a = props.activeFileUploads) === null || _a === void 0 ? void 0 : _a.find((file) => !file.error));
+};
+const sanitizeText = (message) => {
+    if (EMPTY_MESSAGE_REGEX.test(message)) {
+        return '';
+    }
+    else {
+        return message;
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 /** @private */
@@ -3086,7 +3095,7 @@ const _FileDownloadCards = (props) => {
     }
     return (React__default['default'].createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
         React__default['default'].createElement(_FileCardGroup, null, fileMetadata &&
-            fileMetadata.map((file) => (React__default['default'].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: extension(file.name), actionIcon: showSpinner ? React__default['default'].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'assertive' }) : React__default['default'].createElement(DownloadIconTrampoline, null), actionHandler: () => fileDownloadHandler(userId, file) }))))));
+            fileMetadata.map((file) => (React__default['default'].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? React__default['default'].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'assertive' }) : React__default['default'].createElement(DownloadIconTrampoline, null), actionHandler: () => fileDownloadHandler(userId, file) }))))));
 };
 /**
  * @private
@@ -3871,14 +3880,14 @@ const StreamMedia = (props) => {
 /**
  * @private
  */
-const participantItemContainerStyle = (isMe) => {
+const participantItemContainerStyle = (options) => {
     return {
         paddingTop: '0.25rem',
         paddingBottom: '0.25rem',
         display: 'flex',
         maxWidth: '100%',
         minWidth: '8rem',
-        cursor: isMe ? 'default' : 'pointer',
+        cursor: options.localparticipant || !options.clickable ? 'default' : 'pointer',
         alignItems: 'center'
     };
 };
@@ -3950,14 +3959,14 @@ const ParticipantItem = (props) => {
         setItemHovered(false);
         setMenuHidden(true);
     };
-    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle(me), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             setItemHovered(true);
             setMenuHidden(false);
             onClick === null || onClick === void 0 ? void 0 : onClick(props);
         } },
         React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles({ width: `calc(100% - ${menuButtonContainerStyle.width})`, alignItems: 'center' }) },
             avatar,
-            me && React__default['default'].createElement(react.Stack, { className: meTextStyle }, isMeText),
+            me && React__default['default'].createElement(react.Text, { className: meTextStyle }, isMeText),
             React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(infoContainerStyle) }, onRenderIcon && onRenderIcon(props))),
         menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
             menuButton,
@@ -5496,18 +5505,13 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b, _c, _d;
-    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, 
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-    showCameraSwitcherInLocalPreview, 
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-    localVideoCameraCycleButtonProps } = props;
+    var _a, _b, _c;
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
     const shouldFloatNonDraggableLocalVideo = !!(showCameraSwitcherInLocalPreview && shouldFloatLocalVideo);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
@@ -5541,16 +5545,23 @@ const VideoGallery = (props) => {
         lastVisibleParticipants: visibleAudioParticipants.current,
         maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
     });
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-    const localCameraCycleButton = (localVideoCameraCycleButtonProps) => {
-        const ariaDescription = _formatString(strings.localVideoSelectedDescription, {
-            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-        });
+    const LocalCameraCycleButton = React.useCallback(() => {
+        const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+            _formatString(strings.localVideoSelectedDescription, {
+                cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+            });
         return (React__default['default'].createElement(react.Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
             (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
             (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
             (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React__default['default'].createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: strings.localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
-    };
+    }, [
+        localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras,
+        localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera,
+        localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera,
+        showCameraSwitcherInLocalPreview,
+        strings.localVideoCameraSwitcherLabel,
+        strings.localVideoSelectedDescription
+    ]);
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -5568,18 +5579,20 @@ const VideoGallery = (props) => {
         }
         return (React__default['default'].createElement(react.Stack, { tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React__default['default'].createElement(VideoTile, { key: localParticipant.userId, userId: localParticipant.userId, renderElement: (localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.renderElement) ? (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-                    localCameraCycleButton(localVideoCameraCycleButtonProps),
+                    React__default['default'].createElement(LocalCameraCycleButton, null),
                     React__default['default'].createElement(StreamMedia, { videoStreamElement: localVideoStream.renderElement }))) : undefined, showLabel: !(shouldFloatLocalVideo && isNarrow), displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: localParticipant.displayName, styles: localVideoTileStylesThemed, onRenderPlaceholder: onRenderAvatar, isMuted: localParticipant.isMuted, showMuteIndicator: showMuteIndicator })));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         localParticipant,
-        localParticipant.isScreenSharingOn,
-        localParticipant.videoStream,
-        (_c = localParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
         isNarrow,
         onCreateLocalStreamView,
         onRenderLocalVideoTile,
+        theme.effects.roundedCorner4,
+        styles === null || styles === void 0 ? void 0 : styles.localVideo,
+        strings.localVideoMovementLabel,
+        strings.localVideoLabel,
+        LocalCameraCycleButton,
+        showMuteIndicator,
+        localVideoViewOptions,
         onRenderAvatar,
         shouldFloatLocalVideo
     ]);
@@ -5611,22 +5624,18 @@ const VideoGallery = (props) => {
         gridTiles = videoTiles.length > 0 ? videoTiles : audioTiles;
         horizontalGalleryTiles = videoTiles.length > 0 ? audioTiles : [];
     }
-    if (!shouldFloatLocalVideo &&
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */ !shouldFloatNonDraggableLocalVideo &&
-        localParticipant) {
+    if (!shouldFloatLocalVideo && localParticipant) {
         gridTiles.push(localVideoTile);
     }
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView })));
+    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView })));
     const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
     const layerHostId = reactHooks.useId('layerhost');
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
         shouldFloatLocalVideo &&
-            /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
             !shouldFloatNonDraggableLocalVideo &&
             localParticipant &&
             (horizontalGalleryPresent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: layerHostId }, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoTile))),
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
         // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
         shouldFloatNonDraggableLocalVideo && localParticipant && remoteParticipants.length > 0 && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
                 boxShadow: theme.effects.elevation8,
@@ -6066,7 +6075,7 @@ const defaultLocalVideoViewOptions = {
  * @public
  */
 const CameraButton = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { localVideoViewOptions, onToggleCamera } = props;
     const [waitForCamera, setWaitForCamera] = React.useState(false);
     const localeStrings = useLocale$1().strings.cameraButton;
@@ -6098,22 +6107,9 @@ const CameraButton = (props) => {
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { disabled: props.disabled || waitForCamera, onClick: onToggleCamera ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderCameraOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderCameraOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'cameraButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : generateDefaultDeviceMenuPropsTrampoline$1(props, strings), menuIconProps: ((_e = props.menuIconProps) !== null && _e !== void 0 ? _e : !enableDeviceSelectionMenuTrampoline$1(props)) ? { hidden: true } : undefined, split: (_f = props.split) !== null && _f !== void 0 ? _f : enableDeviceSelectionMenuTrampoline$1(props), "aria-roledescription": enableDeviceSelectionMenuTrampoline$1(props) ? strings.cameraButtonSplitRoleDescription : undefined, splitButtonAriaLabel: enableDeviceSelectionMenuTrampoline$1(props) ? splitButtonAriaString : undefined }))));
-};
-const generateDefaultDeviceMenuPropsTrampoline$1 = (props, strings) => {
-    var _a;
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
-    if (props.enableDeviceSelectionMenu) {
-        return generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuStyles }), strings);
-    }
-    return undefined;
-};
-const enableDeviceSelectionMenuTrampoline$1 = (props) => {
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
-    if (props.enableDeviceSelectionMenu) {
-        return true;
-    }
-    return false;
+        React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { disabled: props.disabled || waitForCamera, onClick: onToggleCamera ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderCameraOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderCameraOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'cameraButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : (props.enableDeviceSelectionMenu
+                ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings)
+                : undefined), menuIconProps: ((_f = props.menuIconProps) !== null && _f !== void 0 ? _f : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_g = props.split) !== null && _g !== void 0 ? _g : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -6244,7 +6240,7 @@ var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments,
  * @public
  */
 const MicrophoneButton = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { onToggleMicrophone } = props;
     const localeStrings = useLocale$1().strings.microphoneButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -6274,22 +6270,9 @@ const MicrophoneButton = (props) => {
     }), [isMicOn, onToggleMicrophone, toggleAnnouncerString]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { onClick: props.onToggleMicrophone ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderMicOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderMicOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'microphoneButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : generateDefaultDeviceMenuPropsTrampoline(props, strings), menuIconProps: ((_e = props.menuIconProps) !== null && _e !== void 0 ? _e : !enableDeviceSelectionMenuTrampoline(props)) ? { hidden: true } : undefined, split: (_f = props.split) !== null && _f !== void 0 ? _f : enableDeviceSelectionMenuTrampoline(props), "aria-roledescription": enableDeviceSelectionMenuTrampoline(props) ? strings.microphoneButtonSplitRoleDescription : undefined, splitButtonAriaLabel: enableDeviceSelectionMenuTrampoline(props) ? splitButtonAriaString : undefined }))));
-};
-const generateDefaultDeviceMenuPropsTrampoline = (props, strings) => {
-    var _a;
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
-    if (props.enableDeviceSelectionMenu) {
-        return generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuStyles }), strings);
-    }
-    return undefined;
-};
-const enableDeviceSelectionMenuTrampoline = (props) => {
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
-    if (props.enableDeviceSelectionMenu) {
-        return true;
-    }
-    return false;
+        React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { onClick: props.onToggleMicrophone ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderMicOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderMicOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'microphoneButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : (props.enableDeviceSelectionMenu
+                ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings)
+                : undefined), menuIconProps: ((_f = props.menuIconProps) !== null && _f !== void 0 ? _f : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_g = props.split) !== null && _g !== void 0 ? _g : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -7573,7 +7556,7 @@ const messageThreadSelector = reselect.createSelector([getUserId, getChatMessage
         // TODO: Add support for topicUpdated system messages in MessageThread component.
         // message.type === ACSKnownMessageType.topicUpdated ||
         message.clientMessageId !== undefined)
-        .filter((message) => message.content && message.content.message !== '') // TODO: deal with deleted message and remove
+        .filter(messagesWithContentOrFileSharingMetadata)
         .map((message) => {
         var _a;
         return memoizedFn((_a = message.id) !== null && _a !== void 0 ? _a : message.clientMessageId, message, userId, message.createdOn <= latestReadTime, isLargeGroup);
@@ -7593,6 +7576,16 @@ const sanitizedMessageContentType = (type) => {
         ? lowerCaseType
         : 'unknown';
 };
+const messagesWithContentOrFileSharingMetadata = (message) => {
+    var _a, _b;
+    if (message.deletedOn) {
+        return false;
+    }
+    if ((_a = message.metadata) === null || _a === void 0 ? void 0 : _a['fileSharingMetadata']) {
+        return true;
+    }
+    return !!(message.content && ((_b = message.content) === null || _b === void 0 ? void 0 : _b.message) !== '');
+};
 
 // Copyright (c) Microsoft Corporation.
 const filterTypingIndicators = (typingIndicators, userId) => {
@@ -10657,7 +10650,8 @@ class ProxyChatThreadClient {
             case 'sendMessage': {
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     // Retry logic?
-                    const { content } = args[0];
+                    const [request, options] = args;
+                    const { content } = request;
                     const clientMessageId = nanoid.nanoid(); // Generate a local short uuid for message
                     const newMessage = {
                         content: { message: content },
@@ -10669,7 +10663,8 @@ class ProxyChatThreadClient {
                         createdOn: new Date(),
                         status: 'sending',
                         senderDisplayName: this._context.getState().displayName,
-                        sender: this._context.getState().userId
+                        sender: this._context.getState().userId,
+                        metadata: options === null || options === void 0 ? void 0 : options.metadata
                     };
                     this._context.setChatMessage(chatThreadClient.threadId, newMessage);
                     let result = undefined;
@@ -10967,9 +10962,7 @@ const coffeeIconStyle = {
  * @public
  */
 const COMPOSITE_ONLY_ICONS = {
-    /* @conditional-compile-remove(call-with-chat-composite) */
     ChevronLeft: React__default['default'].createElement(react.FontIcon, { iconName: "ChevronLeft" }),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     Link: React__default['default'].createElement(react.FontIcon, { iconName: "Link" }),
     LobbyScreenConnectingToCall: React__default['default'].createElement(CoffeeIcon, null),
     LobbyScreenWaitingToBeAdmitted: React__default['default'].createElement(CoffeeIcon, null),
@@ -10977,23 +10970,14 @@ const COMPOSITE_ONLY_ICONS = {
     LocalDeviceSettingsMic: React__default['default'].createElement(reactIcons.MicOn20Filled, null),
     LocalDeviceSettingsSpeaker: React__default['default'].createElement(reactIcons.Speaker220Filled, null),
     LocalPreviewPlaceholder: React__default['default'].createElement(reactIcons.VideoOff20Filled, null),
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
     LocalCameraSwitch: React__default['default'].createElement(reactIcons.CameraSwitch24Regular, null),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     ControlBarChatButtonActive: React__default['default'].createElement(reactIcons.Chat20Filled, null),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     ControlBarChatButtonInactive: React__default['default'].createElement(reactIcons.Chat20Regular, null),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     ControlBarPeopleButton: React__default['default'].createElement(reactIcons.People20Regular, null),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     MoreDrawerMicrophones: React__default['default'].createElement(reactIcons.MicOn20Regular, null),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     MoreDrawerPeople: React__default['default'].createElement(reactIcons.People20Regular, null),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     MoreDrawerSpeakers: React__default['default'].createElement(reactIcons.Speaker220Regular, null),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     MoreDrawerSelectedMicrophone: React__default['default'].createElement(reactIcons.MicOn20Filled, null),
-    /* @conditional-compile-remove(call-with-chat-composite) */
     MoreDrawerSelectedSpeaker: React__default['default'].createElement(reactIcons.Speaker220Filled, null),
     Muted: React__default['default'].createElement(reactIcons.MicOff20Filled, null),
     NetworkReconnectIcon: React__default['default'].createElement(reactIcons.CallMissed20Filled, null),
@@ -12982,9 +12966,7 @@ const concatButtonBaseStyles = (...styles) => {
 const Camera = (props) => {
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, 
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
-        enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection })));
+    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -13131,9 +13113,7 @@ const Microphone = (props) => {
         : {};
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { 
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(control-bar-split-buttons) */
-        enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection })));
+    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -13502,31 +13482,17 @@ const remoteVideoViewOptions$1 = {
  */
 const MediaGallery = (props) => {
     const videoGalleryProps = usePropsFor$1(VideoGallery);
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
     const cameraSwitcherCameras = useSelector$1(localVideoCameraCycleButtonSelector);
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
     const cameraSwitcherCallback = useHandlers();
-    /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
     const cameraSwitcherProps = React.useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
     const remoteParticipants = useRemoteParticipantsWithCustomDisplayNames(videoGalleryProps.remoteParticipants, props.onFetchAvatarPersonaData);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
     const VideoGalleryMemoized = React.useMemo(() => {
-        return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { remoteParticipants: remoteParticipants, localVideoViewOptions: localVideoViewOptions$3, remoteVideoViewOptions: remoteVideoViewOptions$1, styles: VideoGalleryStyles, layout: "floatingLocalVideo", 
-            /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-            showCameraSwitcherInLocalPreview: props.isMobile, 
-            /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-            localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (userId, options) => (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
+        return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { remoteParticipants: remoteParticipants, localVideoViewOptions: localVideoViewOptions$3, remoteVideoViewOptions: remoteVideoViewOptions$1, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (userId, options) => (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
                 React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))) })));
-    }, [
-        videoGalleryProps,
-        props.isMobile,
-        props.onFetchAvatarPersonaData,
-        remoteParticipants,
-        /* @conditional-compile-remove(call-with-chat-composite) @conditional-compile-remove(local-camera-switcher) */
-        cameraSwitcherProps
-    ]);
+    }, [videoGalleryProps, props.isMobile, props.onFetchAvatarPersonaData, remoteParticipants, cameraSwitcherProps]);
     return VideoGalleryMemoized;
 };
 /**
@@ -15858,7 +15824,7 @@ const LocalAndRemotePIP = (props) => {
     const remoteVideoTile = React.useMemo(() => props.dominantRemoteParticipant &&
         createVideoTile(props.dominantRemoteParticipant.displayName, props.dominantRemoteParticipant.videoStream), [props.dominantRemoteParticipant]);
     const locale = useLocale();
-    const ariaLabel = safeGetArialLabel(locale);
+    const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
     const strings = React.useMemo(() => ({
         rootAriaLabel: ariaLabel
     }), [ariaLabel]);
@@ -15868,13 +15834,6 @@ const LocalAndRemotePIP = (props) => {
         // If we are showing the local participant as the primary tile, show nothing for the secondary tile
         secondaryTile: remoteVideoTile ? localVideoTile : undefined }));
 };
-const safeGetArialLabel = (locale) => {
-    // eslint-disable-next-line prefer-const
-    let ariaLabel = '';
-    /* @conditional-compile-remove(call-with-chat-composite) */
-    ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
-    return ariaLabel;
-};
 const localVideoViewOptions = {
     scalingMode: 'Crop',
     isMirrored: true
@@ -16077,17 +16036,13 @@ const PeoplePaneContent = (props) => {
         return (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: peoplePaneContainerStyle, tokens: peoplePaneContainerTokens },
             React__default['default'].createElement(react.Stack.Item, { grow: true, styles: participantListContainerStyles }, participantList),
             inviteLink && (React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
-                React__default['default'].createElement(react.PrimaryButton, { onClick: () => copy__default['default'](inviteLink), styles: copyLinkButtonStylesThemed, onRenderIcon: () => React__default['default'].createElement(LinkIconTrampoline, null), text: strings.copyInviteLinkButtonLabel })))));
+                React__default['default'].createElement(react.PrimaryButton, { onClick: () => copy__default['default'](inviteLink), styles: copyLinkButtonStylesThemed, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), text: strings.copyInviteLinkButtonLabel })))));
     }
     return (React__default['default'].createElement(react.Stack, { tokens: peoplePaneContainerTokens },
         inviteLink && (React__default['default'].createElement(react.Stack, { styles: copyLinkButtonStackStyles },
-            React__default['default'].createElement(react.DefaultButton, { text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React__default['default'].createElement(LinkIconTrampoline, null), onClick: () => copy__default['default'](inviteLink), styles: copyLinkButtonStylesThemed }))),
+            React__default['default'].createElement(react.DefaultButton, { text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), onClick: () => copy__default['default'](inviteLink), styles: copyLinkButtonStylesThemed }))),
         participantList));
 };
-const LinkIconTrampoline = () => {
-    // @conditional-compile-remove(call-with-chat-composite)
-    return React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles });
-};
 /**
  * In a CallWithChat when a participant is removed, we must remove them from both
  * the call and the chat thread.
@@ -16222,14 +16177,10 @@ const TabHeader = (props) => {
     }, [theme, haveMultipleTabs]);
     const strings = useCallWithChatCompositeStrings();
     return (React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
-        React__default['default'].createElement(react.DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: props.onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React__default['default'].createElement(ChevronLeftIconTrampoline, null) }),
+        React__default['default'].createElement(react.DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: props.onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }),
         React__default['default'].createElement(react.Stack.Item, { grow: true }, props.onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: props.onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: props.activeTab === 'chat', role: 'tab' }, strings.chatButtonLabel))),
         React__default['default'].createElement(react.Stack.Item, { grow: true }, props.onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: props.onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: props.activeTab === 'people', role: 'tab' }, strings.peopleButtonLabel))),
-        React__default['default'].createElement(react.DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React__default['default'].createElement(ChevronLeftIconTrampoline, null) })));
-};
-const ChevronLeftIconTrampoline = () => {
-    // @conditional-compile-remove(call-with-chat-composite)
-    return React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" });
+        React__default['default'].createElement(react.DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 
 // Copyright (c) Microsoft Corporation.