@azure/communication-react 1.5.1-alpha-202304180012 → 1.5.1-alpha-202304200013

package/dist/communication-react.d.ts

@@ -2445,7 +2445,9 @@ export declare interface CallWithChatAdapterManagement {
     updateFileUploadErrorMessage: (id: string, errorMessage: string) => void;
     /** @beta */
     updateFileUploadMetadata: (id: string, metadata: FileMetadata) => void;
-    downloadAuthenticatedAttachment?: (attachmentUrl: string) => Promise<AttachmentDownloadResult>;
+    downloadAttachments: (options: {
+        attachmentUrls: string[];
+    }) => Promise<AttachmentDownloadResult[]>;
     /**
      * Puts the Call in a Localhold.
      *
@@ -3488,7 +3490,9 @@ export declare interface ChatAdapterThreadManagement {
      *
      */
     loadPreviousChatMessages(messagesToLoad: number): Promise<boolean>;
-    downloadAuthenticatedAttachment?: (attachmentUrl: string) => Promise<AttachmentDownloadResult>;
+    downloadAttachments: (options: {
+        attachmentUrls: string[];
+    }) => Promise<AttachmentDownloadResult[]>;
 }
 
 /**
@@ -6728,7 +6732,7 @@ export declare type MessageThreadProps = {
      * @param attachment - FileMetadata object we want to render
      * @beta
      */
-    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult>;
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult[]>;
     /**
      * Optional callback to edit a message.
      *

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-202304180012';
+var telemetryVersion = '1.5.1-alpha-202304200013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5094,7 +5094,7 @@ const GridLayout = (props) => {
         return calculateGridProps(numberOfChildren, currentWidth, currentHeight);
     }, [numberOfChildren, currentWidth, currentHeight]);
     const cssGridStyles = React.useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);
-    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root) }, children));
+    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root), "data-ui-id": "grid-layout" }, children));
 };
 /**
  * The cell aspect ratio we aim for in a grid
@@ -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,8 +7837,11 @@ const MessageThread = (props) => {
         if (!onFetchAttachments || attachment.id in inlineAttachments) {
             return;
         }
+        setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
         const attachmentDownloadResult = yield onFetchAttachments(attachment);
-        setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult.blobUrl })));
+        if (attachmentDownloadResult[0]) {
+            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult[0].blobUrl })));
+        }
     }), [inlineAttachments, onFetchAttachments]);
     const isAllChatMessagesLoadedRef = React.useRef(false);
     // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
@@ -11049,7 +11050,7 @@ const ModalBase = React__namespace.forwardRef((propsWithoutDefaults, ref) => {
         internalState.events.dispose();
     });
     useComponentRef(props, focusTrapZone);
-    const modalContent = (React__namespace.createElement(react.FocusTrapZone, { disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined },
+    const modalContent = (React__namespace.createElement(react.FocusTrapZone, { disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined, "data-ui-id": props['data-ui-id'] },
         dragOptions && internalState.isInKeyboardMoveMode && (React__namespace.createElement("div", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? (React__namespace.createElement(react.Icon, Object.assign({}, dragOptions.keyboardMoveIconProps))) : (React__namespace.createElement(react.Icon, { iconName: "move", className: classNames.keyboardMoveIcon })))),
         React__namespace.createElement("div", { ref: allowScrollOnModal, className: classNames.scrollableContent, "data-is-scrollable": true },
             dragOptions && isModalMenuOpen && (React__namespace.createElement(dragOptions.menu, { items: [
@@ -11485,7 +11486,7 @@ const FloatingLocalVideo = (props) => {
         : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
     const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
     const layerProps = React.useMemo(() => ({ hostId: layerHostId }), [layerHostId]);
-    return (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoComponent));
+    return (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition, "data-ui-id": "floating-local-video-host" }, localVideoComponent));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15194,6 +15195,34 @@ const extractAttachedFilesMetadata = (metadata) => {
         return [];
     }
 };
+/* @conditional-compile-remove(teams-inline-images) */
+const extractInlineImageFilesMetadata = (attachments) => {
+    return attachments.map((attachment) => {
+        var _a, _b;
+        return ({
+            attachmentType: attachment.attachmentType,
+            id: attachment.id,
+            name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
+            extension: (_b = attachment.contentType) !== null && _b !== void 0 ? _b : '',
+            url: attachment.url,
+            previewUrl: attachment.previewUrl
+        });
+    });
+};
+/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images) */
+const extractFilesMetadata = (message) => {
+    var _a, _b;
+    let fileMetadata = [];
+    /* @conditional-compile-remove(file-sharing) */
+    if (message.metadata) {
+        fileMetadata = fileMetadata.concat(extractAttachedFilesMetadata(message.metadata));
+    }
+    /* @conditional-compile-remove(teams-inline-images) */
+    if ((_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments) {
+        fileMetadata = fileMetadata.concat(extractInlineImageFilesMetadata((_b = message.content) === null || _b === void 0 ? void 0 : _b.attachments));
+    }
+    return fileMetadata;
+};
 /* @conditional-compile-remove(data-loss-prevention) */
 const convertToUiBlockedMessage = (message, userId, isSeen, isLargeGroup) => {
     var _a;
@@ -15228,8 +15257,8 @@ const convertToUiChatMessage = (message, userId, isSeen, isLargeGroup) => {
         deletedOn: message.deletedOn,
         mine: messageSenderId === userId,
         metadata: message.metadata,
-        /* @conditional-compile-remove(file-sharing) */
-        attachedFilesMetadata: extractAttachedFilesMetadata(message.metadata || {})
+        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images) */
+        attachedFilesMetadata: extractFilesMetadata(message)
     };
 };
 const convertToUiSystemMessage = (message) => {
@@ -16017,7 +16046,11 @@ class EventSubscriber {
             return convertChatMessage({
                 id: event.id,
                 version: event.version,
-                content: { message: event.message },
+                content: {
+                    message: event.message,
+                    /* @conditional-compile-remove(teams-inline-images) */
+                    attachments: event.attachments
+                },
                 type: this.convertEventType(event.type),
                 sender: event.sender,
                 senderDisplayName: event.senderDisplayName,
@@ -17591,7 +17624,7 @@ class AzureCommunicationChatAdapter {
         /* @conditional-compile-remove(file-sharing) */
         this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
         /* @conditional-compile-remove(teams-inline-images) */
-        this.downloadAuthenticatedAttachment = this.downloadAuthenticatedAttachment.bind(this);
+        this.downloadAttachments = this.downloadAttachments.bind(this);
     }
     dispose() {
         this.unsubscribeAllEvents();
@@ -17729,7 +17762,7 @@ class AzureCommunicationChatAdapter {
         this.fileUploadAdapter.updateFileUploadMetadata(id, metadata);
     }
     /* @conditional-compile-remove(teams-inline-images) */
-    downloadAuthenticatedAttachment(attachmentUrl) {
+    downloadAttachments(options) {
         return __awaiter$i(this, void 0, void 0, function* () {
             return this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 if (this.credential === undefined) {
@@ -17745,27 +17778,34 @@ class AzureCommunicationChatAdapter {
                     e['innerError'] = new Error('AccessToken is null');
                     throw e;
                 }
-                function fetchWithAuthentication(url, token) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
-                        const headers = new Headers();
-                        headers.append('Authorization', `Bearer ${token}`);
-                        try {
-                            return yield fetch(url, { headers });
-                        }
-                        catch (err) {
-                            const e = new Error();
-                            e['target'] = 'ChatThreadClient.getMessage';
-                            e['innerError'] = err;
-                            throw e;
-                        }
-                    });
-                }
-                const response = yield fetchWithAuthentication(attachmentUrl, accessToken.token);
-                const blob = yield response.blob();
-                return { blobUrl: URL.createObjectURL(blob) };
+                return this.downloadAuthenticatedFile(accessToken.token, options);
             }));
         });
     }
+    /* @conditional-compile-remove(teams-inline-images) */
+    downloadAuthenticatedFile(accessToken, options) {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            function fetchWithAuthentication(url, token) {
+                return __awaiter$i(this, void 0, void 0, function* () {
+                    const headers = new Headers();
+                    headers.append('Authorization', `Bearer ${token}`);
+                    try {
+                        return yield fetch(url, { headers });
+                    }
+                    catch (err) {
+                        const e = new Error();
+                        e['target'] = 'ChatThreadClient.getMessage';
+                        e['innerError'] = err;
+                        throw e;
+                    }
+                });
+            }
+            const attachmentUrl = options.attachmentUrls[0];
+            const response = yield fetchWithAuthentication(attachmentUrl, accessToken);
+            const blob = yield response.blob();
+            return [{ blobUrl: URL.createObjectURL(blob) }];
+        });
+    }
     messageReceivedListener(event) {
         const message = convertEventToChatMessage(event);
         this.emitter.emit('messageReceived', { message });
@@ -18633,6 +18673,14 @@ const ChatScreen = (props) => {
     const onRenderFileDownloads = React.useCallback((userId, message) => (React__default['default'].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.attachedFilesMetadata || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
             setDownloadErrorMessage(errorMessage);
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
+    /* @conditional-compile-remove(teams-inline-images) */
+    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$g(void 0, void 0, void 0, function* () {
+        if (attachment.previewUrl) {
+            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
+            return blob;
+        }
+        return [{ blobUrl: '' }];
+    }), [adapter]);
     const AttachFileButton = React.useCallback(() => {
         if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
             return null;
@@ -18650,7 +18698,9 @@ const ChatScreen = (props) => {
                     }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
                 React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
                     /* @conditional-compile-remove(file-sharing) */
-                    onRenderFileDownloads: onRenderFileDownloads, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                    onRenderFileDownloads: onRenderFileDownloads, 
+                    /* @conditional-compile-remove(teams-inline-images) */
+                    onFetchAttachments: onRenderInlineAttachment, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
                     React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
                     React__default['default'].createElement(react.Stack, { horizontal: formFactor === 'mobile' },
@@ -25411,6 +25461,12 @@ class CallWithChatBackedChatAdapter {
         };
         this.callWithChatAdapter = callWithChatAdapter;
     }
+    /* @conditional-compile-remove(teams-inline-images) */
+    downloadAttachments(options) {
+        return __awaiter$2(this, void 0, void 0, function* () {
+            return yield this.callWithChatAdapter.downloadAttachments(options);
+        });
+    }
 }
 function chatAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState) {
     if (!callWithChatAdapterState.chat) {
@@ -25951,6 +26007,8 @@ class AzureCommunicationCallWithChatAdapter {
         this.updateFileUploadErrorMessage = this.updateFileUploadErrorMessage.bind(this);
         /* @conditional-compile-remove(file-sharing) */
         this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
+        /* @conditional-compile-remove(teams-inline-images) */
+        this.downloadAttachments = this.downloadAttachments.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.holdCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
@@ -26158,6 +26216,12 @@ class AzureCommunicationCallWithChatAdapter {
             return yield this.chatAdapter.deleteMessage(messageId);
         });
     }
+    /* @conditional-compile-remove(teams-inline-images) */
+    downloadAttachments(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.chatAdapter.downloadAttachments(options);
+        });
+    }
     /* @conditional-compile-remove(PSTN-calls) */
     holdCall() {
         return __awaiter(this, void 0, void 0, function* () {