@azure/communication-react 1.5.1-alpha-202304190014 → 1.5.1-alpha-202304210012

package/dist/dist-cjs/communication-react/index.js

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202304190014';
+var telemetryVersion = '1.5.1-alpha-202304210012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7146,6 +7146,15 @@ const MessageContentWithLiveAria = (props) => {
 };
 const MessageContentAsRichTextHTML = (props) => {
     const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
+    /* @conditional-compile-remove(teams-inline-images) */
+    React.useEffect(() => {
+        var _a;
+        (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map((fileMetadata) => {
+            if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {
+                props.onFetchAttachment(fileMetadata);
+            }
+        });
+    }, [props]);
     return (React__default['default'].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
 const MessageContentAsText = (props) => {
@@ -7210,20 +7219,9 @@ const processHtmlToReact = (props) => {
                 ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id)));
         },
         processNode: (node, children, index) => {
-            var _a;
             // logic to check id in map/list
-            const fileMetadata = (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id);
-            // if in cache, early return
             if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
                 node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
-                return processNodeDefinitions.processDefaultNode(node, children, index);
-            }
-            // not yet in cache
-            if (fileMetadata && props.onFetchAttachment && props.attachmentsMap) {
-                props.onFetchAttachment(fileMetadata);
-                if (node.attribs.id in props.attachmentsMap) {
-                    node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
-                }
             }
             return processNodeDefinitions.processDefaultNode(node, children, index);
         }
@@ -7839,6 +7837,7 @@ const MessageThread = (props) => {
         if (!onFetchAttachments || attachment.id in inlineAttachments) {
             return;
         }
+        setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
         const attachmentDownloadResult = yield onFetchAttachments(attachment);
         if (attachmentDownloadResult[0]) {
             setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult[0].blobUrl })));
@@ -13942,6 +13941,22 @@ const _VideoBackgroundEffectsPicker = (props) => {
         })));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const scrollbarStyles = {
+    '::-webkit-scrollbar, *::-webkit-scrollbar': {
+        width: '0.3rem',
+        height: '0.3rem'
+    },
+    '::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb': {
+        borderRadius: '10px',
+        background: 'rgba(150, 150, 150)'
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -13976,11 +13991,7 @@ const captionContainerClassName = react.mergeStyles({
 /**
  * @private
  */
-const captionsBannerClassName = react.mergeStyles({
-    height: _pxToRem(100),
-    overflowY: 'auto',
-    overflowX: 'hidden'
-});
+const captionsBannerClassName = react.mergeStyles(Object.assign({ height: _pxToRem(100), overflowY: 'auto', overflowX: 'hidden' }, scrollbarStyles));
 /**
  * @private
  */
@@ -14158,7 +14169,7 @@ const buttonStyles = (theme) => {
  * @private
  */
 const dropdownStyles = {
-    callout: { height: _pxToRem(300), overflow: 'auto' }
+    callout: Object.assign({ height: _pxToRem(300), overflow: 'auto' }, scrollbarStyles)
 };
 
 var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {