@azure/communication-react 1.30.0 → 1.31.0-beta.1

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

@@ -14,29 +14,53 @@ import { mergeStyles, Stack } from '@fluentui/react';
 import { PersonaSize } from '@fluentui/react';
 import { ErrorBar, MessageThread, TypingIndicator, useTheme } from "../../../../react-components/src";
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { useReducer } from 'react';
 import { useState } from 'react';
 import { AvatarPersona } from '../common/AvatarPersona';
 import { useAdapter } from './adapter/ChatAdapterProvider';
 import { ChatHeader, getHeaderProps } from './ChatHeader';
+import { AttachmentUploadButtonWrapper as AttachmentUploadButton } from './file-sharing';
 import { useAdaptedSelector } from './hooks/useAdaptedSelector';
 import { usePropsFor } from './hooks/usePropsFor';
 import { chatArea, chatContainer, chatWrapper, messageThreadChatCompositeStyles, sendboxContainerStyles, typingIndicatorContainerStyles } from './styles/Chat.styles';
 import { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';
+import { ChatScreenPeoplePane } from './ChatScreenPeoplePane';
 import { toFlatCommunicationIdentifier } from "../../../../acs-ui-common/src";
+import { removeImageTags } from "../../../../acs-ui-common/src";
+import { AttachmentDownloadErrorBar } from './AttachmentDownloadErrorBar';
+import { _AttachmentDownloadCards } from "../../../../react-components/src";
 import { ImageOverlay } from "../../../../react-components/src";
+import { nanoid } from 'nanoid';
+import { AttachmentUploadActionType, AttachmentUploadReducer } from './file-sharing/AttachmentUpload';
 import { SendBoxPicker } from '../common/SendBoxPicker';
+import { loadRichTextSendBox } from '../common/SendBoxPicker';
+import { cancelInlineImageUpload, getEditBoxMessagesInlineImages, getImageFileNameFromAttributes, getSendBoxInlineImages, onInsertInlineImageForEditBox, onInsertInlineImageForSendBox, updateContentStringWithUploadedInlineImages } from './ImageUpload/ImageUploadUtils';
+import { isMicrosoftTeamsUserIdentifier } from '@azure/communication-common';
+import { SEND_BOX_UPLOADS_KEY_VALUE } from '../common/constants';
+import { ImageUploadReducer } from './ImageUpload/ImageUploadReducer';
+import { useLocale } from '../localization';
 import { useSelector } from './hooks/useSelector';
 import { getChatMessages, getThreadId, getUserId } from './selectors/baseSelectors';
+import { getCreatedBy, getTextOnlyChat } from './selectors/baseSelectors';
 /**
  * @private
  */
 export const ChatScreen = (props) => {
-    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, formFactor } = props;
+    var _a, _b, _c, _d, _e;
+    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, attachmentOptions, formFactor } = props;
     const defaultNumberOfChatMessagesToReload = 5;
+    const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
     const [overlayImageItem, setOverlayImageItem] = useState();
     const [isImageOverlayOpen, setIsImageOverlayOpen] = useState(false);
+    const [uploads, handleUploadAction] = useReducer(AttachmentUploadReducer, []);
     const adapter = useAdapter();
     const theme = useTheme();
+    const localeStrings = useLocale().strings;
+    const textOnlyChat = !!useSelector(getTextOnlyChat);
+    const createdBy = useSelector(getCreatedBy);
+    const isACSChat = createdBy && !isMicrosoftTeamsUserIdentifier(createdBy);
+    const [editBoxInlineImageUploads, handleEditBoxInlineImageUploadAction] = useReducer(ImageUploadReducer, undefined);
+    const [sendBoxInlineImageUploads, handleSendBoxInlineImageUploadAction] = useReducer(ImageUploadReducer, undefined);
     useEffect(() => {
         // Initial data should be always fetched by the composite(or external caller) instead of the adapter
         const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -47,6 +71,14 @@ export const ChatScreen = (props) => {
         });
         fetchData();
     }, [adapter]);
+    useEffect(() => {
+        // if rich text editor is enabled, the rich text editor component should be loaded early for good UX
+        if (options === null || options === void 0 ? void 0 : options.richTextEditor) {
+            // this line is needed to load the Rooster JS dependencies early in the lifecycle
+            // when the rich text editor is enabled
+            loadRichTextSendBox();
+        }
+    }, [options === null || options === void 0 ? void 0 : options.richTextEditor]);
     const messageThreadProps = usePropsFor(MessageThread);
     const typingIndicatorProps = usePropsFor(TypingIndicator);
     const headerProps = useAdaptedSelector(getHeaderProps);
@@ -96,6 +128,81 @@ export const ChatScreen = (props) => {
     }, [styles === null || styles === void 0 ? void 0 : styles.sendBox]);
     const userIdObject = useSelector(getUserId);
     const userId = toFlatCommunicationIdentifier(userIdObject);
+    const setKeyboardFocusAfterFileSelection = useCallback(() => {
+        var _a;
+        // look up sendbox by ID for now, we will use `useRef`
+        // once attachment button is moved inside of send box component
+        // see ADO workitem #3764245
+        if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.richTextEditor) {
+            const richTextSendBox = document === null || document === void 0 ? void 0 : document.querySelector(`[id="richTextSendBox"]`);
+            richTextSendBox === null || richTextSendBox === void 0 ? void 0 : richTextSendBox.focus();
+            return;
+        }
+        const sendBox = document === null || document === void 0 ? void 0 : document.querySelector(`[id="sendbox"]`);
+        // set send box on focus after file selection per A11y requirement
+        sendBox === null || sendBox === void 0 ? void 0 : sendBox.focus();
+    }, [(_a = props.options) === null || _a === void 0 ? void 0 : _a.richTextEditor]);
+    const attachmentUploadButtonOnChange = useCallback((files) => {
+        var _a;
+        setKeyboardFocusAfterFileSelection();
+        if (!files) {
+            return;
+        }
+        // Get files, change to tasks, store locally and pass back to Contoso
+        const newUploads = Array.from(files).map((file) => {
+            const taskId = nanoid();
+            return {
+                file,
+                taskId,
+                metadata: {
+                    id: taskId,
+                    name: file.name,
+                    progress: 0
+                },
+                notifyUploadProgressChanged: (value) => {
+                    handleUploadAction({
+                        type: AttachmentUploadActionType.Progress,
+                        taskId,
+                        progress: value
+                    });
+                },
+                notifyUploadCompleted: (id, url) => {
+                    handleUploadAction({
+                        type: AttachmentUploadActionType.Completed,
+                        taskId,
+                        id,
+                        url
+                    });
+                },
+                notifyUploadFailed: (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
+                        });
+                    }, 10 * 1000);
+                }
+            };
+        });
+        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]);
+    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) => {
+                setDownloadErrorMessage(errorMessage);
+            } }) : React.createElement(React.Fragment, null);
+    }, [(_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _b === void 0 ? void 0 : _b.actionsForAttachment]);
     const threadId = useSelector(getThreadId);
     const onInlineImageClicked = useCallback((attachmentId, messageId) => {
         var _a, _b, _c;
@@ -187,32 +294,103 @@ export const ChatScreen = (props) => {
             document.body.removeChild(a);
         }
     }, [overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId]);
-    const onSendMessageHandler = useCallback(function (content) {
+    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) || 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(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, textOnlyChat]);
+    const attachments = useMemo(() => {
+        return uploads === null || uploads === void 0 ? void 0 : uploads.map(v => v.metadata);
+    }, [uploads]);
+    const onSendMessageHandler = useCallback(function (content, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield adapter.sendMessage(content, {});
+            var _a;
+            content = updateContentStringWithUploadedInlineImages(content, sendBoxInlineImageUploads);
+            const attachments = (_a = options === null || options === void 0 ? void 0 : options.attachments) !== null && _a !== void 0 ? _a : [];
+            handleUploadAction({
+                type: AttachmentUploadActionType.Clear
+            });
+            handleSendBoxInlineImageUploadAction({
+                type: AttachmentUploadActionType.Clear,
+                messageId: SEND_BOX_UPLOADS_KEY_VALUE
+            });
+            yield adapter.sendMessage(content, {
+                attachments: attachments,
+                type: options === null || options === void 0 ? void 0 : options.type
+            });
+            return;
+            yield adapter.sendMessage(content, {
+                type: options === null || options === void 0 ? void 0 : options.type
+            });
         });
-    }, [adapter]);
-    const onUpdateMessageHandler = useCallback(function (messageId, content) {
+    }, [adapter, handleSendBoxInlineImageUploadAction, sendBoxInlineImageUploads]);
+    const onUpdateMessageHandler = useCallback(function (messageId, content, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield messageThreadProps.onUpdateMessage(messageId, content);
+            content = updateContentStringWithUploadedInlineImages(content, editBoxInlineImageUploads, messageId);
+            yield messageThreadProps.onUpdateMessage(messageId, content, options);
+            handleEditBoxInlineImageUploadAction({
+                type: AttachmentUploadActionType.Clear,
+                messageId
+            });
+        });
+    }, [handleEditBoxInlineImageUploadAction, editBoxInlineImageUploads, messageThreadProps]);
+    const onCancelEditMessageHandler = useCallback((messageId) => {
+        handleEditBoxInlineImageUploadAction({
+            type: AttachmentUploadActionType.Clear,
+            messageId
+        });
+    }, [handleEditBoxInlineImageUploadAction]);
+    const onCancelUploadHandler = useCallback((id) => {
+        var _a, _b;
+        handleUploadAction({
+            type: AttachmentUploadActionType.Remove,
+            id
         });
-    }, [messageThreadProps]);
+        (_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]);
+    const richTextEditorOptions = useMemo(() => {
+        const onPasteCallback = !!isACSChat || textOnlyChat ? removeImageTags : undefined;
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor) ? {
+            onPaste: onPasteCallback
+        } : undefined;
+    }, [isACSChat, textOnlyChat, options === null || options === void 0 ? void 0 : options.richTextEditor]);
+    const richTextEditBoxOptions = useMemo(() => {
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor) ? Object.assign(Object.assign({}, richTextEditorOptions), { onInsertInlineImage: (imageAttributes, messageId) => {
+                onInsertInlineImageForEditBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
+            }, messagesInlineImagesWithProgress: getEditBoxMessagesInlineImages(editBoxInlineImageUploads), onRemoveInlineImage: (imageAttributes, messageId) => {
+                cancelInlineImageUpload(imageAttributes, editBoxInlineImageUploads, messageId, handleEditBoxInlineImageUploadAction, adapter);
+            } }) : undefined;
+    }, [options === null || options === void 0 ? void 0 : options.richTextEditor, richTextEditorOptions, editBoxInlineImageUploads, adapter, localeStrings.chat]);
+    const richTextSendBoxOptions = useMemo(() => {
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor) ? Object.assign(Object.assign({}, richTextEditorOptions), { onInsertInlineImage: (imageAttributes) => {
+                onInsertInlineImageForSendBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
+            }, inlineImagesWithProgress: getSendBoxInlineImages(sendBoxInlineImageUploads), onRemoveInlineImage: (imageAttributes) => {
+                cancelInlineImageUpload(imageAttributes, sendBoxInlineImageUploads, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);
+            } }) : undefined;
+    }, [options === null || options === void 0 ? void 0 : options.richTextEditor, richTextEditorOptions, sendBoxInlineImageUploads, 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)),
-                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onUpdateMessage: onUpdateMessageHandler, onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                React.createElement(AttachmentDownloadErrorBar, { onDismissDownloadErrorMessage: useCallback(() => {
+                        setDownloadErrorMessage('');
+                    }, []), attachmentDownloadErrorMessage: downloadErrorMessage || '' }),
+                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onUpdateMessage: onUpdateMessageHandler, onCancelEditMessage: onCancelEditMessageHandler, onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, onRenderAttachmentDownloads: onRenderAttachmentDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles, 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(Stack, { horizontal: formFactor === 'mobile' },
-                        formFactor === 'mobile',
+                        formFactor === 'mobile' && (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, 
+                            React.createElement(SendBoxPicker, { styles: sendBoxStyles, autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, richTextEditorOptions: richTextSendBoxOptions, attachments: attachments, 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')))),
+                        formFactor !== 'mobile' && attachmentButton))),
+            (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);

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

@@ -1 +1 @@
-{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { isIOS } from '@fluentui/react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { PersonaSize } from '@fluentui/react';\nimport { CommunicationParticipant, ErrorBar, MessageProps, MessageRenderer, MessageThread, MessageThreadStyles, ParticipantMenuItemsCallback, SendBoxStylesProps, TypingIndicator, TypingIndicatorStylesProps, useTheme } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { useState } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback, AvatarPersonaProps } from '../common/AvatarPersona';\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\nimport { chatArea, chatContainer, chatWrapper, messageThreadChatCompositeStyles, sendboxContainerStyles, typingIndicatorContainerStyles } from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '@internal/react-components';\nimport { ImageOverlay } from '@internal/react-components';\nimport { InlineImage } from '@internal/react-components';\nimport { ChatMessageWithStatus, ResourceFetchResult } from '@internal/chat-stateful-client';\nimport { SendBoxPicker } from '../common/SendBoxPicker';\nimport { useSelector } from './hooks/useSelector';\nimport { getChatMessages, getThreadId, getUserId } from './selectors/baseSelectors';\n/**\n * @private\n */\nexport type ChatScreenProps = {\n  options?: ChatCompositeOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n  onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  styles?: ChatScreenStyles;\n  formFactor?: 'desktop' | 'mobile';\n};\n\n/**\n * @private\n */\nexport type ChatScreenStyles = {\n  messageThread?: MessageThreadStyles;\n  sendBox?: SendBoxStylesProps;\n  typingIndicator?: TypingIndicatorStylesProps;\n};\n\n/**\n * @private\n */\ninterface OverlayImageItem {\n  imageSrc: string;\n  title: string;\n  titleIcon: JSX.Element;\n  attachmentId: string;\n  messageId: string;\n  imageUrl: string;\n}\n\n/**\n * @private\n */\nexport const ChatScreen = (props: ChatScreenProps): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onRenderMessage,\n    onRenderTypingIndicator,\n    options,\n    styles,\n    formFactor\n  } = props;\n  const defaultNumberOfChatMessagesToReload = 5;\n  const [overlayImageItem, setOverlayImageItem] = useState<OverlayImageItem>();\n  const [isImageOverlayOpen, setIsImageOverlayOpen] = useState<boolean>(false);\n  const adapter = useAdapter();\n  const theme = useTheme();\n  useEffect(() => {\n    // Initial data should be always fetched by the composite(or external caller) instead of the adapter\n    const fetchData: () => Promise<void> = async () => {\n      // Fetch initial data for adapter\n      await adapter.fetchInitialData();\n      // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.\n      await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);\n    };\n    fetchData();\n  }, [adapter]);\n  const messageThreadProps = usePropsFor(MessageThread);\n  const typingIndicatorProps = usePropsFor(TypingIndicator);\n  const headerProps = useAdaptedSelector(getHeaderProps);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const overlayImageItemRef = React.useRef<OverlayImageItem | undefined>(overlayImageItem);\n  overlayImageItemRef.current = overlayImageItem;\n  const adapterChatMessages = useSelector(getChatMessages);\n  useEffect(() => {\n    if (overlayImageItemRef.current === undefined) {\n      return;\n    }\n    const message: ChatMessageWithStatus | undefined = adapterChatMessages[overlayImageItemRef.current.messageId];\n    if (message === undefined) {\n      return;\n    }\n    const resourceFetchResult = message.resourceCache?.[overlayImageItemRef.current.imageUrl];\n    if (overlayImageItemRef.current.imageSrc === '' && resourceFetchResult) {\n      const fullSizeImageSrc = getResourceSourceUrl(resourceFetchResult);\n      if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItemRef.current.imageSrc === fullSizeImageSrc) {\n        return;\n      }\n      setOverlayImageItem({\n        ...overlayImageItemRef.current,\n        imageSrc: fullSizeImageSrc\n      });\n    }\n  }, [adapterChatMessages]);\n  const getResourceSourceUrl = (result: ResourceFetchResult): string => {\n    let src = '';\n    if (result.error || !result.sourceUrl) {\n      src = 'blob://';\n    } else {\n      src = result.sourceUrl;\n    }\n    return src;\n  };\n  const onRenderAvatarCallback = useCallback((userId?: string, defaultOptions?: AvatarPersonaProps) => {\n    return <AvatarPersona userId={userId} hidePersonaDetails={true} {...defaultOptions} dataProvider={onFetchAvatarPersonaData} />;\n  }, [onFetchAvatarPersonaData]);\n  const messageThreadStyles = useMemo(() => {\n    return Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles?.messageThread);\n  }, [styles?.messageThread, theme.semanticColors.bodyBackground]);\n  const typingIndicatorStyles = useMemo(() => {\n    return Object.assign({}, styles?.typingIndicator);\n  }, [styles?.typingIndicator]);\n  const sendBoxStyles = useMemo(() => {\n    return Object.assign({}, styles?.sendBox);\n  }, [styles?.sendBox]);\n  const userIdObject = useSelector(getUserId);\n  const userId = toFlatCommunicationIdentifier(userIdObject);\n  const threadId = useSelector(getThreadId);\n  const onInlineImageClicked = useCallback((attachmentId: string, messageId: string) => {\n    const message: ChatMessageWithStatus | undefined = adapterChatMessages[messageId];\n    const inlinedImages = message?.content?.attachments?.filter(attachment => {\n      return attachment.attachmentType === 'image' && attachment.id === attachmentId;\n    });\n    const attachment = inlinedImages?.[0];\n    if (!attachment) {\n      return;\n    }\n    let imageSrc = '';\n    if (attachment.url) {\n      const resourceFetchResult = message?.resourceCache?.[attachment.url];\n      if (resourceFetchResult) {\n        imageSrc = getResourceSourceUrl(resourceFetchResult);\n      } else {\n        adapter.downloadResourceToCache({\n          threadId,\n          messageId,\n          resourceUrl: attachment.url\n        });\n      }\n    }\n    const titleIconRenderOptions = {\n      text: message?.senderDisplayName,\n      size: PersonaSize.size32,\n      showOverflowTooltip: false,\n      imageAlt: message?.senderDisplayName\n    };\n    const messageSenderId = message?.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n    const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(messageSenderId, titleIconRenderOptions);\n    const overlayImage: OverlayImageItem = {\n      title: message?.senderDisplayName || '',\n      titleIcon: titleIcon,\n      attachmentId: attachment.id,\n      imageSrc: imageSrc,\n      messageId: messageId,\n      imageUrl: attachment.url || ''\n    };\n    setIsImageOverlayOpen(true);\n    setOverlayImageItem(overlayImage);\n  }, [adapter, adapterChatMessages, onRenderAvatarCallback, userId, threadId]);\n  const onRenderInlineImage = useCallback((inlineImage: InlineImage, defaultOnRender: (inlineImage: InlineImage) => JSX.Element): JSX.Element => {\n    const message = adapterChatMessages[inlineImage.messageId];\n    const attachment = message?.content?.attachments?.find(attachment => attachment.id === inlineImage.imageAttributes.id);\n    if (attachment === undefined) {\n      return defaultOnRender(inlineImage);\n    }\n    let pointerEvents: 'none' | 'auto' = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';\n    const resourceCache = message?.resourceCache;\n    if (resourceCache && attachment.previewUrl && resourceCache[attachment.previewUrl] && resourceCache[attachment.previewUrl]?.error) {\n      pointerEvents = 'none';\n    }\n    return <span key={inlineImage.imageAttributes.id} onClick={() => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId)} tabIndex={0} role=\"button\" onKeyDown={e => {\n      if (e.key === 'Enter') {\n        onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);\n      }\n    }} style={{\n      cursor: 'pointer',\n      pointerEvents\n    }}>\n          {defaultOnRender(inlineImage)}\n        </span>;\n  }, [adapterChatMessages, onInlineImageClicked]);\n  const inlineImageOptions = useMemo(() => {\n    return {\n      onRenderInlineImage: onRenderInlineImage\n    };\n  }, [onRenderInlineImage]);\n  const onDownloadButtonClicked = useCallback((imageSrc: string): void => {\n    if (imageSrc === '') {\n      return;\n    }\n    if (isIOS()) {\n      window.open(imageSrc, '_blank');\n    } else {\n      // Create a new anchor element\n      const a = document.createElement('a');\n      // Set the href and download attributes for the anchor element\n      a.href = imageSrc;\n      a.download = overlayImageItem?.attachmentId || '';\n      a.rel = 'noopener noreferrer';\n      a.target = '_blank';\n\n      // Programmatically click the anchor element to trigger the download\n      document.body.appendChild(a);\n      a.click();\n      document.body.removeChild(a);\n    }\n  }, [overlayImageItem?.attachmentId]);\n  const onSendMessageHandler = useCallback(async function (content: string) {\n    await adapter.sendMessage(content, {});\n  }, [adapter]);\n  const onUpdateMessageHandler = useCallback(async function (messageId: string, content: string) {\n    await messageThreadProps.onUpdateMessage(messageId, content);\n  }, [messageThreadProps]);\n  return <Stack className={chatContainer} grow>\n      {options?.topic !== false && <ChatHeader {...headerProps} />}\n      <Stack className={chatArea} tokens={participantListContainerPadding} horizontal grow>\n        <Stack className={chatWrapper} grow>\n          {options?.errorBar !== false && <ErrorBar {...errorBarProps} />}\n          {}\n          <MessageThread {...messageThreadProps} onUpdateMessage={onUpdateMessageHandler} onRenderAvatar={onRenderAvatarCallback} onRenderMessage={onRenderMessage} inlineImageOptions={inlineImageOptions} numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload} styles={messageThreadStyles} />\n          <Stack className={mergeStyles(sendboxContainerStyles)}>\n            <div className={mergeStyles(typingIndicatorContainerStyles)}>\n              {onRenderTypingIndicator ? onRenderTypingIndicator(typingIndicatorProps.typingUsers) : <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />}\n            </div>\n            <Stack horizontal={formFactor === 'mobile'}>\n              {formFactor === 'mobile'}\n              <Stack grow>\n                <SendBoxPicker styles={sendBoxStyles} autoFocus={options?.autoFocus}\n              // we need to overwrite onSendMessage for SendBox because we need to clear attachment state\n              // when submit button is clicked\n              onSendMessage={onSendMessageHandler} />\n              </Stack>\n              {formFactor !== 'mobile'}\n            </Stack>\n          </Stack>\n        </Stack>\n        {}\n      </Stack>\n      {overlayImageItem && <ImageOverlay {...overlayImageItem} isOpen={isImageOverlayOpen} onDismiss={() => {\n      setOverlayImageItem(undefined);\n      setIsImageOverlayOpen(false);\n      adapter.removeResourceFromCache({\n        threadId,\n        messageId: overlayImageItem.messageId,\n        resourceUrl: overlayImageItem.imageUrl\n      });\n    }} onDownloadButtonClicked={onDownloadButtonClicked} />}\n    </Stack>;\n};"]}
+{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { isIOS } from '@fluentui/react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { PersonaSize } from '@fluentui/react';\nimport { CommunicationParticipant, ErrorBar, MessageProps, MessageRenderer, MessageThread, MessageThreadStyles, ParticipantMenuItemsCallback, SendBoxStylesProps, TypingIndicator, TypingIndicatorStylesProps, useTheme } from '@internal/react-components';\nimport { RichTextEditBoxOptions } from '@internal/react-components';\nimport { ChatMessage } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { useReducer } from 'react';\nimport { useState } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback, AvatarPersonaProps } from '../common/AvatarPersona';\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\nimport { AttachmentUploadButtonWrapper as AttachmentUploadButton } from './file-sharing';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\nimport { chatArea, chatContainer, chatWrapper, messageThreadChatCompositeStyles, sendboxContainerStyles, typingIndicatorContainerStyles } from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\nimport { ChatScreenPeoplePane } from './ChatScreenPeoplePane';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from '@internal/acs-ui-common';\nimport { AttachmentDownloadErrorBar } from './AttachmentDownloadErrorBar';\nimport { _AttachmentDownloadCards } from '@internal/react-components';\nimport { ImageOverlay } from '@internal/react-components';\nimport { InlineImage } from '@internal/react-components';\nimport { ChatMessageWithStatus, ResourceFetchResult } from '@internal/chat-stateful-client';\nimport { AttachmentOptions } from '@internal/react-components';\nimport { nanoid } from 'nanoid';\nimport { AttachmentUploadActionType, AttachmentUpload, AttachmentUploadReducer } from './file-sharing/AttachmentUpload';\nimport { MessageOptions } from '@internal/acs-ui-common';\nimport { SendBoxPicker } from '../common/SendBoxPicker';\nimport { loadRichTextSendBox, RichTextSendBoxOptions } from '../common/SendBoxPicker';\nimport { cancelInlineImageUpload, getEditBoxMessagesInlineImages, getImageFileNameFromAttributes, getSendBoxInlineImages, onInsertInlineImageForEditBox, onInsertInlineImageForSendBox, updateContentStringWithUploadedInlineImages } from './ImageUpload/ImageUploadUtils';\nimport { isMicrosoftTeamsUserIdentifier } from '@azure/communication-common';\nimport { SEND_BOX_UPLOADS_KEY_VALUE, _DEFAULT_INLINE_IMAGE_FILE_NAME } from '../common/constants';\nimport { ImageUploadReducer } from './ImageUpload/ImageUploadReducer';\nimport { useLocale } from '../localization';\nimport { useSelector } from './hooks/useSelector';\nimport { getChatMessages, getThreadId, getUserId } from './selectors/baseSelectors';\nimport { getCreatedBy, getTextOnlyChat } from './selectors/baseSelectors';\n\n/**\n * @private\n */\nexport type ChatScreenProps = {\n  options?: ChatCompositeOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n  onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  styles?: ChatScreenStyles;\n  attachmentOptions?: AttachmentOptions;\n  formFactor?: 'desktop' | 'mobile';\n};\n\n/**\n * @private\n */\nexport type ChatScreenStyles = {\n  messageThread?: MessageThreadStyles;\n  sendBox?: SendBoxStylesProps;\n  typingIndicator?: TypingIndicatorStylesProps;\n};\n\n/**\n * @private\n */\ninterface OverlayImageItem {\n  imageSrc: string;\n  title: string;\n  titleIcon: JSX.Element;\n  attachmentId: string;\n  messageId: string;\n  imageUrl: string;\n}\n\n/**\n * @private\n */\nexport const ChatScreen = (props: ChatScreenProps): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onRenderMessage,\n    onRenderTypingIndicator,\n    options,\n    styles,\n    attachmentOptions,\n    formFactor\n  } = props;\n  const defaultNumberOfChatMessagesToReload = 5;\n  const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');\n  const [overlayImageItem, setOverlayImageItem] = useState<OverlayImageItem>();\n  const [isImageOverlayOpen, setIsImageOverlayOpen] = useState<boolean>(false);\n  const [uploads, handleUploadAction] = useReducer(AttachmentUploadReducer, []);\n  const adapter = useAdapter();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings;\n  const textOnlyChat = !!useSelector(getTextOnlyChat);\n  const createdBy = useSelector(getCreatedBy);\n  const isACSChat = createdBy && !isMicrosoftTeamsUserIdentifier(createdBy);\n  const [editBoxInlineImageUploads, handleEditBoxInlineImageUploadAction] = useReducer(ImageUploadReducer, undefined);\n  const [sendBoxInlineImageUploads, handleSendBoxInlineImageUploadAction] = useReducer(ImageUploadReducer, undefined);\n  useEffect(() => {\n    // Initial data should be always fetched by the composite(or external caller) instead of the adapter\n    const fetchData: () => Promise<void> = async () => {\n      // Fetch initial data for adapter\n      await adapter.fetchInitialData();\n      // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.\n      await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);\n    };\n    fetchData();\n  }, [adapter]);\n  useEffect(() => {\n    // if rich text editor is enabled, the rich text editor component should be loaded early for good UX\n    if (options?.richTextEditor) {\n      // this line is needed to load the Rooster JS dependencies early in the lifecycle\n      // when the rich text editor is enabled\n      loadRichTextSendBox();\n    }\n  }, [options?.richTextEditor]);\n  const messageThreadProps = usePropsFor(MessageThread);\n  const typingIndicatorProps = usePropsFor(TypingIndicator);\n  const headerProps = useAdaptedSelector(getHeaderProps);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const overlayImageItemRef = React.useRef<OverlayImageItem | undefined>(overlayImageItem);\n  overlayImageItemRef.current = overlayImageItem;\n  const adapterChatMessages = useSelector(getChatMessages);\n  useEffect(() => {\n    if (overlayImageItemRef.current === undefined) {\n      return;\n    }\n    const message: ChatMessageWithStatus | undefined = adapterChatMessages[overlayImageItemRef.current.messageId];\n    if (message === undefined) {\n      return;\n    }\n    const resourceFetchResult = message.resourceCache?.[overlayImageItemRef.current.imageUrl];\n    if (overlayImageItemRef.current.imageSrc === '' && resourceFetchResult) {\n      const fullSizeImageSrc = getResourceSourceUrl(resourceFetchResult);\n      if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItemRef.current.imageSrc === fullSizeImageSrc) {\n        return;\n      }\n      setOverlayImageItem({\n        ...overlayImageItemRef.current,\n        imageSrc: fullSizeImageSrc\n      });\n    }\n  }, [adapterChatMessages]);\n  const getResourceSourceUrl = (result: ResourceFetchResult): string => {\n    let src = '';\n    if (result.error || !result.sourceUrl) {\n      src = 'blob://';\n    } else {\n      src = result.sourceUrl;\n    }\n    return src;\n  };\n  const onRenderAvatarCallback = useCallback((userId?: string, defaultOptions?: AvatarPersonaProps) => {\n    return <AvatarPersona userId={userId} hidePersonaDetails={true} {...defaultOptions} dataProvider={onFetchAvatarPersonaData} />;\n  }, [onFetchAvatarPersonaData]);\n  const messageThreadStyles = useMemo(() => {\n    return Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles?.messageThread);\n  }, [styles?.messageThread, theme.semanticColors.bodyBackground]);\n  const typingIndicatorStyles = useMemo(() => {\n    return Object.assign({}, styles?.typingIndicator);\n  }, [styles?.typingIndicator]);\n  const sendBoxStyles = useMemo(() => {\n    return Object.assign({}, styles?.sendBox);\n  }, [styles?.sendBox]);\n  const userIdObject = useSelector(getUserId);\n  const userId = toFlatCommunicationIdentifier(userIdObject);\n  const setKeyboardFocusAfterFileSelection = useCallback(() => {\n    // look up sendbox by ID for now, we will use `useRef`\n    // once attachment button is moved inside of send box component\n    // see ADO workitem #3764245\n    if (props.options?.richTextEditor) {\n      const richTextSendBox = document?.querySelector(`[id=\"richTextSendBox\"]`) as HTMLDivElement;\n      richTextSendBox?.focus();\n      return;\n    }\n    const sendBox = document?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n    // set send box on focus after file selection per A11y requirement\n    sendBox?.focus();\n  }, [props.options?.richTextEditor]);\n  const attachmentUploadButtonOnChange = useCallback((files: FileList | null): void => {\n    setKeyboardFocusAfterFileSelection();\n    if (!files) {\n      return;\n    }\n\n    // Get files, change to tasks, store locally and pass back to Contoso\n    const newUploads = Array.from(files).map((file): AttachmentUpload => {\n      const taskId = nanoid();\n      return {\n        file,\n        taskId,\n        metadata: {\n          id: taskId,\n          name: file.name,\n          progress: 0\n        },\n        notifyUploadProgressChanged: (value: number) => {\n          handleUploadAction({\n            type: AttachmentUploadActionType.Progress,\n            taskId,\n            progress: value\n          });\n        },\n        notifyUploadCompleted: (id: string, url: string) => {\n          handleUploadAction({\n            type: AttachmentUploadActionType.Completed,\n            taskId,\n            id,\n            url\n          });\n        },\n        notifyUploadFailed: (message: string) => {\n          handleUploadAction({\n            type: AttachmentUploadActionType.Failed,\n            taskId,\n            message\n          });\n          // remove the failed upload task when error banner is auto dismissed after 10 seconds\n          // so the banner won't be shown again on UI re-rendering.\n          setTimeout(() => {\n            handleUploadAction({\n              type: AttachmentUploadActionType.Remove,\n              id: taskId\n            });\n          }, 10 * 1000);\n        }\n      };\n    });\n    handleUploadAction({\n      type: AttachmentUploadActionType.Set,\n      newUploads\n    });\n    attachmentOptions?.uploadOptions?.handleAttachmentSelection(newUploads);\n  }, [attachmentOptions?.uploadOptions, setKeyboardFocusAfterFileSelection]);\n  const onRenderAttachmentDownloads = useCallback((message: ChatMessage) => message?.attachments?.length ?? 0 > 0 ? <_AttachmentDownloadCards attachments={message.attachments} message={message} actionsForAttachment={attachmentOptions?.downloadOptions?.actionsForAttachment} onActionHandlerFailed={(errorMessage: string) => {\n    setDownloadErrorMessage(errorMessage);\n  }} /> : <></>, [attachmentOptions?.downloadOptions?.actionsForAttachment]);\n  const threadId = useSelector(getThreadId);\n  const onInlineImageClicked = useCallback((attachmentId: string, messageId: string) => {\n    const message: ChatMessageWithStatus | undefined = adapterChatMessages[messageId];\n    const inlinedImages = message?.content?.attachments?.filter(attachment => {\n      return attachment.attachmentType === 'image' && attachment.id === attachmentId;\n    });\n    const attachment = inlinedImages?.[0];\n    if (!attachment) {\n      return;\n    }\n    let imageSrc = '';\n    if (attachment.url) {\n      const resourceFetchResult = message?.resourceCache?.[attachment.url];\n      if (resourceFetchResult) {\n        imageSrc = getResourceSourceUrl(resourceFetchResult);\n      } else {\n        adapter.downloadResourceToCache({\n          threadId,\n          messageId,\n          resourceUrl: attachment.url\n        });\n      }\n    }\n    const titleIconRenderOptions = {\n      text: message?.senderDisplayName,\n      size: PersonaSize.size32,\n      showOverflowTooltip: false,\n      imageAlt: message?.senderDisplayName\n    };\n    const messageSenderId = message?.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n    const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(messageSenderId, titleIconRenderOptions);\n    const overlayImage: OverlayImageItem = {\n      title: message?.senderDisplayName || '',\n      titleIcon: titleIcon,\n      attachmentId: attachment.id,\n      imageSrc: imageSrc,\n      messageId: messageId,\n      imageUrl: attachment.url || ''\n    };\n    setIsImageOverlayOpen(true);\n    setOverlayImageItem(overlayImage);\n  }, [adapter, adapterChatMessages, onRenderAvatarCallback, userId, threadId]);\n  const onRenderInlineImage = useCallback((inlineImage: InlineImage, defaultOnRender: (inlineImage: InlineImage) => JSX.Element): JSX.Element => {\n    const message = adapterChatMessages[inlineImage.messageId];\n    const attachment = message?.content?.attachments?.find(attachment => attachment.id === inlineImage.imageAttributes.id);\n    if (attachment === undefined) {\n      return defaultOnRender(inlineImage);\n    }\n    let pointerEvents: 'none' | 'auto' = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';\n    const resourceCache = message?.resourceCache;\n    if (resourceCache && attachment.previewUrl && resourceCache[attachment.previewUrl] && resourceCache[attachment.previewUrl]?.error) {\n      pointerEvents = 'none';\n    }\n    return <span key={inlineImage.imageAttributes.id} onClick={() => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId)} tabIndex={0} role=\"button\" onKeyDown={e => {\n      if (e.key === 'Enter') {\n        onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);\n      }\n    }} style={{\n      cursor: 'pointer',\n      pointerEvents\n    }}>\n          {defaultOnRender(inlineImage)}\n        </span>;\n  }, [adapterChatMessages, onInlineImageClicked]);\n  const inlineImageOptions = useMemo(() => {\n    return {\n      onRenderInlineImage: onRenderInlineImage\n    };\n  }, [onRenderInlineImage]);\n  const onDownloadButtonClicked = useCallback((imageSrc: string): void => {\n    if (imageSrc === '') {\n      return;\n    }\n    if (isIOS()) {\n      window.open(imageSrc, '_blank');\n    } else {\n      // Create a new anchor element\n      const a = document.createElement('a');\n      // Set the href and download attributes for the anchor element\n      a.href = imageSrc;\n      a.download = overlayImageItem?.attachmentId || '';\n      a.rel = 'noopener noreferrer';\n      a.target = '_blank';\n\n      // Programmatically click the anchor element to trigger the download\n      document.body.appendChild(a);\n      a.click();\n      document.body.removeChild(a);\n    }\n  }, [overlayImageItem?.attachmentId]);\n  const attachmentButton = useMemo(() => {\n    if (!attachmentOptions?.uploadOptions?.handleAttachmentSelection || textOnlyChat) {\n      return null;\n    }\n    return <AttachmentUploadButton supportedMediaTypes={attachmentOptions?.uploadOptions?.supportedMediaTypes} disableMultipleUploads={attachmentOptions?.uploadOptions?.disableMultipleUploads} onChange={attachmentUploadButtonOnChange} />;\n    return <></>;\n  }, [attachmentOptions?.uploadOptions?.handleAttachmentSelection, attachmentOptions?.uploadOptions?.supportedMediaTypes, attachmentOptions?.uploadOptions?.disableMultipleUploads, attachmentUploadButtonOnChange, textOnlyChat]);\n  const attachments = useMemo(() => {\n    return uploads?.map(v => v.metadata);\n  }, [uploads]);\n  const onSendMessageHandler = useCallback(async function (content: string, options?: MessageOptions) {\n    content = updateContentStringWithUploadedInlineImages(content, sendBoxInlineImageUploads);\n    const attachments = options?.attachments ?? [];\n    handleUploadAction({\n      type: AttachmentUploadActionType.Clear\n    });\n    handleSendBoxInlineImageUploadAction({\n      type: AttachmentUploadActionType.Clear,\n      messageId: SEND_BOX_UPLOADS_KEY_VALUE\n    });\n    await adapter.sendMessage(content, {\n      attachments: attachments,\n      type: options?.type\n    });\n    return;\n    await adapter.sendMessage(content, {\n      type: options?.type\n    });\n  }, [adapter, handleSendBoxInlineImageUploadAction, sendBoxInlineImageUploads]);\n  const onUpdateMessageHandler = useCallback(async function (messageId: string, content: string, options?: MessageOptions) {\n    content = updateContentStringWithUploadedInlineImages(content, editBoxInlineImageUploads, messageId);\n    await messageThreadProps.onUpdateMessage(messageId, content, options);\n    handleEditBoxInlineImageUploadAction({\n      type: AttachmentUploadActionType.Clear,\n      messageId\n    });\n  }, [handleEditBoxInlineImageUploadAction, editBoxInlineImageUploads, messageThreadProps]);\n  const onCancelEditMessageHandler = useCallback((messageId: string) => {\n    handleEditBoxInlineImageUploadAction({\n      type: AttachmentUploadActionType.Clear,\n      messageId\n    });\n  }, [handleEditBoxInlineImageUploadAction]);\n  const onCancelUploadHandler = useCallback((id: string) => {\n    handleUploadAction({\n      type: AttachmentUploadActionType.Remove,\n      id\n    });\n    attachmentOptions?.uploadOptions?.handleAttachmentRemoval?.(id);\n  }, [attachmentOptions?.uploadOptions]);\n  const richTextEditorOptions = useMemo(() => {\n    const onPasteCallback = !!isACSChat || textOnlyChat ? removeImageTags : undefined;\n    return options?.richTextEditor ? {\n      onPaste: onPasteCallback\n    } : undefined;\n  }, [isACSChat, textOnlyChat, options?.richTextEditor]);\n  const richTextEditBoxOptions: RichTextEditBoxOptions | undefined = useMemo(() => {\n    return options?.richTextEditor ? {\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      ...richTextEditorOptions,\n      onInsertInlineImage: (imageAttributes: Record<string, string>, messageId: string) => {\n        onInsertInlineImageForEditBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);\n      },\n      messagesInlineImagesWithProgress: getEditBoxMessagesInlineImages(editBoxInlineImageUploads),\n      onRemoveInlineImage: (imageAttributes: Record<string, string>, messageId: string) => {\n        cancelInlineImageUpload(imageAttributes, editBoxInlineImageUploads, messageId, handleEditBoxInlineImageUploadAction, adapter);\n      }\n    } : undefined;\n  }, [options?.richTextEditor, richTextEditorOptions, editBoxInlineImageUploads, adapter, localeStrings.chat]);\n  const richTextSendBoxOptions: RichTextSendBoxOptions | undefined = useMemo(() => {\n    return options?.richTextEditor ? {\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      ...richTextEditorOptions,\n      onInsertInlineImage: (imageAttributes: Record<string, string>) => {\n        onInsertInlineImageForSendBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);\n      },\n      inlineImagesWithProgress: getSendBoxInlineImages(sendBoxInlineImageUploads),\n      onRemoveInlineImage: (imageAttributes: Record<string, string>) => {\n        cancelInlineImageUpload(imageAttributes, sendBoxInlineImageUploads, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);\n      }\n    } : undefined;\n  }, [options?.richTextEditor, richTextEditorOptions, sendBoxInlineImageUploads, localeStrings.chat, adapter]);\n  return <Stack className={chatContainer} grow>\n      {options?.topic !== false && <ChatHeader {...headerProps} />}\n      <Stack className={chatArea} tokens={participantListContainerPadding} horizontal grow>\n        <Stack className={chatWrapper} grow>\n          {options?.errorBar !== false && <ErrorBar {...errorBarProps} />}\n          {<AttachmentDownloadErrorBar onDismissDownloadErrorMessage={useCallback(() => {\n          setDownloadErrorMessage('');\n        }, [])} attachmentDownloadErrorMessage={downloadErrorMessage || ''} />}\n          <MessageThread {...messageThreadProps} onUpdateMessage={onUpdateMessageHandler} onCancelEditMessage={onCancelEditMessageHandler} onRenderAvatar={onRenderAvatarCallback} onRenderMessage={onRenderMessage} onRenderAttachmentDownloads={onRenderAttachmentDownloads} inlineImageOptions={inlineImageOptions} numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload} styles={messageThreadStyles} richTextEditorOptions={richTextEditBoxOptions} />\n          <Stack className={mergeStyles(sendboxContainerStyles)}>\n            <div className={mergeStyles(typingIndicatorContainerStyles)}>\n              {onRenderTypingIndicator ? onRenderTypingIndicator(typingIndicatorProps.typingUsers) : <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />}\n            </div>\n            <Stack horizontal={formFactor === 'mobile'}>\n              {formFactor === 'mobile' && (<Stack verticalAlign=\"center\">{attachmentButton}</Stack>)}\n              <Stack grow>\n                <SendBoxPicker styles={sendBoxStyles} autoFocus={options?.autoFocus} richTextEditorOptions={richTextSendBoxOptions} attachments={attachments} onCancelAttachmentUpload={onCancelUploadHandler}\n              // we need to overwrite onSendMessage for SendBox because we need to clear attachment state\n              // when submit button is clicked\n              onSendMessage={onSendMessageHandler} />\n              </Stack>\n              {formFactor !== 'mobile' && attachmentButton}\n            </Stack>\n          </Stack>\n        </Stack>\n        {options?.participantPane === true && <ChatScreenPeoplePane onFetchAvatarPersonaData={onFetchAvatarPersonaData} onFetchParticipantMenuItems={props.onFetchParticipantMenuItems} isMobile={formFactor === 'mobile'} />}\n      </Stack>\n      {overlayImageItem && <ImageOverlay {...overlayImageItem} isOpen={isImageOverlayOpen} onDismiss={() => {\n      setOverlayImageItem(undefined);\n      setIsImageOverlayOpen(false);\n      adapter.removeResourceFromCache({\n        threadId,\n        messageId: overlayImageItem.messageId,\n        resourceUrl: overlayImageItem.imageUrl\n      });\n    }} onDownloadButtonClicked={onDownloadButtonClicked} />}\n    </Stack>;\n};"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreenPeoplePane.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ParticipantMenuItemsCallback } from "../../../../react-components/src";
+import { AvatarPersonaDataCallback } from '..';
+/**
+ * Props for the chat screen people pane
+ * @private
+ */
+type ChatScreenPeoplePaneProps = {
+    onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
+    onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
+    isMobile?: boolean;
+};
+/**
+ * @private
+ */
+export declare const ChatScreenPeoplePane: (props: ChatScreenPeoplePaneProps) => JSX.Element;
+export {};
+//# sourceMappingURL=ChatScreenPeoplePane.d.ts.map

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

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { ParticipantList } from "../../../../react-components/src";
+import React from 'react';
+import { ParticipantContainer } from '../common/ParticipantContainer';
+import { useLocale } from '../localization';
+import { usePropsFor } from './hooks/usePropsFor';
+/**
+ * @private
+ */
+export const ChatScreenPeoplePane = (props) => {
+    const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, isMobile } = props;
+    const locale = useLocale();
+    const chatListHeader = locale.strings.chat.chatListHeader;
+    const participantListProps = usePropsFor(ParticipantList);
+    return React.createElement(ParticipantContainer, { participantListProps: participantListProps, title: chatListHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, isMobile: isMobile });
+};
+//# sourceMappingURL=ChatScreenPeoplePane.js.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreenPeoplePane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatScreenPeoplePane.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/ChatScreenPeoplePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAgC,yCAAmC;AAC3F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAYlD;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EACJ,wBAAwB,EACxB,2BAA2B,EAC3B,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC;IAC1D,MAAM,oBAAoB,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC1D,OAAO,oBAAC,oBAAoB,IAAC,oBAAoB,EAAE,oBAAoB,EAAE,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACvO,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ParticipantList, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React from 'react';\nimport { AvatarPersonaDataCallback } from '..';\nimport { ParticipantContainer } from '../common/ParticipantContainer';\nimport { useLocale } from '../localization';\nimport { usePropsFor } from './hooks/usePropsFor';\n\n/**\n * Props for the chat screen people pane\n * @private\n */\ntype ChatScreenPeoplePaneProps = {\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ChatScreenPeoplePane = (props: ChatScreenPeoplePaneProps): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    isMobile\n  } = props;\n  const locale = useLocale();\n  const chatListHeader = locale.strings.chat.chatListHeader;\n  const participantListProps = usePropsFor(ParticipantList);\n  return <ParticipantContainer participantListProps={participantListProps} title={chatListHeader} onFetchAvatarPersonaData={onFetchAvatarPersonaData} onFetchParticipantMenuItems={onFetchParticipantMenuItems} isMobile={isMobile} />;\n};"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadReducer.d.ts

@@ -0,0 +1,49 @@
+import { Action, AttachmentUpload, AttachmentUploadActionType, ProgressAction, CompleteAction, FailedAction, RemoveAction, ClearAction } from '../file-sharing/AttachmentUpload';
+/**
+ * @private
+ */
+export interface ImageAction {
+    messageId: string;
+}
+/**
+ * @private
+ */
+interface ImageSetAction extends Action, ImageAction {
+    type: AttachmentUploadActionType.Set;
+    newUploads: AttachmentUpload[];
+}
+/**
+ * @private
+ */
+interface ImageProgressAction extends ProgressAction, ImageAction {
+}
+/**
+ * @private
+ */
+interface ImageCompleteAction extends CompleteAction, ImageAction {
+}
+/**
+ * @private
+ */
+interface ImageFailedAction extends FailedAction, ImageAction {
+}
+/**
+ * @private
+ */
+interface ImageRemoveAction extends RemoveAction, ImageAction {
+}
+/**
+ * @private
+ */
+interface ImageClearAction extends ClearAction, ImageAction {
+}
+/**
+ * @private
+ */
+export type ImageActions = ImageSetAction | ImageProgressAction | ImageCompleteAction | ImageFailedAction | ImageRemoveAction | ImageClearAction;
+/**
+ * @internal
+ */
+export declare const ImageUploadReducer: (state: Record<string, AttachmentUpload[]> | undefined, action: ImageActions) => Record<string, AttachmentUpload[]> | undefined;
+export {};
+//# sourceMappingURL=ImageUploadReducer.d.ts.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadReducer.js

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { AttachmentUploadActionType } from '../file-sharing/AttachmentUpload';
+/**
+ * @internal
+ */
+export const ImageUploadReducer = (state, action) => {
+    const messageId = action.messageId;
+    const messageState = state && state[messageId];
+    switch (action.type) {
+        case AttachmentUploadActionType.Set:
+            if (!messageState || messageState.length === 0) {
+                return Object.assign(Object.assign({}, state), { [messageId]: action.newUploads });
+            }
+            return Object.assign(Object.assign({}, state), { [messageId]: messageState.filter(v => !v.metadata.error).concat(action.newUploads) });
+        case AttachmentUploadActionType.Completed:
+            if (!messageState) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { [messageId]: messageState.map(v => v.taskId === action.taskId ? Object.assign(Object.assign({}, v), { metadata: Object.assign(Object.assign({}, v.metadata), { id: action.id, url: action.url, progress: 1 }) }) : v) });
+        case AttachmentUploadActionType.Failed:
+            if (!messageState) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { [messageId]: messageState.map(v => v.taskId === action.taskId ? Object.assign(Object.assign({}, v), { metadata: Object.assign(Object.assign({}, v.metadata), { error: {
+                            message: action.message
+                        } }) }) : v) });
+        case AttachmentUploadActionType.Remove:
+            if (!messageState) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { [messageId]: messageState.filter(v => !v.metadata.error).filter(v => v.metadata.id !== action.id) });
+        case AttachmentUploadActionType.Progress:
+            if (!messageState) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { [messageId]: messageState.map(v => v.taskId === action.taskId ? Object.assign(Object.assign({}, v), { metadata: Object.assign(Object.assign({}, v.metadata), { progress: action.progress }) }) : v) });
+        case AttachmentUploadActionType.Clear:
+            return Object.assign(Object.assign({}, state), { [messageId]: [] });
+        default:
+            return state;
+    }
+};
+//# sourceMappingURL=ImageUploadReducer.js.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadReducer.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadReducer.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAA4B,0BAA0B,EAA2E,MAAM,kCAAkC,CAAC;AAsCjL;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAqD,EAAE,MAAoB,EAAkD,EAAE;IAChK,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;IACnC,MAAM,YAAY,GAAG,KAAK,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;QACpB,KAAK,0BAA0B,CAAC,GAAG;YACjC,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC/C,uCACK,KAAK,KACR,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,UAAU,IAC9B;YACJ,CAAC;YACD,uCACK,KAAK,KACR,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,IAClF;QACJ,KAAK,0BAA0B,CAAC,SAAS;YACvC,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,OAAO,KAAK,CAAC;YACf,CAAC;YACD,uCACK,KAAK,KACR,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,iCAC1D,CAAC,KACJ,QAAQ,kCACH,CAAC,CAAC,QAAQ,KACb,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,QAAQ,EAAE,CAAC,OAEb,CAAC,CAAC,CAAC,CAAC,IACN;QACJ,KAAK,0BAA0B,CAAC,MAAM;YACpC,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,OAAO,KAAK,CAAC;YACf,CAAC;YACD,uCACK,KAAK,KACR,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,iCAC1D,CAAC,KACJ,QAAQ,kCACH,CAAC,CAAC,QAAQ,KACb,KAAK,EAAE;4BACL,OAAO,EAAE,MAAM,CAAC,OAAO;yBACxB,OAEH,CAAC,CAAC,CAAC,CAAC,IACN;QACJ,KAAK,0BAA0B,CAAC,MAAM;YACpC,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,OAAO,KAAK,CAAC;YACf,CAAC;YACD,uCACK,KAAK,KACR,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,IACjG;QACJ,KAAK,0BAA0B,CAAC,QAAQ;YACtC,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,OAAO,KAAK,CAAC;YACf,CAAC;YACD,uCACK,KAAK,KACR,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,iCAC1D,CAAC,KACJ,QAAQ,kCACH,CAAC,CAAC,QAAQ,KACb,QAAQ,EAAE,MAAM,CAAC,QAAQ,OAE3B,CAAC,CAAC,CAAC,CAAC,IACN;QACJ,KAAK,0BAA0B,CAAC,KAAK;YACnC,uCACK,KAAK,KACR,CAAC,SAAS,CAAC,EAAE,EAAE,IACf;QACJ;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Action, AttachmentUpload, AttachmentUploadActionType, ProgressAction, CompleteAction, FailedAction, RemoveAction, ClearAction } from '../file-sharing/AttachmentUpload';\n/**\n * @private\n */\nexport interface ImageAction {\n  messageId: string;\n}\n/**\n * @private\n */\ninterface ImageSetAction extends Action, ImageAction {\n  type: AttachmentUploadActionType.Set;\n  newUploads: AttachmentUpload[];\n}\n/**\n * @private\n */\ninterface ImageProgressAction extends ProgressAction, ImageAction {}\n/**\n * @private\n */\ninterface ImageCompleteAction extends CompleteAction, ImageAction {}\n/**\n * @private\n */\ninterface ImageFailedAction extends FailedAction, ImageAction {}\n/**\n * @private\n */\ninterface ImageRemoveAction extends RemoveAction, ImageAction {}\n/**\n * @private\n */\ninterface ImageClearAction extends ClearAction, ImageAction {}\n/**\n * @private\n */\nexport type ImageActions = ImageSetAction | ImageProgressAction | ImageCompleteAction | ImageFailedAction | ImageRemoveAction | ImageClearAction;\n/**\n * @internal\n */\nexport const ImageUploadReducer = (state: Record<string, AttachmentUpload[]> | undefined, action: ImageActions): Record<string, AttachmentUpload[]> | undefined => {\n  const messageId = action.messageId;\n  const messageState = state && state[messageId];\n  switch (action.type) {\n    case AttachmentUploadActionType.Set:\n      if (!messageState || messageState.length === 0) {\n        return {\n          ...state,\n          [messageId]: action.newUploads\n        };\n      }\n      return {\n        ...state,\n        [messageId]: messageState.filter(v => !v.metadata.error).concat(action.newUploads)\n      };\n    case AttachmentUploadActionType.Completed:\n      if (!messageState) {\n        return state;\n      }\n      return {\n        ...state,\n        [messageId]: messageState.map(v => v.taskId === action.taskId ? {\n          ...v,\n          metadata: {\n            ...v.metadata,\n            id: action.id,\n            url: action.url,\n            progress: 1\n          }\n        } : v)\n      };\n    case AttachmentUploadActionType.Failed:\n      if (!messageState) {\n        return state;\n      }\n      return {\n        ...state,\n        [messageId]: messageState.map(v => v.taskId === action.taskId ? {\n          ...v,\n          metadata: {\n            ...v.metadata,\n            error: {\n              message: action.message\n            }\n          }\n        } : v)\n      };\n    case AttachmentUploadActionType.Remove:\n      if (!messageState) {\n        return state;\n      }\n      return {\n        ...state,\n        [messageId]: messageState.filter(v => !v.metadata.error).filter(v => v.metadata.id !== action.id)\n      };\n    case AttachmentUploadActionType.Progress:\n      if (!messageState) {\n        return state;\n      }\n      return {\n        ...state,\n        [messageId]: messageState.map(v => v.taskId === action.taskId ? {\n          ...v,\n          metadata: {\n            ...v.metadata,\n            progress: action.progress\n          }\n        } : v)\n      };\n    case AttachmentUploadActionType.Clear:\n      return {\n        ...state,\n        [messageId]: []\n      };\n    default:\n      return state;\n  }\n};"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ImageUpload/ImageUploadUtils.d.ts

@@ -0,0 +1,39 @@
+import { AttachmentMetadataInProgress } from "../../../../../acs-ui-common/src";
+import { AttachmentUpload } from '../file-sharing/AttachmentUpload';
+import { ChatAdapter } from '../adapter/ChatAdapter';
+import { Dispatch } from 'react';
+import { ImageActions } from './ImageUploadReducer';
+import { ChatCompositeStrings } from '../Strings';
+/**
+ * @private
+ */
+export declare const getInlineImageData: (image: string) => Promise<Blob | undefined>;
+/**
+ * @internal
+ */
+export declare const getEditBoxMessagesInlineImages: (editBoxInlineImageUploads: Record<string, AttachmentUpload[]> | undefined) => Record<string, AttachmentMetadataInProgress[]> | undefined;
+/**
+ * @internal
+ */
+export declare const getSendBoxInlineImages: (sendBoxInlineImageUploads: Record<string, AttachmentUpload[]> | undefined) => AttachmentMetadataInProgress[] | undefined;
+/**
+ * @internal
+ */
+export declare const onInsertInlineImageForEditBox: (imageAttributes: Record<string, string>, fileName: string, messageId: string, adapter: ChatAdapter, handleEditBoxInlineImageUploadAction: Dispatch<ImageActions>, chatCompositeStrings: ChatCompositeStrings) => Promise<void>;
+/**
+ * @internal
+ */
+export declare const onInsertInlineImageForSendBox: (imageAttributes: Record<string, string>, fileName: string, adapter: ChatAdapter, handleSendBoxInlineImageUploadAction: Dispatch<ImageActions>, chatCompositeStrings: ChatCompositeStrings) => Promise<void>;
+/**
+ * @internal
+ */
+export declare const cancelInlineImageUpload: (imageAttributes: Record<string, string>, imageUploads: Record<string, AttachmentUpload[]> | undefined, messageId: string, inlineImageUploadActionHandler: Dispatch<ImageActions>, adapter: ChatAdapter) => void;
+/**
+ * @internal
+ */
+export declare const updateContentStringWithUploadedInlineImages: (content: string, imageUploads: Record<string, AttachmentUpload[]> | undefined, messageId?: string) => string;
+/**
+ * @internal
+ */
+export declare const getImageFileNameFromAttributes: (imageAttributes: Record<string, string>) => string;
+//# sourceMappingURL=ImageUploadUtils.d.ts.map