@azure/communication-react 1.2.3-alpha-202205120015.0 → 1.2.3-alpha-202205170014.0

package/dist/communication-react.d.ts

@@ -2303,7 +2303,9 @@ export declare interface ChatAdapterThreadManagement {
     /**
      * Update a message content.
      */
-    updateMessage(messageId: string, content: string, metadata?: Record<string, string>): Promise<void>;
+    updateMessage(messageId: string, content: string, metadata?: Record<string, string>, options?: {
+        attachedFilesMetadata?: FileMetadata[];
+    }): Promise<void>;
     /**
      * Delete a message in the thread.
      */
@@ -2584,7 +2586,9 @@ export declare type ChatHandlers = {
     onRemoveParticipant: (userId: string) => Promise<void>;
     updateThreadTopicName: (topicName: string) => Promise<void>;
     onLoadPreviousChatMessages: (messagesToLoad: number) => Promise<boolean>;
-    onUpdateMessage: (messageId: string, content: string, metadata?: Record<string, string>) => Promise<void>;
+    onUpdateMessage: (messageId: string, content: string, metadata?: Record<string, string>, options?: {
+        attachedFilesMetadata?: FileMetadata[];
+    }) => Promise<void>;
     onDeleteMessage: (messageId: string) => Promise<void>;
 };
 
@@ -4605,9 +4609,8 @@ export declare type MessageProps = {
      *
      * @param messageId - message id from chatClient
      * @param content - new content of the message
-     *
      */
-    onUpdateMessage?: (messageId: string, content: string) => Promise<void>;
+    onUpdateMessage?: UpdateMessageCallback;
     /**
      * Optional callback to delete a message.
      *
@@ -4846,7 +4849,7 @@ export declare type MessageThreadProps = {
      * @param content - new content of the message
      *
      */
-    onUpdateMessage?: (messageId: string, content: string) => Promise<void>;
+    onUpdateMessage?: UpdateMessageCallback;
     /**
      * Optional callback to delete a message.
      *
@@ -6280,6 +6283,14 @@ export declare interface TypingIndicatorStylesProps extends BaseCustomStyles {
     typingString?: IStyle;
 }
 
+/**
+ * @public
+ * Callback function run when a message is updated.
+ */
+export declare type UpdateMessageCallback = (messageId: string, content: string, metadata?: Record<string, string>, options?: {
+    attachedFilesMetadata?: FileMetadata[];
+}) => Promise<void>;
+
 /**
  * A custom React hook to simplify the creation of {@link CallAdapter}.
  *

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-202205120015.0';
+var telemetryVersion = '1.2.3-alpha-202205170014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -2580,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;
@@ -2599,37 +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,
             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;
@@ -3218,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);
@@ -6755,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.
 /**
@@ -7164,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);
@@ -11488,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);
             }));
         });
     }
@@ -12785,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.
@@ -13232,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 */
@@ -13489,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))),
@@ -13817,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,
@@ -14373,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' }));