@azure/communication-react 1.19.0-alpha-202408070015 → 1.19.0-beta.1

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js

@@ -149,7 +149,7 @@ export const ChatScreen = (props) => {
         return src;
     };
     const onRenderAvatarCallback = useCallback((userId, defaultOptions) => {
-        return (React.createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
+        return React.createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData }));
     }, [onFetchAvatarPersonaData]);
     const messageThreadStyles = useMemo(() => {
         return Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
@@ -177,7 +177,6 @@ export const ChatScreen = (props) => {
         // set send box on focus after file selection per A11y requirement
         sendBox === null || sendBox === void 0 ? void 0 : sendBox.focus();
     }, [
-        /* @conditional-compile-remove(rich-text-editor-composite-support) */
         (_a = props.options) === null || _a === void 0 ? void 0 : _a.richTextEditor
     ]);
     /* @conditional-compile-remove(file-sharing-acs) */
@@ -199,35 +198,54 @@ export const ChatScreen = (props) => {
                     progress: 0
                 },
                 notifyUploadProgressChanged: (value) => {
-                    handleUploadAction({ type: AttachmentUploadActionType.Progress, taskId, progress: value });
+                    handleUploadAction({
+                        type: AttachmentUploadActionType.Progress,
+                        taskId,
+                        progress: value
+                    });
                 },
                 notifyUploadCompleted: (id, url) => {
-                    handleUploadAction({ type: AttachmentUploadActionType.Completed, taskId, id, url });
+                    handleUploadAction({
+                        type: AttachmentUploadActionType.Completed,
+                        taskId,
+                        id,
+                        url
+                    });
                 },
                 notifyUploadFailed: (message) => {
-                    handleUploadAction({ type: AttachmentUploadActionType.Failed, taskId, message });
+                    handleUploadAction({
+                        type: AttachmentUploadActionType.Failed,
+                        taskId,
+                        message
+                    });
                     // remove the failed upload task when error banner is auto dismissed after 10 seconds
                     // so the banner won't be shown again on UI re-rendering.
                     setTimeout(() => {
-                        handleUploadAction({ type: AttachmentUploadActionType.Remove, id: taskId });
+                        handleUploadAction({
+                            type: AttachmentUploadActionType.Remove,
+                            id: taskId
+                        });
                     }, 10 * 1000);
                 }
             };
         });
-        handleUploadAction({ type: AttachmentUploadActionType.Set, newUploads });
+        handleUploadAction({
+            type: AttachmentUploadActionType.Set,
+            newUploads
+        });
         (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentSelection(newUploads);
     }, [attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions, setKeyboardFocusAfterFileSelection]);
     /* @conditional-compile-remove(file-sharing-acs) */
     const onRenderAttachmentDownloads = useCallback((message) => {
         var _a, _b, _c;
-        return ((_b = (_a = message === null || message === void 0 ? void 0 : message.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0) ? (React.createElement(_AttachmentDownloadCards, { attachments: message.attachments, message: message, actionsForAttachment: (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _c === void 0 ? void 0 : _c.actionsForAttachment, onActionHandlerFailed: (errorMessage) => {
+        return ((_b = (_a = message === null || message === void 0 ? void 0 : message.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0) ? React.createElement(_AttachmentDownloadCards, { attachments: message.attachments, message: message, actionsForAttachment: (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _c === void 0 ? void 0 : _c.actionsForAttachment, onActionHandlerFailed: (errorMessage) => {
                 setDownloadErrorMessage(errorMessage);
-            } })) : (React.createElement(React.Fragment, null));
+            } }) : React.createElement(React.Fragment, null);
     }, [(_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _b === void 0 ? void 0 : _b.actionsForAttachment]);
     const onInlineImageClicked = 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) => {
+        const inlinedImages = (_b = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.filter(attachment => {
             return attachment.attachmentType === 'image' && attachment.id === attachmentId;
         });
         if (!inlinedImages || inlinedImages.length <= 0) {
@@ -270,26 +288,28 @@ export const ChatScreen = (props) => {
     const onRenderInlineImage = useCallback((inlineImage, defaultOnRender) => {
         var _a, _b;
         const message = adapter.getState().thread.chatMessages[inlineImage.messageId];
-        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);
+        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);
         }
         let pointerEvents = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';
         const resourceCache = message.resourceCache;
-        if (resourceCache &&
-            attachment.previewUrl &&
-            resourceCache[attachment.previewUrl] &&
-            resourceCache[attachment.previewUrl].error) {
+        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) => {
+        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.imageAttributes.id || '', inlineImage.messageId);
                 }
-            }, style: { cursor: 'pointer', pointerEvents } }, defaultOnRender(inlineImage)));
+            }, style: {
+                cursor: 'pointer',
+                pointerEvents
+            } }, defaultOnRender(inlineImage));
     }, [adapter, onInlineImageClicked]);
     const inlineImageOptions = useMemo(() => {
-        return { onRenderInlineImage: onRenderInlineImage };
+        return {
+            onRenderInlineImage: onRenderInlineImage
+        };
     }, [onRenderInlineImage]);
     const onDownloadButtonClicked = useCallback((imageSrc) => {
         if (imageSrc === '') {
@@ -315,27 +335,19 @@ export const ChatScreen = (props) => {
     /* @conditional-compile-remove(file-sharing-acs) */
     const attachmentButton = useMemo(() => {
         var _a, _b, _c;
-        if (!((_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentSelection) ||
-            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (!((_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentSelection) || /* @conditional-compile-remove(rich-text-editor-image-upload) */
             textOnlyChat) {
             return null;
         }
-        return (React.createElement(AttachmentUploadButton, { supportedMediaTypes: (_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _b === void 0 ? void 0 : _b.supportedMediaTypes, disableMultipleUploads: (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _c === void 0 ? void 0 : _c.disableMultipleUploads, onChange: attachmentUploadButtonOnChange }));
+        return React.createElement(AttachmentUploadButton, { supportedMediaTypes: (_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _b === void 0 ? void 0 : _b.supportedMediaTypes, disableMultipleUploads: (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _c === void 0 ? void 0 : _c.disableMultipleUploads, onChange: attachmentUploadButtonOnChange });
         return React.createElement(React.Fragment, null);
-    }, [
-        (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _c === void 0 ? void 0 : _c.handleAttachmentSelection,
-        (_d = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _d === void 0 ? void 0 : _d.supportedMediaTypes,
-        (_e = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _e === void 0 ? void 0 : _e.disableMultipleUploads,
-        attachmentUploadButtonOnChange,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        textOnlyChat
-    ]);
+    }, [(_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _c === void 0 ? void 0 : _c.handleAttachmentSelection, (_d = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _d === void 0 ? void 0 : _d.supportedMediaTypes, (_e = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _e === void 0 ? void 0 : _e.disableMultipleUploads, attachmentUploadButtonOnChange, /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        textOnlyChat]);
     /* @conditional-compile-remove(file-sharing-acs) */
     const attachments = useMemo(() => {
-        return uploads === null || uploads === void 0 ? void 0 : uploads.map((v) => v.metadata);
+        return uploads === null || uploads === void 0 ? void 0 : uploads.map(v => v.metadata);
     }, [uploads]);
-    const onSendMessageHandler = useCallback(function (content, 
-    /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ options) {
+    const onSendMessageHandler = useCallback(function (content, /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ options) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a;
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -343,7 +355,9 @@ export const ChatScreen = (props) => {
             /* @conditional-compile-remove(file-sharing-acs) */
             const attachments = (_a = options === null || options === void 0 ? void 0 : options.attachments) !== null && _a !== void 0 ? _a : [];
             /* @conditional-compile-remove(file-sharing-acs) */
-            handleUploadAction({ type: AttachmentUploadActionType.Clear });
+            handleUploadAction({
+                type: AttachmentUploadActionType.Clear
+            });
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
             handleSendBoxInlineImageUploadAction({
                 type: AttachmentUploadActionType.Clear,
@@ -362,133 +376,103 @@ export const ChatScreen = (props) => {
                 type: options === null || options === void 0 ? void 0 : options.type
             });
         });
-    }, [
-        adapter,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleSendBoxInlineImageUploadAction,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads
-    ]);
-    const onUpdateMessageHandler = useCallback(function (messageId, content, 
-    /* @conditional-compile-remove(file-sharing-acs) */ options) {
+    }, [adapter, /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleSendBoxInlineImageUploadAction, /* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads]);
+    const onUpdateMessageHandler = useCallback(function (messageId, content, /* @conditional-compile-remove(file-sharing-acs) */ options) {
         return __awaiter(this, void 0, void 0, function* () {
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
             content = updateContentStringWithUploadedInlineImages(content, editBoxInlineImageUploads, messageId);
-            yield messageThreadProps.onUpdateMessage(messageId, content, 
-            /* @conditional-compile-remove(file-sharing-acs) */ options);
+            yield messageThreadProps.onUpdateMessage(messageId, content, /* @conditional-compile-remove(file-sharing-acs) */ options);
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            handleEditBoxInlineImageUploadAction({ type: AttachmentUploadActionType.Clear, messageId });
+            handleEditBoxInlineImageUploadAction({
+                type: AttachmentUploadActionType.Clear,
+                messageId
+            });
         });
-    }, [
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleEditBoxInlineImageUploadAction,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads,
-        messageThreadProps
-    ]);
+    }, [/* @conditional-compile-remove(rich-text-editor-image-upload) */ handleEditBoxInlineImageUploadAction, /* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads, messageThreadProps]);
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     const onCancelEditMessageHandler = useCallback((messageId) => {
-        handleEditBoxInlineImageUploadAction({ type: AttachmentUploadActionType.Clear, messageId });
+        handleEditBoxInlineImageUploadAction({
+            type: AttachmentUploadActionType.Clear,
+            messageId
+        });
     }, [handleEditBoxInlineImageUploadAction]);
     /* @conditional-compile-remove(file-sharing-acs) */
     const onCancelUploadHandler = useCallback((id) => {
         var _a, _b;
-        handleUploadAction({ type: AttachmentUploadActionType.Remove, id });
+        handleUploadAction({
+            type: AttachmentUploadActionType.Remove,
+            id
+        });
         (_b = (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentRemoval) === null || _b === void 0 ? void 0 : _b.call(_a, id);
     }, [attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions]);
     /* @conditional-compile-remove(rich-text-editor-composite-support) */
     const richTextEditorOptions = useMemo(() => {
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         const onPasteCallback = isACSChat || textOnlyChat ? removeImageTags : undefined;
-        return (options === null || options === void 0 ? void 0 : options.richTextEditor)
-            ? {
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: onPasteCallback
-            }
-            : undefined;
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor) ? {
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: onPasteCallback
+        } : undefined;
     }, [
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        isACSChat,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        isACSChat, /* @conditional-compile-remove(rich-text-editor-image-upload) */
         textOnlyChat,
         options === null || options === void 0 ? void 0 : options.richTextEditor
     ]);
     /* @conditional-compile-remove(rich-text-editor-composite-support) */
     const richTextEditBoxOptions = useMemo(() => {
-        return (options === null || options === void 0 ? void 0 : options.richTextEditor)
-            ? Object.assign(Object.assign({}, richTextEditorOptions), { 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onInsertInlineImage: (imageAttributes, messageId) => {
-                    onInsertInlineImageForEditBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
-                }, 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                messagesInlineImagesWithProgress: getEditBoxMessagesInlineImages(editBoxInlineImageUploads), 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onRemoveInlineImage: (imageAttributes, messageId) => {
-                    cancelInlineImageUpload(imageAttributes, editBoxInlineImageUploads, messageId, handleEditBoxInlineImageUploadAction, adapter);
-                } }) : undefined;
-    }, [
-        options === null || options === void 0 ? void 0 : options.richTextEditor,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ richTextEditorOptions,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ adapter,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ localeStrings.chat
-    ]);
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor) ? Object.assign(Object.assign({}, richTextEditorOptions), { 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onInsertInlineImage: (imageAttributes, messageId) => {
+                onInsertInlineImageForEditBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
+            }, 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            messagesInlineImagesWithProgress: getEditBoxMessagesInlineImages(editBoxInlineImageUploads), 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onRemoveInlineImage: (imageAttributes, messageId) => {
+                cancelInlineImageUpload(imageAttributes, editBoxInlineImageUploads, messageId, handleEditBoxInlineImageUploadAction, adapter);
+            } }) : undefined;
+    }, [options === null || options === void 0 ? void 0 : options.richTextEditor, /* @conditional-compile-remove(rich-text-editor-image-upload) */ richTextEditorOptions, /* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads, /* @conditional-compile-remove(rich-text-editor-image-upload) */ adapter, /* @conditional-compile-remove(rich-text-editor-image-upload) */ localeStrings.chat]);
     /* @conditional-compile-remove(rich-text-editor-composite-support) */
     const richTextSendBoxOptions = useMemo(() => {
-        return (options === null || options === void 0 ? void 0 : options.richTextEditor)
-            ? Object.assign(Object.assign({}, richTextEditorOptions), { 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onInsertInlineImage: (imageAttributes) => {
-                    onInsertInlineImageForSendBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
-                }, 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                inlineImagesWithProgress: getSendBoxInlineImages(sendBoxInlineImageUploads), 
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onRemoveInlineImage: (imageAttributes) => {
-                    cancelInlineImageUpload(imageAttributes, sendBoxInlineImageUploads, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);
-                } }) : undefined;
-    }, [
-        options === null || options === void 0 ? void 0 : options.richTextEditor,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ richTextEditorOptions,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads,
-        /* @conditional-compile-remove(rich-text-editor-image-upload) */ localeStrings.chat,
-        adapter
-    ]);
-    return (React.createElement(Stack, { className: chatContainer, grow: true },
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor) ? Object.assign(Object.assign({}, richTextEditorOptions), { 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onInsertInlineImage: (imageAttributes) => {
+                onInsertInlineImageForSendBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
+            }, 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            inlineImagesWithProgress: getSendBoxInlineImages(sendBoxInlineImageUploads), 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onRemoveInlineImage: (imageAttributes) => {
+                cancelInlineImageUpload(imageAttributes, sendBoxInlineImageUploads, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);
+            } }) : undefined;
+    }, [options === null || options === void 0 ? void 0 : options.richTextEditor, /* @conditional-compile-remove(rich-text-editor-image-upload) */ richTextEditorOptions, /* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads, /* @conditional-compile-remove(rich-text-editor-image-upload) */ localeStrings.chat, adapter]);
+    return React.createElement(Stack, { className: chatContainer, grow: true },
         (options === null || options === void 0 ? void 0 : options.topic) !== false && React.createElement(ChatHeader, Object.assign({}, headerProps)),
         React.createElement(Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
             React.createElement(Stack, { className: chatWrapper, grow: true },
-                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React.createElement(ErrorBar, Object.assign({}, errorBarProps)),
-                /* @conditional-compile-remove(file-sharing-acs) */
+                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React.createElement(ErrorBar, Object.assign({}, errorBarProps)), /* @conditional-compile-remove(file-sharing-acs) */
                 React.createElement(AttachmentDownloadErrorBar, { onDismissDownloadErrorMessage: useCallback(() => {
                         setDownloadErrorMessage('');
                     }, []), attachmentDownloadErrorMessage: downloadErrorMessage || '' }),
                 React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onUpdateMessage: onUpdateMessageHandler, 
-                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                    onCancelEditMessage: onCancelEditMessageHandler, onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
-                    /* @conditional-compile-remove(file-sharing-acs) */
-                    onRenderAttachmentDownloads: onRenderAttachmentDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles, 
-                    /* @conditional-compile-remove(rich-text-editor-composite-support) */
-                    richTextEditorOptions: richTextEditBoxOptions })),
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */ onCancelEditMessage: onCancelEditMessageHandler, onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
+                    /* @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads: onRenderAttachmentDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles, 
+                    /* @conditional-compile-remove(rich-text-editor-composite-support) */ richTextEditorOptions: richTextEditBoxOptions })),
                 React.createElement(Stack, { className: mergeStyles(sendboxContainerStyles) },
-                    React.createElement("div", { className: mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
+                    React.createElement("div", { className: mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? onRenderTypingIndicator(typingIndicatorProps.typingUsers) : React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles }))),
                     React.createElement(Stack, { horizontal: formFactor === 'mobile' },
-                        formFactor === 'mobile' && (
-                        /* @conditional-compile-remove(file-sharing-acs) */
-                        React.createElement(Stack, { verticalAlign: "center" }, attachmentButton)),
+                        formFactor === 'mobile' && ( /* @conditional-compile-remove(file-sharing-acs) */React.createElement(Stack, { verticalAlign: "center" }, attachmentButton)),
                         React.createElement(Stack, { grow: true },
                             React.createElement(SendBoxPicker, { styles: sendBoxStyles, autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, 
-                                /* @conditional-compile-remove(rich-text-editor-composite-support) */
-                                richTextEditorOptions: richTextSendBoxOptions, 
-                                /* @conditional-compile-remove(file-sharing-acs) */
-                                attachments: attachments, 
-                                /* @conditional-compile-remove(file-sharing-acs) */
-                                onCancelAttachmentUpload: onCancelUploadHandler, 
+                                /* @conditional-compile-remove(rich-text-editor-composite-support) */ richTextEditorOptions: richTextSendBoxOptions, 
+                                /* @conditional-compile-remove(file-sharing-acs) */ attachments: attachments, 
+                                /* @conditional-compile-remove(file-sharing-acs) */ onCancelAttachmentUpload: onCancelUploadHandler, 
                                 // we need to overwrite onSendMessage for SendBox because we need to clear attachment state
                                 // when submit button is clicked
                                 onSendMessage: onSendMessageHandler })),
-                        formFactor !== 'mobile' &&
-                            /* @conditional-compile-remove(file-sharing-acs) */
-                            attachmentButton))),
-            /* @conditional-compile-remove(chat-composite-participant-pane) */
-            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
-        overlayImageItem && (React.createElement(ImageOverlay, Object.assign({}, overlayImageItem, { isOpen: isImageOverlayOpen, onDismiss: () => {
+                        formFactor !== 'mobile' && /* @conditional-compile-remove(file-sharing-acs) */
+                            attachmentButton))), /* @conditional-compile-remove(chat-composite-participant-pane) */
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })),
+        overlayImageItem && React.createElement(ImageOverlay, Object.assign({}, overlayImageItem, { isOpen: isImageOverlayOpen, onDismiss: () => {
                 setOverlayImageItem(undefined);
                 setIsImageOverlayOpen(false);
                 adapter.removeResourceFromCache({
@@ -496,6 +480,6 @@ export const ChatScreen = (props) => {
                     messageId: overlayImageItem.messageId,
                     resourceUrl: overlayImageItem.imageUrl
                 });
-            }, onDownloadButtonClicked: onDownloadButtonClicked })))));
+            }, onDownloadButtonClicked: onDownloadButtonClicked })));
 };
 //# sourceMappingURL=ChatScreen.js.map