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

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.
      *
@@ -2646,6 +2648,8 @@ export declare interface CallWithChatClientState {
     environmentInfo?: EnvironmentInfo;
     /** Default set of background images for background replacement effect */
     videoBackgroundImages?: VideoBackgroundImage[];
+    /** State to track the selected video background effect */
+    selectedVideoBackgroundEffect?: SelectedVideoBackgroundEffect;
 }
 
 /**
@@ -3486,7 +3490,9 @@ export declare interface ChatAdapterThreadManagement {
      *
      */
     loadPreviousChatMessages(messagesToLoad: number): Promise<boolean>;
-    downloadAuthenticatedAttachment?: (attachmentUrl: string) => Promise<AttachmentDownloadResult>;
+    downloadAttachments: (options: {
+        attachmentUrls: string[];
+    }) => Promise<AttachmentDownloadResult[]>;
 }
 
 /**
@@ -6726,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-202304172318';
+var telemetryVersion = '1.5.1-alpha-202304190014';
 
 // 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
@@ -7840,7 +7840,9 @@ const MessageThread = (props) => {
             return;
         }
         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 +11051,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 +11487,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 +15196,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 +15258,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 +16047,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 +17625,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 +17763,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 +17779,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 +18674,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 +18699,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' },
@@ -19365,6 +19416,11 @@ const getDominantSpeakerInfo = (state) => { var _a; return (_a = state.call) ===
  * @private
  */
 const getRemoteParticipants = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.remoteParticipants; };
+/* @conditional-compile-remove(video-background-effects) */
+/**
+ * @private
+ */
+const getSelectedVideoEffect = (state) => state.selectedVideoBackgroundEffect;
 /* @conditional-compile-remove(close-captions) */
 /**
  * @private
@@ -21788,6 +21844,22 @@ const PreparedMoreDrawer = (props) => {
     return React__default['default'].createElement(MoreDrawer, Object.assign({}, props, deviceProps, callHandlers, { strings: moreDrawerStrings }));
 };
 
+// Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(video-background-effects) */
+/**
+ * @private
+ */
+const activeVideoBackgroundEffectSelector = reselect__namespace.createSelector([getSelectedVideoEffect], (selectedVideoBackgroundEffect) => {
+    if (selectedVideoBackgroundEffect &&
+        (selectedVideoBackgroundEffect.effectName === 'blur' || selectedVideoBackgroundEffect.effectName === 'none')) {
+        return selectedVideoBackgroundEffect.effectName;
+    }
+    else if (selectedVideoBackgroundEffect && selectedVideoBackgroundEffect.effectName === 'replacement') {
+        return selectedVideoBackgroundEffect === null || selectedVideoBackgroundEffect === void 0 ? void 0 : selectedVideoBackgroundEffect.effectKey;
+    }
+    return 'none';
+});
+
 var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -21807,6 +21879,8 @@ const VideoEffectsPane = (props) => {
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(video-background-effects) */
     const strings = locale.strings.call;
     /* @conditional-compile-remove(video-background-effects) */
     const selectableVideoEffects = React.useMemo(() => {
@@ -21832,7 +21906,7 @@ const VideoEffectsPane = (props) => {
                 }
             }
         ];
-        const videoEffectImages = props.adapter.getState().videoBackgroundImages;
+        const videoEffectImages = adapter.getState().videoBackgroundImages;
         if (videoEffectImages) {
             videoEffectImages.forEach((img) => {
                 var _a;
@@ -21848,22 +21922,22 @@ const VideoEffectsPane = (props) => {
             });
         }
         return videoEffects;
-    }, [strings, props.adapter]);
+    }, [strings, adapter]);
     /* @conditional-compile-remove(video-background-effects) */
     const onEffectChange = React.useCallback((effectKey) => __awaiter$9(void 0, void 0, void 0, function* () {
         if (effectKey === 'blur') {
             const blurEffect = {
                 effectName: effectKey
             };
-            props.adapter.updateSelectedVideoBackgroundEffect(blurEffect);
-            yield props.adapter.blurVideoBackground();
+            adapter.updateSelectedVideoBackgroundEffect(blurEffect);
+            yield adapter.blurVideoBackground();
         }
         else if (effectKey === 'none') {
             const noneEffect = {
                 effectName: effectKey
             };
-            props.adapter.updateSelectedVideoBackgroundEffect(noneEffect);
-            yield props.adapter.stopVideoBackgroundEffect();
+            adapter.updateSelectedVideoBackgroundEffect(noneEffect);
+            yield adapter.stopVideoBackgroundEffect();
         }
         else {
             const backgroundImg = selectableVideoEffects.find((effect) => {
@@ -21875,11 +21949,11 @@ const VideoEffectsPane = (props) => {
                     effectKey,
                     backgroundImageUrl: backgroundImg.backgroundProps.url
                 };
-                props.adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
-                yield props.adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
+                adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
+                yield adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });
             }
         }
-    }), [props.adapter, selectableVideoEffects]);
+    }), [adapter, selectableVideoEffects]);
     return VideoEffectsPaneTrampoline(showVideoEffectsOptions, setshowVideoEffectsOptions, 
     /* @conditional-compile-remove(video-background-effects) */
     selectableVideoEffects, 
@@ -21890,7 +21964,9 @@ const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffects
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
-    return (React__default['default'].createElement(react.Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }, selectableVideoEffects && (React__default['default'].createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange }))));
+    const selectedEffect = useSelector$1(activeVideoBackgroundEffectSelector);
+    /* @conditional-compile-remove(video-background-effects) */
+    return (React__default['default'].createElement(react.Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }, selectableVideoEffects && (React__default['default'].createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange, selectedEffectKey: selectedEffect }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22045,7 +22121,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                     callPaneContent()),
                 /* @conditional-compile-remove(video-background-effects) */
-                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane, adapter: adapter })))));
+                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane })))));
 };
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton$1 = (callControls) => {
@@ -23383,7 +23459,7 @@ const ConfigurationPage = (props) => {
                 React__default['default'].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
                     React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton })))),
         /* @conditional-compile-remove(video-background-effects) */
-        React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setVideoEffectsPane, adapter: adapter })));
+        React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setVideoEffectsPane })));
 };
 const localPreviewTrampoline = (mobileView, doNotShow) => {
     /* @conditional-compile-remove(rooms) */
@@ -25275,7 +25351,9 @@ function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState)
         /* @conditional-compile-remove(unsupported-browser) */
         environmentInfo: callWithChatAdapterState.environmentInfo,
         /* @conditional-compile-remove(video-background-effects) */
-        videoBackgroundImages: callWithChatAdapterState.videoBackgroundImages
+        videoBackgroundImages: callWithChatAdapterState.videoBackgroundImages,
+        /* @conditional-compile-remove(video-background-effects) */
+        selectedVideoBackgroundEffect: callWithChatAdapterState.selectedVideoBackgroundEffect
     };
 }
 
@@ -25384,6 +25462,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) {
@@ -25628,7 +25712,8 @@ const CallWithChatScreen = (props) => {
                     style: callCompositeContainerCSS },
                     React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme }))),
                 /* @conditional-compile-remove(video-background-effects) */
-                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane, adapter: callAdapter }),
+                React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
+                    React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane })),
                 chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
                     /* @conditional-compile-remove(file-sharing) */
                     fileSharing: props.fileSharing, rtl: props.rtl, callControls: typeof props.callControls !== 'boolean' ? props.callControls : undefined }))),
@@ -25728,7 +25813,9 @@ function callWithChatAdapterStateFromBackingStates(callAdapter, chatAdapter) {
         /* @conditional-compile-remove(unsupported-browser) */
         environmentInfo: callAdapterState.environmentInfo,
         /* @conditional-compile-remove(video-background-effects) */
-        videoBackgroundImages: callAdapterState.videoBackgroundImages
+        videoBackgroundImages: callAdapterState.videoBackgroundImages,
+        /* @conditional-compile-remove(video-background-effects) */
+        selectedVideoBackgroundEffect: callAdapterState.selectedVideoBackgroundEffect
     };
 }
 /**
@@ -25745,7 +25832,9 @@ function mergeChatAdapterStateIntoCallWithChatAdapterState(existingCallWithChatA
 function mergeCallAdapterStateIntoCallWithChatAdapterState(existingCallWithChatAdapterState, callAdapterState) {
     return Object.assign(Object.assign({}, existingCallWithChatAdapterState), { userId: callAdapterState.userId, page: callAdapterState.page, displayName: callAdapterState.displayName, devices: callAdapterState.devices, call: callAdapterState.call, isLocalPreviewMicrophoneEnabled: callAdapterState.isLocalPreviewMicrophoneEnabled, isTeamsCall: callAdapterState.isTeamsCall, latestCallErrors: callAdapterState.latestErrors, 
         /* @conditional-compile-remove(video-background-effects) */
-        videoBackgroundImages: callAdapterState.videoBackgroundImages });
+        videoBackgroundImages: callAdapterState.videoBackgroundImages, 
+        /* @conditional-compile-remove(video-background-effects) */
+        selectedVideoBackgroundEffect: callAdapterState.selectedVideoBackgroundEffect });
 }
 
 // Copyright (c) Microsoft Corporation.
@@ -25919,6 +26008,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) */
@@ -26126,6 +26217,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* () {