@azure/communication-react 1.13.0 → 1.14.0-alpha-202402290012

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

@@ -1,3 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,11 +9,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
+/* @conditional-compile-remove(image-overlay) */
+import { isIOS } from '@fluentui/react';
 import { mergeStyles, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(image-overlay) */
+import { PersonaSize } from '@fluentui/react';
 import { ErrorBar, MessageThread, SendBox, TypingIndicator, useTheme } from "../../../../react-components/src";
 import React, { useCallback, useEffect, useMemo } from 'react';
+/* @conditional-compile-remove(image-overlay) */
+import { useState } from 'react';
 import { AvatarPersona } from '../common/AvatarPersona';
 import { useAdapter } from './adapter/ChatAdapterProvider';
 import { ChatHeader, getHeaderProps } from './ChatHeader';
@@ -20,13 +26,31 @@ 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';
+/* @conditional-compile-remove(chat-composite-participant-pane) */
+import { ChatScreenPeoplePane } from './ChatScreenPeoplePane';
 import { toFlatCommunicationIdentifier } from "../../../../acs-ui-common/src";
+/* @conditional-compile-remove(file-sharing) */
+import { fileUploadsSelector } from './selectors/fileUploadsSelector';
+/* @conditional-compile-remove(file-sharing) */
+import { useSelector } from './hooks/useSelector';
+/* @conditional-compile-remove(file-sharing) */
+import { FileDownloadErrorBar } from './FileDownloadErrorBar';
+/* @conditional-compile-remove(file-sharing) */
+import { _FileDownloadCards } from "../../../../react-components/src";
+/* @conditional-compile-remove(image-overlay) */
+import { ImageOverlay } from "../../../../react-components/src";
 /**
  * @private
  */
 export const ChatScreen = (props) => {
     const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, fileSharing, formFactor } = props;
     const defaultNumberOfChatMessagesToReload = 5;
+    /* @conditional-compile-remove(file-sharing) */
+    const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
+    /* @conditional-compile-remove(image-overlay) */
+    const [overlayImageItem, setOverlayImageItem] = useState();
+    /* @conditional-compile-remove(image-overlay) */
+    const [isImageOverlayOpen, setIsImageOverlayOpen] = useState(false);
     const adapter = useAdapter();
     const theme = useTheme();
     useEffect(() => {
@@ -44,8 +68,36 @@ export const ChatScreen = (props) => {
     const typingIndicatorProps = usePropsFor(TypingIndicator);
     const headerProps = useAdaptedSelector(getHeaderProps);
     const errorBarProps = usePropsFor(ErrorBar);
+    /* @conditional-compile-remove(image-overlay) */
+    useEffect(() => {
+        var _a;
+        if (overlayImageItem === undefined) {
+            return;
+        }
+        const messages = messageThreadProps.messages.filter((message) => {
+            return message.messageId === (overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.messageId);
+        });
+        if (messages.length <= 0 || messages[0].messageType !== 'chat') {
+            return;
+        }
+        const message = messages[0];
+        if (overlayImageItem.imageSrc === '' && message.inlineImages && ((_a = message.inlineImages) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const inlineImages = message.inlineImages.filter((attachment) => {
+                return attachment.id === (overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId);
+            });
+            if (inlineImages.length <= 0 ||
+                inlineImages[0].fullSizeImageSrc === undefined ||
+                inlineImages[0].fullSizeImageSrc === '' ||
+                overlayImageItem.imageSrc === inlineImages[0].fullSizeImageSrc) {
+                return;
+            }
+            setOverlayImageItem(Object.assign(Object.assign({}, overlayImageItem), { imageSrc: inlineImages[0].fullSizeImageSrc }));
+        }
+        // Disable eslint because we are using the overlayImageItem in this effect but don't want to have it as a dependency, as it will cause an infinite loop.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [messageThreadProps.messages]);
     const 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);
@@ -61,26 +113,126 @@ export const ChatScreen = (props) => {
         if (!files) {
             return;
         }
+        /* @conditional-compile-remove(file-sharing) */
+        const fileUploads = adapter.registerActiveFileUploads(Array.from(files));
+        /* @conditional-compile-remove(file-sharing) */
+        fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
     }, [adapter, fileSharing, userId]);
+    /* @conditional-compile-remove(file-sharing) */
+    const onRenderFileDownloads = useCallback((userId, message) => (React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.files || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
+            setDownloadErrorMessage(errorMessage);
+        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
+    /* @conditional-compile-remove(image-overlay) */
+    const onInlineImageClicked = useCallback((attachmentId, messageId) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const messages = (_a = messageThreadProps.messages) === null || _a === void 0 ? void 0 : _a.filter((message) => {
+            return message.messageId === messageId;
+        });
+        if (!messages || messages.length <= 0) {
+            return;
+        }
+        const chatMessage = messages[0];
+        const inlinedImages = (_b = chatMessage.inlineImages) === null || _b === void 0 ? void 0 : _b.filter((attachment) => {
+            return attachment.id === attachmentId;
+        });
+        if (!inlinedImages || inlinedImages.length <= 0) {
+            return;
+        }
+        const attachment = inlinedImages[0];
+        const titleIconRenderOptions = {
+            text: chatMessage.senderDisplayName,
+            size: PersonaSize.size32,
+            showOverflowTooltip: false,
+            imageAlt: chatMessage.senderDisplayName
+        };
+        const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(chatMessage.senderId, titleIconRenderOptions);
+        const overlayImage = {
+            title: chatMessage.senderDisplayName || '',
+            titleIcon: titleIcon,
+            attachmentId: attachment.id,
+            imageSrc: attachment.fullSizeImageSrc || '',
+            messageId: messageId
+        };
+        setIsImageOverlayOpen(true);
+        setOverlayImageItem(overlayImage);
+        if (attachment.attachmentType === 'inlineImage' && attachment.url) {
+            adapter.downloadResourceToCache({
+                threadId: adapter.getState().thread.threadId,
+                messageId: messageId,
+                resourceUrl: attachment.url
+            });
+        }
+    }), [adapter, messageThreadProps, onRenderAvatarCallback]);
+    /* @conditional-compile-remove(image-overlay) */
+    const inlineImageOptions = {
+        onRenderInlineImage: (inlineImage, defaultOnRender) => {
+            return (React.createElement("span", { key: inlineImage.imgAttrs.id, onClick: () => onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId);
+                    }
+                }, style: { cursor: 'pointer' } }, defaultOnRender(inlineImage)));
+        }
+    };
+    /* @conditional-compile-remove(image-overlay) */
+    const onDownloadButtonClicked = useCallback((imageSrc) => {
+        if (imageSrc === '') {
+            return;
+        }
+        if (isIOS()) {
+            window.open(imageSrc, '_blank');
+        }
+        else {
+            // Create a new anchor element
+            const a = document.createElement('a');
+            // Set the href and download attributes for the anchor element
+            a.href = imageSrc;
+            a.download = (overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId) || '';
+            a.rel = 'noopener noreferrer';
+            a.target = '_blank';
+            // Programmatically click the anchor element to trigger the download
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        }
+    }, [overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId]);
     const AttachFileButton = useCallback(() => {
         if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
             return null;
         }
-        return React.createElement(FileUploadButton, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange });
+        return (React.createElement(FileUploadButton, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange }));
     }, [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler, fileUploadButtonOnChange]);
-    return React.createElement(Stack, { className: chatContainer, grow: true },
+    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, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                /* @conditional-compile-remove(file-sharing) */
+                React.createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: useCallback(() => {
+                        setDownloadErrorMessage('');
+                    }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
+                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
+                    /* @conditional-compile-remove(file-sharing) */
+                    onRenderFileDownloads: onRenderFileDownloads, 
+                    /* @conditional-compile-remove(image-overlay) */
+                    inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 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' && React.createElement(Stack, { verticalAlign: "center" },
-                            React.createElement(AttachFileButton, null)),
+                        formFactor === 'mobile' && (React.createElement(Stack, { verticalAlign: "center" },
+                            React.createElement(AttachFileButton, null))),
                         React.createElement(Stack, { grow: true },
-                            React.createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles }))),
-                        formFactor !== 'mobile' && React.createElement(AttachFileButton, null))))));
+                            React.createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
+                                /* @conditional-compile-remove(file-sharing) */
+                                activeFileUploads: useSelector(fileUploadsSelector).files, 
+                                /* @conditional-compile-remove(file-sharing) */
+                                onCancelFileUpload: adapter.cancelFileUpload }))),
+                        formFactor !== 'mobile' && React.createElement(AttachFileButton, null)))),
+            /* @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' }))),
+        /* @conditional-compile-remove(image-overlay) */
+        overlayImageItem && (React.createElement(ImageOverlay, Object.assign({}, overlayImageItem, { isOpen: isImageOverlayOpen, onDismiss: () => {
+                setOverlayImageItem(undefined);
+                setIsImageOverlayOpen(false);
+            }, onDownloadButtonClicked: onDownloadButtonClicked })))));
 };
 //# sourceMappingURL=ChatScreen.js.map

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.\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { CommunicationParticipant, ErrorBar, MessageProps, MessageRenderer, MessageThread, MessageThreadStyles, ParticipantMenuItemsCallback, SendBox, SendBoxStylesProps, TypingIndicator, TypingIndicatorStylesProps, useTheme } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback, AvatarPersonaProps } from '../common/AvatarPersona';\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\nimport { FileDownloadHandler } from '@internal/react-components';\nimport { FileUploadButtonWrapper as FileUploadButton, FileUploadHandler } 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 { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\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  hasFocusOnMount?: 'sendBoxTextField';\n  fileSharing?: FileSharingOptions;\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 * Properties for configuring the File Sharing feature.\n * @beta\n */\nexport interface FileSharingOptions {\n  /**\n   * A string containing the comma separated list of accepted file types.\n   * Similar to the `accept` attribute of the `<input type=\"file\" />` element.\n   * Accepts any type of file if not specified.\n   * @beta\n   */\n  accept?: string;\n  /**\n   * Allows multiple files to be selected if set to `true`.\n   * Similar to the `multiple` attribute of the `<input type=\"file\" />` element.\n   * @defaultValue false\n   * @beta\n   */\n  multiple?: boolean;\n  /**\n   * A function of type {@link FileUploadHandler} for handling file uploads.\n   * @beta\n   */\n  uploadHandler: FileUploadHandler;\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\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    fileSharing,\n    formFactor\n  } = props;\n  const defaultNumberOfChatMessagesToReload = 5;\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 sendBoxProps = usePropsFor(SendBox);\n  const typingIndicatorProps = usePropsFor(TypingIndicator);\n  const headerProps = useAdaptedSelector(getHeaderProps);\n  const errorBarProps = usePropsFor(ErrorBar);\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 userId = toFlatCommunicationIdentifier(adapter.getState().userId);\n  const fileUploadButtonOnChange = useCallback((files: FileList | null): void => {\n    if (!files) {\n      return;\n    }\n  }, [adapter, fileSharing, userId]);\n  const AttachFileButton = useCallback(() => {\n    if (!fileSharing?.uploadHandler) {\n      return null;\n    }\n    return <FileUploadButton accept={fileSharing?.accept} multiple={fileSharing?.multiple} onChange={fileUploadButtonOnChange} />;\n  }, [fileSharing?.accept, fileSharing?.multiple, fileSharing?.uploadHandler, fileUploadButtonOnChange]);\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} onRenderAvatar={onRenderAvatarCallback} onRenderMessage={onRenderMessage} 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' && <Stack verticalAlign=\"center\">\n                  <AttachFileButton />\n                </Stack>}\n              <Stack grow>\n                <SendBox {...sendBoxProps} autoFocus={options?.autoFocus} styles={sendBoxStyles} />\n              </Stack>\n              {formFactor !== 'mobile' && <AttachFileButton />}\n            </Stack>\n          </Stack>\n        </Stack>\n        {}\n      </Stack>\n      {}\n    </Stack>;\n};"]}
+{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../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\n/* @conditional-compile-remove(image-overlay) */\nimport { isIOS } from '@fluentui/react';\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport { PersonaSize } from '@fluentui/react';\nimport {\n  CommunicationParticipant,\n  ErrorBar,\n  MessageProps,\n  MessageRenderer,\n  MessageThread,\n  MessageThreadStyles,\n  ParticipantMenuItemsCallback,\n  SendBox,\n  SendBoxStylesProps,\n  TypingIndicator,\n  TypingIndicatorStylesProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(image-overlay) */ /* @conditional-compile-remove(file-sharing) */\nimport { ChatMessage } from '@internal/react-components';\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\n/* @conditional-compile-remove(image-overlay) */\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 { FileDownloadHandler } from '@internal/react-components';\nimport { FileUploadButtonWrapper as FileUploadButton, FileUploadHandler } from './file-sharing';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\n\nimport {\n  chatArea,\n  chatContainer,\n  chatWrapper,\n  messageThreadChatCompositeStyles,\n  sendboxContainerStyles,\n  typingIndicatorContainerStyles\n} from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\n/* @conditional-compile-remove(chat-composite-participant-pane) */\nimport { ChatScreenPeoplePane } from './ChatScreenPeoplePane';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadsSelector } from './selectors/fileUploadsSelector';\n/* @conditional-compile-remove(file-sharing) */\nimport { useSelector } from './hooks/useSelector';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadErrorBar } from './FileDownloadErrorBar';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileDownloadCards } from '@internal/react-components';\n/* @conditional-compile-remove(image-overlay) */\nimport { ImageOverlay } from '@internal/react-components';\n/* @conditional-compile-remove(image-overlay) */\nimport { InlineImage } from '@internal/react-components';\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  hasFocusOnMount?: 'sendBoxTextField';\n  fileSharing?: FileSharingOptions;\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 * Properties for configuring the File Sharing feature.\n * @beta\n */\nexport interface FileSharingOptions {\n  /**\n   * A string containing the comma separated list of accepted file types.\n   * Similar to the `accept` attribute of the `<input type=\"file\" />` element.\n   * Accepts any type of file if not specified.\n   * @beta\n   */\n  accept?: string;\n  /**\n   * Allows multiple files to be selected if set to `true`.\n   * Similar to the `multiple` attribute of the `<input type=\"file\" />` element.\n   * @defaultValue false\n   * @beta\n   */\n  multiple?: boolean;\n  /**\n   * A function of type {@link FileUploadHandler} for handling file uploads.\n   * @beta\n   */\n  uploadHandler: FileUploadHandler;\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\n}\n\n/**\n * @private\n */\n/* @conditional-compile-remove(image-overlay) */\ninterface OverlayImageItem {\n  imageSrc: string;\n  title: string;\n  titleIcon: JSX.Element;\n  attachmentId: string;\n  messageId: 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    fileSharing,\n    formFactor\n  } = props;\n\n  const defaultNumberOfChatMessagesToReload = 5;\n  /* @conditional-compile-remove(file-sharing) */\n  const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');\n  /* @conditional-compile-remove(image-overlay) */\n  const [overlayImageItem, setOverlayImageItem] = useState<OverlayImageItem>();\n  /* @conditional-compile-remove(image-overlay) */\n  const [isImageOverlayOpen, setIsImageOverlayOpen] = useState<boolean>(false);\n\n  const adapter = useAdapter();\n  const theme = useTheme();\n\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\n  const messageThreadProps = usePropsFor(MessageThread);\n  const sendBoxProps = usePropsFor(SendBox);\n  const typingIndicatorProps = usePropsFor(TypingIndicator);\n  const headerProps = useAdaptedSelector(getHeaderProps);\n  const errorBarProps = usePropsFor(ErrorBar);\n\n  /* @conditional-compile-remove(image-overlay) */\n  useEffect(() => {\n    if (overlayImageItem === undefined) {\n      return;\n    }\n    const messages = messageThreadProps.messages.filter((message) => {\n      return message.messageId === overlayImageItem?.messageId;\n    });\n    if (messages.length <= 0 || messages[0].messageType !== 'chat') {\n      return;\n    }\n    const message = messages[0] as ChatMessage;\n    if (overlayImageItem.imageSrc === '' && message.inlineImages && message.inlineImages?.length > 0) {\n      const inlineImages = message.inlineImages.filter((attachment) => {\n        return attachment.id === overlayImageItem?.attachmentId;\n      });\n      if (\n        inlineImages.length <= 0 ||\n        inlineImages[0].fullSizeImageSrc === undefined ||\n        inlineImages[0].fullSizeImageSrc === '' ||\n        overlayImageItem.imageSrc === inlineImages[0].fullSizeImageSrc\n      ) {\n        return;\n      }\n      setOverlayImageItem({\n        ...overlayImageItem,\n        imageSrc: inlineImages[0].fullSizeImageSrc\n      });\n    }\n    // Disable eslint because we are using the overlayImageItem in this effect but don't want to have it as a dependency, as it will cause an infinite loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messageThreadProps.messages]);\n\n  const onRenderAvatarCallback = useCallback(\n    (userId?: string, defaultOptions?: AvatarPersonaProps) => {\n      return (\n        <AvatarPersona\n          userId={userId}\n          hidePersonaDetails={true}\n          {...defaultOptions}\n          dataProvider={onFetchAvatarPersonaData}\n        />\n      );\n    },\n    [onFetchAvatarPersonaData]\n  );\n\n  const messageThreadStyles = useMemo(() => {\n    return Object.assign(\n      {},\n      messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground),\n      styles?.messageThread\n    );\n  }, [styles?.messageThread, theme.semanticColors.bodyBackground]);\n\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 userId = toFlatCommunicationIdentifier(adapter.getState().userId);\n\n  const fileUploadButtonOnChange = useCallback(\n    (files: FileList | null): void => {\n      if (!files) {\n        return;\n      }\n\n      /* @conditional-compile-remove(file-sharing) */\n      const fileUploads = adapter.registerActiveFileUploads(Array.from(files));\n      /* @conditional-compile-remove(file-sharing) */\n      fileSharing?.uploadHandler(userId, fileUploads);\n    },\n    [adapter, fileSharing, userId]\n  );\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileDownloads = useCallback(\n    (userId: string, message: ChatMessage) => (\n      <_FileDownloadCards\n        userId={userId}\n        fileMetadata={message.files || []}\n        downloadHandler={fileSharing?.downloadHandler}\n        onDownloadErrorMessage={(errorMessage: string) => {\n          setDownloadErrorMessage(errorMessage);\n        }}\n      />\n    ),\n    [fileSharing?.downloadHandler]\n  );\n\n  /* @conditional-compile-remove(image-overlay) */\n  const onInlineImageClicked = useCallback(\n    async (attachmentId: string, messageId: string): Promise<void> => {\n      const messages = messageThreadProps.messages?.filter((message) => {\n        return message.messageId === messageId;\n      });\n      if (!messages || messages.length <= 0) {\n        return;\n      }\n      const chatMessage = messages[0] as ChatMessage;\n\n      const inlinedImages = chatMessage.inlineImages?.filter((attachment) => {\n        return attachment.id === attachmentId;\n      });\n\n      if (!inlinedImages || inlinedImages.length <= 0) {\n        return;\n      }\n\n      const attachment = inlinedImages[0];\n\n      const titleIconRenderOptions = {\n        text: chatMessage.senderDisplayName,\n        size: PersonaSize.size32,\n        showOverflowTooltip: false,\n        imageAlt: chatMessage.senderDisplayName\n      };\n      const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(chatMessage.senderId, titleIconRenderOptions);\n      const overlayImage: OverlayImageItem = {\n        title: chatMessage.senderDisplayName || '',\n        titleIcon: titleIcon,\n        attachmentId: attachment.id,\n        imageSrc: attachment.fullSizeImageSrc || '',\n        messageId: messageId\n      };\n      setIsImageOverlayOpen(true);\n      setOverlayImageItem(overlayImage);\n\n      if (attachment.attachmentType === 'inlineImage' && attachment.url) {\n        adapter.downloadResourceToCache({\n          threadId: adapter.getState().thread.threadId,\n          messageId: messageId,\n          resourceUrl: attachment.url\n        });\n      }\n    },\n    [adapter, messageThreadProps, onRenderAvatarCallback]\n  );\n\n  /* @conditional-compile-remove(image-overlay) */\n  const inlineImageOptions = {\n    onRenderInlineImage: (\n      inlineImage: InlineImage,\n      defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n    ): JSX.Element => {\n      return (\n        <span\n          key={inlineImage.imgAttrs.id}\n          onClick={() => onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId)}\n          tabIndex={0}\n          role=\"button\"\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId);\n            }\n          }}\n          style={{ cursor: 'pointer' }}\n        >\n          {defaultOnRender(inlineImage)}\n        </span>\n      );\n    }\n  };\n\n  /* @conditional-compile-remove(image-overlay) */\n  const onDownloadButtonClicked = useCallback(\n    (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    },\n    [overlayImageItem?.attachmentId]\n  );\n\n  const AttachFileButton = useCallback(() => {\n    if (!fileSharing?.uploadHandler) {\n      return null;\n    }\n    return (\n      <FileUploadButton\n        accept={fileSharing?.accept}\n        multiple={fileSharing?.multiple}\n        onChange={fileUploadButtonOnChange}\n      />\n    );\n  }, [fileSharing?.accept, fileSharing?.multiple, fileSharing?.uploadHandler, fileUploadButtonOnChange]);\n  return (\n    <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            /* @conditional-compile-remove(file-sharing) */\n            <FileDownloadErrorBar\n              onDismissDownloadErrorMessage={useCallback(() => {\n                setDownloadErrorMessage('');\n              }, [])}\n              fileDownloadErrorMessage={downloadErrorMessage || ''}\n            />\n          }\n          <MessageThread\n            {...messageThreadProps}\n            onRenderAvatar={onRenderAvatarCallback}\n            onRenderMessage={onRenderMessage}\n            /* @conditional-compile-remove(file-sharing) */\n            onRenderFileDownloads={onRenderFileDownloads}\n            /* @conditional-compile-remove(image-overlay) */\n            inlineImageOptions={inlineImageOptions}\n            numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload}\n            styles={messageThreadStyles}\n          />\n          <Stack className={mergeStyles(sendboxContainerStyles)}>\n            <div className={mergeStyles(typingIndicatorContainerStyles)}>\n              {onRenderTypingIndicator ? (\n                onRenderTypingIndicator(typingIndicatorProps.typingUsers)\n              ) : (\n                <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />\n              )}\n            </div>\n            <Stack horizontal={formFactor === 'mobile'}>\n              {formFactor === 'mobile' && (\n                <Stack verticalAlign=\"center\">\n                  <AttachFileButton />\n                </Stack>\n              )}\n              <Stack grow>\n                <SendBox\n                  {...sendBoxProps}\n                  autoFocus={options?.autoFocus}\n                  styles={sendBoxStyles}\n                  /* @conditional-compile-remove(file-sharing) */\n                  activeFileUploads={useSelector(fileUploadsSelector).files}\n                  /* @conditional-compile-remove(file-sharing) */\n                  onCancelFileUpload={adapter.cancelFileUpload}\n                />\n              </Stack>\n              {formFactor !== 'mobile' && <AttachFileButton />}\n            </Stack>\n          </Stack>\n        </Stack>\n        {\n          /* @conditional-compile-remove(chat-composite-participant-pane) */\n          options?.participantPane === true && (\n            <ChatScreenPeoplePane\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n              isMobile={formFactor === 'mobile'}\n            />\n          )\n        }\n      </Stack>\n      {\n        /* @conditional-compile-remove(image-overlay) */\n        overlayImageItem && (\n          <ImageOverlay\n            {...overlayImageItem}\n            isOpen={isImageOverlayOpen}\n            onDismiss={() => {\n              setOverlayImageItem(undefined);\n              setIsImageOverlayOpen(false);\n            }}\n            onDownloadButtonClicked={onDownloadButtonClicked}\n          />\n        )\n      }\n    </Stack>\n  );\n};\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":["../../../../../../../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,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClF,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;IAE1D,OAAO,CACL,oBAAC,oBAAoB,IACnB,oBAAoB,EAAE,oBAAoB,EAC1C,KAAK,EAAE,cAAc,EACrB,wBAAwB,EAAE,wBAAwB,EAClD,2BAA2B,EAAE,2BAA2B,EACxD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,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 { onFetchAvatarPersonaData, onFetchParticipantMenuItems, isMobile } = props;\n  const locale = useLocale();\n  const chatListHeader = locale.strings.chat.chatListHeader;\n  const participantListProps = usePropsFor(ParticipantList);\n\n  return (\n    <ParticipantContainer\n      participantListProps={participantListProps}\n      title={chatListHeader}\n      onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n      onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n      isMobile={isMobile}\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * @private
+ */
+export interface FileDownloadErrorBarProps {
+    /**callback to dismiss the download error message */
+    onDismissDownloadErrorMessage: () => void;
+    /** Error message to render */
+    fileDownloadErrorMessage: string;
+}
+/**
+ * @private
+ */
+export declare const FileDownloadErrorBar: (props: FileDownloadErrorBarProps) => JSX.Element;
+//# sourceMappingURL=FileDownloadErrorBar.d.ts.map

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

@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { MessageBar, MessageBarType, Stack } from '@fluentui/react';
+import React from 'react';
+/**
+ * @private
+ */
+export const FileDownloadErrorBar = (props) => {
+    const { fileDownloadErrorMessage, onDismissDownloadErrorMessage } = props;
+    const messageBarIconProps = { iconName: 'ProtectedDocument' };
+    if (fileDownloadErrorMessage !== '') {
+        return (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
+            React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
+                    onDismissDownloadErrorMessage();
+                }, messageBarIconProps: messageBarIconProps }, fileDownloadErrorMessage)));
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};
+//# sourceMappingURL=FileDownloadErrorBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileDownloadErrorBar.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/FileDownloadErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,wBAAwB,EAAE,6BAA6B,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,mBAAmB,GAAG,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAE9D,IAAI,wBAAwB,KAAK,EAAE,EAAE,CAAC;QACpC,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ;YACtE,oBAAC,UAAU,IACT,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,SAAS,EAAE,GAAG,EAAE;oBACd,6BAA6B,EAAE,CAAC;gBAClC,CAAC,EACD,mBAAmB,EAAE,mBAAmB,IAEvC,wBAAwB,CACd,CACP,CACT,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType, Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @private\n */\nexport interface FileDownloadErrorBarProps {\n  /**callback to dismiss the download error message */\n  onDismissDownloadErrorMessage: () => void;\n  /** Error message to render */\n  fileDownloadErrorMessage: string;\n}\n\n/**\n * @private\n */\nexport const FileDownloadErrorBar = (props: FileDownloadErrorBarProps): JSX.Element => {\n  const { fileDownloadErrorMessage, onDismissDownloadErrorMessage } = props;\n  const messageBarIconProps = { iconName: 'ProtectedDocument' };\n\n  if (fileDownloadErrorMessage !== '') {\n    return (\n      <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n        <MessageBar\n          messageBarType={MessageBarType.warning}\n          onDismiss={() => {\n            onDismissDownloadErrorMessage();\n          }}\n          messageBarIconProps={messageBarIconProps}\n        >\n          {fileDownloadErrorMessage}\n        </MessageBar>\n      </Stack>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}

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

@@ -10,5 +10,9 @@ export interface ChatCompositeStrings {
      * Chat list header text
      */
     chatListHeader: string;
+    /**
+     * Upload File Button text
+     */
+    uploadFile: string;
 }
 //# sourceMappingURL=Strings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Strings used by the {@link ChatComposite} directly.\n *\n * This strings are in addition to those used by the components from the component library.\n *\n * @public\n */\nexport interface ChatCompositeStrings {\n  /**\n   * Chat list header text\n   */\n  chatListHeader: string;\n}"]}
+{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Strings used by the {@link ChatComposite} directly.\n *\n * This strings are in addition to those used by the components from the component library.\n *\n * @public\n */\nexport interface ChatCompositeStrings {\n  /**\n   * Chat list header text\n   */\n  chatListHeader: string;\n\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Upload File Button text\n   */\n  uploadFile: string;\n}\n"]}

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

@@ -3,7 +3,10 @@ import { ChatThreadClient, SendMessageOptions } from '@azure/communication-chat'
 import { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';
 import { _TelemetryImplementationHint } from "../../../../../acs-ui-common/src";
 import { ChatAdapter, ChatAdapterState, MessageDeletedListener, MessageEditedListener, MessageReadListener, MessageReceivedListener, ParticipantsAddedListener, ParticipantsRemovedListener, TopicChangedListener } from './ChatAdapter';
+import { ResourceDetails } from './ChatAdapter';
 import { AdapterError } from '../../common/adapters';
+import { AttachmentMetadata } from "../../../../../react-components/src";
+import { FileUploadManager } from '../file-sharing';
 /**
  * Context of Chat, which is a centralized context for all state updates
  * @private
@@ -27,6 +30,7 @@ export declare class AzureCommunicationChatAdapter implements ChatAdapter {
     private chatClient;
     private chatThreadClient;
     private context;
+    private fileUploadAdapter;
     private handlers;
     private emitter;
     constructor(chatClient: StatefulChatClient, chatThreadClient: ChatThreadClient);
@@ -42,8 +46,19 @@ export declare class AzureCommunicationChatAdapter implements ChatAdapter {
     removeParticipant(userId: string): Promise<void>;
     setTopic(topicName: string): Promise<void>;
     loadPreviousChatMessages(messagesToLoad: number): Promise<boolean>;
-    updateMessage(messageId: string, content: string, metadata?: Record<string, string>, options?: {}): Promise<void>;
+    updateMessage(messageId: string, content: string, metadata?: Record<string, string>, options?: {
+        attachmentMetadata?: AttachmentMetadata[];
+    }): Promise<void>;
     deleteMessage(messageId: string): Promise<void>;
+    registerActiveFileUploads(files: File[]): FileUploadManager[];
+    registerCompletedFileUploads(metadata: AttachmentMetadata[]): FileUploadManager[];
+    clearFileUploads(): void;
+    cancelFileUpload(id: string): void;
+    updateFileUploadProgress(id: string, progress: number): void;
+    updateFileUploadErrorMessage(id: string, errorMessage: string): void;
+    updateFileUploadMetadata(id: string, metadata: AttachmentMetadata): void;
+    downloadResourceToCache(resourceDetails: ResourceDetails): Promise<void>;
+    removeResourceFromCache(resourceDetails: ResourceDetails): void;
     private messageReceivedListener;
     private messageEditedListener;
     private messageDeletedListener;