@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.0

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.js

@@ -1,8 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
-import { Chat, Text } from '@fluentui/react-northstar';
-import { _formatString } from "../../../../acs-ui-common/src";
+import { Chat, Text } from "../../../../northstar-wrapper/src";
 import React, { useCallback, useRef, useState } from 'react';
 import { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';
 import { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';
@@ -14,19 +13,11 @@ import { chatMessageActionMenuProps } from './ChatMessageActionMenu';
 import { _FileDownloadCards } from '../FileDownloadCards';
 import { useLocale } from '../../localization';
 const generateDefaultTimestamp = (createdOn, showDate, strings) => {
-    const formattedTimestamp = showDate
-        ? formatTimestampForChatMessage(createdOn, new Date(), strings)
-        : formatTimeForChatMessage(createdOn);
+    const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);
     return formattedTimestamp;
 };
 // onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
 const generateCustomizedTimestamp = (props, createdOn, locale) => {
-    /* @conditional-compile-remove(date-time-customization) */
-    return props.onDisplayDateTimeString
-        ? props.onDisplayDateTimeString(createdOn)
-        : locale.onDisplayDateTimeString
-            ? locale.onDisplayDateTimeString(createdOn)
-            : '';
     return '';
 };
 /** @private */
@@ -36,9 +27,7 @@ const MessageBubble = (props) => {
     const theme = useTheme();
     const locale = useLocale();
     const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler } = props;
-    const defaultTimeStamp = message.createdOn
-        ? generateDefaultTimestamp(message.createdOn, showDate, strings)
-        : undefined;
+    const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
     const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';
     const formattedTimestamp = customTimestamp || defaultTimeStamp;
     // Track if the action menu was opened by touch - if so we increase the touch targets for the items
@@ -51,56 +40,44 @@ const MessageBubble = (props) => {
     const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
     const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;
     const [messageReadBy, setMessageReadBy] = useState([]);
-    const actionMenuProps = wasInteractionByTouch
-        ? undefined
-        : chatMessageActionMenuProps({
-            ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
-            enabled: chatActionsEnabled,
-            menuButtonRef: messageActionButtonRef,
-            // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
-            forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,
-            onActionButtonClick: () => {
+    const actionMenuProps = wasInteractionByTouch ? undefined : chatMessageActionMenuProps({
+        ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
+        enabled: chatActionsEnabled,
+        menuButtonRef: messageActionButtonRef,
+        // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
+        forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,
+        onActionButtonClick: () => {
+            if (message.messageType === 'chat') {
                 props.onActionButtonClick(message, setMessageReadBy);
                 setChatMessageActionFlyoutTarget(messageActionButtonRef);
-            },
-            theme
-        });
+            }
+        },
+        theme
+    });
     const onActionFlyoutDismiss = useCallback(() => {
         // When the flyout dismiss is called, since we control if the action flyout is visible
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
-    const defaultOnRenderFileDownloads = useCallback(() => {
-        var _a;
-        return (React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler, 
-            /* @conditional-compile-remove(file-sharing) */
-            strings: { downloadFile: (_a = props.strings.downloadFile) !== null && _a !== void 0 ? _a : locale.strings.messageThread.downloadFile } }));
-    }, [
-        userId,
-        message,
-        /* @conditional-compile-remove(file-sharing) */
-        props,
-        /* @conditional-compile-remove(file-sharing) */
-        locale,
-        fileDownloadHandler
-    ]);
-    const messageContentAriaText = props.message.content
-        ? props.message.mine
-            ? _formatString(strings.messageContentMineAriaText, {
-                message: props.message.content
-            })
-            : _formatString(strings.messageContentAriaText, {
-                author: `${props.message.senderDisplayName}`,
-                message: props.message.content
-            })
-        : undefined;
-    const chatMessage = (React.createElement(React.Fragment, null,
+    const defaultOnRenderFileDownloads = useCallback(() => React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler }), [userId, message, fileDownloadHandler]);
+    const editedOn = 'editedOn' in message ? message.editedOn : undefined;
+    const getMessageDetails = useCallback(() => {
+        if (messageStatus === 'failed') {
+            return React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
+        }
+        else if (message.messageType === 'chat' && editedOn) {
+            return React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag);
+        }
+        return undefined;
+    }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
+    const getContent = useCallback(() => {
+        return React.createElement("div", { tabIndex: 0 },
+            React.createElement(ChatMessageContent, { message: message, strings: strings }),
+            props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads());
+    }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
+    const chatMessage = React.createElement(React.Fragment, null,
         React.createElement("div", { ref: messageRef },
-            React.createElement(Chat.Message, { "data-ui-id": "chat-composite-message", className: mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: React.createElement("div", { tabIndex: 0 },
-                    React.createElement(ChatMessageContent, { message: message, liveAuthorIntro: strings.liveAuthorIntro, messageContentAriaText: messageContentAriaText }),
-                    props.onRenderFileDownloads
-                        ? props.onRenderFileDownloads(userId, message)
-                        : defaultOnRenderFileDownloads()), author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), mine: message.mine, timestamp: React.createElement(Text, { "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: messageStatus === 'failed' ? (React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag)) : message.editedOn ? (React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag)) : undefined, positionActionMenu: false, actionMenu: actionMenuProps, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onBlur: () => setWasInteractionByTouch(false), onClick: () => {
+            React.createElement(Chat.Message, { "data-ui-id": "chat-composite-message", className: mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: getContent(), author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), mine: message.mine, timestamp: React.createElement(Text, { "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), positionActionMenu: false, actionMenu: actionMenuProps, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onBlur: () => setWasInteractionByTouch(false), onClick: () => {
                     if (!wasInteractionByTouch) {
                         return;
                     }
@@ -110,9 +87,11 @@ const MessageBubble = (props) => {
                     // In doing so here we set the target of the flyout to be the message and
                     // not the 3-dot menu button to position the flyout correctly.
                     setChatMessageActionFlyoutTarget(messageRef);
-                    props.onActionButtonClick(message, setMessageReadBy);
+                    if (message.messageType === 'chat') {
+                        props.onActionButtonClick(message, setMessageReadBy);
+                    }
                 } })),
-        chatActionsEnabled && (React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }))));
+        chatActionsEnabled && React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }));
     return chatMessage;
 };
 /** @private */

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAsB,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EACL,yBAAyB,EACzB,oBAAoB,EACpB,yBAAyB,EAC1B,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,kBAAkB,EAAuB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AA4ChE,MAAM,wBAAwB,GAAG,CAC/B,SAAe,EACf,QAA6B,EAC7B,OAA6B,EACrB,EAAE;IACV,MAAM,kBAAkB,GAAG,QAAQ;QACjC,CAAC,CAAC,6BAA6B,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,EAAE,OAAO,CAAC;QAC/D,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAExC,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAEF,mFAAmF;AACnF,MAAM,2BAA2B,GAAG,CAClC,KAA+C,EAC/C,SAAe,EACf,MAAuB,EACf,EAAE;IACV,0DAA0D;IAC1D,OAAO,KAAK,CAAC,uBAAuB;QAClC,CAAC,CAAC,KAAK,CAAC,uBAAuB,CAAC,SAAS,CAAC;QAC1C,CAAC,CAAC,MAAM,CAAC,uBAAuB;YAChC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC,SAAS,CAAC;YAC3C,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AACF,eAAe;AACf,MAAM,aAAa,GAAG,CAAC,KAA+C,EAAe,EAAE;;IACrF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,EACJ,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,EACb,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAW,EACX,uBAAuB,GAAG,CAAC,EAC3B,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACpB,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS;QACxC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC;QAChE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/G,MAAM,kBAAkB,GAAG,eAAe,IAAI,gBAAgB,CAAC;IAE/D,mGAAmG;IACnG,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1E,wFAAwF;IACxF,wDAAwD;IACxD,iEAAiE;IACjE,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,sBAAsB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAEhF,SAAS,CAAC,CAAC;IAEb,MAAM,kBAAkB,GAAG,CAAC,cAAc,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;IAC7F,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwC,EAAE,CAAC,CAAC;IAE9F,MAAM,eAAe,GAAG,qBAAqB;QAC3C,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,0BAA0B,CAAC;YACzB,SAAS,EAAE,MAAA,OAAO,CAAC,qBAAqB,mCAAI,EAAE;YAC9C,OAAO,EAAE,kBAAkB;YAC3B,aAAa,EAAE,sBAAsB;YACrC,kIAAkI;YAClI,SAAS,EAAE,6BAA6B,KAAK,sBAAsB;YACnE,mBAAmB,EAAE,GAAG,EAAE;gBACxB,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;gBACrD,gCAAgC,CAAC,sBAAsB,CAAC,CAAC;YAC3D,CAAC;YACD,KAAK;SACN,CAAC,CAAC;IAEP,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAS,EAAE;QACnD,sFAAsF;QACtF,wFAAwF;QACxF,gCAAgC,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC,CAAC;IAEvC,MAAM,4BAA4B,GAAG,WAAW,CAC9C,GAAG,EAAE;;QAAC,OAAA,CACJ,oBAAC,kBAAkB,IACjB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC,IAAI,EAAE,EACpD,eAAe,EAAE,mBAAmB;YACpC,+CAA+C;YAC/C,OAAO,EAAE,EAAE,YAAY,EAAE,MAAA,KAAK,CAAC,OAAO,CAAC,YAAY,mCAAI,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,GAClG,CACH,CAAA;KAAA,EACD;QACE,MAAM;QACN,OAAO;QACP,+CAA+C;QAC/C,KAAK;QACL,+CAA+C;QAC/C,MAAM;QACN,mBAAmB;KACpB,CACF,CAAC;IAEF,MAAM,sBAAsB,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO;QAClD,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;YAClB,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,0BAA0B,EAAE;gBAChD,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;aAC/B,CAAC;YACJ,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,sBAAsB,EAAE;gBAC5C,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE;gBAC5C,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;aAC/B,CAAC;QACN,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,WAAW,GAAG,CAClB;QACE,6BAAK,GAAG,EAAE,UAAU;YAClB,oBAAC,IAAI,CAAC,OAAO,kBACA,wBAAwB,EACnC,SAAS,EAAE,WAAW,CAAC,qBAA+B,CAAC,EACvD,MAAM,EAAE,qBAAqB,EAC7B,OAAO,EACL,6BAAK,QAAQ,EAAE,CAAC;oBACd,oBAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,sBAAsB,EAAE,sBAAsB,GAC9C;oBACD,KAAK,CAAC,qBAAqB;wBAC1B,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,EAAE,OAAO,CAAC;wBAC9C,CAAC,CAAC,4BAA4B,EAAE,CAC9B,EAER,MAAM,EAAE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,OAAO,CAAC,iBAAiB,CAAQ,EACjF,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAE,oBAAC,IAAI,kBAAa,GAAG,CAAC,gBAAgB,IAAG,kBAAkB,CAAQ,EAC9E,OAAO,EACL,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,6BAAK,SAAS,EAAE,yBAAyB,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,aAAa,CAAO,CAChF,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CACrB,6BAAK,SAAS,EAAE,yBAAyB,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,SAAS,CAAO,CAC5E,CAAC,CAAC,CAAC,SAAS,EAEf,kBAAkB,EAAE,KAAK,EACzB,UAAU,EAAE,eAAe,EAC3B,YAAY,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAClD,aAAa,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAChD,MAAM,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAC7C,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,qBAAqB,EAAE;wBAC1B,OAAO;qBACR;oBACD,oEAAoE;oBACpE,gEAAgE;oBAChE,uCAAuC;oBACvC,yEAAyE;oBACzE,8DAA8D;oBAC9D,gCAAgC,CAAC,UAAU,CAAC,CAAC;oBAC7C,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;gBACvD,CAAC,GACD,CACE;QACL,kBAAkB,IAAI,CACrB,oBAAC,uBAAuB,IACtB,MAAM,EAAE,CAAC,6BAA6B,EACtC,MAAM,EAAE,6BAA6B,EACrC,sBAAsB,EAAE,qBAAqB,EAC7C,SAAS,EAAE,qBAAqB,EAChC,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,QAAQ,EACxC,uBAAuB,EAAE,uBAAuB,EAChD,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CACA,CACJ,CAAC;IAEF,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,mCAAmC,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { Chat, Text, ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport {\n  chatMessageEditedTagStyle,\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle\n} from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\nconst generateDefaultTimestamp = (\n  createdOn: Date,\n  showDate: boolean | undefined,\n  strings: MessageThreadStrings\n): string => {\n  const formattedTimestamp = showDate\n    ? formatTimestampForChatMessage(createdOn, new Date(), strings)\n    : formatTimeForChatMessage(createdOn);\n\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (\n  props: ChatMessageComponentAsMessageBubbleProps,\n  createdOn: Date,\n  locale: ComponentLocale\n): string => {\n  /* @conditional-compile-remove(date-time-customization) */\n  return props.onDisplayDateTimeString\n    ? props.onDisplayDateTimeString(createdOn)\n    : locale.onDisplayDateTimeString\n    ? locale.onDisplayDateTimeString(createdOn)\n    : '';\n\n  return '';\n};\n/** @private */\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const {\n    userId,\n    message,\n    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    fileDownloadHandler\n  } = props;\n\n  const defaultTimeStamp = message.createdOn\n    ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n    : undefined;\n\n  const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n\n  const formattedTimestamp = customTimestamp || defaultTimeStamp;\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n  const actionMenuProps = wasInteractionByTouch\n    ? undefined\n    : chatMessageActionMenuProps({\n        ariaLabel: strings.actionMenuMoreOptions ?? '',\n        enabled: chatActionsEnabled,\n        menuButtonRef: messageActionButtonRef,\n        // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n        forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,\n        onActionButtonClick: () => {\n          props.onActionButtonClick(message, setMessageReadBy);\n          setChatMessageActionFlyoutTarget(messageActionButtonRef);\n        },\n        theme\n      });\n\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n\n  const defaultOnRenderFileDownloads = useCallback(\n    () => (\n      <_FileDownloadCards\n        userId={userId}\n        fileMetadata={message['attachedFilesMetadata'] || []}\n        downloadHandler={fileDownloadHandler}\n        /* @conditional-compile-remove(file-sharing) */\n        strings={{ downloadFile: props.strings.downloadFile ?? locale.strings.messageThread.downloadFile }}\n      />\n    ),\n    [\n      userId,\n      message,\n      /* @conditional-compile-remove(file-sharing) */\n      props,\n      /* @conditional-compile-remove(file-sharing) */\n      locale,\n      fileDownloadHandler\n    ]\n  );\n\n  const messageContentAriaText = props.message.content\n    ? props.message.mine\n      ? _formatString(strings.messageContentMineAriaText, {\n          message: props.message.content\n        })\n      : _formatString(strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: props.message.content\n        })\n    : undefined;\n\n  const chatMessage = (\n    <>\n      <div ref={messageRef}>\n        <Chat.Message\n          data-ui-id=\"chat-composite-message\"\n          className={mergeStyles(messageContainerStyle as IStyle)}\n          styles={messageContainerStyle}\n          content={\n            <div tabIndex={0}>\n              <ChatMessageContent\n                message={message}\n                liveAuthorIntro={strings.liveAuthorIntro}\n                messageContentAriaText={messageContentAriaText}\n              />\n              {props.onRenderFileDownloads\n                ? props.onRenderFileDownloads(userId, message)\n                : defaultOnRenderFileDownloads()}\n            </div>\n          }\n          author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>}\n          mine={message.mine}\n          timestamp={<Text data-ui-id={ids.messageTimestamp}>{formattedTimestamp}</Text>}\n          details={\n            messageStatus === 'failed' ? (\n              <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>\n            ) : message.editedOn ? (\n              <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>\n            ) : undefined\n          }\n          positionActionMenu={false}\n          actionMenu={actionMenuProps}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          onBlur={() => setWasInteractionByTouch(false)}\n          onClick={() => {\n            if (!wasInteractionByTouch) {\n              return;\n            }\n            // If the message was touched via touch we immediately open the menu\n            // flyout (when using mouse the 3-dot menu that appears on hover\n            // must be clicked to open the flyout).\n            // In doing so here we set the target of the flyout to be the message and\n            // not the 3-dot menu button to position the flyout correctly.\n            setChatMessageActionFlyoutTarget(messageRef);\n            props.onActionButtonClick(message, setMessageReadBy);\n          }}\n        />\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\n    </>\n  );\n\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { Chat, Text } from '@internal/northstar-wrapper';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\nconst generateDefaultTimestamp = (createdOn: Date, showDate: boolean | undefined, strings: MessageThreadStrings): string => {\n  const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (props: ChatMessageComponentAsMessageBubbleProps, createdOn: Date, locale: ComponentLocale): string => {\n  return '';\n};\n/** @private */\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n  const {\n    userId,\n    message,\n    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    fileDownloadHandler\n  } = props;\n  const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n  const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n  const formattedTimestamp = customTimestamp || defaultTimeStamp;\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<React.MutableRefObject<HTMLElement | null> | undefined>(undefined);\n  const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;\n  const [messageReadBy, setMessageReadBy] = useState<{\n    id: string;\n    displayName: string;\n  }[]>([]);\n  const actionMenuProps = wasInteractionByTouch ? undefined : chatMessageActionMenuProps({\n    ariaLabel: strings.actionMenuMoreOptions ?? '',\n    enabled: chatActionsEnabled,\n    menuButtonRef: messageActionButtonRef,\n    // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n    forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,\n    onActionButtonClick: () => {\n      if (message.messageType === 'chat') {\n        props.onActionButtonClick(message, setMessageReadBy);\n        setChatMessageActionFlyoutTarget(messageActionButtonRef);\n      }\n    },\n    theme\n  });\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n  const defaultOnRenderFileDownloads = useCallback(() => <_FileDownloadCards userId={userId} fileMetadata={message['attachedFilesMetadata'] || []} downloadHandler={fileDownloadHandler} />, [userId, message, fileDownloadHandler]);\n  const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n  const getMessageDetails = useCallback(() => {\n    if (messageStatus === 'failed') {\n      return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n    } else if (message.messageType === 'chat' && editedOn) {\n      return <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>;\n    }\n    return undefined;\n  }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n  const getContent = useCallback(() => {\n    return <div tabIndex={0}>\n        <ChatMessageContent message={message} strings={strings} />\n        {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n      </div>;\n  }, [defaultOnRenderFileDownloads, message, props, strings, userId]);\n  const chatMessage = <>\n      <div ref={messageRef}>\n        <Chat.Message data-ui-id=\"chat-composite-message\" className={mergeStyles((messageContainerStyle as IStyle))} styles={messageContainerStyle} content={getContent()} author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>} mine={message.mine} timestamp={<Text data-ui-id={ids.messageTimestamp}>{formattedTimestamp}</Text>} details={getMessageDetails()} positionActionMenu={false} actionMenu={actionMenuProps} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} onBlur={() => setWasInteractionByTouch(false)} onClick={() => {\n        if (!wasInteractionByTouch) {\n          return;\n        }\n        // If the message was touched via touch we immediately open the menu\n        // flyout (when using mouse the 3-dot menu that appears on hover\n        // must be clicked to open the flyout).\n        // In doing so here we set the target of the flyout to be the message and\n        // not the 3-dot menu button to position the flyout correctly.\n        setChatMessageActionFlyoutTarget(messageRef);\n        if (message.messageType === 'chat') {\n          props.onActionButtonClick(message, setMessageReadBy);\n        }\n      }} />\n      </div>\n      {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n    </>;\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\"../../../../northstar-wrapper/src\"\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ChatMessage } from '../../types/ChatMessage';
+import { MessageThreadStrings } from '../MessageThread';
 declare type ChatMessageContentProps = {
     message: ChatMessage;
-    liveAuthorIntro: string;
-    messageContentAriaText?: string;
+    strings: MessageThreadStrings;
 };
 /** @private */
 export declare const ChatMessageContent: (props: ChatMessageContentProps) => JSX.Element;

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js

@@ -2,10 +2,11 @@
 // Licensed under the MIT license.
 import React from 'react';
 import { _formatString } from "../../../../acs-ui-common/src";
-import { Parser } from 'html-to-react';
+import { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions } from 'html-to-react';
 import Linkify from 'react-linkify';
-import { LiveMessage } from 'react-aria-live';
 import { Link } from '@fluentui/react';
+import LiveMessage from '../Announcer/LiveMessage';
+import DOMPurify from 'dompurify';
 /** @private */
 export const ChatMessageContent = (props) => {
     switch (props.message.contentType) {
@@ -20,20 +21,18 @@ export const ChatMessageContent = (props) => {
             return React.createElement(React.Fragment, null);
     }
 };
+const MessageContentWithLiveAria = (props) => {
+    return React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
+        React.createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
+        props.content);
+};
 const MessageContentAsRichTextHTML = (props) => {
-    const htmlToReactParser = new Parser();
-    const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.messageContentAriaText },
-        React.createElement(LiveMessage, { message: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, "aria-live": "polite" }),
-        htmlToReactParser.parse(props.message.content)));
+    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) });
 };
 const MessageContentAsText = (props) => {
-    const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.messageContentAriaText },
-        React.createElement(LiveMessage, { message: `${props.message.mine ? '' : liveAuthor} ${props.message.content}`, "aria-live": "polite" }),
-        React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
-                return (React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
-            } }, props.message.content)));
+    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
+                return React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText);
+            } }, props.message.content) });
 };
 // https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
 const extractContent = (s) => {
@@ -41,4 +40,34 @@ const extractContent = (s) => {
     span.innerHTML = s;
     return span.textContent || span.innerText;
 };
+const generateLiveMessage = (props) => {
+    const liveAuthor = _formatString(props.strings.liveAuthorIntro, {
+        author: `${props.message.senderDisplayName}`
+    });
+    return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;
+};
+const messageContentAriaText = (props) => {
+    // Strip all html tags from the content for aria.
+    return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {
+        message: DOMPurify.sanitize(props.message.content, {
+            ALLOWED_TAGS: []
+        })
+    }) : _formatString(props.strings.messageContentAriaText, {
+        author: `${props.message.senderDisplayName}`,
+        message: DOMPurify.sanitize(props.message.content, {
+            ALLOWED_TAGS: []
+        })
+    }) : undefined;
+};
+const processNodeDefinitions = ProcessNodeDefinitions();
+const htmlToReactParser = Parser();
+const processHtmlToReact = (props) => {
+    var _a;
+    const steps = [{
+            // Process everything else in the default way
+            shouldProcessNode: IsValidNodeDefinitions.alwaysValid,
+            processNode: processNodeDefinitions.processDefaultNode
+        }];
+    return htmlToReactParser.parseWithInstructions((_a = props.message.content) !== null && _a !== void 0 ? _a : '', IsValidNodeDefinitions.alwaysValid, steps);
+};
 //# sourceMappingURL=ChatMessageContent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { LiveMessage } from 'react-aria-live';\nimport { Link } from '@fluentui/react';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  liveAuthorIntro: string;\n  messageContentAriaText?: string;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const htmlToReactParser = new Parser();\n  const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.messageContentAriaText}>\n      <LiveMessage\n        message={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n        aria-live=\"polite\"\n      />\n      {htmlToReactParser.parse(props.message.content)}\n    </div>\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.messageContentAriaText}>\n      <LiveMessage message={`${props.message.mine ? '' : liveAuthor} ${props.message.content}`} aria-live=\"polite\" />\n      <Linkify\n        componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n          return (\n            <Link target=\"_blank\" href={decoratedHref} key={key}>\n              {decoratedText}\n            </Link>\n          );\n        }}\n      >\n        {props.message.content}\n      </Linkify>\n    </div>\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>;\n};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n    return <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>;\n  }}>\n          {props.message.content}\n        </Linkify>} />;\n};\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n    author: `${props.message.senderDisplayName}`\n  });\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n    message: DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: []\n    })\n  }) : _formatString(props.strings.messageContentAriaText, {\n    author: `${props.message.senderDisplayName}`,\n    message: DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: []\n    })\n  }) : undefined;\n};\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const steps: ProcessingInstructionType[] = [{\n    // Process everything else in the default way\n    shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n    processNode: processNodeDefinitions.processDefaultNode\n  }];\n  return htmlToReactParser.parseWithInstructions(props.message.content ?? '', IsValidNodeDefinitions.alwaysValid, steps);\n};\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/BannerMessage.js

@@ -7,52 +7,52 @@ export function BannerMessage(props) {
     const { variant, strings } = props;
     switch (variant) {
         case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':
-            return (React.createElement(React.Fragment, null,
+            return React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionStopped),
                 ` ${strings.complianceBannerNowOnlyRecording}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
         case 'RECORDING_STOPPED_STILL_TRANSCRIBING':
-            return (React.createElement(React.Fragment, null,
+            return React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingStopped),
                 ` ${strings.complianceBannerNowOnlyTranscription}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
         case 'RECORDING_AND_TRANSCRIPTION_STOPPED':
-            return (React.createElement(React.Fragment, null,
+            return React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingAndTranscriptionSaved),
                 ` ${strings.complianceBannerRecordingAndTranscriptionStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore })));
+                React.createElement(LearnMore, { linkText: strings.learnMore }));
         case 'RECORDING_AND_TRANSCRIPTION_STARTED':
-            return (React.createElement(React.Fragment, null,
+            return React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingAndTranscriptionStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
         case 'TRANSCRIPTION_STARTED':
-            return (React.createElement(React.Fragment, null,
+            return React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
         case 'RECORDING_STOPPED':
-            return (React.createElement(React.Fragment, null,
+            return React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingSaving),
                 ` ${strings.complianceBannerRecordingStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore })));
+                React.createElement(LearnMore, { linkText: strings.learnMore }));
         case 'RECORDING_STARTED':
-            return (React.createElement(React.Fragment, null,
+            return React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerRecordingStarted),
                 ` ${strings.complianceBannerTranscriptionConsent}`,
-                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy })));
+                React.createElement(PrivacyPolicy, { linkText: strings.privacyPolicy }));
         case 'TRANSCRIPTION_STOPPED':
-            return (React.createElement(React.Fragment, null,
+            return React.createElement(React.Fragment, null,
                 React.createElement("b", null, strings.complianceBannerTranscriptionSaving),
                 ` ${strings.complianceBannerTranscriptionStopped}`,
-                React.createElement(LearnMore, { linkText: strings.learnMore })));
+                React.createElement(LearnMore, { linkText: strings.learnMore }));
     }
     return React.createElement(React.Fragment, null);
 }
 function PrivacyPolicy(props) {
-    return (React.createElement(Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText));
+    return React.createElement(Link, { href: "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule", target: "_blank", underline: true }, props.linkText);
 }
 function LearnMore(props) {
-    return (React.createElement(Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText));
+    return React.createElement(Link, { href: "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24", target: "_blank", underline: true }, props.linkText);
 }
 //# sourceMappingURL=BannerMessage.js.map

package/dist/dist-esm/react-components/src/components/ComplianceBanner/BannerMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerMessage.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/BannerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAe;AACf,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACnC,QAAQ,OAAO,EAAE;QACf,KAAK,uCAAuC;YAC1C,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,sCAAsC;YACzC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,qCAAqC;YACxC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,8CAA8C,CAAK;gBAC9D,IAAI,OAAO,CAAC,gDAAgD,EAAE;gBAC/D,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CACJ,CAAC;QACJ,KAAK,qCAAqC;YACxC,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gDAAgD,CAAK;gBAChE,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,uBAAuB;YAC1B,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,mBAAmB;YACtB,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,+BAA+B,CAAK;gBAC/C,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CACJ,CAAC;QACJ,KAAK,mBAAmB;YACtB,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CACJ,CAAC;QACJ,KAAK,uBAAuB;YAC1B,OAAO,CACL;gBACE,+BAAI,OAAO,CAAC,mCAAmC,CAAK;gBACnD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CACJ,CAAC;KACL;IACD,OAAO,yCAAK,CAAC;AACf,CAAC;AAED,SAAS,aAAa,CAAC,KAA2B;IAChD,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAC,2EAA2E,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAC7G,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAA2B;IAC5C,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,EAAC,qGAAqG,EAC1G,MAAM,EAAC,QAAQ,EACf,SAAS,UAER,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Link } from '@fluentui/react';\nimport React from 'react';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\n/** @private */\nexport function BannerMessage(props: {\n  variant: ComplianceBannerVariant;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const { variant, strings } = props;\n  switch (variant) {\n    case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionStopped}</b>\n          {` ${strings.complianceBannerNowOnlyRecording}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_STOPPED_STILL_TRANSCRIBING':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingStopped}</b>\n          {` ${strings.complianceBannerNowOnlyTranscription}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_AND_TRANSCRIPTION_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionSaved}</b>\n          {` ${strings.complianceBannerRecordingAndTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n    case 'RECORDING_AND_TRANSCRIPTION_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'TRANSCRIPTION_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'RECORDING_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingSaving}</b>\n          {` ${strings.complianceBannerRecordingStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n    case 'RECORDING_STARTED':\n      return (\n        <>\n          <b>{strings.complianceBannerRecordingStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>\n      );\n    case 'TRANSCRIPTION_STOPPED':\n      return (\n        <>\n          <b>{strings.complianceBannerTranscriptionSaving}</b>\n          {` ${strings.complianceBannerTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>\n      );\n  }\n  return <></>;\n}\n\nfunction PrivacyPolicy(props: { linkText: string }): JSX.Element {\n  return (\n    <Link href=\"https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule\" target=\"_blank\" underline>\n      {props.linkText}\n    </Link>\n  );\n}\n\nfunction LearnMore(props: { linkText: string }): JSX.Element {\n  return (\n    <Link\n      href=\"https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24\"\n      target=\"_blank\"\n      underline\n    >\n      {props.linkText}\n    </Link>\n  );\n}\n"]}
+{"version":3,"file":"BannerMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/BannerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAe;AACf,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EACJ,OAAO,EACP,OAAO,EACR,GAAG,KAAK,CAAC;IACV,QAAQ,OAAO,EAAE;QACf,KAAK,uCAAuC;YAC1C,OAAO;gBACH,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,sCAAsC;YACzC,OAAO;gBACH,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,qCAAqC;YACxC,OAAO;gBACH,+BAAI,OAAO,CAAC,8CAA8C,CAAK;gBAC9D,IAAI,OAAO,CAAC,gDAAgD,EAAE;gBAC/D,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;QACR,KAAK,qCAAqC;YACxC,OAAO;gBACH,+BAAI,OAAO,CAAC,gDAAgD,CAAK;gBAChE,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,uBAAuB;YAC1B,OAAO;gBACH,+BAAI,OAAO,CAAC,oCAAoC,CAAK;gBACpD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,mBAAmB;YACtB,OAAO;gBACH,+BAAI,OAAO,CAAC,+BAA+B,CAAK;gBAC/C,IAAI,OAAO,CAAC,gCAAgC,EAAE;gBAC/C,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;QACR,KAAK,mBAAmB;YACtB,OAAO;gBACH,+BAAI,OAAO,CAAC,gCAAgC,CAAK;gBAChD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,aAAa,IAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,GAAI,CACjD,CAAC;QACR,KAAK,uBAAuB;YAC1B,OAAO;gBACH,+BAAI,OAAO,CAAC,mCAAmC,CAAK;gBACnD,IAAI,OAAO,CAAC,oCAAoC,EAAE;gBACnD,oBAAC,SAAS,IAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAI,CACzC,CAAC;KACT;IACD,OAAO,yCAAK,CAAC;AACf,CAAC;AACD,SAAS,aAAa,CAAC,KAEtB;IACC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,2EAA2E,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAClH,KAAK,CAAC,QAAQ,CACV,CAAC;AACZ,CAAC;AACD,SAAS,SAAS,CAAC,KAElB;IACC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,qGAAqG,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,UAC5I,KAAK,CAAC,QAAQ,CACV,CAAC;AACZ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Link } from '@fluentui/react';\nimport React from 'react';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\n/** @private */\nexport function BannerMessage(props: {\n  variant: ComplianceBannerVariant;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const {\n    variant,\n    strings\n  } = props;\n  switch (variant) {\n    case 'TRANSCRIPTION_STOPPED_STILL_RECORDING':\n      return <>\n          <b>{strings.complianceBannerTranscriptionStopped}</b>\n          {` ${strings.complianceBannerNowOnlyRecording}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'RECORDING_STOPPED_STILL_TRANSCRIBING':\n      return <>\n          <b>{strings.complianceBannerRecordingStopped}</b>\n          {` ${strings.complianceBannerNowOnlyTranscription}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'RECORDING_AND_TRANSCRIPTION_STOPPED':\n      return <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionSaved}</b>\n          {` ${strings.complianceBannerRecordingAndTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>;\n    case 'RECORDING_AND_TRANSCRIPTION_STARTED':\n      return <>\n          <b>{strings.complianceBannerRecordingAndTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'TRANSCRIPTION_STARTED':\n      return <>\n          <b>{strings.complianceBannerTranscriptionStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'RECORDING_STOPPED':\n      return <>\n          <b>{strings.complianceBannerRecordingSaving}</b>\n          {` ${strings.complianceBannerRecordingStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>;\n    case 'RECORDING_STARTED':\n      return <>\n          <b>{strings.complianceBannerRecordingStarted}</b>\n          {` ${strings.complianceBannerTranscriptionConsent}`}\n          <PrivacyPolicy linkText={strings.privacyPolicy} />\n        </>;\n    case 'TRANSCRIPTION_STOPPED':\n      return <>\n          <b>{strings.complianceBannerTranscriptionSaving}</b>\n          {` ${strings.complianceBannerTranscriptionStopped}`}\n          <LearnMore linkText={strings.learnMore} />\n        </>;\n  }\n  return <></>;\n}\nfunction PrivacyPolicy(props: {\n  linkText: string;\n}): JSX.Element {\n  return <Link href=\"https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule\" target=\"_blank\" underline>\n      {props.linkText}\n    </Link>;\n}\nfunction LearnMore(props: {\n  linkText: string;\n}): JSX.Element {\n  return <Link href=\"https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24\" target=\"_blank\" underline>\n      {props.linkText}\n    </Link>;\n}"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/ComplianceBanner.js

@@ -26,8 +26,7 @@ export const _ComplianceBanner = (props) => {
     });
     // 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;
+    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) {
@@ -43,14 +42,12 @@ export const _ComplianceBanner = (props) => {
     // [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') {
+    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.createElement(DelayedUpdateBanner, { variant: {
+    return React.createElement(DelayedUpdateBanner, { variant: {
             variant,
             lastUpdated: cachedProps.current.lastUpdated
         }, strings: props.strings, onDismiss: () => {
@@ -60,7 +57,7 @@ export const _ComplianceBanner = (props) => {
             if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
                 cachedProps.current.latestStringState.callTranscribeState = 'off';
             }
-        } }));
+        } });
 };
 function determineStates(previous, current) {
     // if current state is on, then return on

package/dist/dist-esm/react-components/src/components/ComplianceBanner/ComplianceBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComplianceBanner.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/ComplianceBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useRef } from 'react';\nimport { ComplianceState, computeVariant } from './Utils';\nimport { _ComplianceBannerProps } from './types';\nimport { DelayedUpdateBanner } from './DelayedUpdateBanner';\n\n// latestBooleanState so we can compare with props.callRecordState and props.callTranscribeState easily\n// latestStringState is on, off, stopped state generated by function determineStates using previous and current state values, this is used for computeVariants later\ntype CachedComplianceBannerProps = {\n  latestBooleanState: {\n    callTranscribeState?: boolean;\n    callRecordState?: boolean;\n  };\n  latestStringState: {\n    callTranscribeState: ComplianceState;\n    callRecordState: ComplianceState;\n  };\n  // Timestamp for the last time cached state was updated.\n  // Represented as milliseconds since epoch (i.e., the value returned by Date.now()).\n  lastUpdated: number;\n};\n\n/**\n * A component that displays banners to notify the user when call recording and\n * transcription is enabled or disabled in a call.\n *\n * This component implements a state machine that tracks the changes to call\n * recording and transcription state and shows the corresponding message.\n *\n * @internal\n */\nexport const _ComplianceBanner = (props: _ComplianceBannerProps): JSX.Element => {\n  const cachedProps = useRef<CachedComplianceBannerProps>({\n    latestBooleanState: {\n      callTranscribeState: false,\n      callRecordState: false\n    },\n    latestStringState: {\n      callTranscribeState: 'off',\n      callRecordState: 'off'\n    },\n    lastUpdated: Date.now()\n  });\n\n  // Only update cached props and variant if there is _some_ change in the latest props.\n  // This ensures that state machine is only updated if there is an actual change in the props.\n  const shouldUpdateCached =\n    props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||\n    props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;\n\n  // The following three operations must be performed in this exact order:\n\n  // [1]: Update cached state to transition the state machine.\n  if (shouldUpdateCached) {\n    cachedProps.current = {\n      latestBooleanState: props,\n      latestStringState: {\n        callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),\n        callTranscribeState: determineStates(\n          cachedProps.current.latestStringState.callTranscribeState,\n          props.callTranscribeState\n        )\n      },\n      lastUpdated: Date.now()\n    };\n  }\n\n  // [2]: Compute the variant, using the transitioned state machine.\n  const variant = computeVariant(\n    cachedProps.current.latestStringState.callRecordState,\n    cachedProps.current.latestStringState.callTranscribeState\n  );\n\n  // [3]: Transition the state machine again to deal with some end-states.\n  if (\n    shouldUpdateCached &&\n    cachedProps.current.latestStringState.callRecordState === 'stopped' &&\n    cachedProps.current.latestStringState.callTranscribeState === 'stopped'\n  ) {\n    // When both states are stopped, after displaying message \"RECORDING_AND_TRANSCRIPTION_STOPPED\", change both states to off (going back to the default state).\n    cachedProps.current.latestStringState.callRecordState = 'off';\n    cachedProps.current.latestStringState.callTranscribeState = 'off';\n  }\n\n  return (\n    <DelayedUpdateBanner\n      variant={{\n        variant,\n        lastUpdated: cachedProps.current.lastUpdated\n      }}\n      strings={props.strings}\n      onDismiss={() => {\n        if (cachedProps.current.latestStringState.callRecordState === 'stopped') {\n          cachedProps.current.latestStringState.callRecordState = 'off';\n        }\n        if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n          cachedProps.current.latestStringState.callTranscribeState = 'off';\n        }\n      }}\n    />\n  );\n};\n\nfunction determineStates(previous: ComplianceState, current: boolean | undefined): ComplianceState {\n  // if current state is on, then return on\n  if (current) {\n    return 'on';\n  }\n  // if current state is off\n  else {\n    // if previous state is on and current state is off, return stopped (on -> off)\n    if (previous === 'on') {\n      return 'stopped';\n    }\n    // otherwise remain previous state unchanged\n    else {\n      return previous;\n    }\n  }\n}\n"]}
+{"version":3,"file":"ComplianceBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/ComplianceBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useRef } from 'react';\nimport { ComplianceState, computeVariant } from './Utils';\nimport { _ComplianceBannerProps } from './types';\nimport { DelayedUpdateBanner } from './DelayedUpdateBanner';\n\n// latestBooleanState so we can compare with props.callRecordState and props.callTranscribeState easily\n// latestStringState is on, off, stopped state generated by function determineStates using previous and current state values, this is used for computeVariants later\ntype CachedComplianceBannerProps = {\n  latestBooleanState: {\n    callTranscribeState?: boolean;\n    callRecordState?: boolean;\n  };\n  latestStringState: {\n    callTranscribeState: ComplianceState;\n    callRecordState: ComplianceState;\n  };\n  // Timestamp for the last time cached state was updated.\n  // Represented as milliseconds since epoch (i.e., the value returned by Date.now()).\n  lastUpdated: number;\n};\n\n/**\n * A component that displays banners to notify the user when call recording and\n * transcription is enabled or disabled in a call.\n *\n * This component implements a state machine that tracks the changes to call\n * recording and transcription state and shows the corresponding message.\n *\n * @internal\n */\nexport const _ComplianceBanner = (props: _ComplianceBannerProps): JSX.Element => {\n  const cachedProps = useRef<CachedComplianceBannerProps>({\n    latestBooleanState: {\n      callTranscribeState: false,\n      callRecordState: false\n    },\n    latestStringState: {\n      callTranscribeState: 'off',\n      callRecordState: 'off'\n    },\n    lastUpdated: Date.now()\n  });\n\n  // Only update cached props and variant if there is _some_ change in the latest props.\n  // This ensures that state machine is only updated if there is an actual change in the props.\n  const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState || props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;\n\n  // The following three operations must be performed in this exact order:\n\n  // [1]: Update cached state to transition the state machine.\n  if (shouldUpdateCached) {\n    cachedProps.current = {\n      latestBooleanState: props,\n      latestStringState: {\n        callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),\n        callTranscribeState: determineStates(cachedProps.current.latestStringState.callTranscribeState, props.callTranscribeState)\n      },\n      lastUpdated: Date.now()\n    };\n  }\n\n  // [2]: Compute the variant, using the transitioned state machine.\n  const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);\n\n  // [3]: Transition the state machine again to deal with some end-states.\n  if (shouldUpdateCached && cachedProps.current.latestStringState.callRecordState === 'stopped' && cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n    // When both states are stopped, after displaying message \"RECORDING_AND_TRANSCRIPTION_STOPPED\", change both states to off (going back to the default state).\n    cachedProps.current.latestStringState.callRecordState = 'off';\n    cachedProps.current.latestStringState.callTranscribeState = 'off';\n  }\n  return <DelayedUpdateBanner variant={{\n    variant,\n    lastUpdated: cachedProps.current.lastUpdated\n  }} strings={props.strings} onDismiss={() => {\n    if (cachedProps.current.latestStringState.callRecordState === 'stopped') {\n      cachedProps.current.latestStringState.callRecordState = 'off';\n    }\n    if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {\n      cachedProps.current.latestStringState.callTranscribeState = 'off';\n    }\n  }} />;\n};\nfunction determineStates(previous: ComplianceState, current: boolean | undefined): ComplianceState {\n  // if current state is on, then return on\n  if (current) {\n    return 'on';\n  }\n  // if current state is off\n  else {\n    // if previous state is on and current state is off, return stopped (on -> off)\n    if (previous === 'on') {\n      return 'stopped';\n    }\n    // otherwise remain previous state unchanged\n    else {\n      return previous;\n    }\n  }\n}"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.js

@@ -53,7 +53,7 @@ export function DelayedUpdateBanner(props) {
     if (visible.variant === 'NO_STATE') {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
+    return React.createElement(MessageBar, { messageBarType: 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({
@@ -62,6 +62,6 @@ export function DelayedUpdateBanner(props) {
             });
             props.onDismiss();
         }, dismissButtonAriaLabel: props.strings.close },
-        React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings })));
+        React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings }));
 }
 //# sourceMappingURL=DelayedUpdateBanner.js.map

package/dist/dist-esm/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/DelayedUpdateBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;IAEnE,0DAA0D;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,OAAO;QACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAE/E,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE;QAC3E,gCAAgC;QAChC,4DAA4D;QAC5D,IAAI,mBAAmB,CAAC,OAAO,EAAE;YAC/B,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;SAC3C;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,MAAM,gBAAgB,GAAG,yBAAyB,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QACjF,IAAI,OAAO,KAAK,UAAU,IAAI,gBAAgB,IAAI,CAAC,EAAE;YACnD,UAAU,CAAC;gBACT,OAAO;gBACP,WAAW,EAAE,GAAG;aACjB,CAAC,CAAC;SACJ;aAAM;YACL,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mFAAmF;gBACnF,oDAAoD;gBACpD,UAAU,CAAC;oBACT,OAAO;oBACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;iBACxB,CAAC,CAAC;YACL,CAAC,EAAE,gBAAgB,CAAC,CAAC;SACtB;KACF;IAED,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE;QAClC,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,UAAU,IACT,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,SAAS,EAAE,GAAG,EAAE;YACd,4FAA4F;YAC5F,4DAA4D;YAC5D,UAAU,CAAC;gBACT,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,CAAC,EACD,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAE3C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { BannerMessage } from './BannerMessage';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\nconst BANNER_OVERWRITE_DELAY_MS = 3000;\n\n/** @private */\nexport interface TimestampedVariant {\n  variant: ComplianceBannerVariant;\n  // Milliseconds since epoch (i.e., return value of Date.now()).\n  lastUpdated: number;\n}\n\n/**\n * Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.\n *\n * This component delays and combines frequent updates to `variant` such that:\n * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.\n * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.\n *\n * This ensures that there is enough time for the user to see a banner message before it is overwritten.\n * In case of multiple delayed messages, the user always sees the final message as it reflects the final state\n * of recording and transcription.\n *\n * @private\n */\nexport function DelayedUpdateBanner(props: {\n  variant: TimestampedVariant;\n  onDismiss: () => void;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const { variant, lastUpdated: variantLastUpdated } = props.variant;\n\n  // Tracks the variant that is currently visible in the UI.\n  const [visible, setVisible] = useState<TimestampedVariant>({\n    variant,\n    lastUpdated: Date.now()\n  });\n  const pendingUpdateHandle = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {\n    // Always clear pending updates.\n    // We'll either update now, or schedule an update for later.\n    if (pendingUpdateHandle.current) {\n      clearTimeout(pendingUpdateHandle.current);\n    }\n\n    const now = Date.now();\n    const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);\n    if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {\n      setVisible({\n        variant,\n        lastUpdated: now\n      });\n    } else {\n      pendingUpdateHandle.current = setTimeout(() => {\n        // Set the actual update time, not the computed time when the update should happen.\n        // The actual update might be later than we planned.\n        setVisible({\n          variant,\n          lastUpdated: Date.now()\n        });\n      }, timeToNextUpdate);\n    }\n  }\n\n  if (visible.variant === 'NO_STATE') {\n    return <></>;\n  }\n\n  return (\n    <MessageBar\n      messageBarType={MessageBarType.warning}\n      onDismiss={() => {\n        // when closing the banner, change variant to nostate and change stopped state to off state.\n        // Reason: on banner close, going back to the default state.\n        setVisible({\n          variant: 'NO_STATE',\n          lastUpdated: Date.now()\n        });\n        props.onDismiss();\n      }}\n      dismissButtonAriaLabel={props.strings.close}\n    >\n      <BannerMessage variant={visible.variant} strings={props.strings} />\n    </MessageBar>\n  );\n}\n"]}
+{"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EACJ,OAAO,EACP,WAAW,EAAE,kBAAkB,EAChC,GAAG,KAAK,CAAC,OAAO,CAAC;IAElB,0DAA0D;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,OAAO;QACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAC/E,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE;QAC3E,gCAAgC;QAChC,4DAA4D;QAC5D,IAAI,mBAAmB,CAAC,OAAO,EAAE;YAC/B,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;SAC3C;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,MAAM,gBAAgB,GAAG,yBAAyB,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QACjF,IAAI,OAAO,KAAK,UAAU,IAAI,gBAAgB,IAAI,CAAC,EAAE;YACnD,UAAU,CAAC;gBACT,OAAO;gBACP,WAAW,EAAE,GAAG;aACjB,CAAC,CAAC;SACJ;aAAM;YACL,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mFAAmF;gBACnF,oDAAoD;gBACpD,UAAU,CAAC;oBACT,OAAO;oBACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;iBACxB,CAAC,CAAC;YACL,CAAC,EAAE,gBAAgB,CAAC,CAAC;SACtB;KACF;IACD,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE;QAClC,OAAO,yCAAK,CAAC;KACd;IACD,OAAO,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;YACzE,4FAA4F;YAC5F,4DAA4D;YAC5D,UAAU,CAAC;gBACT,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,CAAC,EAAE,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CAAC;AAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { BannerMessage } from './BannerMessage';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\nconst BANNER_OVERWRITE_DELAY_MS = 3000;\n\n/** @private */\nexport interface TimestampedVariant {\n  variant: ComplianceBannerVariant;\n  // Milliseconds since epoch (i.e., return value of Date.now()).\n  lastUpdated: number;\n}\n\n/**\n * Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.\n *\n * This component delays and combines frequent updates to `variant` such that:\n * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.\n * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.\n *\n * This ensures that there is enough time for the user to see a banner message before it is overwritten.\n * In case of multiple delayed messages, the user always sees the final message as it reflects the final state\n * of recording and transcription.\n *\n * @private\n */\nexport function DelayedUpdateBanner(props: {\n  variant: TimestampedVariant;\n  onDismiss: () => void;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const {\n    variant,\n    lastUpdated: variantLastUpdated\n  } = props.variant;\n\n  // Tracks the variant that is currently visible in the UI.\n  const [visible, setVisible] = useState<TimestampedVariant>({\n    variant,\n    lastUpdated: Date.now()\n  });\n  const pendingUpdateHandle = useRef<ReturnType<typeof setTimeout> | null>(null);\n  if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {\n    // Always clear pending updates.\n    // We'll either update now, or schedule an update for later.\n    if (pendingUpdateHandle.current) {\n      clearTimeout(pendingUpdateHandle.current);\n    }\n    const now = Date.now();\n    const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);\n    if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {\n      setVisible({\n        variant,\n        lastUpdated: now\n      });\n    } else {\n      pendingUpdateHandle.current = setTimeout(() => {\n        // Set the actual update time, not the computed time when the update should happen.\n        // The actual update might be later than we planned.\n        setVisible({\n          variant,\n          lastUpdated: Date.now()\n        });\n      }, timeToNextUpdate);\n    }\n  }\n  if (visible.variant === 'NO_STATE') {\n    return <></>;\n  }\n  return <MessageBar messageBarType={MessageBarType.warning} onDismiss={() => {\n    // when closing the banner, change variant to nostate and change stopped state to off state.\n    // Reason: on banner close, going back to the default state.\n    setVisible({\n      variant: 'NO_STATE',\n      lastUpdated: Date.now()\n    });\n    props.onDismiss();\n  }} dismissButtonAriaLabel={props.strings.close}>\n      <BannerMessage variant={visible.variant} strings={props.strings} />\n    </MessageBar>;\n}"]}