communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
497 lines • 33.3 kB
JavaScript
// 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) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { isIOS } from '@fluentui/react';
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';
/* @conditional-compile-remove(file-sharing-acs) */
import { useReducer } from 'react';
import { useState } from 'react';
import { AvatarPersona } from '../common/AvatarPersona';
import { useAdapter } from './adapter/ChatAdapterProvider';
import { ChatHeader, getHeaderProps } from './ChatHeader';
/* @conditional-compile-remove(file-sharing-acs) */
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';
/* @conditional-compile-remove(chat-composite-participant-pane) */
import { ChatScreenPeoplePane } from './ChatScreenPeoplePane';
import { toFlatCommunicationIdentifier } from "../../../../acs-ui-common/src";
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { removeImageTags } from "../../../../acs-ui-common/src";
/* @conditional-compile-remove(file-sharing-acs) */
import { AttachmentDownloadErrorBar } from './AttachmentDownloadErrorBar';
import { _AttachmentDownloadCards } from "../../../../react-components/src";
import { ImageOverlay } from "../../../../react-components/src";
/* @conditional-compile-remove(file-sharing-acs) */
import { nanoid } from 'nanoid';
/* @conditional-compile-remove(file-sharing-acs) */
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { AttachmentUploadActionType, AttachmentUploadReducer } from './file-sharing/AttachmentUpload';
import { SendBoxPicker } from '../common/SendBoxPicker';
/* @conditional-compile-remove(rich-text-editor-composite-support) */
import { loadRichTextSendBox } from '../common/SendBoxPicker';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { cancelInlineImageUpload, getEditBoxMessagesInlineImages, getImageFileNameFromAttributes, getSendBoxInlineImages, onInsertInlineImageForEditBox, onInsertInlineImageForSendBox, updateContentStringWithUploadedInlineImages } from './ImageUpload/ImageUploadUtils';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { isMicrosoftTeamsUserIdentifier } from '@azure/communication-common';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { SEND_BOX_UPLOADS_KEY_VALUE } from '../common/constants';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { ImageUploadReducer } from './ImageUpload/ImageUploadReducer';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { useLocale } from '../localization';
import { useSelector } from './hooks/useSelector';
import { getChatMessages, getThreadId, getUserId } from './selectors/baseSelectors';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { getCreatedBy, getTextOnlyChat } from './selectors/baseSelectors';
/**
* @private
*/
export const ChatScreen = (props) => {
var _a, _b, _c, _d, _e;
const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles,
/* @conditional-compile-remove(file-sharing-acs) */
attachmentOptions, formFactor } = props;
const defaultNumberOfChatMessagesToReload = 5;
/* @conditional-compile-remove(file-sharing-acs) */
const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
const [overlayImageItem, setOverlayImageItem] = useState();
const [isImageOverlayOpen, setIsImageOverlayOpen] = useState(false);
/* @conditional-compile-remove(file-sharing-acs) */
const [uploads, handleUploadAction] = useReducer(AttachmentUploadReducer, []);
const adapter = useAdapter();
const theme = useTheme();
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const localeStrings = useLocale().strings;
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const textOnlyChat = !!useSelector(getTextOnlyChat);
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const createdBy = useSelector(getCreatedBy);
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const isACSChat = createdBy && !isMicrosoftTeamsUserIdentifier(createdBy);
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const [editBoxInlineImageUploads, handleEditBoxInlineImageUploadAction] = useReducer(ImageUploadReducer, undefined);
/* @conditional-compile-remove(rich-text-editor-image-upload) */
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* () {
// Fetch initial data for adapter
yield adapter.fetchInitialData();
// Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
yield adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);
});
fetchData();
}, [adapter]);
/* @conditional-compile-remove(rich-text-editor-composite-support) */
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);
const errorBarProps = usePropsFor(ErrorBar);
const overlayImageItemRef = React.useRef(overlayImageItem);
overlayImageItemRef.current = overlayImageItem;
const adapterChatMessages = useSelector(getChatMessages);
useEffect(() => {
var _a;
if (overlayImageItemRef.current === undefined) {
return;
}
const message = adapterChatMessages[overlayImageItemRef.current.messageId];
if (message === undefined) {
return;
}
const resourceFetchResult = (_a = message.resourceCache) === null || _a === void 0 ? void 0 : _a[overlayImageItemRef.current.imageUrl];
if (overlayImageItemRef.current.imageSrc === '' && resourceFetchResult) {
const fullSizeImageSrc = getResourceSourceUrl(resourceFetchResult);
if (fullSizeImageSrc === undefined ||
fullSizeImageSrc === '' ||
overlayImageItemRef.current.imageSrc === fullSizeImageSrc) {
return;
}
setOverlayImageItem(Object.assign(Object.assign({}, overlayImageItemRef.current), { imageSrc: fullSizeImageSrc }));
}
}, [adapterChatMessages]);
const getResourceSourceUrl = (result) => {
let src = '';
if (result.error || !result.sourceUrl) {
src = 'blob://';
}
else {
src = result.sourceUrl;
}
return src;
};
const onRenderAvatarCallback = useCallback((userId, defaultOptions) => {
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);
}, [styles === null || styles === void 0 ? void 0 : styles.messageThread, theme.semanticColors.bodyBackground]);
const typingIndicatorStyles = useMemo(() => {
return Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
}, [styles === null || styles === void 0 ? void 0 : styles.typingIndicator]);
const sendBoxStyles = useMemo(() => {
return Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
}, [styles === null || styles === void 0 ? void 0 : styles.sendBox]);
const userIdObject = useSelector(getUserId);
const userId = toFlatCommunicationIdentifier(userIdObject);
/* @conditional-compile-remove(file-sharing-acs) */
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
/* @conditional-compile-remove(rich-text-editor-composite-support) */
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();
}, [
/* @conditional-compile-remove(rich-text-editor-composite-support) */
(_a = props.options) === null || _a === void 0 ? void 0 : _a.richTextEditor
]);
/* @conditional-compile-remove(file-sharing-acs) */
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]);
/* @conditional-compile-remove(file-sharing-acs) */
const onRenderAttachmentDownloads = useCallback((message) => {
var _a, _b, _c;
return ((_b = (_a = message === null || message === void 0 ? void 0 : message.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0) ? (React.createElement(_AttachmentDownloadCards, { attachments: message.attachments, message: message, actionsForAttachment: (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _c === void 0 ? void 0 : _c.actionsForAttachment, onActionHandlerFailed: (errorMessage) => {
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;
const message = adapterChatMessages[messageId];
const inlinedImages = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.filter((attachment) => {
return attachment.attachmentType === 'image' && attachment.id === attachmentId;
});
const attachment = inlinedImages === null || inlinedImages === void 0 ? void 0 : inlinedImages[0];
if (!attachment) {
return;
}
let imageSrc = '';
if (attachment.url) {
const resourceFetchResult = (_c = message === null || message === void 0 ? void 0 : message.resourceCache) === null || _c === void 0 ? void 0 : _c[attachment.url];
if (resourceFetchResult) {
imageSrc = getResourceSourceUrl(resourceFetchResult);
}
else {
adapter.downloadResourceToCache({
threadId,
messageId,
resourceUrl: attachment.url
});
}
}
const titleIconRenderOptions = {
text: message === null || message === void 0 ? void 0 : message.senderDisplayName,
size: PersonaSize.size32,
showOverflowTooltip: false,
imageAlt: message === null || message === void 0 ? void 0 : message.senderDisplayName
};
const messageSenderId = (message === null || message === void 0 ? void 0 : message.sender) !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;
const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(messageSenderId, titleIconRenderOptions);
const overlayImage = {
title: (message === null || message === void 0 ? void 0 : message.senderDisplayName) || '',
titleIcon: titleIcon,
attachmentId: attachment.id,
imageSrc: imageSrc,
messageId: messageId,
imageUrl: attachment.url || ''
};
setIsImageOverlayOpen(true);
setOverlayImageItem(overlayImage);
}, [adapter, adapterChatMessages, onRenderAvatarCallback, userId, threadId]);
const onRenderInlineImage = useCallback((inlineImage, defaultOnRender) => {
var _a, _b, _c;
const message = adapterChatMessages[inlineImage.messageId];
const attachment = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.find((attachment) => attachment.id === inlineImage.imageAttributes.id);
if (attachment === undefined) {
return defaultOnRender(inlineImage);
}
let pointerEvents = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';
const resourceCache = message === null || message === void 0 ? void 0 : message.resourceCache;
if (resourceCache &&
attachment.previewUrl &&
resourceCache[attachment.previewUrl] &&
((_c = resourceCache[attachment.previewUrl]) === null || _c === void 0 ? void 0 : _c.error)) {
pointerEvents = 'none';
}
return (React.createElement("span", { key: inlineImage.imageAttributes.id, onClick: () => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
if (e.key === 'Enter') {
onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);
}
}, style: { cursor: 'pointer', pointerEvents } }, defaultOnRender(inlineImage)));
}, [adapterChatMessages, onInlineImageClicked]);
const inlineImageOptions = useMemo(() => {
return { onRenderInlineImage: onRenderInlineImage };
}, [onRenderInlineImage]);
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]);
/* @conditional-compile-remove(file-sharing-acs) */
const attachmentButton = useMemo(() => {
var _a, _b, _c;
if (!((_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentSelection) ||
/* @conditional-compile-remove(rich-text-editor-image-upload) */
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,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
textOnlyChat
]);
/* @conditional-compile-remove(file-sharing-acs) */
const attachments = useMemo(() => {
return uploads === null || uploads === void 0 ? void 0 : uploads.map((v) => v.metadata);
}, [uploads]);
const onSendMessageHandler = useCallback(function (content,
/* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ options) {
return __awaiter(this, void 0, void 0, function* () {
var _a;
/* @conditional-compile-remove(rich-text-editor-image-upload) */
content = updateContentStringWithUploadedInlineImages(content, sendBoxInlineImageUploads);
/* @conditional-compile-remove(file-sharing-acs) */
const attachments = (_a = options === null || options === void 0 ? void 0 : options.attachments) !== null && _a !== void 0 ? _a : [];
/* @conditional-compile-remove(file-sharing-acs) */
handleUploadAction({ type: AttachmentUploadActionType.Clear });
/* @conditional-compile-remove(rich-text-editor-image-upload) */
handleSendBoxInlineImageUploadAction({
type: AttachmentUploadActionType.Clear,
messageId: SEND_BOX_UPLOADS_KEY_VALUE
});
/* @conditional-compile-remove(file-sharing-acs) */
yield adapter.sendMessage(content, {
attachments: attachments,
/* @conditional-compile-remove(rich-text-editor-composite-support) */
type: options === null || options === void 0 ? void 0 : options.type
});
/* @conditional-compile-remove(file-sharing-acs) */
return;
yield adapter.sendMessage(content, {
/* @conditional-compile-remove(rich-text-editor-composite-support) */
type: options === null || options === void 0 ? void 0 : options.type
});
});
}, [
adapter,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ handleSendBoxInlineImageUploadAction,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads
]);
const onUpdateMessageHandler = useCallback(function (messageId, content,
/* @conditional-compile-remove(file-sharing-acs) */ options) {
return __awaiter(this, void 0, void 0, function* () {
/* @conditional-compile-remove(rich-text-editor-image-upload) */
content = updateContentStringWithUploadedInlineImages(content, editBoxInlineImageUploads, messageId);
yield messageThreadProps.onUpdateMessage(messageId, content,
/* @conditional-compile-remove(file-sharing-acs) */ options);
/* @conditional-compile-remove(rich-text-editor-image-upload) */
handleEditBoxInlineImageUploadAction({ type: AttachmentUploadActionType.Clear, messageId });
});
}, [
/* @conditional-compile-remove(rich-text-editor-image-upload) */ handleEditBoxInlineImageUploadAction,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads,
messageThreadProps
]);
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const onCancelEditMessageHandler = useCallback((messageId) => {
handleEditBoxInlineImageUploadAction({ type: AttachmentUploadActionType.Clear, messageId });
}, [handleEditBoxInlineImageUploadAction]);
/* @conditional-compile-remove(file-sharing-acs) */
const onCancelUploadHandler = useCallback((id) => {
var _a, _b;
handleUploadAction({ type: AttachmentUploadActionType.Remove, id });
(_b = (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentRemoval) === null || _b === void 0 ? void 0 : _b.call(_a, id);
}, [attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions]);
/* @conditional-compile-remove(rich-text-editor-composite-support) */
const richTextEditorOptions = useMemo(() => {
/* @conditional-compile-remove(rich-text-editor-image-upload) */
const onPasteCallback = !!isACSChat || textOnlyChat ? removeImageTags : undefined;
return (options === null || options === void 0 ? void 0 : options.richTextEditor)
? {
/* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: onPasteCallback
}
: undefined;
}, [
/* @conditional-compile-remove(rich-text-editor-image-upload) */
isACSChat,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
textOnlyChat,
options === null || options === void 0 ? void 0 : options.richTextEditor
]);
/* @conditional-compile-remove(rich-text-editor-composite-support) */
const richTextEditBoxOptions = useMemo(() => {
return (options === null || options === void 0 ? void 0 : options.richTextEditor)
? Object.assign(Object.assign({}, richTextEditorOptions), {
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onInsertInlineImage: (imageAttributes, messageId) => {
onInsertInlineImageForEditBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
},
/* @conditional-compile-remove(rich-text-editor-image-upload) */
messagesInlineImagesWithProgress: getEditBoxMessagesInlineImages(editBoxInlineImageUploads),
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onRemoveInlineImage: (imageAttributes, messageId) => {
cancelInlineImageUpload(imageAttributes, editBoxInlineImageUploads, messageId, handleEditBoxInlineImageUploadAction, adapter);
} }) : undefined;
}, [
options === null || options === void 0 ? void 0 : options.richTextEditor,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ richTextEditorOptions,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ adapter,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ localeStrings.chat
]);
/* @conditional-compile-remove(rich-text-editor-composite-support) */
const richTextSendBoxOptions = useMemo(() => {
return (options === null || options === void 0 ? void 0 : options.richTextEditor)
? Object.assign(Object.assign({}, richTextEditorOptions), {
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onInsertInlineImage: (imageAttributes) => {
onInsertInlineImageForSendBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
},
/* @conditional-compile-remove(rich-text-editor-image-upload) */
inlineImagesWithProgress: getSendBoxInlineImages(sendBoxInlineImageUploads),
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onRemoveInlineImage: (imageAttributes) => {
cancelInlineImageUpload(imageAttributes, sendBoxInlineImageUploads, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);
} }) : undefined;
}, [
options === null || options === void 0 ? void 0 : options.richTextEditor,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ richTextEditorOptions,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ localeStrings.chat,
adapter
]);
return (React.createElement(Stack, { className: chatContainer, grow: true },
(options === null || options === void 0 ? void 0 : options.topic) !== false && React.createElement(ChatHeader, Object.assign({}, headerProps)),
React.createElement(Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
React.createElement(Stack, { className: chatWrapper, grow: true },
(options === null || options === void 0 ? void 0 : options.errorBar) !== false && React.createElement(ErrorBar, Object.assign({}, errorBarProps)),
/* @conditional-compile-remove(file-sharing-acs) */
React.createElement(AttachmentDownloadErrorBar, { onDismissDownloadErrorMessage: useCallback(() => {
setDownloadErrorMessage('');
}, []), attachmentDownloadErrorMessage: downloadErrorMessage || '' }),
React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onUpdateMessage: onUpdateMessageHandler,
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onCancelEditMessage: onCancelEditMessageHandler, onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage,
/* @conditional-compile-remove(file-sharing-acs) */
onRenderAttachmentDownloads: onRenderAttachmentDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles,
/* @conditional-compile-remove(rich-text-editor-composite-support) */
richTextEditorOptions: richTextEditBoxOptions })),
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' && (
/* @conditional-compile-remove(file-sharing-acs) */
React.createElement(Stack, { verticalAlign: "center" }, attachmentButton)),
React.createElement(Stack, { grow: true },
React.createElement(SendBoxPicker, { styles: sendBoxStyles, autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus,
/* @conditional-compile-remove(rich-text-editor-composite-support) */
richTextEditorOptions: richTextSendBoxOptions,
/* @conditional-compile-remove(file-sharing-acs) */
attachments: attachments,
/* @conditional-compile-remove(file-sharing-acs) */
onCancelAttachmentUpload: onCancelUploadHandler,
// we need to overwrite onSendMessage for SendBox because we need to clear attachment state
// when submit button is clicked
onSendMessage: onSendMessageHandler })),
formFactor !== 'mobile' &&
/* @conditional-compile-remove(file-sharing-acs) */
attachmentButton))),
/* @conditional-compile-remove(chat-composite-participant-pane) */
(options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
overlayImageItem && (React.createElement(ImageOverlay, Object.assign({}, overlayImageItem, { isOpen: isImageOverlayOpen, onDismiss: () => {
setOverlayImageItem(undefined);
setIsImageOverlayOpen(false);
adapter.removeResourceFromCache({
threadId,
messageId: overlayImageItem.messageId,
resourceUrl: overlayImageItem.imageUrl
});
}, onDownloadButtonClicked: onDownloadButtonClicked })))));
};
//# sourceMappingURL=ChatScreen.js.map