@azure/communication-react 1.2.3-alpha-202205110014.0 → 1.2.3-alpha-202205140015.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-202205110014.0';
+var telemetryVersion = '1.2.3-alpha-202205140015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1539,9 +1539,9 @@ const defaultSendBoxActiveBorderThicknessREM = 0.125;
  * @private
  */
 const borderAndBoxShadowStyle = (props) => {
-    const { theme, errorColor, hasErrorMessage, disabled } = props;
-    const borderColor = hasErrorMessage ? errorColor : theme.palette.neutralSecondary;
-    const borderColorActive = hasErrorMessage ? errorColor : theme.palette.themePrimary;
+    const { theme, hasErrorMessage, disabled } = props;
+    const borderColor = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.neutralSecondary;
+    const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;
     const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;
     const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;
     return {
@@ -1594,6 +1594,9 @@ const lightTheme = {
         callRedDark: '#8b2c3d',
         callRedDarker: '#772a38',
         iconWhite: '#ffffff'
+    },
+    semanticColors: {
+        errorText: '#a80000'
     }
 };
 /**
@@ -1631,6 +1634,9 @@ const darkTheme = {
         callRedDark: '#a42e43',
         callRedDarker: '#8b2c3d',
         iconWhite: '#ffffff'
+    },
+    semanticColors: {
+        errorText: '#f1707b'
     }
 };
 
@@ -1822,31 +1828,26 @@ const textContainerStyle = {
 /**
  * @private
  */
-const textFieldStyle = (errorColor) => {
-    return {
-        root: {
-            width: '100%',
-            minHeight: '0',
-            fontSize: '8.25rem'
-        },
-        wrapper: {},
-        fieldGroup: {
-            outline: 'none',
-            border: 'none',
-            height: 'auto',
-            minHeight: '0',
-            /**
-             * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.
-             */
-            ':after': { border: 'none' }
-        },
-        field: {
-            borderRadius: '0.25rem'
-        },
-        errorMessage: {
-            color: errorColor
-        }
-    };
+const textFieldStyle = {
+    root: {
+        width: '100%',
+        minHeight: '0',
+        fontSize: '8.25rem'
+    },
+    wrapper: {},
+    fieldGroup: {
+        outline: 'none',
+        border: 'none',
+        height: 'auto',
+        minHeight: '0',
+        /**
+         * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.
+         */
+        ':after': { border: 'none' }
+    },
+    field: {
+        borderRadius: '0.25rem'
+    }
 };
 /**
  * @private
@@ -1919,11 +1920,10 @@ const getPerceptualBrightnessOfHexColor = (hexColor) => {
  */
 const InputBoxComponent = (props) => {
     const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
-    const theme = useTheme();
     const mergedRootStyle = react.mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     const mergedTextFiledStyle = react.mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
     const mergedTextContainerStyle = react.mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
-    const mergedTextFieldStyle = react.concatStyleSets(textFieldStyle(isDarkThemed(theme) ? '#f1707b' : '#a80000'), {
+    const mergedTextFieldStyle = react.concatStyleSets(textFieldStyle, {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
         errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage
     });
@@ -2233,7 +2233,6 @@ const SendBox = (props) => {
         React__default['default'].createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
                 theme,
-                errorColor: isDarkThemed(theme) ? '#f1707b' : '#a80000',
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             })) },
@@ -2581,9 +2580,10 @@ const onRenderSubmitIcon = (color) => {
 const ChatMessageComponentAsEditBox = (props) => {
     const { onCancel, onSubmit, strings, message } = props;
     const [textValue, setTextValue] = React.useState(message.content || '');
+    const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default['default'].useState(getMessageAttachedFilesMetadata(message));
     const editTextFieldRef = React__default['default'].useRef(null);
     const theme = useTheme();
-    const messageState = getMessageState(textValue);
+    const messageState = getMessageState(textValue, attachedFilesMetadata !== null && attachedFilesMetadata !== void 0 ? attachedFilesMetadata : []);
     const submitEnabled = messageState === 'OK';
     React.useEffect(() => {
         var _a;
@@ -2600,38 +2600,47 @@ const ChatMessageComponentAsEditBox = (props) => {
     const editBoxStyles = React.useMemo(() => {
         return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
     }, [theme.palette.themePrimary]);
-    /* @conditional-compile-remove(file-sharing) */
     const onRenderFileUploads = React.useCallback(() => {
-        var _a;
-        return (React__default['default'].createElement("div", { style: { margin: '0.25rem' } },
-            React__default['default'].createElement(_FileUploadCards, { activeFileUploads: (_a = message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map((file) => ({
+        return ((attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && (React__default['default'].createElement("div", { style: { margin: '0.25rem' } },
+            React__default['default'].createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map((file) => ({
                     id: file.name,
                     filename: file.name,
                     progress: 1
-                })) })));
-    }, [message.attachedFilesMetadata]);
+                })), onCancelFileUpload: (fileId) => {
+                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
+                } }))));
+    }, [attachedFilesMetadata]);
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
             theme,
-            errorColor: isDarkThemed(theme) ? '#f1707b' : '#a80000',
             hasErrorMessage: false,
             disabled: false
         })) },
         React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
-                submitEnabled && onSubmit(textValue);
+                submitEnabled &&
+                    onSubmit(textValue, message.metadata, {
+                        attachedFilesMetadata
+                    });
             }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
             React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
                     onCancel && onCancel();
                 }, id: 'dismissIconWrapper' }),
             React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
-                    submitEnabled && onSubmit(textValue);
+                    submitEnabled &&
+                        onSubmit(textValue, message.metadata, {
+                            attachedFilesMetadata
+                        });
                     e.stopPropagation();
                 }, id: 'submitIconWrapper' })),
-        /* @conditional-compile-remove(file-sharing) */
         onRenderFileUploads()));
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
-const isMessageEmpty = (messageText) => messageText.trim().length === 0;
-const getMessageState = (messageText) => isMessageEmpty(messageText) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
+const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
+const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
+// @TODO: Remove when file-sharing feature becomes stable.
+const getMessageAttachedFilesMetadata = (message) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return message.attachedFilesMetadata;
+};
 
 // Copyright (c) Microsoft Corporation.
 const MINIMUM_TOUCH_TARGET_HEIGHT_REM$1 = 3;
@@ -2679,7 +2688,7 @@ const chatMessageEditedTagStyle = (theme) => react.mergeStyles({ fontWeight: rea
 /**
  * @private
  */
-const chatMessageFailedTagStyle = (theme) => react.mergeStyles({ fontWeight: react.FontWeights.light, color: isDarkThemed(theme) ? '#f1707b' : '#a80000' });
+const chatMessageFailedTagStyle = (theme) => react.mergeStyles({ fontWeight: react.FontWeights.light, color: theme.semanticColors.errorText });
 /**
  * @private
  */
@@ -3220,10 +3229,10 @@ const ChatMessageComponent = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     else if (isEditing) {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text) => __awaiter$o(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$o(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
-                    (yield props.onUpdateMessage(props.message.messageId, text));
+                    (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
                 setIsEditing(false);
             }), onCancel: () => {
                 setIsEditing(false);
@@ -4329,6 +4338,8 @@ const VideoTile = (props) => {
  * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
  * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
+ *
+ * @private
  */
 const RemoteVideoTile = React__default['default'].memo((props) => {
     const { isAvailable, isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
@@ -4805,25 +4816,6 @@ const LoadingSpinner = (props) => {
         React__default['default'].createElement(react.Spinner, { label: props.loadingMessage, size: react.SpinnerSize.xSmall, "aria-live": 'assertive' })));
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * local video tile camera cycle button - for use on mobile screens only.
- * @internal
- */
-const LocalVideoCameraCycleButton = (props) => {
-    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
-    const theme = react.useTheme();
-    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
-            if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
-                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
-                const newCamera = cameras[(index + 1) % cameras.length];
-                if (onSelectCamera !== undefined) {
-                    onSelectCamera(newCamera);
-                }
-            }
-        } }));
-};
-
 // Copyright (c) Microsoft Corporation.
 const animationDuration = react.AnimationVariables.durationValue2;
 const ZERO = { x: 0, y: 0 };
@@ -5496,6 +5488,84 @@ const _ModalClone = react.styled(ModalBase, getStyles, undefined, {
 });
 _ModalClone.displayName = 'Modal';
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * local video tile camera cycle button - for use on mobile screens only.
+ * @internal
+ */
+const LocalVideoCameraCycleButton = (props) => {
+    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
+    const theme = react.useTheme();
+    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
+            if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
+                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
+                const newCamera = cameras[(index + 1) % cameras.length];
+                if (onSelectCamera !== undefined) {
+                    onSelectCamera(newCamera);
+                }
+            }
+        } }));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A memoized version of VideoTile for rendering local participant.
+ *
+ * @private
+ */
+const LocalVideoTile = React__default['default'].memo((props) => {
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    React.useEffect(() => {
+        if (isAvailable && !renderElement) {
+            onCreateLocalStreamView === null || onCreateLocalStreamView === void 0 ? void 0 : onCreateLocalStreamView(localVideoViewOptions);
+        }
+        // Always clean up element to make tile up to date and be able to dispose correctly
+        return () => {
+            if (renderElement) {
+                onDisposeLocalStreamView === null || onDisposeLocalStreamView === void 0 ? void 0 : onDisposeLocalStreamView();
+            }
+        };
+    }, [isAvailable, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement]);
+    // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView
+    // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.
+    // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed
+    React.useEffect(() => {
+        return () => {
+            onDisposeLocalStreamView === null || onDisposeLocalStreamView === void 0 ? void 0 : onDisposeLocalStreamView();
+        };
+    }, [onDisposeLocalStreamView]);
+    const renderVideoStreamElement = React.useMemo(() => {
+        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
+        // implies that, after their threshold, all streams have no child (blank video)
+        if (!renderElement || !renderElement.childElementCount) {
+            // Returning `undefined` results in the placeholder with avatar being shown
+            return undefined;
+        }
+        return (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
+            React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement })));
+    }, [
+        localVideoCameraCycleButtonProps,
+        localVideoCameraSwitcherLabel,
+        localVideoSelectedDescription,
+        renderElement,
+        showCameraSwitcherInLocalPreview
+    ]);
+    return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator }));
+});
+const FloatingLocalCameraCycleButton = (props) => {
+    const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+        localVideoSelectedDescription &&
+        _formatString(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: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Currently the Calling JS SDK supports up to 4 remote video streams
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
@@ -5520,7 +5590,7 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
  */
 const VideoGallery = (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 { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, 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;
@@ -5559,56 +5629,37 @@ const VideoGallery = (props) => {
         lastVisibleParticipants: visibleAudioParticipants.current,
         maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
     });
-    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.
      */
     const localVideoTile = React.useMemo(() => {
-        const localVideoStream = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream;
+        var _a, _b;
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
-        const localVideoTileStyles = shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {};
-        const localVideoTileStylesThemed = react.concatStyleSets(localVideoTileStyles, {
+        const localVideoTileStyles = react.concatStyleSets(shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {}, {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
-        if (localVideoStream && !localVideoStream.renderElement) {
-            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOptions);
-        }
         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,
-                    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 })));
+            React__default['default'].createElement(LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: localParticipant.displayName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
     }, [
-        localParticipant,
         isNarrow,
+        localParticipant,
+        localVideoCameraCycleButtonProps,
+        localVideoViewOptions,
         onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        onRenderAvatar,
         onRenderLocalVideoTile,
-        theme.effects.roundedCorner4,
-        styles === null || styles === void 0 ? void 0 : styles.localVideo,
-        strings.localVideoMovementLabel,
-        strings.localVideoLabel,
-        LocalCameraCycleButton,
+        shouldFloatLocalVideo,
+        showCameraSwitcherInLocalPreview,
         showMuteIndicator,
-        localVideoViewOptions,
-        onRenderAvatar,
-        shouldFloatLocalVideo
+        strings.localVideoCameraSwitcherLabel,
+        strings.localVideoLabel,
+        strings.localVideoMovementLabel,
+        strings.localVideoSelectedDescription,
+        styles === null || styles === void 0 ? void 0 : styles.localVideo,
+        theme.effects.roundedCorner4
     ]);
     const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
@@ -6715,6 +6766,240 @@ const _DrawerMenu = (props) => {
                 } })))))));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Return different conditions based on the current and previous state of recording and transcribing
+ *
+ * @param callRecordState - The current call record state: on, off, stopped
+ * @param callTranscribeState - The current call transcribe state: on, off, stopped
+ *
+ * @remarks - The stopped state means: previously on but currently off
+ *
+ * @private
+ */
+const computeVariant = (callRecordState, callTranscribeState) => {
+    if (callRecordState === 'on' && callTranscribeState === 'on') {
+        return 'RECORDING_AND_TRANSCRIPTION_STARTED';
+    }
+    else if (callRecordState === 'on' && callTranscribeState === 'off') {
+        return 'RECORDING_STARTED';
+    }
+    else if (callRecordState === 'off' && callTranscribeState === 'on') {
+        return 'TRANSCRIPTION_STARTED';
+    }
+    else if (callRecordState === 'on' && callTranscribeState === 'stopped') {
+        return 'TRANSCRIPTION_STOPPED_STILL_RECORDING';
+    }
+    else if (callRecordState === 'stopped' && callTranscribeState === 'on') {
+        return 'RECORDING_STOPPED_STILL_TRANSCRIBING';
+    }
+    else if (callRecordState === 'off' && callTranscribeState === 'stopped') {
+        return 'TRANSCRIPTION_STOPPED';
+    }
+    else if (callRecordState === 'stopped' && callTranscribeState === 'off') {
+        return 'RECORDING_STOPPED';
+    }
+    else if (callRecordState === 'stopped' && callTranscribeState === 'stopped') {
+        return 'RECORDING_AND_TRANSCRIPTION_STOPPED';
+    }
+    else {
+        return 'NO_STATE';
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+const BANNER_OVERWRITE_DELAY_MS = 3000;
+/**
+ * A component that displays banners to notify the user when call recording and
+ * transcription is enabled or disabled in a call.
+ *
+ * This component implements a state machine that tracks the changes to call
+ * recording and transcription state and shows the corresponding message.
+ *
+ * @internal
+ */
+const _ComplianceBanner = (props) => {
+    const cachedProps = React.useRef({
+        latestBooleanState: {
+            callTranscribeState: false,
+            callRecordState: false
+        },
+        latestStringState: {
+            callTranscribeState: 'off',
+            callRecordState: 'off'
+        },
+        lastUpdated: Date.now()
+    });
+    // Only update cached props and variant if there is _some_ change in the latest props.
+    // This ensures that state machine is only updated if there is an actual change in the props.
+    const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||
+        props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;
+    // The following three operations must be performed in this exact order:
+    // [1]: Update cached state to transition the state machine.
+    if (shouldUpdateCached) {
+        cachedProps.current = {
+            latestBooleanState: props,
+            latestStringState: {
+                callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),
+                callTranscribeState: determineStates(cachedProps.current.latestStringState.callTranscribeState, props.callTranscribeState)
+            },
+            lastUpdated: Date.now()
+        };
+    }
+    // [2]: Compute the variant, using the transitioned state machine.
+    const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);
+    // [3]: Transition the state machine again to deal with some end-states.
+    if (shouldUpdateCached &&
+        cachedProps.current.latestStringState.callRecordState === 'stopped' &&
+        cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
+        // When both states are stopped, after displaying message "RECORDING_AND_TRANSCRIPTION_STOPPED", change both states to off (going back to the default state).
+        cachedProps.current.latestStringState.callRecordState = 'off';
+        cachedProps.current.latestStringState.callTranscribeState = 'off';
+    }
+    return (React__default['default'].createElement(DelayedUpdateBanner, { variant: {
+            variant,
+            lastUpdated: cachedProps.current.lastUpdated
+        }, strings: props.strings, onDismiss: () => {
+            if (cachedProps.current.latestStringState.callRecordState === 'stopped') {
+                cachedProps.current.latestStringState.callRecordState = 'off';
+            }
+            if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
+                cachedProps.current.latestStringState.callTranscribeState = 'off';
+            }
+        } }));
+};
+function determineStates(previous, current) {
+    // if current state is on, then return on
+    if (current) {
+        return 'on';
+    }
+    // if current state is off
+    else {
+        // if previous state is on and current state is off, return stopped (on -> off)
+        if (previous === 'on') {
+            return 'stopped';
+        }
+        // otherwise remain previous state unchanged
+        else {
+            return previous;
+        }
+    }
+}
+/**
+ * Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.
+ *
+ * This component delays and combines frequent updates to `variant` such that:
+ * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.
+ * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.
+ *
+ * This ensures that there is enough time for the user to see a banner message before it is overwritten.
+ * In case of multiple delayed messages, the user always sees the final message as it reflects the final state
+ * of recording and transcription.
+ *
+ * @private
+ */
+function DelayedUpdateBanner(props) {
+    const { variant, lastUpdated: variantLastUpdated } = props.variant;
+    // Tracks the variant that is currently visible in the UI.
+    const [visible, setVisible] = React.useState({
+        variant,
+        lastUpdated: Date.now()
+    });
+    const pendingUpdateHandle = React.useRef(null);
+    if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {
+        // Always clear pending updates.
+        // We'll either update now, or schedule an update for later.
+        if (pendingUpdateHandle.current) {
+            clearTimeout(pendingUpdateHandle.current);
+            pendingUpdateHandle.current = null;
+        }
+        const now = Date.now();
+        const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);
+        if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {
+            setVisible({
+                variant,
+                lastUpdated: now
+            });
+        }
+        else {
+            pendingUpdateHandle.current = setTimeout(() => {
+                // Set the actual update time, not the computed time when the update should happen.
+                // The actual update might be later than we planned.
+                setVisible({
+                    variant,
+                    lastUpdated: Date.now()
+                });
+            }, timeToNextUpdate);
+        }
+    }
+    if (visible.variant === 'NO_STATE') {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    return (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning, onDismiss: () => {
+            // when closing the banner, change variant to nostate and change stopped state to off state.
+            // Reason: on banner close, going back to the default state.
+            setVisible({
+                variant: 'NO_STATE',
+                lastUpdated: Date.now()
+            });
+            props.onDismiss();
+        }, dismissButtonAriaLabel: props.strings.close },
+        React__default['default'].createElement(BannerMessage, { variant: visible.variant, strings: props.strings })));
+}
+function BannerMessage(props) {
+    const { variant, strings } = props;
+    switch (variant) {
+        case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionStopped),
+                ` ${strings.complianceBannerNowOnlyRecording}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'RECORDING_STOPPED_STILL_TRANSCRIBING':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingStopped),
+                ` ${strings.complianceBannerNowOnlyTranscription}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'RECORDING_AND_TRANSCRIPTION_STOPPED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingAndTranscriptionSaved),
+                ` ${strings.complianceBannerRecordingAndTranscriptionStopped}`,
+                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
+        case 'RECORDING_AND_TRANSCRIPTION_STARTED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingAndTranscriptionStarted),
+                ` ${strings.complianceBannerTranscriptionConsent}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'TRANSCRIPTION_STARTED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionStarted),
+                ` ${strings.complianceBannerTranscriptionConsent}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'RECORDING_STOPPED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingSaving),
+                ` ${strings.complianceBannerRecordingStopped}`,
+                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
+        case 'RECORDING_STARTED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerRecordingStarted),
+                ` ${strings.complianceBannerTranscriptionConsent}`,
+                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+        case 'TRANSCRIPTION_STOPPED':
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement("b", null, strings.complianceBannerTranscriptionSaving),
+                ` ${strings.complianceBannerTranscriptionStopped}`,
+                React__default['default'].createElement(LearnMore, { linkText: strings.learnMore })));
+    }
+    return React__default['default'].createElement(React__default['default'].Fragment, null);
+}
+function PrivacyPolicy(props) {
+    return (React__default['default'].createElement(react.Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText));
+}
+function LearnMore(props) {
+    return (React__default['default'].createElement(react.Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText));
+}
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -7124,8 +7409,10 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, metadata) => __awaiter$k(void 0, void 0, void 0, function* () {
-            yield chatThreadClient.updateMessage(messageId, { content, metadata });
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$k(void 0, void 0, void 0, function* () {
+            const updatedMetadata = metadata ? Object.assign({}, metadata) : {};
+            updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
+            yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
         onDeleteMessage: (messageId) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
@@ -11448,10 +11735,11 @@ class AzureCommunicationChatAdapter {
             }));
         });
     }
-    updateMessage(messageId, content, metadata) {
+    updateMessage(messageId, content, metadata, options) {
         return __awaiter$9(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
-                return yield this.handlers.onUpdateMessage(messageId, content, metadata);
+                /* @conditional-compile-remove(file-sharing) */
+                return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
@@ -12745,45 +13033,6 @@ const getCallCompositePage = (call, previousCall) => {
     // No call state - show starting page (configuration)
     return 'configuration';
 };
-/**
- * Return different conditions based on the current and previous state of recording and transcribing
- *
- * @param callRecordState - The current call record state: on, off, stopped
- * @param callTranscribeState - The current call transcribe state: on, off, stopped
- *
- * @remarks - The stopped state means: previously on but currently off
- *
- * @private
- */
-const computeVariant = (callRecordState, callTranscribeState) => {
-    if (callRecordState === 'on' && callTranscribeState === 'on') {
-        return 'RECORDING_AND_TRANSCRIPTION_STARTED';
-    }
-    else if (callRecordState === 'on' && callTranscribeState === 'off') {
-        return 'RECORDING_STARTED';
-    }
-    else if (callRecordState === 'off' && callTranscribeState === 'on') {
-        return 'TRANSCRIPTION_STARTED';
-    }
-    else if (callRecordState === 'on' && callTranscribeState === 'stopped') {
-        return 'TRANSCRIPTION_STOPPED_STILL_RECORDING';
-    }
-    else if (callRecordState === 'stopped' && callTranscribeState === 'on') {
-        return 'RECORDING_STOPPED_STILL_TRANSCRIBING';
-    }
-    else if (callRecordState === 'off' && callTranscribeState === 'stopped') {
-        return 'TRANSCRIPTION_STOPPED';
-    }
-    else if (callRecordState === 'stopped' && callTranscribeState === 'off') {
-        return 'RECORDING_STOPPED';
-    }
-    else if (callRecordState === 'stopped' && callTranscribeState === 'stopped') {
-        return 'RECORDING_AND_TRANSCRIPTION_STOPPED';
-    }
-    else {
-        return 'NO_STATE';
-    }
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -13192,128 +13441,6 @@ const onFetchCustomButtonPropsTrampoline = (options) => {
     return response;
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const ComplianceBanner = (props) => {
-    function determineStates(previous, current) {
-        // if current state is on, then return on
-        if (current) {
-            return 'on';
-        }
-        // if current state is off
-        else {
-            // if previous state is on and current state is off, return stopped (on -> off)
-            if (previous === 'on') {
-                return 'stopped';
-            }
-            // otherwise remain previous state unchanged
-            else {
-                return previous;
-            }
-        }
-    }
-    //set variant when incoming state is different from current state
-    //when variant change, return message bar
-    //when message bar is dismissed,set variant to default nostate and if current state is stopped, set to off
-    const strings = useLocale().strings;
-    const [variant, setVariant] = React.useState('NO_STATE');
-    const cachedProps = React.useRef({
-        latestBooleanState: {
-            callTranscribeState: false,
-            callRecordState: false
-        },
-        latestStringState: {
-            callTranscribeState: 'off',
-            callRecordState: 'off'
-        }
-    });
-    // Only update cached props and variant if there is _some_ change in the latest props.
-    // This ensures that state machine is only updated if there is an actual change in the props.
-    if (props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||
-        props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState) {
-        cachedProps.current = {
-            latestBooleanState: props,
-            latestStringState: {
-                callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),
-                callTranscribeState: determineStates(cachedProps.current.latestStringState.callTranscribeState, props.callTranscribeState)
-            }
-        };
-        setVariant(computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState));
-        // when both states are stopped, after displaying message "RECORDING_AND_TRANSCRIPTION_STOPPED", change both states to off (going back to the default state)
-        if (cachedProps.current.latestStringState.callRecordState === 'stopped' &&
-            cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
-            cachedProps.current.latestStringState.callRecordState = 'off';
-            cachedProps.current.latestStringState.callTranscribeState = 'off';
-        }
-    }
-    return variant === 'NO_STATE' ? (React__default['default'].createElement(React__default['default'].Fragment, null)) : (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning, onDismiss: () => {
-            // when closing the banner, change variant to nostate and change stopped state to off state.
-            // Reason: on banner close, going back to the default state
-            setVariant('NO_STATE');
-            if (cachedProps.current.latestStringState.callRecordState === 'stopped') {
-                cachedProps.current.latestStringState.callRecordState = 'off';
-            }
-            if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
-                cachedProps.current.latestStringState.callTranscribeState = 'off';
-            }
-        }, dismissButtonAriaLabel: strings.call.close },
-        React__default['default'].createElement(BannerMessage, { variant: variant, strings: strings })));
-};
-function BannerMessage(props) {
-    const { variant, strings } = props;
-    switch (variant) {
-        case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.call.complianceBannerTranscriptionStopped),
-                ` ${strings.call.complianceBannerNowOnlyRecording}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.call.privacyPolicy })));
-        case 'RECORDING_STOPPED_STILL_TRANSCRIBING':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.call.complianceBannerRecordingStopped),
-                ` ${strings.call.complianceBannerNowOnlyTranscription}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.call.privacyPolicy })));
-        case 'RECORDING_AND_TRANSCRIPTION_STOPPED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.call.complianceBannerRecordingAndTranscriptionSaved),
-                ` ${strings.call.complianceBannerRecordingAndTranscriptionStopped}`,
-                React__default['default'].createElement(LearnMore, { linkText: strings.call.learnMore })));
-        case 'RECORDING_AND_TRANSCRIPTION_STARTED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.call.complianceBannerRecordingAndTranscriptionStarted),
-                ` ${strings.call.complianceBannerTranscriptionConsent}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.call.privacyPolicy })));
-        case 'TRANSCRIPTION_STARTED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.call.complianceBannerTranscriptionStarted),
-                ` ${strings.call.complianceBannerTranscriptionConsent}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.call.privacyPolicy })));
-        case 'RECORDING_STOPPED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.call.complianceBannerRecordingSaving),
-                ` ${strings.call.complianceBannerRecordingStopped}`,
-                React__default['default'].createElement(LearnMore, { linkText: strings.call.learnMore })));
-        case 'RECORDING_STARTED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.call.complianceBannerRecordingStarted),
-                ` ${strings.call.complianceBannerTranscriptionConsent}`,
-                React__default['default'].createElement(PrivacyPolicy, { linkText: strings.call.privacyPolicy })));
-        case 'TRANSCRIPTION_STOPPED':
-            return (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement("b", null, strings.call.complianceBannerTranscriptionSaving),
-                ` ${strings.call.complianceBannerTranscriptionStopped}`,
-                React__default['default'].createElement(LearnMore, { linkText: strings.call.learnMore })));
-    }
-    return React__default['default'].createElement(React__default['default'].Fragment, null);
-}
-function PrivacyPolicy(props) {
-    return (React__default['default'].createElement(react.Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText));
-}
-function LearnMore(props) {
-    return (React__default['default'].createElement(react.Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText));
-}
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /** @private */
@@ -13449,7 +13576,7 @@ const CallArrangement = (props) => {
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React__default['default'].createElement(react.Stack.Item, { styles: notificationsContainerStyles },
                 React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
-                    React__default['default'].createElement(ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
+                    React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
                 props.errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                     React__default['default'].createElement(ErrorBar, Object.assign({}, props.errorBarProps)))),
                 !!props.mutedNotificationProps && React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
@@ -13777,9 +13904,10 @@ const CallPage = (props) => {
     const errorBarProps = usePropsFor$1(ErrorBar);
     const mutedNotificationProps = useSelector$1(mutedNotificationSelector);
     const networkReconnectTileProps = useSelector$1(networkReconnectTileSelector);
+    const strings = useLocale().strings.call;
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
-    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: Object.assign({}, complianceBannerProps), errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && Object.assign({}, errorBarProps), mutedNotificationProps: mutedNotificationProps, callControlProps: {
+    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && Object.assign({}, errorBarProps), mutedNotificationProps: mutedNotificationProps, callControlProps: {
             callInvitationURL: callInvitationURL,
             onFetchParticipantMenuItems: onFetchParticipantMenuItems,
             options: callControlOptions,
@@ -14333,7 +14461,7 @@ const LobbyPage = (props) => {
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
         : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
     callControlOptions = disableLobbyPageControls(callControlOptions);
-    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: {}, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
+    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
         }, mobileView: props.mobileView, onRenderGalleryContent: () => React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby) })), dataUiId: 'lobby-page' }));
@@ -16307,7 +16435,7 @@ const CallWithChatScreen = (props) => {
         setActivePane('none');
     }, [setActivePane]);
     /** Constant setting of id for the parent stack of the composite */
-    const compositeParentDivId = 'callWithChatCompositeParentDiv-internal';
+    const compositeParentDivId = reactHooks.useId('callWithChatCompositeParentDiv-internal');
     const toggleChat = React.useCallback(() => {
         if (activePane === 'chat') {
             setActivePane('none');