@azure/communication-react 1.10.1-alpha-202311290014 → 1.11.0-alpha-202312020013

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

@@ -177,7 +177,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.10.1-alpha-202311290014';
+var telemetryVersion = '1.11.0-alpha-202312020013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9759,10 +9759,10 @@ const ChatMessageComponentAsEditBox = (props) => {
     /* @conditional-compile-remove(mention) */
     const { mentionLookupOptions } = props;
     const [textValue, setTextValue] = React.useState(message.content || '');
-    const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default["default"].useState(getMessageAttachedFilesMetadata(message));
+    const [attachmentMetadata, setAttachedFilesMetadata] = React__default["default"].useState(getMessageAttachedFilesMetadata(message));
     const editTextFieldRef = React__default["default"].useRef(null);
     const theme = useTheme();
-    const messageState = getMessageState(textValue, attachedFilesMetadata !== null && attachedFilesMetadata !== void 0 ? attachedFilesMetadata : []);
+    const messageState = getMessageState(textValue, attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
     const submitEnabled = messageState === 'OK';
     const editContainerStyles = useChatMessageEditContainerStyles();
     const chatMyMessageStyles = useChatMyMessageStyles();
@@ -9782,16 +9782,16 @@ const ChatMessageComponentAsEditBox = (props) => {
         return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
     }, [theme.palette.themePrimary]);
     const onRenderFileUploads = React.useCallback(() => {
-        return (!!attachedFilesMetadata &&
-            attachedFilesMetadata.length > 0 && (React__default["default"].createElement("div", { style: { margin: '0.25rem' } },
-            React__default["default"].createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map((file) => ({
+        return (!!attachmentMetadata &&
+            attachmentMetadata.length > 0 && (React__default["default"].createElement("div", { style: { margin: '0.25rem' } },
+            React__default["default"].createElement(_FileUploadCards, { activeFileUploads: attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.map((file) => ({
                     id: file.name,
                     filename: file.name,
                     progress: 1
                 })), onCancelFileUpload: (fileId) => {
-                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
+                    setAttachedFilesMetadata(attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.filter((file) => file.name !== fileId));
                 } }))));
-    }, [attachedFilesMetadata]);
+    }, [attachmentMetadata]);
     const getContent = () => {
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
@@ -9801,7 +9801,7 @@ const ChatMessageComponentAsEditBox = (props) => {
                 }, onEnterKeyDown: () => {
                     submitEnabled &&
                         onSubmit(textValue, message.metadata, {
-                            attachedFilesMetadata
+                            attachmentMetadata
                         });
                 }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
                 /* @conditional-compile-remove(mention) */
@@ -9817,7 +9817,7 @@ const ChatMessageComponentAsEditBox = (props) => {
                     React__default["default"].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
                             submitEnabled &&
                                 onSubmit(textValue, message.metadata, {
-                                    attachedFilesMetadata
+                                    attachmentMetadata
                                 });
                             e.stopPropagation();
                         }, id: 'submitIconWrapper' }))),
@@ -9831,12 +9831,12 @@ const ChatMessageComponentAsEditBox = (props) => {
         } }, getContent()));
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
-const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
-const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
+const isMessageEmpty = (messageText, attachmentMetadata) => messageText.trim().length === 0 && attachmentMetadata.length === 0;
+const getMessageState = (messageText, attachmentMetadata) => isMessageEmpty(messageText, attachmentMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
 // @TODO: Remove when file-sharing feature becomes stable.
 const getMessageAttachedFilesMetadata = (message) => {
     /* @conditional-compile-remove(file-sharing) */
-    return message.attachedFilesMetadata;
+    return message.files;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10137,13 +10137,13 @@ const MessageContentAsRichTextHTML = (props) => {
         if (!attachmentsMap || !onFetchAttachments) {
             return;
         }
-        const attachments = (_a = message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.filter((fileMetadata) => {
-            return fileMetadata.attachmentType === 'inlineImage' && attachmentsMap[fileMetadata.id] === undefined;
+        const attachments = (_a = message.inlineImages) === null || _a === void 0 ? void 0 : _a.filter((inlinedImages) => {
+            return attachmentsMap[inlinedImages.id] === undefined;
         });
         if (attachments && attachments.length > 0) {
             onFetchAttachments(attachments, message.messageId);
         }
-    }, [message.attachedFilesMetadata, message.messageId, onFetchAttachments, attachmentsMap]);
+    }, [message.inlineImages, message.messageId, onFetchAttachments, attachmentsMap]);
     return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
 const MessageContentAsText = (props) => {
@@ -10200,15 +10200,15 @@ const processInlineImage = (props) => ({
     // Custom <img> processing
     shouldProcessNode: (node) => {
         var _a;
-        function isImageNode(file) {
-            return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;
+        function matchingImageNode(imageMetadata) {
+            return imageMetadata.id === node.attribs.id;
         }
         // Process img node with id in attachments list
         return (node.name &&
             node.name === 'img' &&
             node.attribs &&
             node.attribs.id &&
-            ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find(isImageNode)));
+            ((_a = props.message.inlineImages) === null || _a === void 0 ? void 0 : _a.find(matchingImageNode)));
     },
     processNode: (node, children, index) => {
         node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });
@@ -10320,20 +10320,20 @@ const _FileDownloadCards = (props) => {
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
     const isFileSharingAttachment = React.useCallback((attachment) => {
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        return attachment.attachmentType === 'fileSharing';
+        return attachment.attachmentType === 'file';
     }, []);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const isShowDownloadIcon = React.useCallback((attachment) => {
         var _a;
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        return attachment.attachmentType === 'fileSharing' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
+        return attachment.attachmentType === 'file' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
     }, []);
     const fileCardGroupDescription = React.useMemo(() => () => {
-        var _a, _b;
+        var _a, _b, _c;
         const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         return _formatString(fileGroupLocaleString, {
-            fileCount: `${fileMetadata.filter(isFileSharingAttachment).length}`
+            fileCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.filter(isFileSharingAttachment).length) !== null && _c !== void 0 ? _c : 0}`
         });
     }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
     const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$y(void 0, void 0, void 0, function* () {
@@ -10369,6 +10369,7 @@ const _FileDownloadCards = (props) => {
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 return isFileSharingAttachment(attachment);
             })
+                .map((file) => file)
                 .map((file) => (React__default["default"].createElement(react.TooltipHost, { content: downloadFileButtonString(), key: file.name },
                 React__default["default"].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React__default["default"].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                         isShowDownloadIcon(file) ? (React__default["default"].createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
@@ -10459,13 +10460,18 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
-    const defaultOnRenderFileDownloads = React.useCallback(() => (React__default["default"].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler, 
-        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
-        strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } })), [
+    const defaultOnRenderFileDownloads = React.useCallback(() => {
+        return (React__default["default"].createElement(_FileDownloadCards, { userId: userId, 
+            /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+            fileMetadata: message.files || [], downloadHandler: fileDownloadHandler, 
+            /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+            strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } }));
+    }, [
         userId,
         message,
         /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
         strings,
+        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
         fileDownloadHandler
     ]);
     const editedOn = 'editedOn' in message ? message.editedOn : undefined;
@@ -18762,6 +18768,23 @@ const memoizeLocalParticipant = memoizeOne__default["default"]((identifier, disp
     });
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const getRemoteParticipantsExcludingConsumers = reselect.createSelector([getRemoteParticipants$1], (remoteParticipants) => {
+    /* @conditional-compile-remove(rooms) */
+    {
+        const newRemoteParticipants = Object.assign({}, remoteParticipants);
+        Object.keys(newRemoteParticipants).forEach((k) => {
+            if (newRemoteParticipants[k].role === 'Consumer') {
+                delete newRemoteParticipants[k];
+            }
+        });
+        return newRemoteParticipants;
+    }
+});
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Provides data attributes to {@link VideoGallery} component.
@@ -18769,7 +18792,7 @@ const memoizeLocalParticipant = memoizeOne__default["default"]((identifier, disp
  */
 const videoGallerySelector = reselect.createSelector([
     getScreenShareRemoteParticipant,
-    getRemoteParticipants$1,
+    getRemoteParticipantsExcludingConsumers,
     getLocalVideoStreams$1,
     getIsMuted,
     getIsScreenSharingOn,
@@ -18912,7 +18935,7 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
 const participantListSelector = reselect.createSelector([
     getIdentifier,
     getDisplayName$2,
-    getRemoteParticipants$1,
+    getRemoteParticipantsExcludingConsumers,
     getIsScreenSharingOn,
     getIsMuted,
     /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand$1,
@@ -19320,7 +19343,7 @@ const createDefaultChatHandlers = memoizeOne__default["default"]((chatClient, ch
         }),
         onUpdateMessage: (messageId, content, options) => __awaiter$q(void 0, void 0, void 0, function* () {
             const updatedMetadata = (options === null || options === void 0 ? void 0 : options.metadata) ? Object.assign({}, options.metadata) : {};
-            updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
+            updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachmentMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
         onDeleteMessage: (messageId) => __awaiter$q(void 0, void 0, void 0, function* () {
@@ -19705,32 +19728,31 @@ const extractAttachedFilesMetadata = (metadata) => {
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractTeamsAttachmentsMetadata = (attachments) => {
-    const fileMetadata = [];
+    const files = [];
+    const inlineImages = [];
     attachments.forEach((attachment) => {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const attachmentType = mapAttachmentType(attachment.attachmentType);
         if (attachmentType === 'inlineImage') {
-            fileMetadata.push({
+            inlineImages.push({
                 attachmentType: attachmentType,
                 id: attachment.id,
-                name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
-                extension: (_b = attachment.contentType) !== null && _b !== void 0 ? _b : '',
                 url: extractAttachmentUrl(attachment),
                 previewUrl: attachment.previewUrl
             });
         }
-        else if (attachmentType === 'fileSharing') {
-            fileMetadata.push({
+        else if (attachmentType === 'file') {
+            files.push({
                 attachmentType: attachmentType,
                 id: attachment.id,
-                name: (_c = attachment.name) !== null && _c !== void 0 ? _c : '',
-                extension: (_d = attachment.contentType) !== null && _d !== void 0 ? _d : '',
+                name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
+                extension: (_b = attachment.contentType) !== null && _b !== void 0 ? _b : '',
                 url: extractAttachmentUrl(attachment),
                 payload: { teamsFileAttachment: 'true' }
             });
         }
     });
-    return fileMetadata;
+    return { files, inlineImages };
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const mapAttachmentType = (attachmentType) => {
@@ -19738,7 +19760,7 @@ const mapAttachmentType = (attachmentType) => {
         return 'inlineImage';
     }
     else if (attachmentType === 'file') {
-        return 'fileSharing';
+        return 'file';
     }
     return 'unknown';
 };
@@ -19766,18 +19788,21 @@ const generateImageAttachmentImgHtml = (attachment) => {
     return `\r\n<p><img alt="image" src="" itemscope="${attachment.contentType}" id="${attachment.id}"></p>`;
 };
 /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-const extractFilesMetadata = (message) => {
+const extractAttachmentsMetadata = (message) => {
     var _a, _b;
-    let fileMetadata = [];
+    let files = [];
+    let inlineImages = [];
     /* @conditional-compile-remove(file-sharing) */
     if (message.metadata) {
-        fileMetadata = fileMetadata.concat(extractAttachedFilesMetadata(message.metadata));
+        files = files.concat(extractAttachedFilesMetadata(message.metadata));
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     if ((_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments) {
-        fileMetadata = fileMetadata.concat(extractTeamsAttachmentsMetadata((_b = message.content) === null || _b === void 0 ? void 0 : _b.attachments));
+        const teamsAttachments = extractTeamsAttachmentsMetadata((_b = message.content) === null || _b === void 0 ? void 0 : _b.attachments);
+        files = files.concat(teamsAttachments.files);
+        inlineImages = inlineImages.concat(teamsAttachments.inlineImages);
     }
-    return fileMetadata;
+    return { files, inlineImages };
 };
 /* @conditional-compile-remove(data-loss-prevention) */
 const convertToUiBlockedMessage = (message, userId, isSeen, isLargeGroup) => {
@@ -19797,6 +19822,8 @@ const convertToUiBlockedMessage = (message, userId, isSeen, isLargeGroup) => {
 };
 const convertToUiChatMessage = (message, userId, isSeen, isLargeGroup) => {
     const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;
+    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const { files, inlineImages } = extractAttachmentsMetadata(message);
     return {
         messageType: 'chat',
         createdOn: message.createdOn,
@@ -19812,7 +19839,9 @@ const convertToUiChatMessage = (message, userId, isSeen, isLargeGroup) => {
         mine: messageSenderId === userId,
         metadata: message.metadata,
         /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        attachedFilesMetadata: extractFilesMetadata(message)
+        files,
+        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        inlineImages
     };
 };
 const convertToUiSystemMessage = (message) => {
@@ -21820,9 +21849,7 @@ class AzureCommunicationChatAdapter {
         return __awaiter$k(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
-                const updatedOptions = options
-                    ? { attachedFilesMetadata: options.attachedFilesMetadata, metadata: metadata }
-                    : {};
+                const updatedOptions = options ? { attachmentMetadata: options.attachmentMetadata, metadata: metadata } : {};
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, updatedOptions);
             }));
@@ -22505,7 +22532,7 @@ const createCompositeHandlers$1 = memoizeOne__default["default"]((adapter) => ({
     onUpdateMessage: (messageId, content, options) => {
         const metadata = options === null || options === void 0 ? void 0 : options.metadata;
         /* @conditional-compile-remove(file-sharing) */
-        const updatedOptions = (options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) ? Object.assign({}, options.attachedFilesMetadata) : {};
+        const updatedOptions = (options === null || options === void 0 ? void 0 : options.attachmentMetadata) ? Object.assign({}, options.attachmentMetadata) : {};
         return adapter.updateMessage(messageId, content, metadata, 
         /* @conditional-compile-remove(file-sharing) */ updatedOptions);
     },
@@ -22818,7 +22845,7 @@ const ChatScreen = (props) => {
         fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
     }, [adapter, fileSharing, userId]);
     /* @conditional-compile-remove(file-sharing) */
-    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) => {
+    const onRenderFileDownloads = React.useCallback((userId, message) => (React__default["default"].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.files || [], 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-and-file-sharing) */
@@ -22842,14 +22869,13 @@ const ChatScreen = (props) => {
             return;
         }
         const chatMessage = messages[0];
-        const attachments = (_b = chatMessage.attachedFilesMetadata) === null || _b === void 0 ? void 0 : _b.filter((attachment) => {
+        const inlinedImages = (_b = chatMessage.inlineImages) === null || _b === void 0 ? void 0 : _b.filter((attachment) => {
             return attachment.id === attachmentId;
         });
-        if (!attachments || attachments.length <= 0) {
+        if (!inlinedImages || inlinedImages.length <= 0) {
             return;
         }
-        const attachment = attachments[0];
-        attachment.name = chatMessage.senderDisplayName || '';
+        const attachment = inlinedImages[0];
         const titleIconRenderOptions = {
             text: chatMessage.senderDisplayName,
             size: react.PersonaSize.size32,
@@ -22858,7 +22884,7 @@ const ChatScreen = (props) => {
         };
         const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(chatMessage.senderId, titleIconRenderOptions);
         const galleryImage = {
-            title: attachment.name,
+            title: chatMessage.senderDisplayName || '',
             titleIcon: titleIcon,
             downloadFilename: attachment.id,
             imageUrl: ''