@azure/communication-react 1.14.0-alpha-202403090011 → 1.14.0-alpha-202403130012

package/dist/dist-cjs/communication-react/{index-DNgYW17b.js → index-C3IKJHX1.js}

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.0-alpha-202403090011';
+var telemetryVersion = '1.14.0-alpha-202403130012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -2111,6 +2111,11 @@ let CallContext$2 = class CallContext {
                 addRemoteParticipant.forEach((participant) => {
                     call.remoteParticipants[toFlatCommunicationIdentifier(participant.identifier)] = participant;
                 });
+                // TODO: need to remove after contentSharingRole avaible in WebCalling SDK.
+                /* @conditional-compile-remove(ppt-live) */
+                if (!call.contentSharingRemoteParticipant) {
+                    call.contentSharingRemoteParticipant = toFlatCommunicationIdentifier(addRemoteParticipant[0].identifier);
+                }
             }
         });
     }
@@ -3723,7 +3728,7 @@ var __awaiter$K = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 class PPTLiveSubscriber {
-    constructor(callIdRef, context, pptLive) {
+    constructor(callIdRef, context, call) {
         this.subscribe = () => {
             this._pptLive.on('isActiveChanged', this.isAvailableChanged);
         };
@@ -3736,6 +3741,10 @@ class PPTLiveSubscriber {
         };
         this.checkAndUpdatePPTLiveParticipant = () => __awaiter$K(this, void 0, void 0, function* () {
             if (this._pptLive.isActive) {
+                // TODO： need to refactor if Web Calling SDK has this logic ready
+                if (this._call.isScreenSharingOn) {
+                    yield this._call.stopScreenSharing();
+                }
                 this._context.setCallParticipantPPTLive(this._callIdRef.callId, this._pptLive.target);
             }
             else {
@@ -3744,7 +3753,8 @@ class PPTLiveSubscriber {
         });
         this._callIdRef = callIdRef;
         this._context = context;
-        this._pptLive = pptLive;
+        this._pptLive = call.feature(communicationCalling.Features.PPTLive);
+        this._call = call;
         this.subscribe();
     }
 }
@@ -4152,7 +4162,7 @@ class CallSubscriber {
         this._participantSubscribers = new Map();
         this._recordingSubscriber = new RecordingSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Recording));
         /* @conditional-compile-remove(ppt-live) */
-        this._pptLiveSubscriber = new PPTLiveSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.PPTLive));
+        this._pptLiveSubscriber = new PPTLiveSubscriber(this._callIdRef, this._context, this._call);
         this._transcriptionSubscriber = new TranscriptionSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Transcription));
         /* @conditional-compile-remove(raise-hand) */
         this._raiseHandSubscriber = new RaiseHandSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.RaiseHand));
@@ -8526,7 +8536,7 @@ const iconWrapperStyle$1 = react.mergeStyles({
  * @private
  */
 const InputBoxButton = (props) => {
-    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
+    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent, 'data-testId': dataTestId } = props;
     const [isHover, setIsHover] = React.useState(false);
     const mergedButtonStyle = react.mergeStyles(inputBoxButtonStyle, className);
     const theme = react.useTheme();
@@ -8544,7 +8554,7 @@ const InputBoxButton = (props) => {
                 setIsHover(false);
             }, 
             // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React.createElement(react.Stack, { className: iconWrapperStyle$1 }, onRenderIcon(isHover)) })));
+            onRenderIcon: () => React.createElement(react.Stack, { className: iconWrapperStyle$1 }, onRenderIcon(isHover)), "data-testid": dataTestId })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -8575,7 +8585,7 @@ const SendBoxErrorBar = (props) => {
     if (errorMessage) {
         return (React.createElement(React.Fragment, null,
             React.createElement(Announcer$1, { announcementString: errorMessage, ariaLive: 'polite' }),
-            React.createElement(react.MessageBar, { "data-test-id": 'send-box-message-bar', messageBarType: react.MessageBarType.warning, styles: {
+            React.createElement(react.MessageBar, { "data-testid": 'send-box-message-bar', messageBarType: react.MessageBarType.warning, styles: {
                     iconContainer: {
                         display: 'none'
                     }
@@ -9459,16 +9469,16 @@ const RichTextEditor = React.forwardRef((props, ref) => {
                     isBeakVisible: false,
                     styles: ribbonOverflowButtonStyle(theme)
                 }
-            }, strings: ribbonButtonsStrings(strings) }));
+            }, strings: ribbonButtonsStrings(strings), "data-testid": 'rich-text-editor-ribbon' }));
     }, [strings, ribbonPlugin, theme]);
-    return (React.createElement("div", null,
+    return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
         showRichTextEditorFormatting && ribbon,
         React.createElement("div", { className: richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting, showRichTextEditorFormatting) },
             React.createElement(roosterjsReact.Rooster, { initialContent: initialContent, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle(props.styles), editorCreator: editorCreator, 
                 // TODO: confirm the color during inline images implementation
                 imageSelectionBorderColor: 'blue', 
                 // doNotAdjustEditorColor is used to fix the default background color for Rooster component
-                doNotAdjustEditorColor: true, 
+                doNotAdjustEditorColor: true, "data-testid": 'rooster-rich-text-editor', 
                 // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught
                 onKeyDown: props.onKeyDown }))));
 });
@@ -9519,7 +9529,7 @@ const RichTextInputBoxComponent = (props) => {
                         setShowRichTextEditorFormatting(!showRichTextEditorFormatting);
                         (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                         e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
-                    }, ariaLabel: strings.richTextFormatButtonTooltip, tooltipContent: strings.richTextFormatButtonTooltip, className: richTextActionButtonsStyle }),
+                    }, ariaLabel: strings.richTextFormatButtonTooltip, tooltipContent: strings.richTextFormatButtonTooltip, className: richTextActionButtonsStyle, "data-testId": 'rich-text-input-box-format-button' }),
                 React.createElement(react.Icon, { iconName: "RichTextDividerIcon", className: richTextActionButtonsDividerStyle(theme) }),
                 actionComponents)));
     }, [
@@ -11407,7 +11417,7 @@ const messageContentAriaText = (props) => {
 };
 /* @conditional-compile-remove(image-overlay) */
 const defaultOnRenderInlineImage = (inlineImage) => {
-    return (React.createElement("img", Object.assign({ key: inlineImage.imgAttrs.id, tabIndex: 0, "data-ui-id": inlineImage.imgAttrs.id }, inlineImage.imgAttrs)));
+    return (React.createElement("img", Object.assign({ key: inlineImage.imageAttributes.id, tabIndex: 0, "data-ui-id": inlineImage.imageAttributes.id }, inlineImage.imageAttributes)));
 };
 const processHtmlToReact = (props) => {
     var _a;
@@ -11434,7 +11444,7 @@ const processHtmlToReact = (props) => {
                     domNode.attribs['aria-label'] = domNode.attribs.name;
                     const imgProps = parse.attributesToProps(domNode.attribs);
                     /* @conditional-compile-remove(image-overlay) */
-                    const inlineImageProps = { messageId: props.message.messageId, imgAttrs: imgProps };
+                    const inlineImageProps = { messageId: props.message.messageId, imageAttributes: imgProps };
                     /* @conditional-compile-remove(image-overlay) */
                     return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
                         ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
@@ -14710,7 +14720,9 @@ const loadingStyle = react.mergeStyles({
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 const RemoteScreenShare = React.memo((props) => {
-    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode } = props;
+    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode, 
+    /* @conditional-compile-remove(ppt-live) */
+    isPPTLive } = props;
     const locale = useLocale$1();
     if (!renderElement) {
         /**
@@ -14734,6 +14746,10 @@ const RemoteScreenShare = React.memo((props) => {
             participant: displayName
         })
         : '';
+    /* @conditional-compile-remove(ppt-live) */
+    if (isPPTLive) {
+        return (React.createElement(VideoTile, { renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
+    }
     return (React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
 });
 const LoadingSpinner = (props) => {
@@ -17063,7 +17079,7 @@ const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteScreenShareStreamView, onDisposeRemoteVideoStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, onPinParticipant: onPinParticipantHandler, onUnpinParticipant: onUnpinParticipantHandler, remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
     /* @conditional-compile-remove(vertical-gallery) */
     overflowGalleryPosition = 'horizontalBottom', 
@@ -17291,7 +17307,9 @@ const VideoGallery = (props) => {
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId] })));
+    const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], 
+        /* @conditional-compile-remove(ppt-live) */
+        isPPTLive: !((_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.id) })));
     const screenShareComponent = remoteScreenShareComponent
         ? remoteScreenShareComponent
         : localParticipant.isScreenSharingOn
@@ -22591,12 +22609,13 @@ var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 class ResourceDownloadQueue {
-    constructor(context, credential) {
+    constructor(context, authentication) {
         this._messagesNeedingResourceRetrieval = [];
         this.isActive = false;
         this._requestsToCancel = {};
         this._context = context;
-        this._credential = credential;
+        this._credential = authentication.credential;
+        this._endpoint = authentication.endpoint;
     }
     containsMessageWithSameAttachments(message) {
         var _a, _b, _c;
@@ -22700,7 +22719,7 @@ class ResourceDownloadQueue {
     downloadResource(operation, url, abortController) {
         return __awaiter$t(this, void 0, void 0, function* () {
             this._requestsToCancel[url] = { src: url, abortController };
-            const blobUrl = yield operation(url, this._credential, { abortController });
+            const blobUrl = yield operation(url, { credential: this._credential, endpoint: this._endpoint }, { abortController });
             delete this._requestsToCancel[url];
             return blobUrl;
         });
@@ -22710,21 +22729,16 @@ class ResourceDownloadQueue {
 /**
  * @private
  */
-const fetchImageSource = (src, credential, options) => __awaiter$t(void 0, void 0, void 0, function* () {
+const fetchImageSource = (src, authentication, options) => __awaiter$t(void 0, void 0, void 0, function* () {
     function fetchWithAuthentication(url, token, options) {
         return __awaiter$t(this, void 0, void 0, function* () {
             const headers = new Headers();
             headers.append('Authorization', `Bearer ${token}`);
-            try {
-                return yield fetchWithTimeout(url, {
-                    timeout: options.timeout,
-                    headers,
-                    abortController: options.abortController
-                });
-            }
-            catch (err) {
-                throw new ChatError('ChatThreadClient.getMessage', err);
-            }
+            return yield fetchWithTimeout(url, {
+                timeout: options.timeout,
+                headers,
+                abortController: options.abortController
+            });
         });
     }
     function fetchWithTimeout(resource, options) {
@@ -22739,8 +22753,13 @@ const fetchImageSource = (src, credential, options) => __awaiter$t(void 0, void
             return response;
         });
     }
-    const accessToken = yield credential.getToken();
-    const response = yield fetchWithAuthentication(src, accessToken.token, options);
+    const fetchUrl = new URL(src);
+    const endpoint = new URL(authentication.endpoint);
+    let token = '';
+    if (fetchUrl.hostname === endpoint.hostname && fetchUrl.protocol === 'https:') {
+        token = (yield authentication.credential.getToken()).token;
+    }
+    const response = yield fetchWithAuthentication(src, token, options);
     const blob = yield response.blob();
     return URL.createObjectURL(blob);
 });
@@ -22764,7 +22783,8 @@ immer.enablePatches();
  */
 let ChatContext$1 = class ChatContext {
     constructor(maxListeners, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ credential) {
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ credential, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ endpoint) {
         this._state = {
             userId: { id: '' },
             displayName: '',
@@ -22781,8 +22801,8 @@ let ChatContext$1 = class ChatContext {
         this._emitter = new EventEmitter();
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         if (credential) {
-            this._inlineImageQueue = new ResourceDownloadQueue(this, credential);
-            this._fullsizeImageQueue = new ResourceDownloadQueue(this, credential);
+            this._inlineImageQueue = new ResourceDownloadQueue(this, { credential, endpoint: endpoint !== null && endpoint !== void 0 ? endpoint : '' });
+            this._fullsizeImageQueue = new ResourceDownloadQueue(this, { credential, endpoint: endpoint !== null && endpoint !== void 0 ? endpoint : '' });
         }
         if (maxListeners) {
             this._emitter.setMaxListeners(maxListeners);
@@ -23794,7 +23814,8 @@ const _createStatefulChatClientInner = (args, options, telemetryImplementationHi
  */
 const _createStatefulChatClientWithDeps = (chatClient, args, options) => {
     const context = new ChatContext$1(options === null || options === void 0 ? void 0 : options.maxStateChangeListeners, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.credential);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.credential, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.endpoint);
     let eventSubscriber;
     context.updateChatConfig(communicationCommon.getIdentifierKind(args.userId), args.displayName);
     const proxy = new Proxy(chatClient, proxyChatClient);
@@ -23957,7 +23978,6 @@ const COMPOSITE_ONLY_ICONS = {
     LargeGalleryLayout: React.createElement(reactIcons.Table20Regular, null),
     /* @conditional-compile-remove(control-bar-button-injection) */
     DefaultCustomButton: React.createElement(reactIcons.Circle20Regular, null),
-    /* @conditional-compile-remove(dtmf-dialer) */
     DtmfDialpadButton: React.createElement(reactIcons.Dialpad20Regular, null),
     /* @conditional-compile-remove(spotlight) */
     PeoplePaneMoreButton: React.createElement(reactIcons.MoreHorizontal20Filled, null),
@@ -25453,7 +25473,7 @@ const useSelector$2 = (selector, selectorProps) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-DXy3ttBO.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-Be7pr6o4.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  */
@@ -25532,8 +25552,8 @@ const ChatScreen = (props) => {
         }
         const message = adapter.getState().thread.chatMessages[overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.messageId];
         const resourceCache = message.resourceCache;
-        if (overlayImageItem.imageSrc === '' && resourceCache) {
-            const fullSizeImageSrc = resourceCache[overlayImageItem.imageUrl].sourceUrl;
+        if (overlayImageItem.imageSrc === '' && resourceCache && resourceCache[overlayImageItem.imageUrl]) {
+            const fullSizeImageSrc = getResourceSourceUrl(resourceCache[overlayImageItem.imageUrl]);
             if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItem.imageSrc === fullSizeImageSrc) {
                 return;
             }
@@ -25542,6 +25562,16 @@ const ChatScreen = (props) => {
         // Disable eslint because we are using the overlayImageItem in this effect but don't want to have it as a dependency, as it will cause an infinite loop.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [messageThreadProps.messages]);
+    const getResourceSourceUrl = (result) => {
+        let src = '';
+        if (result.error) {
+            src = 'blob://';
+        }
+        else {
+            src = result.sourceUrl;
+        }
+        return src;
+    };
     const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
         return (React.createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
     }, [onFetchAvatarPersonaData]);
@@ -25566,7 +25596,7 @@ const ChatScreen = (props) => {
             setDownloadErrorMessage(errorMessage);
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
     /* @conditional-compile-remove(image-overlay) */
-    const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$l(void 0, void 0, void 0, function* () {
+    const onInlineImageClicked = React.useCallback((attachmentId, messageId) => {
         var _a, _b;
         const message = adapter.getState().thread.chatMessages[messageId];
         const inlinedImages = (_b = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.filter((attachment) => {
@@ -25580,7 +25610,7 @@ const ChatScreen = (props) => {
         let imageSrc = '';
         if (attachment.url) {
             if (resourceCache && resourceCache[attachment.url]) {
-                imageSrc = resourceCache[attachment.url].sourceUrl;
+                imageSrc = getResourceSourceUrl(resourceCache[attachment.url]);
             }
             else {
                 adapter.downloadResourceToCache({
@@ -25608,21 +25638,29 @@ const ChatScreen = (props) => {
         };
         setIsImageOverlayOpen(true);
         setOverlayImageItem(overlayImage);
-    }), [adapter, onRenderAvatarCallback, userId]);
+    }, [adapter, onRenderAvatarCallback, userId]);
     /* @conditional-compile-remove(image-overlay) */
     const inlineImageOptions = {
         onRenderInlineImage: (inlineImage, defaultOnRender) => {
             var _a, _b;
             const message = adapter.getState().thread.chatMessages[inlineImage.messageId];
-            const attachments = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.find((attachment) => attachment.id === inlineImage.imgAttrs.id);
-            if (attachments === undefined) {
+            const attachment = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.find((attachment) => attachment.id === inlineImage.imageAttributes.id);
+            if (attachment === undefined) {
                 return defaultOnRender(inlineImage);
             }
-            return (React.createElement("span", { key: inlineImage.imgAttrs.id, onClick: () => onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
+            let pointerEvents = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';
+            const resourceCache = message.resourceCache;
+            if (resourceCache &&
+                attachment.previewUrl &&
+                resourceCache[attachment.previewUrl] &&
+                resourceCache[attachment.previewUrl].error) {
+                pointerEvents = 'none';
+            }
+            return (React.createElement("span", { key: inlineImage.imageAttributes.id, onClick: () => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
                     if (e.key === 'Enter') {
-                        onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId);
+                        onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);
                     }
-                }, style: { cursor: 'pointer' } }, defaultOnRender(inlineImage)));
+                }, style: { cursor: 'pointer', pointerEvents } }, defaultOnRender(inlineImage)));
         }
     };
     /* @conditional-compile-remove(image-overlay) */
@@ -26393,7 +26431,6 @@ const createCompositeHandlers = memoizeOne((adapter) => {
                 return yield adapter.addParticipant(participant, options);
             }
         }),
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
         onSendDtmfTone: (dtmfTone) => __awaiter$j(void 0, void 0, void 0, function* () {
             yield adapter.sendDtmfTone(dtmfTone);
         }),
@@ -27076,7 +27113,6 @@ const Microphone = (props) => {
     const microphoneButtonProps = usePropsFor$1(MicrophoneButton);
     const callStatus = useSelector$1(getCallStatus);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
-    const strings = useLocale().strings.call;
     /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(capabilities) */
     const adapter = useAdapter();
     /* @conditional-compile-remove(rooms) */
@@ -27092,17 +27128,9 @@ const Microphone = (props) => {
         // page until the user successfully joins the call.
         microphoneButtonProps.checked = isLocalMicrophoneEnabled;
     }
-    const microphoneButtonStrings = _isInLobbyOrConnecting(callStatus)
-        ? {
-            strings: {
-                tooltipOffContent: strings.microphoneToggleInLobbyNotAllowed,
-                tooltipOnContent: strings.microphoneToggleInLobbyNotAllowed
-            }
-        }
-        : {};
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React.createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', disableTooltip: props.disableTooltip, styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled ||
+    return (React.createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', disableTooltip: props.disableTooltip, styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled ||
             props.disabled ||
             /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), 
         /* @conditional-compile-remove(capabilities) */
@@ -27815,7 +27843,6 @@ const createAnnouncementString = (direction, participants, strings) => {
         numOfParticipants: numberOfExtraParticipants.toString()
     });
 };
-/* @conditional-compile-remove(dtmf-dialer) */
 /**
  * determines if the media gallery should be replaced by the dtmf dialer
  * @param callees Target callees to determine if the dtmf dialer should be shown
@@ -27875,11 +27902,8 @@ const DesktopMoreButton = (props) => {
     const [galleryPositionTop, setGalleryPositionTop] = React.useState(false);
     const [focusedContentOn, setFocusedContentOn] = React.useState(false);
     const [previousLayout, setPreviousLayout] = React.useState((_a = props.userSetGalleryLayout) !== null && _a !== void 0 ? _a : 'floatingLocalVideo');
-    /* @conditional-compile-remove(dtmf-dialer) */
     const callees = useSelector$1(getTargetCallees);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const allowDtmfDialer = showDtmfDialer(callees);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_b = props.dtmfDialerPresent) !== null && _b !== void 0 ? _b : false);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const moreButtonStrings = React.useMemo(() => ({
@@ -27972,7 +27996,6 @@ const DesktopMoreButton = (props) => {
             });
         }
     }
-    /* @conditional-compile-remove(dtmf-dialer) */
     const dtmfDialerScreenOption = {
         key: 'dtmfDialerScreenKey',
         itemProps: {
@@ -27990,7 +28013,6 @@ const DesktopMoreButton = (props) => {
             styles: { root: { lineHeight: 0 } }
         }
     };
-    /* @conditional-compile-remove(dtmf-dialer) */
     /**
      * Only render the dtmf dialer if the dialpad for PSTN calls is not present
      */
@@ -28219,10 +28241,7 @@ const invisibleHiddenFocusStartPoint = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(dtmf-dialer) */
-/* @conditional-compile-remove(dtmf-dialer) */
 const icon = () => React.createElement(CallCompositeIcon, { iconName: 'DtmfDialpadButton' });
-/* @conditional-compile-remove(dtmf-dialer) */
 /**
  * Button for showing and hiding the dtmf dialer in the Call composite.
  * To be used only if the more button control is disabled. This button will replace
@@ -28417,8 +28436,7 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.microphoneButton) })),
-                                    /* @conditional-compile-remove(dtmf-dialer) */ showDtmfDialerButton(options) &&
-                                        props.onSetDialpadPage !== undefined && (React.createElement(DtmfDialpadButton, { styles: commonButtonStyles, displayType: options.displayType, onClick: () => {
+                                    showDtmfDialerButton(options) && props.onSetDialpadPage !== undefined && (React.createElement(DtmfDialpadButton, { styles: commonButtonStyles, displayType: options.displayType, onClick: () => {
                                             if (props.onSetDialpadPage !== undefined) {
                                                 props.onSetDialpadPage();
                                             }
@@ -28442,11 +28460,7 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(close-captions) */
                                         isCaptionsSupported: props.isCaptionsSupported, 
                                         /* @conditional-compile-remove(close-captions) */
-                                        onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, 
-                                        /* @conditional-compile-remove(dtmf-dialer) */
-                                        dtmfDialerPresent: props.dtmfDialerPresent, 
-                                        /* @conditional-compile-remove(dtmf-dialer) */
-                                        onSetDialpadPage: props.onSetDialpadPage })),
+                                        onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, dtmfDialerPresent: props.dtmfDialerPresent, onSetDialpadPage: props.onSetDialpadPage })),
                                     React.createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles }))))))),
             !props.mobileView && sideButtonsPresent && (React.createElement(react.Stack.Item, null,
                 React.createElement("div", { ref: sidepaneControlsRef },
@@ -28561,7 +28575,6 @@ const getDesktopEndCallButtonStyles = (theme) => {
     return react.concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);
 };
 const isEnabled$1 = (option) => option !== false;
-/* @conditional-compile-remove(dtmf-dialer) */
 const showDtmfDialerButton = (options) => {
     if (options.moreButton === false && options.dtmfDialerButton !== false) {
         return true;
@@ -28765,11 +28778,8 @@ const MoreDrawer = (props) => {
     const localeStrings = useLocale();
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const callees = useSelector$1(getTargetCallees);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const allowDtmfDialer = showDtmfDialer(callees);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_a = props.dtmfDialerPresent) !== null && _a !== void 0 ? _a : false);
     /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
@@ -28838,7 +28848,6 @@ const MoreDrawer = (props) => {
             secondaryText: (_c = props.selectedMicrophone) === null || _c === void 0 ? void 0 : _c.name
         });
     }
-    /* @conditional-compile-remove(dtmf-dialer) */
     const dtmfDialerScreenOption = {
         itemKey: 'dtmfDialerScreenKey',
         text: !dtmfDialerChecked
@@ -28856,7 +28865,6 @@ const MoreDrawer = (props) => {
             styles: { root: { lineHeight: 0 } }
         }
     };
-    /* @conditional-compile-remove(dtmf-dialer) */
     /**
      * Only render the dtmf dialer if the dialpad for PSTN calls is not present
      */
@@ -31082,11 +31090,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(close-captions) */
                     isCaptionsOn: isCaptionsOn, 
                     /* @conditional-compile-remove(video-background-effects) */
-                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, 
-                    /* @conditional-compile-remove(dtmf-dialer) */
-                    onSetDialpadPage: props.onSetDialpadPage, 
-                    /* @conditional-compile-remove(dtmf-dialer) */
-                    dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, 
+                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, 
                     /* @conditional-compile-remove(spotlight) */
                     onStopLocalSpotlight: localParticipant.spotlight ? onStopLocalSpotlight : undefined }))))),
                 ((_j = props.callControlProps) === null || _j === void 0 ? void 0 : _j.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
@@ -31094,11 +31098,7 @@ const CallArrangement = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, 
                         /* @conditional-compile-remove(close-captions) */
-                        isCaptionsSupported: isTeamsCall && hasJoinedCall, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, 
-                        /* @conditional-compile-remove(dtmf-dialer) */
-                        onSetDialpadPage: props.onSetDialpadPage, 
-                        /* @conditional-compile-remove(dtmf-dialer) */
-                        dtmfDialerPresent: props.dtmfDialerPresent }))),
+                        isCaptionsSupported: isTeamsCall && hasJoinedCall, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent }))),
                 React.createElement(react.Stack, { horizontal: true, grow: true },
                     React.createElement(react.Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
@@ -31557,7 +31557,6 @@ const DtmfDialpadPageContent = (props) => {
             React.createElement(DtmfDialerContentTimer, null),
             React.createElement(react.Text, { style: { margin: 'auto' } }, calleeName && calleeName !== 'Unnamed participant' ? calleeName === null || calleeName === void 0 ? void 0 : calleeName.toString() : ''),
             React.createElement(Dialpad, { onSendDtmfTone: (tone) => __awaiter$c(void 0, void 0, void 0, function* () {
-                    /* @conditional-compile-remove(dtmf-dialer) */
                     yield adapter.sendDtmfTone(tone);
                 }), longPressTrigger: props.mobileView ? 'touch' : 'mouseAndTouch', dialpadMode: 'dtmf' }))));
 };
@@ -31640,13 +31639,9 @@ const CallPage = (props) => {
     const errorBarProps = usePropsFor$1(ErrorBar);
     const mutedNotificationProps = useSelector$1(mutedNotificationSelector);
     const networkReconnectTileProps = useSelector$1(networkReconnectTileSelector);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const remoteParticipantsConnected = useSelector$1(getRemoteParticipantsConnectedSelector);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const callees = useSelector$1(getTargetCallees);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const renderDtmfDialerFromStart = showDtmfDialer(callees, remoteParticipantsConnected);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const [dtmfDialerPresent, setDtmfDialerPresent] = React.useState(renderDtmfDialerFromStart);
     const strings = useLocale().strings.call;
     // Reduce the controls shown when mobile view is enabled.
@@ -31658,7 +31653,6 @@ const CallPage = (props) => {
     const [promptProps, setPromptProps] = React.useState();
     const onRenderGalleryContentTrampoline = () => {
         var _a;
-        /* @conditional-compile-remove(dtmf-dialer) */
         if (dtmfDialerPresent) {
             return (React.createElement(DtmfDialpadPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
                 /* @conditional-compile-remove(capabilities) */
@@ -31686,11 +31680,7 @@ const CallPage = (props) => {
             /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
             onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (onRenderGalleryContentTrampoline()) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: onCloseChatPane, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, onUserSetOverflowGalleryPositionChange: onSetUserSetOverflowGalleryPosition, onUserSetGalleryLayoutChange: onUserSetGalleryLayoutChange, userSetGalleryLayout: galleryLayout, 
             /* @conditional-compile-remove(capabilities) */
-            capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, 
-            /* @conditional-compile-remove(dtmf-dialer) */
-            onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), 
-            /* @conditional-compile-remove(dtmf-dialer) */
-            dtmfDialerPresent: dtmfDialerPresent, 
+            capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), dtmfDialerPresent: dtmfDialerPresent, 
             /* @conditional-compile-remove(spotlight) */
             setIsPromptOpen: setIsPromptOpen, 
             /* @conditional-compile-remove(spotlight) */
@@ -34752,7 +34742,6 @@ class AzureCommunicationCallAdapter {
         this.holdCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.resumeCall.bind(this);
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
@@ -35202,7 +35191,6 @@ class AzureCommunicationCallAdapter {
             }
         });
     }
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
     sendDtmfTone(dtmfTone) {
         return __awaiter$5(this, void 0, void 0, function* () {
             this.handlers.onSendDtmfTone(dtmfTone);
@@ -35928,7 +35916,6 @@ class CallWithChatBackedCallAdapter {
         this.resumeCall = () => __awaiter$4(this, void 0, void 0, function* () {
             yield this.callWithChatAdapter.resumeCall();
         });
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
         this.sendDtmfTone = (dtmfTone) => __awaiter$4(this, void 0, void 0, function* () {
             yield this.callWithChatAdapter.sendDtmfTone(dtmfTone);
         });
@@ -36823,7 +36810,6 @@ class AzureCommunicationCallWithChatAdapter {
         this.resumeCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.addParticipant.bind(this);
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
@@ -37104,7 +37090,6 @@ class AzureCommunicationCallWithChatAdapter {
             }
         });
     }
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
     sendDtmfTone(dtmfTone) {
         return __awaiter$2(this, void 0, void 0, function* () {
             return yield this.callAdapter.sendDtmfTone(dtmfTone);
@@ -38064,4 +38049,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-DNgYW17b.js.map
+//# sourceMappingURL=index-C3IKJHX1.js.map