@azure/communication-react 1.9.0-alpha-202310260012 → 1.9.0-alpha-202310280012

package/dist/communication-react.d.ts

@@ -242,9 +242,11 @@ export declare type AreParamEqual<A extends (props: any) => JSX.Element | undefi
 export declare type AreTypeEqual<A, B> = A extends B ? (B extends A ? true : false) : false;
 
 /**
+ * Meta Data of the attachment object returned by the ACS SDK.
  * @beta
  */
 export declare interface AttachmentDownloadResult {
+    attachmentId: string;
     blobUrl: string;
 }
 
@@ -2761,7 +2763,7 @@ export declare interface CallWithChatAdapterManagement {
     /** @beta */
     updateFileUploadMetadata: (id: string, metadata: FileMetadata) => void;
     downloadAttachments: (options: {
-        attachmentUrls: string[];
+        attachmentUrls: Record<string, string>;
     }) => Promise<AttachmentDownloadResult[]>;
     /**
      * Puts the Call in a Localhold.
@@ -3904,7 +3906,7 @@ export declare interface ChatAdapterThreadManagement {
      */
     loadPreviousChatMessages(messagesToLoad: number): Promise<boolean>;
     downloadAttachments: (options: {
-        attachmentUrls: string[];
+        attachmentUrls: Record<string, string>;
     }) => Promise<AttachmentDownloadResult[]>;
 }
 
@@ -5123,6 +5125,12 @@ export declare interface ControlBarButtonProps extends IButtonProps {
      * Key to use for the Label component
      */
     labelKey?: string;
+    /**
+     * Disable tooltip.
+     *
+     * @defaultValue 'false'
+     */
+    disableTooltip?: boolean;
     /**
      * Id to use for the tooltip host.
      *
@@ -7549,7 +7557,7 @@ export declare type MessageThreadProps = {
      * @param attachment - FileMetadata object we want to render
      * @beta
      */
-    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult[]>;
+    onFetchAttachments?: (attachments: FileMetadata[]) => Promise<AttachmentDownloadResult[]>;
     /**
      * Optional callback to edit a message.
      *

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.9.0-alpha-202310260012';
+var telemetryVersion = '1.9.0-alpha-202310280012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9523,14 +9523,17 @@ const MessageContentAsRichTextHTML = (props) => {
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     React.useEffect(() => {
         var _a;
-        (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map((fileMetadata) => {
-            if (props.onFetchAttachment &&
-                props.attachmentsMap &&
-                fileMetadata.attachmentType === 'inlineImage' &&
-                props.attachmentsMap[fileMetadata.id] === undefined) {
-                props.onFetchAttachment(fileMetadata);
-            }
+        const attachments = (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.filter((fileMetadata) => {
+            return fileMetadata.attachmentType === 'inlineImage';
         });
+        if (props.attachmentsMap && attachments) {
+            attachments.forEach((fileMetadata) => {
+                if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {
+                    props.onFetchAttachment([fileMetadata], props.message.messageId);
+                    return;
+                }
+            });
+        }
     }, [props]);
     return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
@@ -10840,14 +10843,18 @@ const MessageThreadWrapper = (props) => {
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const [inlineAttachments, setInlineAttachments] = React.useState({});
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$v(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments || attachment.attachmentType !== 'inlineImage' || attachment.id in inlineAttachments) {
+    const onFetchInlineAttachment = React.useCallback((attachments, messageId) => __awaiter$v(void 0, void 0, void 0, function* () {
+        if (!onFetchAttachments) {
             return;
         }
-        setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
-        const attachmentDownloadResult = yield onFetchAttachments(attachment);
-        if (attachmentDownloadResult[0]) {
-            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult[0].blobUrl })));
+        const attachmentDownloadResult = yield onFetchAttachments(attachments);
+        const listOfAttachments = inlineAttachments[messageId];
+        for (const result of attachmentDownloadResult) {
+            const { attachmentId, blobUrl } = result;
+            listOfAttachments[attachmentId] = blobUrl;
+        }
+        if (Object.keys(listOfAttachments).length > 0) {
+            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [messageId]: listOfAttachments })));
         }
     }), [inlineAttachments, onFetchAttachments]);
     const isAllChatMessagesLoadedRef = React.useRef(false);
@@ -11058,6 +11065,11 @@ const MessageThreadWrapper = (props) => {
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp need to be regenerated)
     const defaultChatMessageRenderer = React.useCallback((messageProps) => {
+        var _a;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        if (inlineAttachments[messageProps.message.messageId] === undefined) {
+            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [messageProps.message.messageId]: {} })));
+        }
         if (messageProps.message.messageType === 'chat' ||
             /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
             return (React__default["default"].createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, 
@@ -11070,7 +11082,7 @@ const MessageThreadWrapper = (props) => {
                 /* @conditional-compile-remove(image-gallery) */
                 onInlineImageClicked: onInlineImageClicked, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                attachmentsMap: inlineAttachments, 
+                attachmentsMap: (_a = inlineAttachments[messageProps.message.messageId]) !== null && _a !== void 0 ? _a : {}, 
                 /* @conditional-compile-remove(mention) */
                 mentionOptions: mentionOptions })));
         }
@@ -15774,7 +15786,7 @@ const ControlBarButton = (props) => {
             ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
             : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
-    return (React__default["default"].createElement(ControlButtonTooltip, { content: tooltipContent, id: tooltipId },
+    return (React__default["default"].createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
         React__default["default"].createElement(react.DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: react.KeyCodes.down, text: undefined }), props.showLabel ? labelText : React__default["default"].createElement(React__default["default"].Fragment, null))));
 };
 
@@ -21611,10 +21623,13 @@ class AzureCommunicationChatAdapter {
                     }
                 });
             }
-            const attachmentUrl = options.attachmentUrls[0];
-            const response = yield fetchWithAuthentication(attachmentUrl, accessToken);
-            const blob = yield response.blob();
-            return [{ blobUrl: URL.createObjectURL(blob) }];
+            const attachmentDownloadResults = [];
+            for (const id in options.attachmentUrls) {
+                const response = yield fetchWithAuthentication(options.attachmentUrls[id], accessToken);
+                const blob = yield response.blob();
+                attachmentDownloadResults.push({ attachmentId: id, blobUrl: URL.createObjectURL(blob) });
+            }
+            return attachmentDownloadResults;
         });
     }
     messageReceivedListener(event) {
@@ -22509,11 +22524,14 @@ const ChatScreen = (props) => {
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$i(void 0, void 0, void 0, function* () {
-        if (attachment.attachmentType === 'inlineImage' && attachment.previewUrl) {
-            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
-            return blob;
-        }
-        return [{ blobUrl: '' }];
+        const entry = {};
+        attachment.forEach((target) => {
+            if (target.attachmentType === 'inlineImage' && target.previewUrl) {
+                entry[target.id] = target.previewUrl;
+            }
+        });
+        const blob = yield adapter.downloadAttachments({ attachmentUrls: entry });
+        return blob;
     }), [adapter]);
     /* @conditional-compile-remove(image-gallery) */
     const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$i(void 0, void 0, void 0, function* () {
@@ -22554,7 +22572,7 @@ const ChatScreen = (props) => {
             return;
         }
         if (attachment.attachmentType === 'inlineImage' && attachment.url) {
-            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.url] });
+            const blob = yield adapter.downloadAttachments({ attachmentUrls: { [attachment.id]: attachment.url } });
             if (blob[0]) {
                 const blobUrl = blob[0].blobUrl;
                 setFullSizeAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: blobUrl })));
@@ -23623,7 +23641,7 @@ const Camera = (props) => {
     const isRoomsCall = adapter.getState().isRoomsCall;
     /* @conditional-compile-remove(capabilities) */
     const turnVideoOnCapability = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.turnVideoOn;
-    return (React__default["default"].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled ||
+    return (React__default["default"].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disableTooltip: props.disableTooltip, disabled: cameraButtonProps.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) */
@@ -23844,7 +23862,7 @@ const Microphone = (props) => {
         : {};
     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__default["default"].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled ||
+    return (React__default["default"].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 ||
             props.disabled ||
             /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), 
         /* @conditional-compile-remove(capabilities) */
@@ -24442,17 +24460,17 @@ const CallControls = (props) => {
                 screenShareButtonIsEnabled && (React__default["default"].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
                 showParticipantsButtonInControlBar && (React__default["default"].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                React__default["default"].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                React__default["default"].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.participantsButton), disableTooltip: props.isMobile })),
                 showDevicesButtonInControlBar && (React__default["default"].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$3(options === null || options === void 0 ? void 0 : options.devicesButton) })), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
                 _a.slice(0, props.isMobile
                     ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
                     : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                     return (React__default["default"].createElement(CustomButton, { key: `primary-custom-button-${i}`, 
                         // styles={commonButtonStyles}
-                        showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' }));
+                        showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', disableTooltip: props.isMobile }));
                 }),
                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
-                showMoreButton && (React__default["default"].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonMenuItems }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
+                showMoreButton && (React__default["default"].createElement(MoreButton, { disableTooltip: props.isMobile, "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonMenuItems }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default["default"].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
 const isEnabled$2 = (option) => option !== false;
@@ -24982,12 +25000,12 @@ const CommonCallControlBar = (props) => {
                                 React__default["default"].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
                                     microphoneButtonIsEnabled && (React__default["default"].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.microphoneButton) })),
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.microphoneButton), disableTooltip: props.mobileView })),
                                     cameraButtonIsEnabled && (React__default["default"].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$3(options.cameraButton), 
                                         /* @conditional-compile-remove(video-background-effects) */
-                                        onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef })),
+                                        onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef, disableTooltip: props.mobileView })),
                                     /* @conditional-compile-remove(raise-hand) */ !props.mobileView &&
                                         isEnabled$1(options.raiseHandButton) && (React__default["default"].createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -24998,9 +25016,9 @@ const CommonCallControlBar = (props) => {
                                     _a.slice(0, props.mobileView
                                         ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
                                         : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                                        return (React__default["default"].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
+                                        return (React__default["default"].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact', disableTooltip: props.mobileView }));
                                     }),
-                                    props.mobileView && (React__default["default"].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
+                                    props.mobileView && (React__default["default"].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView })),
                                     !props.mobileView && showDesktopMoreButton && (React__default["default"].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, 
                                         /*@conditional-compile-remove(PSTN-calls) */
                                         onClickShowDialpad: props.onClickShowDialpad, 
@@ -25463,6 +25481,7 @@ const MoreDrawer = (props) => {
             text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
             onItemClick: () => {
                 props.onClickShowDialpad && props.onClickShowDialpad();
+                onLightDismiss();
             },
             iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } }
         });
@@ -27819,7 +27838,7 @@ const ConfigurationPageMicDropdown = (props) => {
  * @private
  */
 const configurationStackTokensDesktop = {
-    childrenGap: '2rem'
+    childrenGap: '1rem'
 };
 /**
  * @private
@@ -27845,7 +27864,7 @@ const configurationContainerStyleMobile = react.mergeStyles(Object.assign(Object
  * @private
  */
 const selectionContainerStyle = react.mergeStyles({
-    width: '50%',
+    width: '100%',
     minWidth: '11rem',
     maxWidth: '18.75rem',
     padding: '0.5rem'
@@ -27870,9 +27889,11 @@ const titleContainerStyleMobile = react.mergeStyles({
 /**
  * @private
  */
-const callDetailsContainerStylesDesktop = {
+const callDetailsContainerStyles = {
     root: {
-        marginBottom: '1.563rem'
+        textAlign: 'center',
+        maxWidth: _pxToRem(700),
+        alignSelf: 'center'
     }
 };
 const callDetailsStyle = {
@@ -28669,27 +28690,26 @@ const ConfigurationPage = (props) => {
             /* @conditional-compile-remove(unsupported-browser) */
             environmentInfo: environmentInfo, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         React__default["default"].createElement(react.Stack, { verticalFill: true, grow: true, horizontal: true, className: fillWidth },
-            React__default["default"].createElement(react.Stack, { className: fillWidth, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
-                mobileWithPreview && (React__default["default"].createElement(react.Stack.Item, null,
+            React__default["default"].createElement(react.Stack, { className: fillWidth, verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
+                React__default["default"].createElement(react.Stack.Item, { styles: callDetailsContainerStyles },
                     title,
-                    callDescription)),
-                localPreviewTrampoline(mobileWithPreview, /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
-                React__default["default"].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle },
-                    !mobileWithPreview && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(react.Stack.Item, { styles: callDetailsContainerStylesDesktop },
-                            title,
-                            callDescription),
-                        React__default["default"].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
-                            /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
-                            /* @conditional-compile-remove(call-readiness) */ audioState), 
-                            /* @conditional-compile-remove(call-readiness) */
-                            onClickEnableDevicePermission: () => {
-                                setIsPermissionsModalDismissed(true);
-                            }, 
-                            /* @conditional-compile-remove(video-background-effects) */
-                            onClickVideoEffects: toggleVideoEffectsPane })))),
-                    React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                        React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton })))),
+                    callDescription),
+                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : undefined },
+                    localPreviewTrampoline(mobileWithPreview, 
+                    /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
+                    React__default["default"].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle },
+                        !mobileWithPreview && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
+                                /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
+                                /* @conditional-compile-remove(call-readiness) */ audioState), 
+                                /* @conditional-compile-remove(call-readiness) */
+                                onClickEnableDevicePermission: () => {
+                                    setIsPermissionsModalDismissed(true);
+                                }, 
+                                /* @conditional-compile-remove(video-background-effects) */
+                                onClickVideoEffects: toggleVideoEffectsPane })))),
+                        React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
+                            React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton }))))),
             React__default["default"].createElement(react.Panel
             /* @conditional-compile-remove(video-background-effects) */
             , { 
@@ -31589,7 +31609,7 @@ const CallWithChatScreen = (props) => {
         placement: mobileView ? 'primary' : 'secondary',
         onRenderButton: () => (React__default["default"].createElement(ChatButtonWithUnreadMessagesBadge, { checked: isChatOpen, showLabel: args.displayType !== 'compact', onClick: toggleChat, disabled: chatButtonDisabled, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel, unreadChatMessagesCount: unreadChatMessagesCount, 
             // As chat is disabled when on hold, we don't want to show the unread badge when on hold
-            hideUnreadChatMessagesBadge: isOnHold }))
+            hideUnreadChatMessagesBadge: isOnHold, disableTooltip: mobileView }))
     }), [
         callWithChatStrings.chatButtonNewMessageNotificationLabel,
         chatButtonStrings,