@azure/communication-react 1.10.0-beta.1 → 1.10.0

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js

@@ -29,8 +29,6 @@ const onRenderSubmitIcon = (color) => {
  */
 export const ChatMessageComponentAsEditBox = (props) => {
     const { onCancel, onSubmit, strings, message } = props;
-    /* @conditional-compile-remove(mention) */
-    const { mentionLookupOptions } = props;
     const [textValue, setTextValue] = useState(message.content || '');
     const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));
     const editTextFieldRef = React.useRef(null);
@@ -72,7 +70,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
     }, [attachedFilesMetadata]);
     const getContent = () => {
         return React.createElement(React.Fragment, null,
-            React.createElement(InputBoxComponent, { id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
+            React.createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
                     if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
                         ev.stopPropagation();
                     }
@@ -80,8 +78,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
                     submitEnabled && onSubmit(textValue, message.metadata, {
                         attachedFilesMetadata
                     });
-                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
-                /* @conditional-compile-remove(mention) */ mentionLookupOptions: mentionLookupOptions }),
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles }),
             React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: {
                     childrenGap: '0.25rem'
                 } },
@@ -112,8 +109,6 @@ const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim(
 const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
 // @TODO: Remove when file-sharing feature becomes stable.
 const getMessageAttachedFilesMetadata = (message) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return message.attachedFilesMetadata;
     return [];
 };
 //# sourceMappingURL=ChatMessageComponentAsEditBox.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../MentionPopover';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, metadata?: Record<string, string>, options?: {\n    attachedFilesMetadata?: FileMetadata[];\n  }) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\ntype MessageState = 'OK' | 'too short' | 'too long';\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message\n  } = props;\n  /* @conditional-compile-remove(mention) */\n  const {\n    mentionLookupOptions\n  } = props;\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n  const submitEnabled = messageState === 'OK';\n  const editContainerStyles = useChatMessageEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n  const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n    limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n  }) : undefined;\n  const onRenderThemedCancelIcon = useCallback((isHover: boolean) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n  const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, {\n      textField: {\n        borderColor: theme.palette.themePrimary\n      }\n    });\n  }, [theme.palette.themePrimary]);\n  const onRenderFileUploads = useCallback(() => {\n    return !!attachedFilesMetadata && attachedFilesMetadata.length > 0 && <div style={{\n      margin: '0.25rem'\n    }}>\n          <_FileUploadCards activeFileUploads={attachedFilesMetadata?.map(file => ({\n        id: file.name,\n        filename: file.name,\n        progress: 1\n      }))} onCancelFileUpload={fileId => {\n        setAttachedFilesMetadata(attachedFilesMetadata?.filter(file => file.name !== fileId));\n      }} />\n        </div>;\n  }, [attachedFilesMetadata]);\n  const getContent = (): JSX.Element => {\n    return <>\n        <InputBoxComponent id={'editbox'} textFieldRef={editTextFieldRef} inputClassName={editBoxStyle} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onKeyDown={ev => {\n        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n          ev.stopPropagation();\n        }\n      }} onEnterKeyDown={() => {\n        submitEnabled && onSubmit(textValue, message.metadata, {\n          attachedFilesMetadata\n        });\n      }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}\n      /* @conditional-compile-remove(mention) */ mentionLookupOptions={mentionLookupOptions}></InputBoxComponent>\n        <Stack horizontal horizontalAlign=\"end\" className={editChatMessageButtonsStackStyle} tokens={{\n        childrenGap: '0.25rem'\n      }}>\n          {message.failureReason && <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n              <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n                {message.failureReason}\n              </div>\n            </Stack.Item>}\n          <Stack.Item align=\"end\">\n            <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }} id={'dismissIconWrapper'} />\n          </Stack.Item>\n          <Stack.Item align=\"end\">\n            <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n            submitEnabled && onSubmit(textValue, message.metadata, {\n              attachedFilesMetadata\n            });\n            e.stopPropagation();\n          }} id={'submitIconWrapper'} />\n          </Stack.Item>\n        </Stack>\n        {onRenderFileUploads()}\n      </>;\n  };\n  const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);\n  return <ChatMyMessage root={{\n    className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)\n  }} body={{\n    className: bodyClassName\n  }}>\n      {getContent()}\n    </ChatMyMessage>;\n};\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return message.attachedFilesMetadata;\n  return [];\n};\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, metadata?: Record<string, string>, options?: {\n    attachedFilesMetadata?: FileMetadata[];\n  }) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\ntype MessageState = 'OK' | 'too short' | 'too long';\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message\n  } = props;\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n  const submitEnabled = messageState === 'OK';\n  const editContainerStyles = useChatMessageEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n  const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n    limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n  }) : undefined;\n  const onRenderThemedCancelIcon = useCallback((isHover: boolean) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n  const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, {\n      textField: {\n        borderColor: theme.palette.themePrimary\n      }\n    });\n  }, [theme.palette.themePrimary]);\n  const onRenderFileUploads = useCallback(() => {\n    return !!attachedFilesMetadata && attachedFilesMetadata.length > 0 && <div style={{\n      margin: '0.25rem'\n    }}>\n          <_FileUploadCards activeFileUploads={attachedFilesMetadata?.map(file => ({\n        id: file.name,\n        filename: file.name,\n        progress: 1\n      }))} onCancelFileUpload={fileId => {\n        setAttachedFilesMetadata(attachedFilesMetadata?.filter(file => file.name !== fileId));\n      }} />\n        </div>;\n  }, [attachedFilesMetadata]);\n  const getContent = (): JSX.Element => {\n    return <>\n        <InputBoxComponent data-ui-id=\"edit-box\" textFieldRef={editTextFieldRef} inputClassName={editBoxStyle} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onKeyDown={ev => {\n        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n          ev.stopPropagation();\n        }\n      }} onEnterKeyDown={() => {\n        submitEnabled && onSubmit(textValue, message.metadata, {\n          attachedFilesMetadata\n        });\n      }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}></InputBoxComponent>\n        <Stack horizontal horizontalAlign=\"end\" className={editChatMessageButtonsStackStyle} tokens={{\n        childrenGap: '0.25rem'\n      }}>\n          {message.failureReason && <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n              <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n                {message.failureReason}\n              </div>\n            </Stack.Item>}\n          <Stack.Item align=\"end\">\n            <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }} id={'dismissIconWrapper'} />\n          </Stack.Item>\n          <Stack.Item align=\"end\">\n            <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n            submitEnabled && onSubmit(textValue, message.metadata, {\n              attachedFilesMetadata\n            });\n            e.stopPropagation();\n          }} id={'submitIconWrapper'} />\n          </Stack.Item>\n        </Stack>\n        {onRenderFileUploads()}\n      </>;\n  };\n  const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);\n  return <ChatMyMessage root={{\n    className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)\n  }} body={{\n    className: bodyClassName\n  }}>\n      {getContent()}\n    </ChatMyMessage>;\n};\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] | undefined => {\n  return [];\n};\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.d.ts

@@ -1,15 +1,12 @@
 import { IStyle } from '@fluentui/react';
 import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
-import { FileMetadata } from '../FileDownloadCards';
-import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
 import { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
 import { FileDownloadHandler } from '../FileDownloadCards';
-import { MentionDisplayOptions } from '../MentionPopover';
 import { MessageStatus } from "../../../../acs-ui-common/src";
 declare type ChatMessageComponentAsMessageBubbleProps = {
-    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+    message: ChatMessage;
     messageContainerStyle?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
@@ -54,24 +51,6 @@ declare type ChatMessageComponentAsMessageBubbleProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
-    /**
-     * Optional props needed to display suggestions in the mention scenario.
-     * @internal
-     */
-    mentionDisplayOptions?: MentionDisplayOptions;
-    /**
-     * Optional function to fetch attachments.
-     */
-    onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
-    /**
-     * Optional callback called when an inline image is clicked.
-     * @beta
-     */
-    onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
-    /**
-     * Optional map of attachment ids to blob urls.
-     */
-    attachmentsMap?: Record<string, string>;
 };
 /** @private */
 export declare const ChatMessageComponentAsMessageBubble: React.MemoExoticComponent<(props: ChatMessageComponentAsMessageBubbleProps) => JSX.Element>;

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.js

@@ -1,14 +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) {
-        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 { Text, mergeStyles } from '@fluentui/react';
 import { ChatMessage as FluentChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';
 import React, { useCallback, useRef, useState } from 'react';
@@ -18,8 +9,6 @@ import { useIdentifiers } from '../../identifiers/IdentifierProvider';
 import { useTheme } from '../../theming';
 import { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';
 import { ChatMessageContent } from './ChatMessageContent';
-/* @conditional-compile-remove(data-loss-prevention) */
-import { BlockedMessageContent } from './ChatMessageContent';
 import { chatMessageActionMenuProps } from './ChatMessageActionMenu';
 import { _FileDownloadCards } from '../FileDownloadCards';
 import { useLocale } from '../../localization';
@@ -32,8 +21,6 @@ const generateDefaultTimestamp = (createdOn, showDate, strings) => {
 };
 // onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
 const generateCustomizedTimestamp = (props, createdOn, locale) => {
-    /* @conditional-compile-remove(date-time-customization) */
-    return props.onDisplayDateTimeString ? props.onDisplayDateTimeString(createdOn) : locale.onDisplayDateTimeString ? locale.onDisplayDateTimeString(createdOn) : '';
     return '';
 };
 /** @private */
@@ -42,9 +29,7 @@ const MessageBubble = (props) => {
     const ids = useIdentifiers();
     const theme = useTheme();
     const locale = useLocale();
-    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, 
-    /* @conditional-compile-remove(image-gallery) */
-    onInlineImageClicked, shouldOverlapAvatarAndMessage } = props;
+    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, shouldOverlapAvatarAndMessage } = props;
     const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
     const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';
     const formattedTimestamp = customTimestamp || defaultTimeStamp;
@@ -58,14 +43,13 @@ const MessageBubble = (props) => {
     const messageRef = useRef(null);
     const messageActionButtonRef = useRef(null);
     const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
-    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
+    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;
     const [messageReadBy, setMessageReadBy] = useState([]);
     const actionMenuProps = chatMessageActionMenuProps({
         ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
         enabled: chatActionsEnabled,
         menuButtonRef: messageActionButtonRef,
-        // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
-        forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,
+        menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,
         onActionButtonClick: () => {
             if (message.messageType === 'chat') {
                 props.onActionButtonClick(message, setMessageReadBy);
@@ -79,12 +63,7 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
-    const defaultOnRenderFileDownloads = useCallback(() => React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler, 
-        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/ strings: {
-            downloadFile: strings.downloadFile,
-            fileCardGroupMessage: strings.fileCardGroupMessage
-        } }), [userId, message,
-        strings, fileDownloadHandler]);
+    const defaultOnRenderFileDownloads = useCallback(() => React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler }), [userId, message, fileDownloadHandler]);
     const editedOn = 'editedOn' in message ? message.editedOn : undefined;
     const getMessageDetails = useCallback(() => {
         if (messageStatus === 'failed') {
@@ -95,29 +74,12 @@ const MessageBubble = (props) => {
         }
         return undefined;
     }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
-    /* @conditional-compile-remove(image-gallery) */
-    const handleOnInlineImageClicked = useCallback((attachmentId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (onInlineImageClicked === undefined) {
-            return;
-        }
-        yield onInlineImageClicked(attachmentId, message.messageId);
-    }), [message, onInlineImageClicked]);
     const getContent = useCallback(() => {
-        /* @conditional-compile-remove(data-loss-prevention) */
-        if (message.messageType === 'blocked') {
-            return React.createElement("div", { tabIndex: 0 },
-                React.createElement(BlockedMessageContent, { message: message, strings: strings }));
-        }
         return React.createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
-            React.createElement(ChatMessageContent, { message: message, strings: strings, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ onFetchAttachment: props.onFetchAttachments, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ attachmentsMap: props.attachmentsMap, 
-                /* @conditional-compile-remove(mention) */ mentionDisplayOptions: props.mentionDisplayOptions, 
-                /* @conditional-compile-remove(image-gallery) */ onInlineImageClicked: handleOnInlineImageClicked }),
+            React.createElement(ChatMessageContent, { message: message, strings: strings }),
             props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads());
-    }, [defaultOnRenderFileDownloads, message, props, strings, userId,
-        handleOnInlineImageClicked]);
-    const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
+    }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
+    const isBlockedMessage = false;
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
     const chatMessageStyles = useChatMessageStyles();
@@ -126,21 +88,24 @@ const MessageBubble = (props) => {
     chatMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false ? chatMessageStyles.bodyWithAvatar : chatMessageStyles.bodyWithoutAvatar, mergeStyles(messageContainerStyle));
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     const chatMessage = React.createElement(React.Fragment, null,
-        React.createElement("div", { key: props.message.messageId, ref: messageRef }, message.mine ? React.createElement(ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
+        React.createElement("div", { key: props.message.messageId }, message.mine ? React.createElement(ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
                 // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
                 className: mergeClasses(chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
+                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
+                ref: messageRef
             }, root: {
                 className: chatMyMessageStyles.root,
                 onBlur: e => {
-                    // copy behavior from North*
                     // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
                     // with keyboard the focused element will be changed and there is no way to use `:focus` selector
+                    if (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) {
+                        // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu
+                        return;
+                    }
                     const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);
                     setFocused(shouldPreserveFocusState);
                 },
                 onFocus: () => {
-                    // copy behavior from North*
                     // react onFocus is called even when nested component receives focus (i.e. it bubbles)
                     // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
                     setFocused(true);
@@ -150,7 +115,6 @@ const MessageBubble = (props) => {
                 role: 'none',
                 tabIndex: -1
             }, "data-ui-id": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
-                tabIndex: 0,
                 children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
                 className: mergeClasses(chatMyMessageStyles.menu, 
                 // Make actions menu visible when the message is focused or the flyout is shown

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles, IStyle } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageAuthorStyle } from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { FileMetadata } from '../FileDownloadCards';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessageContent } from './ChatMessageContent';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions } from '../MentionPopover';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMyMessageStyles, useChatMessageCommonStyles } from '../styles/MessageThread.styles';\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  /** Styles for message status indicator container. */\n  messageStatusContainer?: (mine: boolean) => IStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  messageStatusRenderer?: (status: MessageStatus) => JSX.Element | null;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to display suggestions in the mention scenario.\n   * @internal\n   */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Optional function to fetch attachments.\n   */\n  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n  /* @conditional-compile-remove(image-gallery) */\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Optional map of attachment ids to blob urls.\n   */\n  attachmentsMap?: Record<string, string>;\n};\nconst generateDefaultTimestamp = (createdOn: Date, showDate: boolean | undefined, strings: MessageThreadStrings): string => {\n  const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (props: ChatMessageComponentAsMessageBubbleProps, createdOn: Date, locale: ComponentLocale): string => {\n  /* @conditional-compile-remove(date-time-customization) */\n  return props.onDisplayDateTimeString ? props.onDisplayDateTimeString(createdOn) : locale.onDisplayDateTimeString ? locale.onDisplayDateTimeString(createdOn) : '';\n  return '';\n};\n/** @private */\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n  const {\n    userId,\n    message,\n    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    fileDownloadHandler,\n    /* @conditional-compile-remove(image-gallery) */\n    onInlineImageClicked,\n    shouldOverlapAvatarAndMessage\n  } = props;\n  const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n  const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n  const formattedTimestamp = customTimestamp || defaultTimeStamp;\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n  // `focused` state is used for show/hide actionMenu\n  const [focused, setFocused] = React.useState<boolean>(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLDivElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<React.MutableRefObject<HTMLElement | null> | undefined>(undefined);\n  const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && /* @conditional-compile-remove(data-loss-prevention) */message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{\n    id: string;\n    displayName: string;\n  }[]>([]);\n  const actionMenuProps = chatMessageActionMenuProps({\n    ariaLabel: strings.actionMenuMoreOptions ?? '',\n    enabled: chatActionsEnabled,\n    menuButtonRef: messageActionButtonRef,\n    // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n    forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,\n    onActionButtonClick: () => {\n      if (message.messageType === 'chat') {\n        props.onActionButtonClick(message, setMessageReadBy);\n        setChatMessageActionFlyoutTarget(messageActionButtonRef);\n      }\n    },\n    theme\n  });\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n  const defaultOnRenderFileDownloads = useCallback(() => <_FileDownloadCards userId={userId} fileMetadata={message['attachedFilesMetadata'] || []} downloadHandler={fileDownloadHandler}\n  /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/ strings={{\n    downloadFile: strings.downloadFile,\n    fileCardGroupMessage: strings.fileCardGroupMessage\n  }} />, [userId, message, /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n  strings, fileDownloadHandler]);\n  const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n  const getMessageDetails = useCallback(() => {\n    if (messageStatus === 'failed') {\n      return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n    } else if (message.messageType === 'chat' && editedOn) {\n      return <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>;\n    }\n    return undefined;\n  }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n  /* @conditional-compile-remove(image-gallery) */\n  const handleOnInlineImageClicked = useCallback(async (attachmentId: string): Promise<void> => {\n    if (onInlineImageClicked === undefined) {\n      return;\n    }\n    await onInlineImageClicked(attachmentId, message.messageId);\n  }, [message, onInlineImageClicked]);\n  const getContent = useCallback(() => {\n    /* @conditional-compile-remove(data-loss-prevention) */\n    if (message.messageType === 'blocked') {\n      return <div tabIndex={0}>\n          <BlockedMessageContent message={message} strings={strings} />\n        </div>;\n    }\n    return <div tabIndex={0} className=\"ui-chat__message__content\">\n        <ChatMessageContent message={message} strings={strings}\n      /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ onFetchAttachment={props.onFetchAttachments}\n      /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ attachmentsMap={props.attachmentsMap}\n      /* @conditional-compile-remove(mention) */ mentionDisplayOptions={props.mentionDisplayOptions}\n      /* @conditional-compile-remove(image-gallery) */ onInlineImageClicked={handleOnInlineImageClicked} />\n        {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n      </div>;\n  }, [defaultOnRenderFileDownloads, message, props, strings, userId, /* @conditional-compile-remove(image-gallery) */\n  handleOnInlineImageClicked]);\n  const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */message.messageType === 'blocked';\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n  const chatMessageStyles = useChatMessageStyles();\n  const chatItemMessageContainerClassName = mergeClasses(\n  // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n  chatMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false ? chatMessageStyles.bodyWithAvatar : chatMessageStyles.bodyWithoutAvatar, mergeStyles(messageContainerStyle));\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = <>\n      <div key={props.message.messageId} ref={messageRef}>\n        {message.mine ? <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n        // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n        className: mergeClasses(chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),\n        style: {\n          ...createStyleFromV8Style(messageContainerStyle)\n        }\n      }} root={{\n        className: chatMyMessageStyles.root,\n        onBlur: e => {\n          // copy behavior from North*\n          // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n          // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n          const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n          setFocused(shouldPreserveFocusState);\n        },\n        onFocus: () => {\n          // copy behavior from North*\n          // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n          // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n          setFocused(true);\n        },\n        // make body not focusable to remove repetitions from narrators.\n        // inner components are already focusable\n        role: 'none',\n        tabIndex: -1\n      }} data-ui-id=\"chat-composite-message\" author={<Text className={chatMessageDateStyle} tabIndex={0}>\n                {message.senderDisplayName}\n              </Text>} timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n                {formattedTimestamp}\n              </Text>} details={getMessageDetails()} actions={{\n        tabIndex: 0,\n        children: actionMenuProps?.children,\n        className: mergeClasses(chatMyMessageStyles.menu,\n        // Make actions menu visible when the message is focused or the flyout is shown\n        focused || chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)\n      }} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} onClick={() => {\n        if (!wasInteractionByTouch) {\n          return;\n        }\n        // If the message was touched via touch we immediately open the menu\n        // flyout (when using mouse the 3-dot menu that appears on hover\n        // must be clicked to open the flyout).\n        // In doing so here we set the target of the flyout to be the message and\n        // not the 3-dot menu button to position the flyout correctly.\n        setChatMessageActionFlyoutTarget(messageRef);\n        if (message.messageType === 'chat') {\n          props.onActionButtonClick(message, setMessageReadBy);\n        }\n      }}>\n            {getContent()}\n          </ChatMyMessage> : <FluentChatMessage attached={attached} key={props.message.messageId} root={{\n        className: chatMessageStyles.root,\n        // make body not focusable to remove repetitions from narrators.\n        // inner components are already focusable\n        tabIndex: -1,\n        role: 'none'\n      }} author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>} body={{\n        className: chatItemMessageContainerClassName,\n        style: {\n          ...createStyleFromV8Style(messageContainerStyle)\n        }\n      }} data-ui-id=\"chat-composite-message\" timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n                {formattedTimestamp}\n              </Text>}>\n            {getContent()}\n          </FluentChatMessage>}\n      </div>\n      {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n    </>;\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles, IStyle } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageAuthorStyle } from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMyMessageStyles, useChatMessageCommonStyles } from '../styles/MessageThread.styles';\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  /** Styles for message status indicator container. */\n  messageStatusContainer?: (mine: boolean) => IStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  messageStatusRenderer?: (status: MessageStatus) => JSX.Element | null;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\nconst generateDefaultTimestamp = (createdOn: Date, showDate: boolean | undefined, strings: MessageThreadStrings): string => {\n  const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (props: ChatMessageComponentAsMessageBubbleProps, createdOn: Date, locale: ComponentLocale): string => {\n  return '';\n};\n/** @private */\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n  const {\n    userId,\n    message,\n    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    fileDownloadHandler,\n    shouldOverlapAvatarAndMessage\n  } = props;\n  const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n  const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n  const formattedTimestamp = customTimestamp || defaultTimeStamp;\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n  // `focused` state is used for show/hide actionMenu\n  const [focused, setFocused] = React.useState<boolean>(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLDivElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<React.MutableRefObject<HTMLElement | null> | undefined>(undefined);\n  const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;\n  const [messageReadBy, setMessageReadBy] = useState<{\n    id: string;\n    displayName: string;\n  }[]>([]);\n  const actionMenuProps = chatMessageActionMenuProps({\n    ariaLabel: strings.actionMenuMoreOptions ?? '',\n    enabled: chatActionsEnabled,\n    menuButtonRef: messageActionButtonRef,\n    menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n    onActionButtonClick: () => {\n      if (message.messageType === 'chat') {\n        props.onActionButtonClick(message, setMessageReadBy);\n        setChatMessageActionFlyoutTarget(messageActionButtonRef);\n      }\n    },\n    theme\n  });\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n  const defaultOnRenderFileDownloads = useCallback(() => <_FileDownloadCards userId={userId} fileMetadata={message['attachedFilesMetadata'] || []} downloadHandler={fileDownloadHandler} />, [userId, message, fileDownloadHandler]);\n  const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n  const getMessageDetails = useCallback(() => {\n    if (messageStatus === 'failed') {\n      return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n    } else if (message.messageType === 'chat' && editedOn) {\n      return <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>;\n    }\n    return undefined;\n  }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n  const getContent = useCallback(() => {\n    return <div tabIndex={0} className=\"ui-chat__message__content\">\n        <ChatMessageContent message={message} strings={strings} />\n        {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n      </div>;\n  }, [defaultOnRenderFileDownloads, message, props, strings, userId]);\n  const isBlockedMessage = false;\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n  const chatMessageStyles = useChatMessageStyles();\n  const chatItemMessageContainerClassName = mergeClasses(\n  // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n  chatMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false ? chatMessageStyles.bodyWithAvatar : chatMessageStyles.bodyWithoutAvatar, mergeStyles(messageContainerStyle));\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = <>\n      <div key={props.message.messageId}>\n        {message.mine ? <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n        // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n        className: mergeClasses(chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),\n        style: {\n          ...createStyleFromV8Style(messageContainerStyle)\n        },\n        ref: messageRef\n      }} root={{\n        className: chatMyMessageStyles.root,\n        onBlur: e => {\n          // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n          // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n          if (chatMessageActionFlyoutTarget?.current) {\n            // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n            return;\n          }\n          const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n          setFocused(shouldPreserveFocusState);\n        },\n        onFocus: () => {\n          // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n          // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n          setFocused(true);\n        },\n        // make body not focusable to remove repetitions from narrators.\n        // inner components are already focusable\n        role: 'none',\n        tabIndex: -1\n      }} data-ui-id=\"chat-composite-message\" author={<Text className={chatMessageDateStyle} tabIndex={0}>\n                {message.senderDisplayName}\n              </Text>} timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n                {formattedTimestamp}\n              </Text>} details={getMessageDetails()} actions={{\n        children: actionMenuProps?.children,\n        className: mergeClasses(chatMyMessageStyles.menu,\n        // Make actions menu visible when the message is focused or the flyout is shown\n        focused || chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)\n      }} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} onClick={() => {\n        if (!wasInteractionByTouch) {\n          return;\n        }\n        // If the message was touched via touch we immediately open the menu\n        // flyout (when using mouse the 3-dot menu that appears on hover\n        // must be clicked to open the flyout).\n        // In doing so here we set the target of the flyout to be the message and\n        // not the 3-dot menu button to position the flyout correctly.\n        setChatMessageActionFlyoutTarget(messageRef);\n        if (message.messageType === 'chat') {\n          props.onActionButtonClick(message, setMessageReadBy);\n        }\n      }}>\n            {getContent()}\n          </ChatMyMessage> : <FluentChatMessage attached={attached} key={props.message.messageId} root={{\n        className: chatMessageStyles.root,\n        // make body not focusable to remove repetitions from narrators.\n        // inner components are already focusable\n        tabIndex: -1,\n        role: 'none'\n      }} author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>} body={{\n        className: chatItemMessageContainerClassName,\n        style: {\n          ...createStyleFromV8Style(messageContainerStyle)\n        }\n      }} data-ui-id=\"chat-composite-message\" timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n                {formattedTimestamp}\n              </Text>}>\n            {getContent()}\n          </FluentChatMessage>}\n      </div>\n      {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n    </>;\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.d.ts

@@ -1,26 +1,11 @@
 /// <reference types="react" />
 import { ChatMessage } from '../../types/ChatMessage';
-import { BlockedMessage } from '../../types/ChatMessage';
-import { MentionDisplayOptions } from '../MentionPopover';
 import { MessageThreadStrings } from '../MessageThread';
-import { FileMetadata } from '../FileDownloadCards';
 declare type ChatMessageContentProps = {
     message: ChatMessage;
     strings: MessageThreadStrings;
-    mentionDisplayOptions?: MentionDisplayOptions;
-    attachmentsMap?: Record<string, string>;
-    onFetchAttachment?: (attachment: FileMetadata) => Promise<void>;
-    onInlineImageClicked?: (attachmentId: string) => void;
-};
-declare type BlockedMessageContentProps = {
-    message: BlockedMessage;
-    strings: MessageThreadStrings;
 };
 /** @private */
 export declare const ChatMessageContent: (props: ChatMessageContentProps) => JSX.Element;
-/**
- * @private
- */
-export declare const BlockedMessageContent: (props: BlockedMessageContentProps) => JSX.Element;
 export {};
 //# sourceMappingURL=ChatMessageContent.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js

@@ -1,17 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React from 'react';
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-import { useEffect } from 'react';
 import { _formatString } from "../../../../acs-ui-common/src";
 import { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions } from 'html-to-react';
 import Linkify from 'react-linkify';
 import { Link } from '@fluentui/react';
-/* @conditional-compile-remove(data-loss-prevention) */
-import { FontIcon, Stack } from '@fluentui/react';
 import LiveMessage from '../Announcer/LiveMessage';
-/* @conditional-compile-remove(mention) */
-import { defaultOnMentionRender } from './MentionRenderer';
 import DOMPurify from 'dompurify';
 /** @private */
 export const ChatMessageContent = (props) => {
@@ -33,15 +27,6 @@ const MessageContentWithLiveAria = (props) => {
         props.content);
 };
 const MessageContentAsRichTextHTML = (props) => {
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    useEffect(() => {
-        var _a;
-        (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map(fileMetadata => {
-            if (props.onFetchAttachment && props.attachmentsMap && fileMetadata.attachmentType === 'inlineImage' && props.attachmentsMap[fileMetadata.id] === undefined) {
-                props.onFetchAttachment(fileMetadata);
-            }
-        });
-    }, [props]);
     return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) });
 };
 const MessageContentAsText = (props) => {
@@ -49,23 +34,6 @@ const MessageContentAsText = (props) => {
                 return React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText);
             } }, props.message.content) });
 };
-/* @conditional-compile-remove(data-loss-prevention) */
-/**
- * @private
- */
-export const BlockedMessageContent = (props) => {
-    var _a;
-    const Icon = React.createElement(FontIcon, { iconName: 'DataLossPreventionProhibited' });
-    const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
-    const blockedMessageLink = props.message.link;
-    const blockedMessageLinkText = blockedMessageLink ? (_a = props.message.linkText) !== null && _a !== void 0 ? _a : props.strings.blockedWarningLinkText : '';
-    const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;
-    const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;
-    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: liveBlockedWarningText, ariaLabel: liveBlockedWarningText, content: React.createElement(Stack, { horizontal: true, wrap: true },
-            Icon,
-            blockedMessage && React.createElement("p", null, blockedMessage),
-            blockedMessageLink && React.createElement(Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText)) });
-};
 // https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
 const extractContent = (s) => {
     const span = document.createElement('span');
@@ -93,71 +61,13 @@ const messageContentAriaText = (props) => {
 };
 const processNodeDefinitions = ProcessNodeDefinitions();
 const htmlToReactParser = Parser();
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-const processInlineImage = (props) => ({
-    // Custom <img> processing
-    shouldProcessNode: (node) => {
-        var _a;
-        function isImageNode(file) {
-            return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;
-        }
-        // Process img node with id in attachments list
-        return node.name && node.name === 'img' && node.attribs && node.attribs.id && ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find(isImageNode));
-    },
-    processNode: (node, children, index) => {
-        node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });
-        // logic to check id in map/list
-        if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
-            node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
-        }
-        /* @conditional-compile-remove(image-gallery) */
-        const handleOnClick = () => {
-            props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);
-        };
-        /* @conditional-compile-remove(image-gallery) */
-        return React.createElement("span", { "data-ui-id": node.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
-                cursor: 'pointer'
-            }, onKeyDown: e => {
-                if (e.key === 'Enter') {
-                    handleOnClick();
-                }
-            } }, processNodeDefinitions.processDefaultNode(node, children, index));
-        return processNodeDefinitions.processDefaultNode(node, children, index);
-    }
-});
-/* @conditional-compile-remove(mention) */
-const processMention = (props) => ({
-    shouldProcessNode: node => {
-        var _a;
-        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
-            // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer
-            return node.name === 'msft-mention';
-        }
-        return false;
-    },
-    processNode: node => {
-        var _a, _b, _c;
-        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
-            const { id } = node.attribs;
-            const mention = {
-                id: id,
-                displayText: (_c = (_b = node.children[0]) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : ''
-            };
-            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
-        }
-        return processNodeDefinitions.processDefaultNode;
-    }
-});
 const processHtmlToReact = (props) => {
     var _a;
-    const steps = [
-        processInlineImage(props),
-        processMention(props), {
+    const steps = [{
             // Process everything else in the default way
             shouldProcessNode: IsValidNodeDefinitions.alwaysValid,
             processNode: processNodeDefinitions.processDefaultNode
-        }
-    ];
+        }];
     return htmlToReactParser.parseWithInstructions((_a = props.message.content) !== null && _a !== void 0 ? _a : '', IsValidNodeDefinitions.alwaysValid, steps);
 };
 //# sourceMappingURL=ChatMessageContent.js.map