@azure/communication-react 1.18.0-alpha-202407120014 → 1.18.0-alpha-202407152209

package/dist/dist-cjs/communication-react/{index-DQgWBNc2.js → index-BV60xvzw.js}

@@ -176,7 +176,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.18.0-alpha-202407120014';
+var telemetryVersion = '1.18.0-alpha-202407152209';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -416,7 +416,7 @@ const Constants = {
  */
 const chatStatefulLogger = logger.createClientLogger('communication-react:chat-stateful');
 
-var __awaiter$V = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$W = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -458,7 +458,7 @@ class ResourceDownloadQueue {
         this._messagesNeedingResourceRetrieval.push(copy);
     }
     startQueue(threadId, operation, options) {
-        return __awaiter$V(this, void 0, void 0, function* () {
+        return __awaiter$W(this, void 0, void 0, function* () {
             if (this.isActive) {
                 return;
             }
@@ -494,7 +494,7 @@ class ResourceDownloadQueue {
         }
     }
     downloadSingleUrl(message, resourceUrl, operation) {
-        return __awaiter$V(this, void 0, void 0, function* () {
+        return __awaiter$W(this, void 0, void 0, function* () {
             const response = { sourceUrl: '' };
             try {
                 const abortController = new AbortController();
@@ -510,7 +510,7 @@ class ResourceDownloadQueue {
         });
     }
     downloadAllPreviewUrls(message, operation) {
-        return __awaiter$V(this, void 0, void 0, function* () {
+        return __awaiter$W(this, void 0, void 0, function* () {
             var _a;
             const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
             if (message.type === 'html' && attachments) {
@@ -537,7 +537,7 @@ class ResourceDownloadQueue {
         });
     }
     downloadResource(operation, url, abortController) {
-        return __awaiter$V(this, void 0, void 0, function* () {
+        return __awaiter$W(this, void 0, void 0, function* () {
             this._requestsToCancel[url] = { src: url, abortController };
             const blobUrl = yield operation(url, { credential: this._credential, endpoint: this._endpoint }, { abortController });
             delete this._requestsToCancel[url];
@@ -548,9 +548,9 @@ class ResourceDownloadQueue {
 /**
  * @private
  */
-const fetchImageSource = (src, authentication, options) => __awaiter$V(void 0, void 0, void 0, function* () {
+const fetchImageSource = (src, authentication, options) => __awaiter$W(void 0, void 0, void 0, function* () {
     function fetchWithAuthentication(url, token, options) {
-        return __awaiter$V(this, void 0, void 0, function* () {
+        return __awaiter$W(this, void 0, void 0, function* () {
             const headers = new Headers();
             headers.append('Authorization', `Bearer ${token}`);
             return yield fetchWithTimeout(url, {
@@ -561,7 +561,7 @@ const fetchImageSource = (src, authentication, options) => __awaiter$V(void 0, v
         });
     }
     function fetchWithTimeout(resource, options) {
-        return __awaiter$V(this, void 0, void 0, function* () {
+        return __awaiter$W(this, void 0, void 0, function* () {
             // default timeout is 30 seconds
             const { timeout = 30000, abortController } = options;
             const id = setTimeout(() => {
@@ -588,7 +588,7 @@ const fetchImageSource = (src, authentication, options) => __awaiter$V(void 0, v
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$U = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$V = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -664,7 +664,7 @@ let ChatContext$1 = class ChatContext {
         // Any item in queue should be removed.
     }
     downloadResourceToCache(threadId, messageId, resourceUrl) {
-        return __awaiter$U(this, void 0, void 0, function* () {
+        return __awaiter$V(this, void 0, void 0, function* () {
             var _a;
             let message = (_a = this.getState().threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
             if (message && this._fullsizeImageQueue) {
@@ -943,7 +943,7 @@ let ChatContext$1 = class ChatContext {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$U(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$V(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -1050,7 +1050,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$T = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$U = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1140,7 +1140,7 @@ class EventSubscriber {
         };
         // This is a temporary fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK.
         // Without the temporary fix, there are missing 'participant joined' and 'participant left' system messages in the chat thread.
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$T(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$U(this, void 0, void 0, function* () {
             var _a, e_1, _b, _c;
             try {
                 for (var _d = true, _e = __asyncValues$1(this.chatClient
@@ -1234,7 +1234,7 @@ class EventSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$S = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$T = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1256,7 +1256,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$S(this, void 0, void 0, function* () {
+                return __awaiter$T(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -1271,7 +1271,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$S(this, void 0, void 0, function* () {
+                        return __awaiter$T(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -1358,7 +1358,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$R = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$S = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1377,14 +1377,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     const message = yield chatThreadClient.getMessage(...args);
                     this._context.setChatMessage(chatThreadClient.threadId, convertChatMessage(message));
                     return message;
                 }), 'ChatThreadClient.getMessage');
             }
             case 'sendMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     var _a;
                     // Retry logic?
                     const [request, options] = args;
@@ -1425,7 +1425,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -1434,7 +1434,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     // DeleteMessage is able to either delete local one(for failed message) or synced message
                     const [messageId] = args;
                     if (this._context.deleteLocalMessage(chatThreadClient.threadId, messageId)) {
@@ -1452,12 +1452,12 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'sendTypingNotification': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     return yield chatThreadClient.sendTypingNotification(...args);
                 }), 'ChatThreadClient.sendTypingNotification');
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -1465,7 +1465,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateMessage(...args);
                     const [messageId, updateOption] = args;
                     this._context.updateChatMessageContent(chatThreadClient.threadId, messageId, updateOption === null || updateOption === void 0 ? void 0 : updateOption.content);
@@ -1473,7 +1473,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -1481,7 +1481,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$R(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$S(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -1519,7 +1519,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$Q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$R = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1538,7 +1538,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$Q(this, void 0, void 0, function* () {
+                    return __awaiter$R(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -1551,7 +1551,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$Q(this, void 0, void 0, function* () {
+                    return __awaiter$R(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -1571,7 +1571,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$Q(this, void 0, void 0, function* () {
+                    return __awaiter$R(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -1582,7 +1582,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$Q(this, void 0, void 0, function* () {
+                    return __awaiter$R(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -1691,7 +1691,7 @@ const getImageAttachmentsFromHTMLContent = (content) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$P = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$Q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1717,7 +1717,7 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
         // due to a bug in babel, we can't use arrow function here
         // affecting conditional-compile-remove(attachment-upload)
         onSendMessage: function (content, options) {
-            return __awaiter$P(this, void 0, void 0, function* () {
+            return __awaiter$Q(this, void 0, void 0, function* () {
                 const sendMessageRequest = {
                     content,
                     senderDisplayName: chatClient.getState().displayName
@@ -1753,14 +1753,14 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
         },
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         onUploadImage: function (image, imageFilename) {
-            return __awaiter$P(this, void 0, void 0, function* () {
+            return __awaiter$Q(this, void 0, void 0, function* () {
                 const imageResult = yield chatThreadClient.uploadImage(image, imageFilename);
                 return imageResult;
             });
         },
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         onDeleteImage: function (imageId) {
-            return __awaiter$P(this, void 0, void 0, function* () {
+            return __awaiter$Q(this, void 0, void 0, function* () {
                 yield chatThreadClient.deleteImage(imageId);
                 return;
             });
@@ -1770,7 +1770,7 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
         onUpdateMessage: function (messageId, content, 
         /* @conditional-compile-remove(file-sharing-acs) */
         options) {
-            return __awaiter$P(this, void 0, void 0, function* () {
+            return __awaiter$Q(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 const imageAttachments = getImageAttachmentsFromHTMLContent(content);
                 const updateMessageOptions = {
@@ -1783,23 +1783,23 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
                 yield chatThreadClient.updateMessage(messageId, updateMessageOptions);
             });
         },
-        onDeleteMessage: (messageId) => __awaiter$P(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$Q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$P(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$Q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$P(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$Q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$P(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$Q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$P(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$Q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$P(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$Q(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -4407,7 +4407,7 @@ const _MentionPopover = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$O = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$P = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4593,7 +4593,7 @@ const TextFieldWithMention = (props) => {
         onSuggestionSelected,
         updateMentionSuggestions
     ]);
-    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$O(void 0, void 0, void 0, function* () {
+    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$P(void 0, void 0, void 0, function* () {
         var _a;
         let suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
         suggestions = suggestions.filter((suggestion) => suggestion.displayText.trim() !== '');
@@ -4770,7 +4770,7 @@ const TextFieldWithMention = (props) => {
             });
         }
     }, [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]);
-    const handleOnChange = React.useCallback((_b) => __awaiter$O(void 0, [_b], void 0, function* ({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) {
+    const handleOnChange = React.useCallback((_b) => __awaiter$P(void 0, [_b], void 0, function* ({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) {
         var _c;
         debouncedQueryUpdate.cancel();
         if (event.currentTarget === null) {
@@ -5279,7 +5279,7 @@ const ATTACHMENT_CARD_MIN_PROGRESS = 0.05;
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$N = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$O = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -5361,7 +5361,7 @@ const MappedMenuItems = (menuActions, attachment, handleOnClickError) => {
                 React.createElement(reactComponents.MenuTrigger, null,
                     React.createElement(reactComponents.ToolbarButton, { "aria-label": localeStrings.attachmentMoreMenu, role: "button", icon: React.createElement(react.Icon, { iconName: "AttachmentMoreMenu" }) }))),
             React.createElement(reactComponents.MenuPopover, null,
-                React.createElement(reactComponents.MenuList, null, menuActions.map((menuItem, index) => (React.createElement(reactComponents.MenuItem, { "aria-label": menuItem.name, key: index, icon: menuItem.icon, onClick: () => __awaiter$N(void 0, void 0, void 0, function* () {
+                React.createElement(reactComponents.MenuList, null, menuActions.map((menuItem, index) => (React.createElement(reactComponents.MenuItem, { "aria-label": menuItem.name, key: index, icon: menuItem.icon, onClick: () => __awaiter$O(void 0, void 0, void 0, function* () {
                         try {
                             yield menuItem.onClick(attachment);
                         }
@@ -5582,7 +5582,7 @@ hasCompletedAttachmentUploads, hasError, disabled }) => {
 const cancelInlineImageUpload = (imageSrcArray, imageUploadsInProgress, onCancelInlineImageUpload) => {
     if (imageSrcArray && imageUploadsInProgress && (imageUploadsInProgress === null || imageUploadsInProgress === void 0 ? void 0 : imageUploadsInProgress.length) > 0) {
         imageUploadsInProgress === null || imageUploadsInProgress === void 0 ? void 0 : imageUploadsInProgress.map((uploadImage) => {
-            if (uploadImage.url && imageSrcArray && !(imageSrcArray === null || imageSrcArray === void 0 ? void 0 : imageSrcArray.includes(uploadImage.url))) {
+            if (uploadImage.url && !(imageSrcArray === null || imageSrcArray === void 0 ? void 0 : imageSrcArray.includes(uploadImage.url))) {
                 onCancelInlineImageUpload === null || onCancelInlineImageUpload === void 0 ? void 0 : onCancelInlineImageUpload(uploadImage.id);
             }
         });
@@ -6940,23 +6940,18 @@ class UpdateContentPlugin {
             case PluginEventType.ContentChanged:
                 if (event.source.toLowerCase() === 'cut' ||
                     (event.source.toLowerCase() === 'keyboard' && (event.data === Keys.BACKSPACE || event.data === Keys.DELETE))) {
+                    imageSrcArray = [];
                     (_a = event.contentModel) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => {
                         if (block.blockType === 'Paragraph') {
                             const segments = block.segments;
                             segments.map((segment) => {
                                 if (segment.segmentType === 'Image') {
-                                    if (!imageSrcArray) {
-                                        imageSrcArray = [];
-                                    }
                                     imageSrcArray === null || imageSrcArray === void 0 ? void 0 : imageSrcArray.push(segment.src);
                                 }
                             });
                         }
                     });
                 }
-                else {
-                    imageSrcArray = undefined;
-                }
                 this.onUpdate(UpdateEvent.ContentChanged, imageSrcArray);
                 break;
             case PluginEventType.Input:
@@ -8055,13 +8050,7 @@ const RichTextSendBox = (props) => {
     const onChangeHandler = React.useCallback((newValue, 
     /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageSrcArray) => {
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        if (imageSrcArray && imageUploadsInProgress && (imageUploadsInProgress === null || imageUploadsInProgress === void 0 ? void 0 : imageUploadsInProgress.length) > 0) {
-            imageUploadsInProgress === null || imageUploadsInProgress === void 0 ? void 0 : imageUploadsInProgress.map((uploadImage) => {
-                if (uploadImage.url && imageSrcArray && !(imageSrcArray === null || imageSrcArray === void 0 ? void 0 : imageSrcArray.includes(uploadImage.url))) {
-                    onCancelInlineImageUpload === null || onCancelInlineImageUpload === void 0 ? void 0 : onCancelInlineImageUpload(uploadImage.id);
-                }
-            });
-        }
+        cancelInlineImageUpload(imageSrcArray, imageUploadsInProgress, onCancelInlineImageUpload);
         setContent(newValue);
     }, [
         setContent,
@@ -10223,7 +10212,7 @@ class _ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DaATOUfF.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DUMV7bmO.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -10231,7 +10220,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DaATOUfF.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DUMV7bmO.js'); });
 /**
  * @private
  */
@@ -10260,7 +10249,7 @@ const ChatMessageComponentAsEditBoxPicker = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$M = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$N = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10312,7 +10301,7 @@ const ChatMyMessageComponent = (props) => {
     function (text, 
     /* @conditional-compile-remove(file-sharing-acs) */
     attachments) {
-        return __awaiter$M(this, void 0, void 0, function* () {
+        return __awaiter$N(this, void 0, void 0, function* () {
             /* @conditional-compile-remove(file-sharing-acs) */
             if (`attachments` in message && attachments) {
                 message.attachments = attachments;
@@ -10718,7 +10707,7 @@ const fluentChatComponent = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$L = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$M = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10914,7 +10903,7 @@ const MessageThreadWrapper = (props) => {
             loadChatMessageComponentAsRichTextEditBox();
         }
     }, [richTextEditorOptions]);
-    const onDeleteMessageCallback = React.useCallback((messageId) => __awaiter$L(void 0, void 0, void 0, function* () {
+    const onDeleteMessageCallback = React.useCallback((messageId) => __awaiter$M(void 0, void 0, void 0, function* () {
         if (!onDeleteMessage) {
             return;
         }
@@ -10995,7 +10984,7 @@ const MessageThreadWrapper = (props) => {
      */
     const clientHeight = (_a = chatThreadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$L(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$M(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -11046,7 +11035,7 @@ const MessageThreadWrapper = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$L(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$M(void 0, void 0, void 0, function* () {
         if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -14076,7 +14065,7 @@ const localVideoTileContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$K = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$L = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -14093,7 +14082,7 @@ const LocalVideoCameraCycleButton = (props) => {
     const { cameras, selectedCamera, onSelectCamera, label, ariaDescription, size } = props;
     const theme = react.useTheme();
     const [waitForCamera, setWaitForCamera] = React.useState(false);
-    const onChangeCameraClick = React.useCallback((device) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onChangeCameraClick = React.useCallback((device) => __awaiter$L(void 0, void 0, void 0, function* () {
         // Throttle changing camera to prevent too many callbacks
         if (onSelectCamera) {
             setWaitForCamera(true);
@@ -16866,7 +16855,7 @@ const DevicesButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$J = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$K = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16904,7 +16893,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$J(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$K(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -16918,7 +16907,7 @@ const CameraButton = (props) => {
             }
         }
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
-    const onChangeCameraClick = React.useCallback((device) => __awaiter$J(void 0, void 0, void 0, function* () {
+    const onChangeCameraClick = React.useCallback((device) => __awaiter$K(void 0, void 0, void 0, function* () {
         // Throttle changing camera to prevent too many callbacks
         if (onSelectCamera) {
             setWaitForCamera(true);
@@ -17139,7 +17128,7 @@ const menupButtonPadding = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$I = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$J = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -17180,7 +17169,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$I(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$J(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -18042,7 +18031,7 @@ const dtmfFrequencies = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$H = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$I = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -18086,10 +18075,10 @@ const DialpadButton = (props) => {
     const [buttonPressed, setButtonPressed] = React.useState(false);
     const dtmfToneSound = React.useRef(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));
     const useLongPressProps = React.useMemo(() => ({
-        onClick: () => __awaiter$H(void 0, void 0, void 0, function* () {
+        onClick: () => __awaiter$I(void 0, void 0, void 0, function* () {
             onClick(digit, index);
         }),
-        onLongPress: () => __awaiter$H(void 0, void 0, void 0, function* () {
+        onLongPress: () => __awaiter$I(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
         touchEventsOnly: longPressTrigger === 'touch'
@@ -19224,7 +19213,7 @@ const _spokenLanguageToCaptionLanguage = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$G = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$H = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -19263,7 +19252,7 @@ const _CaptionsSettingsModal = (props) => {
             onDismissCaptionsSettings();
         }
     }, [onDismissCaptionsSettings]);
-    const onConfirm = React.useCallback(() => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onConfirm = React.useCallback(() => __awaiter$H(void 0, void 0, void 0, function* () {
         const spokenLanguageCode = selectedSpokenLanguage.key;
         const captionLanguageCode = selectedCaptionLanguage.key;
         if (isCaptionsFeatureActive) {
@@ -19624,7 +19613,7 @@ const notificationIconClassName = react.mergeStyles({
 /**
  * A component to show notification messages on the UI.
  *
- * @beta
+ * @public
  */
 const Notification = (props) => {
     var _a, _b;
@@ -19668,7 +19657,7 @@ const Notification = (props) => {
  *         If the notification recurs, it is shown in the UI.
  *
  *
- * @beta
+ * @public
  */
 const NotificationStack = (props) => {
     var _a, _b;
@@ -19715,13 +19704,13 @@ const NotificationStack = (props) => {
  * @beta
  */
 const IncomingCallNotification = (props) => {
-    const { callerName, alertText, avatar, onAcceptWithAudio, onAcceptWithVideo, onReject } = props;
+    const { callerName, alertText, avatarImage, onAcceptWithAudio, onAcceptWithVideo, onReject, personaSize, styles } = props;
     const theme = react.useTheme();
     /* @conditional-compile-remove(one-to-n-calling) */
     const localeStrings = useLocale$1().strings.IncomingCallNotification;
-    return (React.createElement(react.Stack, { horizontal: true, verticalAlign: "center", styles: incomingCallToastStyle(theme) },
-        React.createElement(react.Stack, { horizontalAlign: "start", styles: incomingCallToastAvatarContainerStyle },
-            React.createElement(react.Persona, { imageUrl: avatar, text: callerName, size: react.PersonaSize.size40, hidePersonaDetails: true, "aria-label": callerName })),
+    return (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
+        React.createElement(react.Stack, { horizontalAlign: "start", styles: (styles === null || styles === void 0 ? void 0 : styles.avatarContainer) ? styles.avatarContainer : incomingCallToastAvatarContainerStyle },
+            React.createElement(react.Persona, { imageUrl: avatarImage, text: callerName, size: react.PersonaSize.size40, coinSize: personaSize, hidePersonaDetails: true, "aria-label": callerName })),
         React.createElement(react.Stack, { grow: 1, horizontalAlign: "center", style: { alignItems: 'flex-start', fontFamily: 'Segoe UI' } },
             React.createElement(react.Stack, { style: { fontSize: '0.875rem' } },
                 React.createElement(react.Text, null, callerName !== null && callerName !== void 0 ? callerName : 
@@ -19730,13 +19719,13 @@ const IncomingCallNotification = (props) => {
                 React.createElement(react.Text, null, alertText !== null && alertText !== void 0 ? alertText : 
                 /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderAlert))),
         React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
-            React.createElement(react.IconButton, { styles: incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: { iconName: 'IncomingCallNotificationRejectIcon' }, 
+            React.createElement(react.IconButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: { iconName: 'IncomingCallNotificationRejectIcon' }, 
                 /* @conditional-compile-remove(one-to-n-calling) */
                 ariaLabel: localeStrings.incomingCallNoticicationRejectAriaLabel }),
-            React.createElement(react.IconButton, { styles: incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithVideo(), iconProps: { iconName: 'IncomingCallNotificationAcceptWithVideoIcon' }, 
+            React.createElement(react.IconButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithVideo(), iconProps: { iconName: 'IncomingCallNotificationAcceptWithVideoIcon' }, 
                 /* @conditional-compile-remove(one-to-n-calling) */
                 ariaLabel: localeStrings.incomingCallNoticicationAcceptWithVideoAriaLabel }),
-            React.createElement(react.IconButton, { styles: incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon' }, 
+            React.createElement(react.IconButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon' }, 
                 /* @conditional-compile-remove(one-to-n-calling) */
                 ariaLabel: localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel }))));
 };
@@ -19744,6 +19733,8 @@ const incomingCallToastStyle = (theme) => {
     return {
         root: {
             minWidth: '20rem',
+            maxWidth: '40rem',
+            background: theme.palette.white,
             opacity: 0.95,
             borderRadius: '0.5rem',
             boxShadow: theme.effects.elevation8,
@@ -20870,7 +20861,7 @@ const CHAT_CONTAINER_MIN_WIDTH_REM = 17.5;
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$G = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -20987,9 +20978,9 @@ class AzureCommunicationChatAdapter {
         this.chatClient.dispose();
     }
     fetchInitialData() {
-        return __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 var _a, e_1, _b, _c;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -21025,66 +21016,66 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 return yield this.handlers.onSendMessage(content, options);
             }));
         });
     }
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     uploadImage(image, imageFilename) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 return yield this.handlers.onUploadImage(image, imageFilename);
             }));
         });
     }
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     deleteImage(imageId) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteImage(imageId);
             }));
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 yield this.handlers.onTyping();
             }));
         });
     }
     removeParticipant(userId) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, options) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 var _a;
                 /* @conditional-compile-remove(file-sharing-acs) */
                 const messageOptions = {};
@@ -21115,14 +21106,14 @@ class AzureCommunicationChatAdapter {
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$F(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$G(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
     }
     downloadResourceToCache(resourceDetails) {
-        return __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
             this.chatClient.downloadResourceToCache(resourceDetails.threadId, resourceDetails.messageId, resourceDetails.resourceUrl);
         });
     }
@@ -21201,7 +21192,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$F(this, void 0, void 0, function* () {
+        return __awaiter$G(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -21251,7 +21242,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = (_a) => __awaiter$F(void 0, [_a], void 0, function* ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) {
+const createAzureCommunicationChatAdapter = (_a) => __awaiter$G(void 0, [_a], void 0, function* ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) {
     return _createAzureCommunicationChatAdapterInner(endpointUrl, userId, displayName, credential, threadId);
 });
 /**
@@ -21259,7 +21250,7 @@ const createAzureCommunicationChatAdapter = (_a) => __awaiter$F(void 0, [_a], vo
  *
  * @internal
  */
-const _createAzureCommunicationChatAdapterInner = (endpoint_1, userId_1, displayName_1, credential_1, threadId_1, ...args_1) => __awaiter$F(void 0, [endpoint_1, userId_1, displayName_1, credential_1, threadId_1, ...args_1], void 0, function* (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') {
+const _createAzureCommunicationChatAdapterInner = (endpoint_1, userId_1, displayName_1, credential_1, threadId_1, ...args_1) => __awaiter$G(void 0, [endpoint_1, userId_1, displayName_1, credential_1, threadId_1, ...args_1], void 0, function* (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -21279,7 +21270,7 @@ const _createAzureCommunicationChatAdapterInner = (endpoint_1, userId_1, display
  * ThreadId is a promise to allow for lazy initialization of the adapter.
  * @internal
  */
-const _createLazyAzureCommunicationChatAdapterInner = (endpoint_2, userId_2, displayName_2, credential_2, threadId_2, ...args_2) => __awaiter$F(void 0, [endpoint_2, userId_2, displayName_2, credential_2, threadId_2, ...args_2], void 0, function* (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') {
+const _createLazyAzureCommunicationChatAdapterInner = (endpoint_2, userId_2, displayName_2, credential_2, threadId_2, ...args_2) => __awaiter$G(void 0, [endpoint_2, userId_2, displayName_2, credential_2, threadId_2, ...args_2], void 0, function* (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -21289,7 +21280,7 @@ const _createLazyAzureCommunicationChatAdapterInner = (endpoint_2, userId_2, dis
         endpoint,
         credential
     }, undefined, telemetryImplementationHint);
-    return threadId.then((threadId) => __awaiter$F(void 0, void 0, void 0, function* () {
+    return threadId.then((threadId) => __awaiter$G(void 0, void 0, void 0, function* () {
         if (UNSUPPORTED_CHAT_THREAD_TYPE.some((t) => threadId.includes(t))) {
             console.error(`Invalid Chat ThreadId: ${threadId}. Please note with Teams Channel Meetings, only Calling is supported and Chat is not currently supported. Read more: ${TEAMS_LIMITATION_LEARN_MORE}.`);
         }
@@ -21350,7 +21341,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$F(void 0, void 0, void 0, function* () {
+        (() => __awaiter$G(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -21382,7 +21373,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$F(void 0, void 0, void 0, function* () {
+            (() => __awaiter$G(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -21404,7 +21395,7 @@ beforeDispose) => {
  * @public
  */
 function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient) {
-    return __awaiter$F(this, void 0, void 0, function* () {
+    return __awaiter$G(this, void 0, void 0, function* () {
         return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
     });
 }
@@ -21785,7 +21776,7 @@ const sendboxContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -21806,7 +21797,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$E(void 0, void 0, void 0, function* () {
+        (() => __awaiter$F(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -22362,7 +22353,7 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
  */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-COKF7ZK8.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BYUem3sV.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -22370,7 +22361,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
  *
 /* @conditional-compile-remove(rich-text-editor-composite-support)
  */
-const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-COKF7ZK8.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BYUem3sV.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -22396,7 +22387,7 @@ const SendBoxPicker = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -22406,7 +22397,7 @@ var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-const fetchBlobData = (resource, options) => __awaiter$D(void 0, void 0, void 0, function* () {
+const fetchBlobData = (resource, options) => __awaiter$E(void 0, void 0, void 0, function* () {
     // default timeout is 30 seconds
     const { timeout = 30000, abortController } = options;
     const id = setTimeout(() => {
@@ -22417,7 +22408,10 @@ const fetchBlobData = (resource, options) => __awaiter$D(void 0, void 0, void 0,
     return response;
 });
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-const getInlineImageData = (image) => __awaiter$D(void 0, void 0, void 0, function* () {
+/**
+ * @private
+ */
+const getInlineImageData = (image) => __awaiter$E(void 0, void 0, void 0, function* () {
     const blobImage = undefined;
     if (image.startsWith('blob') || image.startsWith('http')) {
         const res = yield fetchBlobData(image, { abortController: new AbortController() });
@@ -22427,6 +22421,35 @@ const getInlineImageData = (image) => __awaiter$D(void 0, void 0, void 0, functi
     return blobImage;
 });
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+const removeImageTags = (event) => {
+    event.content.querySelectorAll('img').forEach((image) => {
+        // If the image is the only child of its parent, remove all the parents of this img element.
+        let parentNode = image.parentElement;
+        let currentNode = image;
+        while ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.childNodes.length) === 1) {
+            currentNode = parentNode;
+            parentNode = parentNode.parentElement;
+        }
+        currentNode === null || currentNode === void 0 ? void 0 : currentNode.remove();
+    });
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
  * @private
  */
@@ -22509,7 +22532,12 @@ const useImageUpload = () => {
         handleInlineImageUploadAction({ type: AttachmentUploadActionType.Remove, id: uploadId });
         // TODO: remove local blob
         if ((imageUpload === null || imageUpload === void 0 ? void 0 : imageUpload.metadata.progress) === 1) {
-            adapter.deleteImage(imageId);
+            try {
+                adapter.deleteImage(imageId);
+            }
+            catch (error) {
+                console.error(error);
+            }
         }
     }, [adapter, inlineImageUploads]);
     return [inlineImageUploads, handleInlineImageUploadAction, onUploadInlineImage, onCancelInlineImageUploadHandler];
@@ -22548,11 +22576,17 @@ const ChatScreen = (props) => {
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     const [textOnlyChat, setTextOnlyChat] = React.useState(false);
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const [isACSChat, setIsACSChat] = React.useState(false);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     React.useEffect(() => {
         const updateChatState = (newState) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             setTextOnlyChat(((_b = (_a = newState.thread.properties) === null || _a === void 0 ? void 0 : _a.messagingPolicy) === null || _b === void 0 ? void 0 : _b.textOnlyChat) === true);
+            if ((_c = newState.thread.properties) === null || _c === void 0 ? void 0 : _c.createdBy) {
+                setIsACSChat(!communicationCommon.isMicrosoftTeamsUserIdentifier((_d = newState.thread.properties) === null || _d === void 0 ? void 0 : _d.createdBy));
+            }
         };
+        // set initial state for textOnlyChat and isACSChat
         updateChatState(adapter.getState());
         adapter.onStateChange(updateChatState);
         return () => {
@@ -22837,11 +22871,10 @@ const ChatScreen = (props) => {
     }, [attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions]);
     /* @conditional-compile-remove(rich-text-editor-composite-support) */
     const richTextEditorOptions = React.useMemo(() => {
+        const onPasteCallback = isACSChat || textOnlyChat ? removeImageTags : undefined;
         return (options === null || options === void 0 ? void 0 : options.richTextEditor)
             ? {
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: textOnlyChat
-                    ? removeImageTags
-                    : undefined,
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: onPasteCallback,
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 onUploadInlineImage: onUploadInlineImage,
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -22857,9 +22890,11 @@ const ChatScreen = (props) => {
         onCancelInlineImageUploadHandler,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         onUploadInlineImage,
-        options === null || options === void 0 ? void 0 : options.richTextEditor,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        textOnlyChat
+        isACSChat,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        textOnlyChat,
+        options === null || options === void 0 ? void 0 : options.richTextEditor
     ]);
     return (React.createElement(react.Stack, { className: chatContainer, grow: true },
         (options === null || options === void 0 ? void 0 : options.topic) !== false && React.createElement(ChatHeader, Object.assign({}, headerProps)),
@@ -22893,13 +22928,7 @@ const ChatScreen = (props) => {
                                 onCancelAttachmentUpload: onCancelUploadHandler, 
                                 // we need to overwrite onSendMessage for SendBox because we need to clear attachment state
                                 // when submit button is clicked
-                                onSendMessage: onSendMessageHandler, 
-                                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                                onUploadInlineImage: onUploadInlineImage, 
-                                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                                imageUploadsInProgress: imageUploadsInProgress, 
-                                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                                onCancelInlineImageUpload: onCancelInlineImageUploadHandler })),
+                                onSendMessage: onSendMessageHandler })),
                         formFactor !== 'mobile' &&
                             /* @conditional-compile-remove(file-sharing-acs) */
                             attachmentButton))),
@@ -22915,20 +22944,6 @@ const ChatScreen = (props) => {
                 });
             }, onDownloadButtonClicked: onDownloadButtonClicked })))));
 };
-// TODO-vhuseinova: delete after the function is added to utils
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
-const removeImageTags = (event) => {
-    event.content.querySelectorAll('img').forEach((image) => {
-        // If the image is the only child of its parent, remove all the parents of this img element.
-        let parentNode = image.parentElement;
-        let currentNode = image;
-        while ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.childNodes.length) === 1) {
-            currentNode = parentNode;
-            parentNode = parentNode.parentElement;
-        }
-        currentNode === null || currentNode === void 0 ? void 0 : currentNode.remove();
-    });
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -23937,7 +23952,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne((callClient, callAgent, dev
  *   - `ErrorType` is never repeated in the returned errors.
  *   - Errors are returned in a fixed order by `ErrorType`.
  *
- * @beta
+ * @public
  */
 const notificationStackSelector = reselect.createSelector([
     getLatestErrors,
@@ -24072,12 +24087,10 @@ const notificationStackSelector = reselect.createSelector([
         appendActiveErrorIfDefined$1(activeErrorMessages, latestErrors, 'Call.feature', 'startSpotlightWhileMaxParticipantsAreSpotlighted');
     }
     //below is for active notifications
-    let activeNotifications = [];
+    const activeNotifications = [];
     if ((_u = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.speakingWhileMicrophoneIsMuted) === null || _u === void 0 ? void 0 : _u.value) {
         activeNotifications.push({ type: 'speakingWhileMuted', timestamp: new Date(Date.now()), autoDismiss: true });
     }
-    // sort notifications by timestamp from earliest to latest
-    activeNotifications = activeNotifications.sort((a, b) => { var _a, _b; return ((_a = a.timestamp) !== null && _a !== void 0 ? _a : new Date(Date.now())).getDate() - ((_b = b.timestamp) !== null && _b !== void 0 ? _b : new Date(Date.now())).getDate(); });
     return { activeErrorMessages: activeErrorMessages, activeNotifications: activeNotifications };
 });
 /* @conditional-compile-remove(notifications) */
@@ -29205,7 +29218,7 @@ const findSelector = (component) => {
     }
     return undefined;
 };
-/* @conditional-compile-remove(PSTN-calls) */
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(notifications) */
 const findConditionalCompiledSelector = (component) => {
     switch (component) {
         /* @conditional-compile-remove(PSTN-calls) */
@@ -29928,7 +29941,7 @@ function computeComplianceNotification(complianceProps, cachedProps) {
     // [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 &&
+    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).
@@ -37991,7 +38004,7 @@ const MainScreen = (props) => {
     /* @conditional-compile-remove(notifications) */
     const activeInCallErrors = usePropsFor$1(NotificationStack).activeErrorMessages;
     /* @conditional-compile-remove(notifications) */
-    const activeNotificationsFromSelector = usePropsFor$1(NotificationStack).activeNotifications;
+    const activeNotifications = usePropsFor$1(NotificationStack).activeNotifications;
     /* @conditional-compile-remove(notifications) */
     const complianceProps = useSelector$1(complianceBannerSelector);
     /* @conditional-compile-remove(notifications) */
@@ -38010,30 +38023,37 @@ const MainScreen = (props) => {
     const complianceNotification = React.useMemo(() => {
         return computeComplianceNotification(complianceProps, cachedProps);
     }, [complianceProps, cachedProps]);
+    /* @conditional-compile-remove(notifications) */
+    React.useEffect(() => {
+        if (complianceNotification) {
+            activeNotifications.forEach((notification, index) => {
+                if ([
+                    'recordingStarted',
+                    'transcriptionStarted',
+                    'recordingStopped',
+                    'transcriptionStopped',
+                    'recordingAndTranscriptionStarted',
+                    'recordingAndTranscriptionStopped',
+                    'recordingStoppedStillTranscribing',
+                    'transcriptionStoppedStillRecording'
+                ].includes(activeNotifications[index].type)) {
+                    activeNotifications.splice(index, 1);
+                }
+            });
+            activeNotifications.push(complianceNotification);
+        }
+        setTrackedNotifications((prev) => updateTrackedNotificationsWithActiveNotifications(prev, activeNotifications));
+    }, [complianceNotification, activeNotifications]);
     const [trackedErrors, setTrackedErrors] = React.useState({});
     /* @conditional-compile-remove(notifications) */
     const [trackedInCallErrors, setTrackedInCallErrors] = React.useState({});
     /* @conditional-compile-remove(notifications) */
     const [trackedNotifications, setTrackedNotifications] = React.useState({});
-    /* @conditional-compile-remove(notifications) */
-    const [activeNotifications, setActiveNotifications] = React.useState(activeNotificationsFromSelector);
-    /* @conditional-compile-remove(notifications) */
-    React.useEffect(() => {
-        if (complianceNotification) {
-            setActiveNotifications([...activeNotificationsFromSelector, complianceNotification]);
-        }
-    }, [complianceNotification, activeNotificationsFromSelector]);
     React.useEffect(() => {
         setTrackedErrors((prev) => updateTrackedNotificationsWithActiveNotifications(prev, activeErrors));
         /* @conditional-compile-remove(notifications) */
         setTrackedInCallErrors((prev) => updateTrackedNotificationsWithActiveNotifications(prev, activeInCallErrors));
-        /* @conditional-compile-remove(notifications) */
-        setTrackedNotifications((prev) => updateTrackedNotificationsWithActiveNotifications(prev, activeNotifications));
-    }, [
-        activeErrors,
-        /* @conditional-compile-remove(notifications) */ activeInCallErrors,
-        /* @conditional-compile-remove(notifications) */ activeNotifications
-    ]);
+    }, [activeErrors, /* @conditional-compile-remove(notifications) */ activeInCallErrors]);
     const onDismissError = React.useCallback((error) => {
         setTrackedErrors((prev) => trackNotificationAsDismissed(error.type, prev));
         /* @conditional-compile-remove(notifications) */
@@ -38047,7 +38067,12 @@ const MainScreen = (props) => {
     /* @conditional-compile-remove(notifications) */
     const latestInCallErrors = React.useMemo(() => filterLatestNotifications(activeInCallErrors, trackedInCallErrors), [activeInCallErrors, trackedInCallErrors]);
     /* @conditional-compile-remove(notifications) */
-    const latestNotifications = React.useMemo(() => filterLatestNotifications(activeNotifications, trackedNotifications), [activeNotifications, trackedNotifications]);
+    const latestNotifications = React.useMemo(() => {
+        const result = filterLatestNotifications(activeNotifications, trackedNotifications);
+        // sort notifications by timestamp from earliest to latest
+        result.sort((a, b) => { var _a, _b; return ((_a = a.timestamp) !== null && _a !== void 0 ? _a : new Date(Date.now())).getTime() - ((_b = b.timestamp) !== null && _b !== void 0 ? _b : new Date(Date.now())).getTime(); });
+        return result;
+    }, [activeNotifications, trackedNotifications]);
     const callees = useSelector$1(getTargetCallees);
     const locale = useLocale();
     const palette = useTheme().palette;
@@ -42369,4 +42394,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-DQgWBNc2.js.map
+//# sourceMappingURL=index-BV60xvzw.js.map