@azure/communication-react 1.19.0-alpha-202408010015 → 1.19.0-alpha-202408020014

package/dist/dist-esm/react-components/src/components/utils/RichTextEditorUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditorUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/RichTextEditorUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;;GAGG;AACH,MAAM,CAAN,IAAY,eASX;AATD,WAAY,eAAe;IACzB,8CAA2B,CAAA;IAC3B,kDAA+B,CAAA;IAC/B,oDAAiC,CAAA;IACjC,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,8CAA2B,CAAA;IAC3B,8CAA2B,CAAA;IAC3B,sCAAmB,CAAA;AACrB,CAAC,EATW,eAAe,KAAf,eAAe,QAS1B;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,yBAEX;AAFD,WAAY,yBAAyB;IACnC,4CAAe,CAAA;AACjB,CAAC,EAFW,yBAAyB,KAAzB,yBAAyB,QAEpC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAoB,EAAE,OAAoB,EAAE,OAA0B,EAAQ,EAAE;IAC5G,IAAI,OAAO,YAAY,oBAAoB,EAAE,CAAC;QAC5C,kCAAkC;QAClC,wCAAwC;QACxC,iCAAiC;IACnC,CAAC;SAAM,IAAI,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,CAAC;QAChD,4CAA4C;QAC5C,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACjE,CAAC;AACH,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAqB,EAAE,OAAoB,EAAE,OAA0B,EAAQ,EAAE;IAC9G,IAAI,OAAO,YAAY,gBAAgB,EAAE,CAAC;QACxC,oCAAoC;QACpC,wCAAwC;QACxC,iCAAiC;IACnC,CAAC;SAAM,IAAI,OAAO,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;QACjD,4CAA4C;QAC5C,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { BorderFormat, DatasetFormat, ModelToDomContext } from 'roosterjs-content-model-types';\n\n/**\n * Plugin event type for RoosterJS plugins\n * @private\n */\nexport enum PluginEventType {\n  EditorReady = 'editorReady',\n  BeforeDispose = 'beforeDispose',\n  ContentChanged = 'contentChanged',\n  Input = 'input',\n  KeyDown = 'keyDown',\n  BeforePaste = 'beforePaste',\n  ZoomChanged = 'zoomChanged',\n  MouseUp = 'mouseUp'\n}\n\n/**\n * ContentChanged event source for RoosterJS\n * @private\n */\nexport enum ContentChangedEventSource {\n  Paste = 'Paste'\n}\n\n/**\n * Applies the border format to the specified element.\n * If the element is an HTMLTableCellElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, the default format applier is used.\n */\nexport const borderApplier = (format: BorderFormat, element: HTMLElement, context: ModelToDomContext): void => {\n  if (element instanceof HTMLTableCellElement) {\n    // don't set format for table cell\n    // as it will set inline styles for them\n    // we want to use classes instead\n  } else if (context.defaultFormatAppliers.border) {\n    // apply default formats for all other cases\n    context.defaultFormatAppliers.border(format, element, context);\n  }\n};\n\n/**\n * Applies the dataset format to the given HTML element.\n * If the element is an HTMLTableElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, it applies the default formats.\n */\nexport const dataSetApplier = (format: DatasetFormat, element: HTMLElement, context: ModelToDomContext): void => {\n  if (element instanceof HTMLTableElement) {\n    // don't set editing info for tables\n    // as it will set inline styles for them\n    // we want to use classes instead\n  } else if (context.defaultFormatAppliers.dataset) {\n    // apply default formats for all other cases\n    context.defaultFormatAppliers.dataset(format, element, context);\n  }\n};\n"]}
+{"version":3,"file":"RichTextEditorUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/RichTextEditorUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport type { BorderFormat, DatasetFormat, ModelToDomContext } from 'roosterjs-content-model-types';\n\n/**\n * Plugin event type for RoosterJS plugins\n * @private\n */\nexport enum PluginEventType {\n  EditorReady = 'editorReady',\n  BeforeDispose = 'beforeDispose',\n  ContentChanged = 'contentChanged',\n  BeforeSetContent = 'beforeSetContent',\n  Input = 'input',\n  KeyDown = 'keyDown',\n  BeforePaste = 'beforePaste',\n  ZoomChanged = 'zoomChanged',\n  MouseUp = 'mouseUp'\n}\n\n/**\n * ContentChanged event source for RoosterJS\n * @private\n */\nexport enum ContentChangedEventSource {\n  Paste = 'Paste'\n}\n\n/**\n * Applies the border format to the specified element.\n * If the element is an HTMLTableCellElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, the default format applier is used.\n */\nexport const borderApplier = (format: BorderFormat, element: HTMLElement, context: ModelToDomContext): void => {\n  if (element instanceof HTMLTableCellElement) {\n    // don't set format for table cell\n    // as it will set inline styles for them\n    // we want to use classes instead\n  } else if (context.defaultFormatAppliers.border) {\n    // apply default formats for all other cases\n    context.defaultFormatAppliers.border(format, element, context);\n  }\n};\n\n/**\n * Applies the dataset format to the given HTML element.\n * If the element is an HTMLTableElement, it skips setting editing info\n * and to use classes instead of inline styles.\n * For all other cases, it applies the default formats.\n */\nexport const dataSetApplier = (format: DatasetFormat, element: HTMLElement, context: ModelToDomContext): void => {\n  if (element instanceof HTMLTableElement) {\n    // don't set editing info for tables\n    // as it will set inline styles for them\n    // we want to use classes instead\n  } else if (context.defaultFormatAppliers.dataset) {\n    // apply default formats for all other cases\n    context.defaultFormatAppliers.dataset(format, element, context);\n  }\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getPreviousInlineImages = (content?: string): Record<string, string>[] => {\n  if (!content) {\n    return [];\n  }\n  const previousInlineImages: Record<string, string>[] = [];\n  const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n  document.querySelectorAll('img').forEach((img) => {\n    const imageAttributes = getInlineImageAttributes(img);\n    previousInlineImages.push(imageAttributes);\n  });\n  return previousInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getRemovedInlineImages = (\n  content: string,\n  previousInlineImages: Record<string, string>[]\n): Record<string, string>[] => {\n  const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n  const currentContentIds = Array.from(document.querySelectorAll('img')).map((img) => img.id);\n  previousInlineImages = previousInlineImages?.filter((img) => !currentContentIds?.includes(img.id));\n\n  const removedInlineImages = [...previousInlineImages];\n  return removedInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getInsertedInlineImages = (\n  content: string,\n  previousInlineImages: NodeListOf<HTMLImageElement>\n): HTMLImageElement[] => {\n  const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n  const currentContentInlineImages = Array.from(document.querySelectorAll('img'));\n  const previousContentIds = Array.from(previousInlineImages).map((img) => img.id);\n  // if check is updated, also update getRemovedInlineImages\n  const insertedInlineImages = currentContentInlineImages.filter((img) => !previousContentIds.includes(img.id));\n  return insertedInlineImages;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getInlineImageAttributes = (image: HTMLImageElement): Record<string, string> => {\n  const imageAttributes: Record<string, string> = {};\n  image.getAttributeNames().forEach((attrName) => {\n    const attrValue = image.getAttribute(attrName);\n    if (attrValue) {\n      imageAttributes[attrName] = attrValue;\n    }\n  });\n  return imageAttributes;\n};\n\n/* @conditional-compile-remove(rich-text-editor) */\n/**\n * @internal\n */\n/**\n * Update the scroll position of the editor to ensure the content is visible.\n */\nexport const scrollToBottomRichTextEditor = (): void => {\n  // Get the current selection in the document\n  const selection = document.getSelection();\n\n  // Check if a selection exists and it has at least one range\n  if (!selection || selection.rangeCount <= 0) {\n    // If no selection or range, exit the function\n    return;\n  }\n\n  // Get the first range of the selection\n  // A user can normally only select one range at a time, so the rangeCount will usually be 1\n  const range = selection.getRangeAt(0);\n\n  // If the common ancestor container of the range is the document itself,\n  // it might mean that the editable element is getting removed from the DOM\n  // In such cases, especially in Safari, trying to modify the range might throw a HierarchyRequest error\n  if (range.commonAncestorContainer === document) {\n    return;\n  }\n\n  // Create a temporary span element to use as an anchor for scrolling\n  // We can't use the anchor node directly because if it's a Text node, calling scrollIntoView() on it will throw an error\n  const tempElement = document.createElement('span');\n  // Collapse the range to its end point\n  // This means the start and end points of the range will be the same, and it will not contain any content\n  range.collapse(false);\n  // Insert the temporary element at the cursor's position at the end of the range\n  range.insertNode(tempElement);\n  // Scroll the temporary element into view\n  // the element will be aligned at the center of the scroll container, otherwise, text and images may be positioned incorrectly\n  tempElement.scrollIntoView({\n    block: 'center'\n  });\n  tempElement.remove();\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * Revoke the blob urls in the removedInlineImages and remove them from the currentLocalBlobMap\n * @internal\n */\nexport const removeLocalBlobs = (\n  currentLocalBlobMap: Record<string, string>,\n  removedInlineImages: Record<string, string>[]\n): void => {\n  removedInlineImages.forEach((image) => {\n    removeSingleLocalBlob(currentLocalBlobMap, image.id);\n  });\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * Revoke all the blob urls in the currentLocalBlobMap and clean up the currentLocalBlobMap\n * @internal\n */\nexport const cleanAllLocalBlobs = (currentLocalBlobMap: Record<string, string>): void => {\n  Object.keys(currentLocalBlobMap).forEach((imageId) => {\n    removeSingleLocalBlob(currentLocalBlobMap, imageId);\n  });\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nconst removeSingleLocalBlob = (currentLocalBlobMap: Record<string, string>, imageId: string): void => {\n  const blobUrl = currentLocalBlobMap[imageId];\n  if (blobUrl) {\n    URL.revokeObjectURL(blobUrl);\n    delete currentLocalBlobMap[imageId];\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.d.ts

@@ -13,9 +13,19 @@ export declare const hasIncompleteAttachmentUploads: (attachmentsWithProgress: A
  */
 export declare const isAttachmentUploadCompleted: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => boolean;
 /**
+ * Check if the content has inline image.
  * @internal
  */
-export declare const addUploadedImagesToMessage: (message: string, inlineImages: AttachmentMetadataInProgress[]) => Promise<string>;
+export declare const hasInlineImageContent: (content: string) => boolean;
+/**
+ * @internal
+ *
+ * @param message - The message content to update.
+ * @param initialInlineImages - The initial inline images that comes with the message before editing.
+ *
+ * @returns The updated message content.
+ */
+export declare const updateStylesOfInlineImages: (message: string, initialInlineImages: Record<string, string>[]) => Promise<string>;
 /**
  * @private
  */
@@ -39,28 +49,20 @@ export declare const isSendBoxButtonAriaDisabled: ({ hasContent, hasCompletedAtt
     hasError: boolean;
     disabled: boolean;
 }) => boolean;
-interface CancelInlineImageUploadProps {
-    imageSrcArray: string[] | undefined;
-    inlineImages: AttachmentMetadataInProgress[] | undefined;
-    messageId?: string;
-    editBoxOnCancelInlineImageUpload?: (id: string, messageId: string) => void;
-    sendBoxOnCancelInlineImageUpload?: (id: string) => void;
-}
 /**
  * @internal
  */
-export declare const cancelInlineImageUpload: (props: CancelInlineImageUploadProps) => void;
+export declare const toAttachmentMetadata: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => AttachmentMetadata[] | undefined;
 /**
  * @internal
  */
-export declare const toAttachmentMetadata: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => AttachmentMetadata[] | undefined;
+export declare const modifyInlineImagesInContentString: (content: string, initialInlineImages: Record<string, string>[], onCompleted?: (content: string) => void) => Promise<void>;
 /**
  * @internal
  */
-export declare const insertImagesToContentString: (content: string, inlineImages?: AttachmentMetadataInProgress[], onCompleted?: (content: string) => void) => Promise<void>;
+export declare const removeBrokenImageContentAndClearImageSizeStyles: (content: string) => string;
 /**
  * @internal
  */
-export declare const removeBrokenImageContentAndClearImageSizeStyles: (content: string) => string;
-export {};
+export declare const getContentWithUpdatedInlineImagesInfo: (content: string, inlineImageWithProgress: AttachmentMetadataInProgress[]) => string;
 //# sourceMappingURL=SendBoxUtils.d.ts.map

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.js

@@ -33,32 +33,40 @@ export const isAttachmentUploadCompleted = (attachmentsWithProgress) => {
 };
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
+ * Check if the content has inline image.
  * @internal
  */
-// Before sending the image, we need to add the image id we get back after uploading the images to the message content.
-export const addUploadedImagesToMessage = (message, inlineImages) => __awaiter(void 0, void 0, void 0, function* () {
+export const hasInlineImageContent = (content) => {
+    const document = new DOMParser().parseFromString(content, 'text/html');
+    return !!document.querySelector('img');
+};
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ *
+ * @param message - The message content to update.
+ * @param initialInlineImages - The initial inline images that comes with the message before editing.
+ *
+ * @returns The updated message content.
+ */
+export const updateStylesOfInlineImages = (message, initialInlineImages) => __awaiter(void 0, void 0, void 0, function* () {
     if (message === '') {
         return message;
     }
+    const initialInlineImagesIds = initialInlineImages.map((initialInlineImage) => initialInlineImage.id);
     const document = new DOMParser().parseFromString(message !== null && message !== void 0 ? message : '', 'text/html');
     const imagesPromise = Array.from(document.querySelectorAll('img')).map((img) => {
         return new Promise((resolve, rejects) => {
-            const uploadInlineImage = inlineImages.find((inlineImage) => !inlineImage.error && (inlineImage.url === img.src || inlineImage.id === img.id));
-            // The message might content images that comes with the message before editing, those images are not in the uploadInlineImages array.
-            // This function should only modify the message content for images in the uploadInlineImages array.
-            if (!uploadInlineImage) {
+            // The message might content images that comes with the message before editing.
+            // This function should only modify the message content for images that are newly added.
+            if (initialInlineImagesIds.includes(img.id)) {
                 resolve();
                 return;
             }
             const imageElement = new Image();
             imageElement.src = img.src;
             imageElement.onload = () => {
-                var _a;
                 // imageElement is a copy of original img element, so changes need to be made to the original img element
-                img.id = (_a = uploadInlineImage === null || uploadInlineImage === void 0 ? void 0 : uploadInlineImage.id) !== null && _a !== void 0 ? _a : '';
-                if (uploadInlineImage === null || uploadInlineImage === void 0 ? void 0 : uploadInlineImage.url) {
-                    img.src = uploadInlineImage.url;
-                }
                 img.width = imageElement.width;
                 img.height = imageElement.height;
                 img.style.aspectRatio = `${imageElement.width} / ${imageElement.height}`;
@@ -114,21 +122,6 @@ hasCompletedAttachmentUploads, hasError, disabled }) => {
         hasError ||
         disabled);
 };
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
-/**
- * @internal
- */
-export const cancelInlineImageUpload = (props) => {
-    const { imageSrcArray, inlineImages, messageId, editBoxOnCancelInlineImageUpload, sendBoxOnCancelInlineImageUpload } = props;
-    if (imageSrcArray && inlineImages && (inlineImages === null || inlineImages === void 0 ? void 0 : inlineImages.length) > 0) {
-        inlineImages === null || inlineImages === void 0 ? void 0 : inlineImages.map((inlineImage) => {
-            if (inlineImage.url && !(imageSrcArray === null || imageSrcArray === void 0 ? void 0 : imageSrcArray.includes(inlineImage.url))) {
-                sendBoxOnCancelInlineImageUpload && sendBoxOnCancelInlineImageUpload(inlineImage.id);
-                editBoxOnCancelInlineImageUpload && editBoxOnCancelInlineImageUpload(inlineImage.id, messageId || '');
-            }
-        });
-    }
-};
 /* @conditional-compile-remove(file-sharing-acs) */
 /**
  * @internal
@@ -146,15 +139,13 @@ export const toAttachmentMetadata = (attachmentsWithProgress) => {
         };
     });
 };
-/* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
  * @internal
  */
-export const insertImagesToContentString = (content, inlineImages, onCompleted) => __awaiter(void 0, void 0, void 0, function* () {
-    if (!inlineImages || inlineImages.length <= 0) {
-        onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(content);
-    }
-    const newContent = yield addUploadedImagesToMessage(content, inlineImages !== null && inlineImages !== void 0 ? inlineImages : []);
+export const modifyInlineImagesInContentString = (content, initialInlineImages, onCompleted) => __awaiter(void 0, void 0, void 0, function* () {
+    let newContent = content;
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    newContent = yield updateStylesOfInlineImages(content, initialInlineImages);
     onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(newContent);
 });
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -183,4 +174,23 @@ export const removeBrokenImageContentAndClearImageSizeStyles = (content) => {
     });
     return document.body.innerHTML;
 };
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+export const getContentWithUpdatedInlineImagesInfo = (content, inlineImageWithProgress) => {
+    if (!inlineImageWithProgress || inlineImageWithProgress.length <= 0) {
+        return content;
+    }
+    const document = new DOMParser().parseFromString(content, 'text/html');
+    document.querySelectorAll('img').forEach((img) => {
+        const imageId = img.id;
+        const inlineImage = inlineImageWithProgress.find((image) => !image.error && image.progress === 1 && image.id === imageId);
+        if (inlineImage) {
+            img.id = inlineImage.id;
+            img.src = inlineImage.url || img.src;
+        }
+    });
+    return document.body.innerHTML;
+};
 //# sourceMappingURL=SendBoxUtils.js.map

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendBoxUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/SendBoxUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\nexport const hasIncompleteAttachmentUploads = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): boolean => {\n  return !!(\n    attachmentsWithProgress?.length &&\n    !attachmentsWithProgress\n      .filter((attachmentUpload) => !attachmentUpload.error)\n      .every((attachmentUpload) => attachmentUpload.progress === 1 && attachmentUpload.progress !== undefined)\n  );\n};\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\nexport const isAttachmentUploadCompleted = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): boolean => {\n  return !!attachmentsWithProgress?.find((attachment) => !attachment.error);\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\n// Before sending the image, we need to add the image id we get back after uploading the images to the message content.\nexport const addUploadedImagesToMessage = async (\n  message: string,\n  inlineImages: AttachmentMetadataInProgress[]\n): Promise<string> => {\n  if (message === '') {\n    return message;\n  }\n  const document = new DOMParser().parseFromString(message ?? '', 'text/html');\n  const imagesPromise = Array.from(document.querySelectorAll('img')).map((img) => {\n    return new Promise<void>((resolve, rejects) => {\n      const uploadInlineImage = inlineImages.find(\n        (inlineImage) => !inlineImage.error && (inlineImage.url === img.src || inlineImage.id === img.id)\n      );\n      // The message might content images that comes with the message before editing, those images are not in the uploadInlineImages array.\n      // This function should only modify the message content for images in the uploadInlineImages array.\n      if (!uploadInlineImage) {\n        resolve();\n        return;\n      }\n      const imageElement = new Image();\n      imageElement.src = img.src;\n      imageElement.onload = () => {\n        // imageElement is a copy of original img element, so changes need to be made to the original img element\n        img.id = uploadInlineImage?.id ?? '';\n        if (uploadInlineImage?.url) {\n          img.src = uploadInlineImage.url;\n        }\n        img.width = imageElement.width;\n        img.height = imageElement.height;\n        img.style.aspectRatio = `${imageElement.width} / ${imageElement.height}`;\n        // Clear maxWidth and maxHeight styles that are set by roosterJS.\n        // This is so that they can be set in messageThread styles without using the important flag.\n        img.style.maxWidth = '';\n        img.style.maxHeight = '';\n        resolve();\n      };\n      imageElement.onerror = () => {\n        console.log('Error loading image', img.src);\n        rejects();\n      };\n    });\n  });\n  await Promise.all(imagesPromise);\n  const newMessage = document.body.innerHTML;\n  return newMessage;\n};\n\n/**\n * @private\n */\nexport const isMessageTooLong = (valueLength: number): boolean => {\n  return valueLength > MAXIMUM_LENGTH_OF_MESSAGE;\n};\n\n/**\n * @private\n */\nexport const sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\n/**\n * Determines whether the send box should be disabled for ARIA accessibility.\n *\n * @param hasContent - Indicates whether the send box has content.\n * @param hasCompletedAttachmentUploads - Indicates whether attachment uploads have completed.\n * @param hasError - Indicates whether there is an error.\n * @param disabled - Indicates whether the send box is disabled.\n * @returns A boolean value indicating whether the send box should be disabled for ARIA accessibility.\n */\nexport const isSendBoxButtonAriaDisabled = ({\n  hasContent,\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasCompletedAttachmentUploads,\n  hasError,\n  disabled\n}: {\n  hasContent: boolean;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasCompletedAttachmentUploads: boolean;\n  hasError: boolean;\n  disabled: boolean;\n}): boolean => {\n  return (\n    // no content\n    !(hasContent || /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads) ||\n    //error message exists\n    hasError ||\n    disabled\n  );\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\ninterface CancelInlineImageUploadProps {\n  imageSrcArray: string[] | undefined;\n  inlineImages: AttachmentMetadataInProgress[] | undefined;\n  messageId?: string;\n  editBoxOnCancelInlineImageUpload?: (id: string, messageId: string) => void;\n  sendBoxOnCancelInlineImageUpload?: (id: string) => void;\n}\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const cancelInlineImageUpload = (props: CancelInlineImageUploadProps): void => {\n  const { imageSrcArray, inlineImages, messageId, editBoxOnCancelInlineImageUpload, sendBoxOnCancelInlineImageUpload } =\n    props;\n  if (imageSrcArray && inlineImages && inlineImages?.length > 0) {\n    inlineImages?.map((inlineImage) => {\n      if (inlineImage.url && !imageSrcArray?.includes(inlineImage.url)) {\n        sendBoxOnCancelInlineImageUpload && sendBoxOnCancelInlineImageUpload(inlineImage.id);\n        editBoxOnCancelInlineImageUpload && editBoxOnCancelInlineImageUpload(inlineImage.id, messageId || '');\n      }\n    });\n  }\n};\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @internal\n */\nexport const toAttachmentMetadata = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): AttachmentMetadata[] | undefined => {\n  return attachmentsWithProgress\n    ?.filter((attachment) => {\n      return !('error' in attachment) && !attachment.error?.message;\n    })\n    .map((attachment) => {\n      return {\n        id: attachment.id,\n        name: attachment.name,\n        url: attachment.url ?? ''\n      };\n    });\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const insertImagesToContentString = async (\n  content: string,\n  inlineImages?: AttachmentMetadataInProgress[],\n  onCompleted?: (content: string) => void\n): Promise<void> => {\n  if (!inlineImages || inlineImages.length <= 0) {\n    onCompleted?.(content);\n  }\n  const newContent = await addUploadedImagesToMessage(content, inlineImages ?? []);\n  onCompleted?.(newContent);\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const removeBrokenImageContentAndClearImageSizeStyles = (content: string): string => {\n  const document = new DOMParser().parseFromString(content, 'text/html');\n  document.querySelectorAll('img').forEach((img) => {\n    // Before submitting/resend the message, we need to trim the unnecessary attributes such as src,\n    // which is set to a local svg of a broken image icon at this point.\n    // Once message is submitted/resent, it will be fetched again and might not be a broken image anymore,\n    // That's why we need to remove the class and data-ui-id attribute of 'broken-image-wrapper'\n    if (img.className === 'broken-image-wrapper') {\n      img.removeAttribute('class');\n      img.removeAttribute('src');\n      img.removeAttribute('data-ui-id');\n    }\n    // Clear maxWidth and maxHeight styles that are set by roosterJS.\n    // Clear width and height styles as the width and height is set in attributes\n    // This is so that they can be set in messageThread styles without using the important flag.\n    img.style.width = '';\n    img.style.height = '';\n    img.style.maxWidth = '';\n    img.style.maxHeight = '';\n  });\n  return document.body.innerHTML;\n};\n"]}
+{"version":3,"file":"SendBoxUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/SendBoxUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\nexport const hasIncompleteAttachmentUploads = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): boolean => {\n  return !!(\n    attachmentsWithProgress?.length &&\n    !attachmentsWithProgress\n      .filter((attachmentUpload) => !attachmentUpload.error)\n      .every((attachmentUpload) => attachmentUpload.progress === 1 && attachmentUpload.progress !== undefined)\n  );\n};\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\nexport const isAttachmentUploadCompleted = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): boolean => {\n  return !!attachmentsWithProgress?.find((attachment) => !attachment.error);\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * Check if the content has inline image.\n * @internal\n */\nexport const hasInlineImageContent = (content: string): boolean => {\n  const document = new DOMParser().parseFromString(content, 'text/html');\n  return !!document.querySelector('img');\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n *\n * @param message - The message content to update.\n * @param initialInlineImages - The initial inline images that comes with the message before editing.\n *\n * @returns The updated message content.\n */\nexport const updateStylesOfInlineImages = async (\n  message: string,\n  initialInlineImages: Record<string, string>[]\n): Promise<string> => {\n  if (message === '') {\n    return message;\n  }\n  const initialInlineImagesIds = initialInlineImages.map((initialInlineImage) => initialInlineImage.id);\n  const document = new DOMParser().parseFromString(message ?? '', 'text/html');\n  const imagesPromise = Array.from(document.querySelectorAll('img')).map((img) => {\n    return new Promise<void>((resolve, rejects) => {\n      // The message might content images that comes with the message before editing.\n      // This function should only modify the message content for images that are newly added.\n      if (initialInlineImagesIds.includes(img.id)) {\n        resolve();\n        return;\n      }\n      const imageElement = new Image();\n      imageElement.src = img.src;\n      imageElement.onload = () => {\n        // imageElement is a copy of original img element, so changes need to be made to the original img element\n        img.width = imageElement.width;\n        img.height = imageElement.height;\n        img.style.aspectRatio = `${imageElement.width} / ${imageElement.height}`;\n        // Clear maxWidth and maxHeight styles that are set by roosterJS.\n        // This is so that they can be set in messageThread styles without using the important flag.\n        img.style.maxWidth = '';\n        img.style.maxHeight = '';\n        resolve();\n      };\n      imageElement.onerror = () => {\n        console.log('Error loading image', img.src);\n        rejects();\n      };\n    });\n  });\n  await Promise.all(imagesPromise);\n  const newMessage = document.body.innerHTML;\n  return newMessage;\n};\n\n/**\n * @private\n */\nexport const isMessageTooLong = (valueLength: number): boolean => {\n  return valueLength > MAXIMUM_LENGTH_OF_MESSAGE;\n};\n\n/**\n * @private\n */\nexport const sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\n/**\n * Determines whether the send box should be disabled for ARIA accessibility.\n *\n * @param hasContent - Indicates whether the send box has content.\n * @param hasCompletedAttachmentUploads - Indicates whether attachment uploads have completed.\n * @param hasError - Indicates whether there is an error.\n * @param disabled - Indicates whether the send box is disabled.\n * @returns A boolean value indicating whether the send box should be disabled for ARIA accessibility.\n */\nexport const isSendBoxButtonAriaDisabled = ({\n  hasContent,\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasCompletedAttachmentUploads,\n  hasError,\n  disabled\n}: {\n  hasContent: boolean;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasCompletedAttachmentUploads: boolean;\n  hasError: boolean;\n  disabled: boolean;\n}): boolean => {\n  return (\n    // no content\n    !(hasContent || /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads) ||\n    //error message exists\n    hasError ||\n    disabled\n  );\n};\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @internal\n */\nexport const toAttachmentMetadata = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): AttachmentMetadata[] | undefined => {\n  return attachmentsWithProgress\n    ?.filter((attachment) => {\n      return !('error' in attachment) && !attachment.error?.message;\n    })\n    .map((attachment) => {\n      return {\n        id: attachment.id,\n        name: attachment.name,\n        url: attachment.url ?? ''\n      };\n    });\n};\n\n/**\n * @internal\n */\nexport const modifyInlineImagesInContentString = async (\n  content: string,\n  initialInlineImages: Record<string, string>[],\n  onCompleted?: (content: string) => void\n): Promise<void> => {\n  let newContent = content;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  newContent = await updateStylesOfInlineImages(content, initialInlineImages);\n  onCompleted?.(newContent);\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const removeBrokenImageContentAndClearImageSizeStyles = (content: string): string => {\n  const document = new DOMParser().parseFromString(content, 'text/html');\n  document.querySelectorAll('img').forEach((img) => {\n    // Before submitting/resend the message, we need to trim the unnecessary attributes such as src,\n    // which is set to a local svg of a broken image icon at this point.\n    // Once message is submitted/resent, it will be fetched again and might not be a broken image anymore,\n    // That's why we need to remove the class and data-ui-id attribute of 'broken-image-wrapper'\n    if (img.className === 'broken-image-wrapper') {\n      img.removeAttribute('class');\n      img.removeAttribute('src');\n      img.removeAttribute('data-ui-id');\n    }\n    // Clear maxWidth and maxHeight styles that are set by roosterJS.\n    // Clear width and height styles as the width and height is set in attributes\n    // This is so that they can be set in messageThread styles without using the important flag.\n    img.style.width = '';\n    img.style.height = '';\n    img.style.maxWidth = '';\n    img.style.maxHeight = '';\n  });\n  return document.body.innerHTML;\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const getContentWithUpdatedInlineImagesInfo = (\n  content: string,\n  inlineImageWithProgress: AttachmentMetadataInProgress[]\n): string => {\n  if (!inlineImageWithProgress || inlineImageWithProgress.length <= 0) {\n    return content;\n  }\n  const document = new DOMParser().parseFromString(content, 'text/html');\n  document.querySelectorAll('img').forEach((img) => {\n    const imageId = img.id;\n    const inlineImage = inlineImageWithProgress.find(\n      (image) => !image.error && image.progress === 1 && image.id === imageId\n    );\n    if (inlineImage) {\n      img.id = inlineImage.id;\n      img.src = inlineImage.url || img.src;\n    }\n  });\n  return document.body.innerHTML;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.js

@@ -8,12 +8,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
  */
 export const useTrackedCapabilityChangedNotifications = (capabilitiesChangedAndRoleInfo) => {
     const [trackedCapabilityChangedNotifications, setTrackedCapabilityChangedNotifications] = useState({});
-    // Initialize a share screen capability changed notification with 'RoleChanged' reason so that the initial
-    // share screen capability changed info from the Calling SDK when joining Teams interop will be ignored because
-    // being able to share screen is assumed by default. This is inline with what Teams is doing.
-    const activeNotifications = useRef({
-        shareScreen: { capabilityName: 'shareScreen', isPresent: true, changedReason: 'RoleChanged' }
-    });
+    const activeNotifications = useRef({});
     useEffect(() => {
         activeNotifications.current = updateLatestCapabilityChangedNotificationMap(capabilitiesChangedAndRoleInfo, activeNotifications.current);
         setTrackedCapabilityChangedNotifications((prev) => updateTrackedCapabilityChangedNotificationsWithActiveNotifications(prev, Object.values(activeNotifications.current)));
@@ -87,6 +82,24 @@ const updateLatestCapabilityChangedNotificationMap = (capabilitiesChangedInfoAnd
                 ((_b = activeNotifications[capabilityName]) === null || _b === void 0 ? void 0 : _b.changedReason)) {
             continue;
         }
+        // All initial values of capabilities are not present with reason 'FeatureNotSupported'. So we should not show a
+        // notification for them when they initially become present at the start of the call
+        const oldCapabilityValue = capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.oldValue[capabilityName];
+        if (newCapabilityValue.isPresent === true &&
+            (oldCapabilityValue === null || oldCapabilityValue === void 0 ? void 0 : oldCapabilityValue.isPresent) === false &&
+            (oldCapabilityValue === null || oldCapabilityValue === void 0 ? void 0 : oldCapabilityValue.reason) === 'FeatureNotSupported' &&
+            capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason === 'MeetingOptionOrOrganizerPolicyChanged') {
+            continue;
+        }
+        // Do not show the first time the screenshare capability is present when the user's role is resolved to mirror
+        // Teams behaviour
+        if (capabilityName === 'shareScreen' &&
+            activeNotifications['shareScreen'] === undefined &&
+            newCapabilityValue.isPresent === true &&
+            (oldCapabilityValue === null || oldCapabilityValue === void 0 ? void 0 : oldCapabilityValue.isPresent) === false &&
+            capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason === 'RoleChanged') {
+            continue;
+        }
         const newCapabilityChangeNotification = {
             capabilityName: capabilityName,
             isPresent: newCapabilityValue.isPresent,

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackCapabilityChangedNotifications.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { CapabilitiesChangeInfo, ParticipantCapabilityName, ParticipantRole } from '@azure/communication-calling';\n\nimport {\n  CapabalityChangedNotification,\n  CapabilitiesChangeNotificationBarProps\n} from '../components/CapabilitiesChangedNotificationBar';\n\nimport { TrackedCapabilityChangedNotifications } from '../types/CapabilityChangedNotificationTracking';\n\n/**\n * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.\n *\n * @private\n */\nexport const useTrackedCapabilityChangedNotifications = (\n  capabilitiesChangedAndRoleInfo: CapabilitiesChangedInfoAndRole\n): CapabilitiesChangeNotificationBarProps => {\n  const [trackedCapabilityChangedNotifications, setTrackedCapabilityChangedNotifications] =\n    useState<TrackedCapabilityChangedNotifications>({});\n\n  // Initialize a share screen capability changed notification with 'RoleChanged' reason so that the initial\n  // share screen capability changed info from the Calling SDK when joining Teams interop will be ignored because\n  // being able to share screen is assumed by default. This is inline with what Teams is doing.\n  const activeNotifications = useRef<LatestCapabilityChangedNotificationRecord>({\n    shareScreen: { capabilityName: 'shareScreen', isPresent: true, changedReason: 'RoleChanged' }\n  });\n\n  useEffect(() => {\n    activeNotifications.current = updateLatestCapabilityChangedNotificationMap(\n      capabilitiesChangedAndRoleInfo,\n      activeNotifications.current\n    );\n    setTrackedCapabilityChangedNotifications((prev) =>\n      updateTrackedCapabilityChangedNotificationsWithActiveNotifications(\n        prev,\n        Object.values(activeNotifications.current)\n      )\n    );\n  }, [capabilitiesChangedAndRoleInfo]);\n\n  const onDismissCapabilityChangedNotification = useCallback((notification: CapabalityChangedNotification) => {\n    setTrackedCapabilityChangedNotifications((prev) =>\n      trackCapabilityChangedNotificationAsDismissed(notification.capabilityName, prev)\n    );\n  }, []);\n\n  const latestCapabilityChangedNotifications = useMemo(\n    () =>\n      filterLatestCapabilityChangedNotifications(\n        Object.values(activeNotifications.current),\n        trackedCapabilityChangedNotifications\n      ),\n    [trackedCapabilityChangedNotifications]\n  );\n\n  return {\n    capabilitiesChangedNotifications: latestCapabilityChangedNotifications,\n    onDismissNotification: onDismissCapabilityChangedNotification\n  };\n};\n\n/**\n * Take the set of active notifications, and filter to only those that are newer than previously dismissed notifications or have never been dismissed.\n *\n * @private\n */\nexport const filterLatestCapabilityChangedNotifications = (\n  activeNotifications: CapabalityChangedNotification[],\n  trackedNotifications: TrackedCapabilityChangedNotifications\n): CapabalityChangedNotification[] => {\n  const filteredNotifications = activeNotifications.filter((activeNotification) => {\n    const trackedNotification = trackedNotifications[activeNotification.capabilityName];\n    return (\n      !trackedNotification ||\n      !trackedNotification.lastDismissedAt ||\n      trackedNotification.lastDismissedAt < trackedNotification.mostRecentlyActive\n    );\n  });\n  return filteredNotifications;\n};\n\n/**\n * Maintain a record of the most recently active notification for each capability name.\n *\n * @private\n */\nexport const updateTrackedCapabilityChangedNotificationsWithActiveNotifications = (\n  existingTrackedNotifications: TrackedCapabilityChangedNotifications,\n  activeNotifications: CapabalityChangedNotification[]\n): TrackedCapabilityChangedNotifications => {\n  const trackedNotifications: TrackedCapabilityChangedNotifications = {};\n\n  // Only care about active notifications. If notifications are no longer active we do not track that they have been previously dismissed.\n  for (const activeNotification of activeNotifications) {\n    const existingTrackedNotification = existingTrackedNotifications[activeNotification.capabilityName];\n    trackedNotifications[activeNotification.capabilityName] = {\n      mostRecentlyActive:\n        activeNotification.timestamp ?? existingTrackedNotification?.mostRecentlyActive ?? new Date(Date.now()),\n      lastDismissedAt: existingTrackedNotification?.lastDismissedAt\n    };\n  }\n\n  return trackedNotifications;\n};\n\n/**\n * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.\n *\n * @private\n */\nexport const trackCapabilityChangedNotificationAsDismissed = (\n  capabilityName: ParticipantCapabilityName,\n  trackedNotifications: TrackedCapabilityChangedNotifications\n): TrackedCapabilityChangedNotifications => {\n  const now = new Date(Date.now());\n  const existingNotification = trackedNotifications[capabilityName];\n\n  return {\n    ...trackedNotifications,\n    [capabilityName]: {\n      ...(existingNotification || {}),\n      lastDismissedAt: now\n    }\n  };\n};\n\ninterface CapabilitiesChangedInfoAndRole {\n  capabilitiesChangeInfo?: CapabilitiesChangeInfo;\n  participantRole?: ParticipantRole;\n}\n\ntype LatestCapabilityChangedNotificationRecord = Partial<\n  Record<ParticipantCapabilityName, CapabalityChangedNotification>\n>;\n\nconst updateLatestCapabilityChangedNotificationMap = (\n  capabilitiesChangedInfoAndRole: CapabilitiesChangedInfoAndRole,\n  activeNotifications: LatestCapabilityChangedNotificationRecord\n): LatestCapabilityChangedNotificationRecord => {\n  if (!capabilitiesChangedInfoAndRole.capabilitiesChangeInfo) {\n    return activeNotifications;\n  }\n\n  for (const [capabilityKey, newCapabilityValue] of Object.entries(\n    capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.newValue\n  )) {\n    // Cast is safe because we are iterating over the enum keys on the object.entries where\n    // newCapabilityValue typing is correctly returned. Object.entries limitations\n    // always returns string for the key\n    const capabilityName = capabilityKey as ParticipantCapabilityName;\n    // If the active notification for a capability has the same `isPresent` value and the same reason as the new\n    // capability value from the SDK then we will not create a new notification to avoid redundancy\n    if (\n      activeNotifications[capabilityName] &&\n      newCapabilityValue.isPresent === activeNotifications[capabilityName]?.isPresent &&\n      capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason ===\n        activeNotifications[capabilityName]?.changedReason\n    ) {\n      continue;\n    }\n    const newCapabilityChangeNotification: CapabalityChangedNotification = {\n      capabilityName: capabilityName,\n      isPresent: newCapabilityValue.isPresent,\n      changedReason: capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason,\n      role: capabilitiesChangedInfoAndRole.participantRole,\n      timestamp: new Date(Date.now())\n    };\n    activeNotifications[capabilityName] = newCapabilityChangeNotification;\n  }\n  return activeNotifications;\n};\n"]}
+{"version":3,"file":"TrackCapabilityChangedNotifications.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { CapabilitiesChangeInfo, ParticipantCapabilityName, ParticipantRole } from '@azure/communication-calling';\n\nimport {\n  CapabalityChangedNotification,\n  CapabilitiesChangeNotificationBarProps\n} from '../components/CapabilitiesChangedNotificationBar';\n\nimport { TrackedCapabilityChangedNotifications } from '../types/CapabilityChangedNotificationTracking';\n\n/**\n * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.\n *\n * @private\n */\nexport const useTrackedCapabilityChangedNotifications = (\n  capabilitiesChangedAndRoleInfo: CapabilitiesChangedInfoAndRole\n): CapabilitiesChangeNotificationBarProps => {\n  const [trackedCapabilityChangedNotifications, setTrackedCapabilityChangedNotifications] =\n    useState<TrackedCapabilityChangedNotifications>({});\n\n  const activeNotifications = useRef<LatestCapabilityChangedNotificationRecord>({});\n\n  useEffect(() => {\n    activeNotifications.current = updateLatestCapabilityChangedNotificationMap(\n      capabilitiesChangedAndRoleInfo,\n      activeNotifications.current\n    );\n    setTrackedCapabilityChangedNotifications((prev) =>\n      updateTrackedCapabilityChangedNotificationsWithActiveNotifications(\n        prev,\n        Object.values(activeNotifications.current)\n      )\n    );\n  }, [capabilitiesChangedAndRoleInfo]);\n\n  const onDismissCapabilityChangedNotification = useCallback((notification: CapabalityChangedNotification) => {\n    setTrackedCapabilityChangedNotifications((prev) =>\n      trackCapabilityChangedNotificationAsDismissed(notification.capabilityName, prev)\n    );\n  }, []);\n\n  const latestCapabilityChangedNotifications = useMemo(\n    () =>\n      filterLatestCapabilityChangedNotifications(\n        Object.values(activeNotifications.current),\n        trackedCapabilityChangedNotifications\n      ),\n    [trackedCapabilityChangedNotifications]\n  );\n\n  return {\n    capabilitiesChangedNotifications: latestCapabilityChangedNotifications,\n    onDismissNotification: onDismissCapabilityChangedNotification\n  };\n};\n\n/**\n * Take the set of active notifications, and filter to only those that are newer than previously dismissed notifications or have never been dismissed.\n *\n * @private\n */\nexport const filterLatestCapabilityChangedNotifications = (\n  activeNotifications: CapabalityChangedNotification[],\n  trackedNotifications: TrackedCapabilityChangedNotifications\n): CapabalityChangedNotification[] => {\n  const filteredNotifications = activeNotifications.filter((activeNotification) => {\n    const trackedNotification = trackedNotifications[activeNotification.capabilityName];\n    return (\n      !trackedNotification ||\n      !trackedNotification.lastDismissedAt ||\n      trackedNotification.lastDismissedAt < trackedNotification.mostRecentlyActive\n    );\n  });\n  return filteredNotifications;\n};\n\n/**\n * Maintain a record of the most recently active notification for each capability name.\n *\n * @private\n */\nexport const updateTrackedCapabilityChangedNotificationsWithActiveNotifications = (\n  existingTrackedNotifications: TrackedCapabilityChangedNotifications,\n  activeNotifications: CapabalityChangedNotification[]\n): TrackedCapabilityChangedNotifications => {\n  const trackedNotifications: TrackedCapabilityChangedNotifications = {};\n\n  // Only care about active notifications. If notifications are no longer active we do not track that they have been previously dismissed.\n  for (const activeNotification of activeNotifications) {\n    const existingTrackedNotification = existingTrackedNotifications[activeNotification.capabilityName];\n    trackedNotifications[activeNotification.capabilityName] = {\n      mostRecentlyActive:\n        activeNotification.timestamp ?? existingTrackedNotification?.mostRecentlyActive ?? new Date(Date.now()),\n      lastDismissedAt: existingTrackedNotification?.lastDismissedAt\n    };\n  }\n\n  return trackedNotifications;\n};\n\n/**\n * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.\n *\n * @private\n */\nexport const trackCapabilityChangedNotificationAsDismissed = (\n  capabilityName: ParticipantCapabilityName,\n  trackedNotifications: TrackedCapabilityChangedNotifications\n): TrackedCapabilityChangedNotifications => {\n  const now = new Date(Date.now());\n  const existingNotification = trackedNotifications[capabilityName];\n\n  return {\n    ...trackedNotifications,\n    [capabilityName]: {\n      ...(existingNotification || {}),\n      lastDismissedAt: now\n    }\n  };\n};\n\ninterface CapabilitiesChangedInfoAndRole {\n  capabilitiesChangeInfo?: CapabilitiesChangeInfo;\n  participantRole?: ParticipantRole;\n}\n\ntype LatestCapabilityChangedNotificationRecord = Partial<\n  Record<ParticipantCapabilityName, CapabalityChangedNotification>\n>;\n\nconst updateLatestCapabilityChangedNotificationMap = (\n  capabilitiesChangedInfoAndRole: CapabilitiesChangedInfoAndRole,\n  activeNotifications: LatestCapabilityChangedNotificationRecord\n): LatestCapabilityChangedNotificationRecord => {\n  if (!capabilitiesChangedInfoAndRole.capabilitiesChangeInfo) {\n    return activeNotifications;\n  }\n\n  for (const [capabilityKey, newCapabilityValue] of Object.entries(\n    capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.newValue\n  )) {\n    // Cast is safe because we are iterating over the enum keys on the object.entries where\n    // newCapabilityValue typing is correctly returned. Object.entries limitations\n    // always returns string for the key\n    const capabilityName = capabilityKey as ParticipantCapabilityName;\n    // If the active notification for a capability has the same `isPresent` value and the same reason as the new\n    // capability value from the SDK then we will not create a new notification to avoid redundancy\n    if (\n      activeNotifications[capabilityName] &&\n      newCapabilityValue.isPresent === activeNotifications[capabilityName]?.isPresent &&\n      capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason ===\n        activeNotifications[capabilityName]?.changedReason\n    ) {\n      continue;\n    }\n\n    // All initial values of capabilities are not present with reason 'FeatureNotSupported'. So we should not show a\n    // notification for them when they initially become present at the start of the call\n    const oldCapabilityValue = capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.oldValue[capabilityName];\n    if (\n      newCapabilityValue.isPresent === true &&\n      oldCapabilityValue?.isPresent === false &&\n      oldCapabilityValue?.reason === 'FeatureNotSupported' &&\n      capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason === 'MeetingOptionOrOrganizerPolicyChanged'\n    ) {\n      continue;\n    }\n\n    // Do not show the first time the screenshare capability is present when the user's role is resolved to mirror\n    // Teams behaviour\n    if (\n      capabilityName === 'shareScreen' &&\n      activeNotifications['shareScreen'] === undefined &&\n      newCapabilityValue.isPresent === true &&\n      oldCapabilityValue?.isPresent === false &&\n      capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason === 'RoleChanged'\n    ) {\n      continue;\n    }\n\n    const newCapabilityChangeNotification: CapabalityChangedNotification = {\n      capabilityName: capabilityName,\n      isPresent: newCapabilityValue.isPresent,\n      changedReason: capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason,\n      role: capabilitiesChangedInfoAndRole.participantRole,\n      timestamp: new Date(Date.now())\n    };\n    activeNotifications[capabilityName] = newCapabilityChangeNotification;\n  }\n  return activeNotifications;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js

@@ -44,7 +44,7 @@ import { SendBoxPicker } from '../common/SendBoxPicker';
 /* @conditional-compile-remove(rich-text-editor-composite-support) */
 import { loadRichTextSendBox } from '../common/SendBoxPicker';
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-import { getEditBoxMessagesInlineImages, getSendBoxInlineImages, onCancelInlineImageUploadHandlerForEditBox, onCancelInlineImageUploadHandlerForSendBox, onInsertInlineImageForEditBox, onInsertInlineImageForSendBox } from './ImageUpload/ImageUploadUtils';
+import { cancelInlineImageUpload, getEditBoxMessagesInlineImages, getImageFileNameFromAttributes, getSendBoxInlineImages, onInsertInlineImageForEditBox, onInsertInlineImageForSendBox, updateContentStringWithUploadedInlineImages } from './ImageUpload/ImageUploadUtils';
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { isMicrosoftTeamsUserIdentifier } from '@azure/communication-common';
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -338,6 +338,8 @@ export const ChatScreen = (props) => {
     /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ options) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a;
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            content = updateContentStringWithUploadedInlineImages(content, sendBoxInlineImageUploads);
             /* @conditional-compile-remove(file-sharing-acs) */
             const attachments = (_a = options === null || options === void 0 ? void 0 : options.attachments) !== null && _a !== void 0 ? _a : [];
             /* @conditional-compile-remove(file-sharing-acs) */
@@ -360,10 +362,16 @@ export const ChatScreen = (props) => {
                 type: options === null || options === void 0 ? void 0 : options.type
             });
         });
-    }, [adapter, /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleSendBoxInlineImageUploadAction]);
+    }, [
+        adapter,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleSendBoxInlineImageUploadAction,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads
+    ]);
     const onUpdateMessageHandler = useCallback(function (messageId, content, 
     /* @conditional-compile-remove(file-sharing-acs) */ options) {
         return __awaiter(this, void 0, void 0, function* () {
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            content = updateContentStringWithUploadedInlineImages(content, editBoxInlineImageUploads, messageId);
             yield messageThreadProps.onUpdateMessage(messageId, content, 
             /* @conditional-compile-remove(file-sharing-acs) */ options);
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -371,6 +379,7 @@ export const ChatScreen = (props) => {
         });
     }, [
         /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleEditBoxInlineImageUploadAction,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads,
         messageThreadProps
     ]);
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -404,14 +413,14 @@ export const ChatScreen = (props) => {
         return (options === null || options === void 0 ? void 0 : options.richTextEditor)
             ? Object.assign(Object.assign({}, richTextEditorOptions), { 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onInsertInlineImage: (imageUrl, imageFileName, messageId) => {
-                    onInsertInlineImageForEditBox(imageUrl, imageFileName, messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
+                onInsertInlineImage: (imageAttributes, messageId) => {
+                    onInsertInlineImageForEditBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
                 }, 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                messagesInlineImages: getEditBoxMessagesInlineImages(editBoxInlineImageUploads), 
+                messagesInlineImagesWithProgress: getEditBoxMessagesInlineImages(editBoxInlineImageUploads), 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onCancelInlineImageUpload: (imageId, messageId) => {
-                    onCancelInlineImageUploadHandlerForEditBox(imageId, messageId, editBoxInlineImageUploads, adapter, handleEditBoxInlineImageUploadAction);
+                onRemoveInlineImage: (imageAttributes, messageId) => {
+                    cancelInlineImageUpload(imageAttributes, editBoxInlineImageUploads, messageId, handleEditBoxInlineImageUploadAction, adapter);
                 } }) : undefined;
     }, [
         options === null || options === void 0 ? void 0 : options.richTextEditor,
@@ -425,14 +434,14 @@ export const ChatScreen = (props) => {
         return (options === null || options === void 0 ? void 0 : options.richTextEditor)
             ? Object.assign(Object.assign({}, richTextEditorOptions), { 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onInsertInlineImage: (imageUrl, imageFileName) => {
-                    onInsertInlineImageForSendBox(imageUrl, imageFileName, adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
+                onInsertInlineImage: (imageAttributes) => {
+                    onInsertInlineImageForSendBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
                 }, 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                inlineImages: getSendBoxInlineImages(sendBoxInlineImageUploads), 
+                inlineImagesWithProgress: getSendBoxInlineImages(sendBoxInlineImageUploads), 
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onCancelInlineImageUpload: (imageId) => {
-                    onCancelInlineImageUploadHandlerForSendBox(imageId, sendBoxInlineImageUploads, adapter, handleSendBoxInlineImageUploadAction);
+                onRemoveInlineImage: (imageAttributes) => {
+                    cancelInlineImageUpload(imageAttributes, sendBoxInlineImageUploads, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);
                 } }) : undefined;
     }, [
         options === null || options === void 0 ? void 0 : options.richTextEditor,