npm - @azure/communication-react - Versions diffs - 1.21.0-beta.1 → 1.22.0-alpha-202411160017 - Mend

@azure/communication-react 1.21.0-beta.1 → 1.22.0-alpha-202411160017

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1185) hide show

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { 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 { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';\nimport { hasIncompleteAttachmentUploads, removeBrokenImageContentAndClearImageSizeStyles, getContentWithUpdatedInlineImagesInfo, isMessageTooLong } from '../../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { attachmentMetadataReducer, getMessageWithAttachmentMetadata, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\nimport { SendBoxErrorBarError, SendBoxErrorBarType } from '../../SendBoxErrorBar';\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\nimport { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';\n\n/** @private /\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (text: string, attachmentMetadata?: AttachmentMetadata[]) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n onPaste?: (event: {\n content: DocumentFragment;\n }) => void;\n onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/\n @private\n */\nexport const ChatMessageComponentAsRichTextEditBox = (props: ChatMessageComponentAsRichTextEditBoxProps): JSX.Element => {\n const {\n onCancel,\n onSubmit,\n strings,\n message,\n onPaste,\n onInsertInlineImage,\n inlineImagesWithProgress,\n onRemoveInlineImage\n } = props;\n const [initialInlineImages, setInitialInlineImages] = useState<Record<string, string>[]>([]);\n const initialContent = useMemo(() => {\n const content = message.content;\n setInitialInlineImages(getPreviousInlineImages(content));\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n // The broken image element is a div element with all the attributes of the original image element.\n // We need to convert it to a img element so the Rooster knows how to render it.\n // And we need to copy over all the attributes such as id, width, etc.\n // which is needed for sending the message with the images correctly.\n document.querySelectorAll('.broken-image-wrapper').forEach(brokenImage => {\n const imageElement = document.createElement('img');\n const attributes = brokenImage.attributes;\n for (const attribute of attributes) {\n imageElement.setAttribute(attribute.name, attribute.value);\n }\n imageElement.src = BROKEN_IMAGE_SVG_DATA;\n imageElement.style.width = '3rem';\n imageElement.style.height = '3rem';\n brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n });\n return document.body.innerHTML;\n return message.content;\n }, [message]);\n const [textValue, setTextValue] = useState<string>(initialContent \|\| '');\n const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);\n const [attachmentMetadata, handleAttachmentAction] = useReducer(attachmentMetadataReducer, getMessageWithAttachmentMetadata(message) ?? []);\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(undefined);\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = useMemo(() => {\n return getMessageState(textValue, attachmentMetadata ?? []);\n }, [attachmentMetadata, textValue]);\n const imageUploadErrorMessage = useMemo(() => {\n return inlineImagesWithProgress?.filter(image => image.error).pop()?.error?.message;\n }, [inlineImagesWithProgress]);\n const submitEnabled = messageState === 'OK';\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n const setText = useCallback((newValue?: string): void => {\n setTextValue(newValue ?? '');\n }, []);\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n const textTooLongMessage = useMemo(() => {\n return messageState === 'too long' \|\| contentValueWithInlineImagesOverflow ? _formatString(strings.editBoxTextLimit, {\n limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n }) : undefined;\n }, [messageState, strings.editBoxTextLimit, contentValueWithInlineImagesOverflow]);\n const iconClassName = useCallback((isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, {\n color\n });\n }, [theme.palette.accent, theme.palette.neutralSecondary]);\n const onRenderThemedCancelIcon = useCallback((isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n }, [iconClassName]);\n const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n }, [iconClassName]);\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message);\n }, [message]);\n const onSubmitHandler = useCallback((): void => {\n if (!submitEnabled) {\n return;\n }\n if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(textValue, inlineImagesWithProgress);\n const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n // Set contentValueWithInlineImagesOverflow state to display the error bar\n setContentValueWithInlineImagesOverflow(messageTooLong);\n // The change from the setContentValueOverflow in the previous line will not kick in yet.\n // We need to rely on the local value of messageTooLong to return early if the message is too long.\n if (messageTooLong) {\n return;\n }\n }\n\n // Don't send message until all attachments have been uploaded successfully\n setAttachmentUploadsPendingError(undefined);\n if (hasIncompleteAttachmentUploads(inlineImagesWithProgress)) {\n setAttachmentUploadsPendingError({\n message: strings.imageUploadsPendingError,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.info\n });\n return;\n }\n let content = textValue;\n content = removeBrokenImageContentAndClearImageSizeStyles(content);\n let initInlineImages: Record<string, string>[] = [];\n initInlineImages = initialInlineImages ?? [];\n modifyInlineImagesInContentString(content, initInlineImages, (content: string) => {\n // it's very important to pass an empty attachment here\n // so when user removes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n onSubmit(content, attachmentMetadata \|\| []);\n });\n }, [submitEnabled, inlineImagesWithProgress, initialInlineImages, textValue, strings.imageUploadsPendingError, onSubmit, attachmentMetadata]);\n const actionButtons = useMemo(() => {\n return <Stack horizontal>\n <InputBoxButton className={richTextActionButtonsStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n onCancel && onCancel(message.messageId);\n }} id={'dismissIconWrapper'} data-testId={strings.editBoxCancelButton} />\n <InputBoxButton className={richTextActionButtonsStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n onSubmitHandler();\n e.stopPropagation();\n }} id={'submitIconWrapper'} data-testId={strings.editBoxSubmitButton} />\n </Stack>;\n }, [message.messageId, onCancel, onRenderThemedCancelIcon, onRenderThemedSubmitIcon, strings.editBoxCancelButton, strings.editBoxSubmitButton, onSubmitHandler]);\n const richTextLocaleStrings = useMemo(() => {\n return {\n ...locale.richTextSendBox,\n ...strings\n };\n return locale.sendBox;\n }, [locale.richTextSendBox, strings, locale.sendBox]);\n const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({\n type: 'remove',\n id: attachmentId\n });\n }, []);\n const onRenderAttachmentUploads = useCallback(() => {\n return <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme}>\n <_AttachmentUploadCards attachments={attachmentMetadata} onCancelAttachmentUpload={onCancelAttachmentUpload} />\n </FluentV9ThemeProvider>\n </Stack>;\n }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n const onChangeHandler = useCallback((content: string \| undefined, removedInlineImages?: Record<string, string>[]) => {\n removedInlineImages?.forEach((removedInlineImage: Record<string, string>) => {\n onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);\n });\n setText(content);\n }, [setText, onRemoveInlineImage, message.messageId]);\n const getContent = (): JSX.Element => {\n return <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} attachmentUploadsPendingError={attachmentUploadsPendingError} attachmentProgressError={imageUploadErrorMessage ? {\n message: imageUploadErrorMessage,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.error\n } : undefined} />\n <RichTextInputBoxComponent placeholderText={strings.editBoxPlaceholderText} onChange={onChangeHandler} editorComponentRef={editTextFieldRef} initialContent={initialContent} strings={richTextLocaleStrings} disabled={false} actionComponents={actionButtons} richTextEditorStyleProps={editBoxRichTextEditorStyle} isHorizontalLayoutDisabled={true} onRenderAttachmentUploads={onRenderAttachmentUploads} onPaste={onPaste} onInsertInlineImage={onInsertInlineImage ? (imageAttributes: Record<string, string>) => {\n onInsertInlineImage(imageAttributes, message.messageId);\n } : undefined} />\n </Stack>;\n };\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return <ChatMyMessage attached={attached} root={{\n className: mergeClasses(chatMyMessageStyles.root, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined)\n }} body={{\n className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)\n }}>\n {getContent()}\n </ChatMyMessage>;\n};\nexport default ChatMessageComponentAsRichTextEditBox;"]}
1	+ {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { 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';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n hasIncompleteAttachmentUploads,\n removeBrokenImageContentAndClearImageSizeStyles,\n getContentWithUpdatedInlineImagesInfo,\n isMessageTooLong\n} from '../../utils/SendBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport {\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { SendBoxErrorBarError, SendBoxErrorBarType } from '../../SendBoxErrorBar';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';\n\n/* @private /\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(file-sharing-acs) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const {\n onCancel,\n onSubmit,\n strings,\n message,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage\n } = props;\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [initialInlineImages, setInitialInlineImages] = useState<Record<string, string>[]>([]);\n\n const initialContent = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const content = message.content;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setInitialInlineImages(getPreviousInlineImages(content));\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n // The broken image element is a div element with all the attributes of the original image element.\n // We need to convert it to a img element so the Rooster knows how to render it.\n // And we need to copy over all the attributes such as id, width, etc.\n // which is needed for sending the message with the images correctly.\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n document.querySelectorAll('.broken-image-wrapper').forEach((brokenImage) => {\n const imageElement = document.createElement('img');\n const attributes = brokenImage.attributes;\n for (const attribute of attributes) {\n imageElement.setAttribute(attribute.name, attribute.value);\n }\n\n imageElement.src = BROKEN_IMAGE_SVG_DATA;\n imageElement.style.width = '3rem';\n imageElement.style.height = '3rem';\n brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n });\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n return document.body.innerHTML;\n return message.content;\n }, [message]);\n\n const [textValue, setTextValue] = useState<string>(initialContent \|\| '');\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(\n undefined\n );\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = useMemo(() => {\n return getMessageState(textValue, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata ?? []);\n }, [/ @conditional-compile-remove(file-sharing-acs) / attachmentMetadata, textValue]);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const imageUploadErrorMessage = useMemo(() => {\n return inlineImagesWithProgress?.filter((image) => image.error).pop()?.error?.message;\n }, [inlineImagesWithProgress]);\n\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n const setText = useCallback((newValue?: string): void => {\n setTextValue(newValue ?? '');\n }, []);\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const textTooLongMessage = useMemo(() => {\n return messageState === 'too long' \|\|\n / @conditional-compile-remove(rich-text-editor-image-upload) / contentValueWithInlineImagesOverflow\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n }, [\n messageState,\n strings.editBoxTextLimit,\n / @conditional-compile-remove(rich-text-editor-image-upload) / contentValueWithInlineImagesOverflow\n ]);\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n / @conditional-compile-remove(file-sharing-acs) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message);\n }, [message]);\n\n const onSubmitHandler = useCallback((): void => {\n if (!submitEnabled) {\n return;\n }\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(\n textValue,\n inlineImagesWithProgress\n );\n const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n // Set contentValueWithInlineImagesOverflow state to display the error bar\n setContentValueWithInlineImagesOverflow(messageTooLong);\n // The change from the setContentValueOverflow in the previous line will not kick in yet.\n // We need to rely on the local value of messageTooLong to return early if the message is too long.\n if (messageTooLong) {\n return;\n }\n }\n\n // Don't send message until all attachments have been uploaded successfully\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setAttachmentUploadsPendingError(undefined);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (hasIncompleteAttachmentUploads(inlineImagesWithProgress)) {\n setAttachmentUploadsPendingError({\n message: strings.imageUploadsPendingError,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.info\n });\n return;\n }\n\n let content = textValue;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n content = removeBrokenImageContentAndClearImageSizeStyles(content);\n let initInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n initInlineImages = initialInlineImages ?? [];\n modifyInlineImagesInContentString(content, initInlineImages, (content: string) => {\n // it's very important to pass an empty attachment here\n // so when user removes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n onSubmit(content, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata \|\| []);\n });\n }, [\n submitEnabled,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n initialInlineImages,\n textValue,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n strings.imageUploadsPendingError,\n onSubmit,\n / @conditional-compile-remove(file-sharing-acs) /\n attachmentMetadata\n ]);\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId={strings.editBoxCancelButton}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n onSubmitHandler();\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId={strings.editBoxSubmitButton}\n />\n </Stack>\n );\n }, [\n message.messageId,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n onSubmitHandler\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return { ...locale.richTextSendBox, ...strings };\n return locale.sendBox;\n }, [\n / @conditional-compile-remove(rich-text-editor) / locale.richTextSendBox,\n / @conditional-compile-remove(rich-text-editor) / strings,\n locale.sendBox\n ]);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id: attachmentId });\n }, []);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n const onChangeHandler = useCallback(\n (\n content: string \| undefined,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages?: Record<string, string>[]\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages?.forEach((removedInlineImage: Record<string, string>) => {\n onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);\n });\n setText(content);\n },\n [\n setText,\n / @conditional-compile-remove(rich-text-editor-image-upload) / onRemoveInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) / message.messageId\n ]\n );\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors\n textTooLongMessage={textTooLongMessage}\n systemMessage={message.failureReason}\n / @conditional-compile-remove(rich-text-editor-image-upload) / attachmentUploadsPendingError={\n attachmentUploadsPendingError\n }\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n attachmentProgressError={\n imageUploadErrorMessage\n ? {\n message: imageUploadErrorMessage,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.error\n }\n : undefined\n }\n />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={onChangeHandler}\n onEnterKeyDown={onSubmitHandler}\n editorComponentRef={editTextFieldRef}\n initialContent={initialContent}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={\n onInsertInlineImage\n ? (imageAttributes: Record<string, string>) => {\n onInsertInlineImage(imageAttributes, message.messageId);\n }\n : undefined\n }\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n / @conditional-compile-remove(file-sharing-acs) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n\nexport default ChatMessageComponentAsRichTextEditBox;\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ import { InlineImageOptions } from '../ChatMessageContent';
  * Props for the ChatMyMessageComponent component.
  */
 export type ChatMyMessageComponentProps = {
-    message: ChatMessage | BlockedMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     userId: string;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.js CHANGED Viewed

@@ -12,6 +12,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React, { useCallback, useState } from 'react';
 import { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';
 import { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';
 /**
  * @private
@@ -35,34 +36,68 @@ export const ChatMyMessageComponent = (props) => {
     const onResendClick = useCallback(() => {
         onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
         let newContent = content !== null && content !== void 0 ? content : '';
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
         newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);
-        onSendMessage && onSendMessage(newContent, {
-            attachments: `attachments` in message ? message.attachments : undefined,
-            type: props.isRichTextEditorEnabled ? 'html' : 'text'
-        });
-    }, [message, onDeleteMessage, clientMessageId, onSendMessage, content, props.isRichTextEditorEnabled]);
+        onSendMessage &&
+            onSendMessage(newContent,
+            /* @conditional-compile-remove(file-sharing-acs) */
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            {
+                /* @conditional-compile-remove(file-sharing-acs) */ attachments: `attachments` in message ? message.attachments : undefined,
+                /* @conditional-compile-remove(rich-text-editor) */
+                type: props.isRichTextEditorEnabled ? 'html' : 'text'
+            });
+    }, [
+        message,
+        onDeleteMessage,
+        clientMessageId,
+        onSendMessage,
+        content,
+        /* @conditional-compile-remove(rich-text-editor) */ props.isRichTextEditorEnabled
+    ]);
     const onSubmitHandler = useCallback(
     // due to a bug in babel, we can't use arrow function here
     // affecting conditional-compile-remove(attachment-upload)
-    function (text, attachments) {
+    function (text,
+    /* @conditional-compile-remove(file-sharing-acs) */
+    attachments) {
         return __awaiter(this, void 0, void 0, function* () {
+            /* @conditional-compile-remove(file-sharing-acs) */
             if (`attachments` in message && attachments) {
                 message.attachments = attachments;
             }
-            props.onUpdateMessage && message.messageId && (yield props.onUpdateMessage(message.messageId, text, {
-                attachments: attachments
-            }));
+            props.onUpdateMessage &&
+                message.messageId &&
+                (yield props.onUpdateMessage(message.messageId, text,
+                /* @conditional-compile-remove(file-sharing-acs) */
+                { attachments: attachments }));
             setIsEditing(false);
         });
     }, [message, props]);
     if (isEditing && message.messageType === 'chat') {
-        return React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: onSubmitHandler, onCancel: messageId => {
+        return (React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: onSubmitHandler, onCancel: (messageId) => {
                 props.onCancelEditMessage && props.onCancelEditMessage(messageId);
                 setIsEditing(false);
-            }, mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions, isRichTextEditorEnabled: props.isRichTextEditorEnabled, onPaste: props.onPaste, onInsertInlineImage: props.onInsertInlineImage, inlineImagesWithProgress: props.inlineImagesWithProgress, onRemoveInlineImage: props.onRemoveInlineImage });
+            },
+            /* @conditional-compile-remove(mention) */
+            mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions,
+            /* @conditional-compile-remove(rich-text-editor) */
+            isRichTextEditorEnabled: props.isRichTextEditorEnabled,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onPaste: props.onPaste,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onInsertInlineImage: props.onInsertInlineImage,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            inlineImagesWithProgress: props.inlineImagesWithProgress,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onRemoveInlineImage: props.onRemoveInlineImage }));
     }
     else {
-        return React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, inlineImageOptions: props.inlineImageOptions, mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions }));
+        return (React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar,
+            /* @conditional-compile-remove(date-time-customization) */
+            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, inlineImageOptions: props.inlineImageOptions,
+            /* @conditional-compile-remove(mention) */
+            mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
     }
 };
 //# sourceMappingURL=ChatMyMessageComponent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { MessageThreadStrings, UpdateMessageCallback } from '../../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\nimport { BlockedMessage } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { MessageOptions } from '@internal/acs-ui-common';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { MentionOptions } from '../../MentionPopover';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\nimport { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';\n\n/*\n Props for the ChatMyMessageComponent component.\n /\nexport type ChatMyMessageComponentProps = {\n message: ChatMessage \| BlockedMessage;\n userId: string;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onUpdateMessage?: UpdateMessageCallback;\n onCancelEditMessage?: (messageId: string) => void;\n /\n Callback to delete a message. Also called before resending a message that failed to send.\n * @param messageId ID of the message to delete\n /\n onDeleteMessage?: (messageId: string) => Promise<void>;\n /\n Callback to send a message\n * @param content The message content to send\n /\n onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;\n strings: MessageThreadStrings;\n messageStatus?: string;\n /\n Optional text to display when the message status is 'failed'.\n /\n failureReason?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\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 Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n /\n Optional props needed to lookup suggestions and display mentions in the mention scenario.\n * @beta\n /\n mentionOptions?: MentionOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n /\n Optional callback to render message attachments in the message component.\n * @beta\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /\n Optional callback to define custom actions for attachments.\n * @beta\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n isRichTextEditorEnabled?: boolean;\n onPaste?: (event: {\n content: DocumentFragment;\n }) => void;\n onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/\n @private\n */\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n const {\n onDeleteMessage,\n onSendMessage,\n message\n } = props;\n const [isEditing, setIsEditing] = useState(false);\n const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n const content = 'content' in message ? message.content : undefined;\n const onRemoveClick = useCallback(() => {\n if (onDeleteMessage && message.messageId) {\n onDeleteMessage(message.messageId);\n }\n // when fail to send, message does not have message id, delete message using clientMessageId\n else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n onDeleteMessage(clientMessageId);\n }\n }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n const onResendClick = useCallback(() => {\n onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n let newContent = content ?? '';\n newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);\n onSendMessage && onSendMessage(newContent, {\n attachments: `attachments` in message ? message.attachments : undefined,\n type: props.isRichTextEditorEnabled ? 'html' : 'text'\n });\n }, [message, onDeleteMessage, clientMessageId, onSendMessage, content, props.isRichTextEditorEnabled]);\n const onSubmitHandler = useCallback(\n // due to a bug in babel, we can't use arrow function here\n // affecting conditional-compile-remove(attachment-upload)\n async function (text: string, attachments?: AttachmentMetadata[] \| undefined) {\n if (`attachments` in message && attachments) {\n message.attachments = attachments;\n }\n props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text, {\n attachments: attachments\n }));\n setIsEditing(false);\n }, [message, props]);\n if (isEditing && message.messageType === 'chat') {\n return <ChatMessageComponentAsEditBoxPicker message={message} strings={props.strings} onSubmit={onSubmitHandler} onCancel={messageId => {\n props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n setIsEditing(false);\n }} mentionLookupOptions={props.mentionOptions?.lookupOptions} isRichTextEditorEnabled={props.isRichTextEditorEnabled} onPaste={props.onPaste} onInsertInlineImage={props.onInsertInlineImage} inlineImagesWithProgress={props.inlineImagesWithProgress} onRemoveInlineImage={props.onRemoveInlineImage} />;\n } else {\n return <ChatMyMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar} onDisplayDateTimeString={props.onDisplayDateTimeString} strings={props.strings} inlineImageOptions={props.inlineImageOptions} mentionDisplayOptions={props.mentionOptions?.displayOptions} />;\n }\n};"]}
1	+ {"version":3,"file":"ChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { MessageThreadStrings, UpdateMessageCallback } from '../../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { MessageOptions } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(mention) /\nimport { MentionOptions } from '../../MentionPopover';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';\n\n/\n Props for the ChatMyMessageComponent component.\n /\nexport type ChatMyMessageComponentProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n userId: string;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onUpdateMessage?: UpdateMessageCallback;\n onCancelEditMessage?: (messageId: string) => void;\n /\n Callback to delete a message. Also called before resending a message that failed to send.\n * @param messageId ID of the message to delete\n /\n onDeleteMessage?: (messageId: string) => Promise<void>;\n /\n Callback to send a message\n * @param content The message content to send\n /\n onSendMessage?: (\n content: string,\n / @conditional-compile-remove(file-sharing-acs) /\n options?: MessageOptions\n ) => Promise<void>;\n strings: MessageThreadStrings;\n messageStatus?: string;\n /\n Optional text to display when the message status is 'failed'.\n /\n failureReason?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\n remoteParticipantsCount?: number;\n onActionButtonClick: (\n message: ChatMessage,\n setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n ) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n / @conditional-compile-remove(date-time-customization) /\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 lookup suggestions and display mentions in the mention scenario.\n * @beta\n /\n mentionOptions?: MentionOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n /\n Optional callback to render message attachments in the message component.\n * @beta\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /\n Optional callback to define custom actions for attachments.\n * @beta\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n / @conditional-compile-remove(rich-text-editor) /\n isRichTextEditorEnabled?: boolean;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/\n @private\n /\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n const { onDeleteMessage, onSendMessage, message } = props;\n const [isEditing, setIsEditing] = useState(false);\n\n const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n const content = 'content' in message ? message.content : undefined;\n const onRemoveClick = useCallback(() => {\n if (onDeleteMessage && message.messageId) {\n onDeleteMessage(message.messageId);\n }\n // when fail to send, message does not have message id, delete message using clientMessageId\n else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n onDeleteMessage(clientMessageId);\n }\n }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n\n const onResendClick = useCallback(() => {\n onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n let newContent = content ?? '';\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);\n onSendMessage &&\n onSendMessage(\n newContent,\n / @conditional-compile-remove(file-sharing-acs) /\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n {\n / @conditional-compile-remove(file-sharing-acs) / attachments:\n `attachments` in message ? message.attachments : undefined,\n / @conditional-compile-remove(rich-text-editor) /\n type: props.isRichTextEditorEnabled ? 'html' : 'text'\n }\n );\n }, [\n message,\n onDeleteMessage,\n clientMessageId,\n onSendMessage,\n content,\n / @conditional-compile-remove(rich-text-editor) / props.isRichTextEditorEnabled\n ]);\n\n const onSubmitHandler = useCallback(\n // due to a bug in babel, we can't use arrow function here\n // affecting conditional-compile-remove(attachment-upload)\n async function (\n text: string,\n / @conditional-compile-remove(file-sharing-acs) /\n attachments?: AttachmentMetadata[] \| undefined\n ) {\n / @conditional-compile-remove(file-sharing-acs) /\n if (`attachments` in message && attachments) {\n message.attachments = attachments;\n }\n props.onUpdateMessage &&\n message.messageId &&\n (await props.onUpdateMessage(\n message.messageId,\n text,\n / @conditional-compile-remove(file-sharing-acs) /\n { attachments: attachments }\n ));\n setIsEditing(false);\n },\n [message, props]\n );\n if (isEditing && message.messageType === 'chat') {\n return (\n <ChatMessageComponentAsEditBoxPicker\n message={message}\n strings={props.strings}\n onSubmit={onSubmitHandler}\n onCancel={(messageId) => {\n props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n setIsEditing(false);\n }}\n / @conditional-compile-remove(mention) /\n mentionLookupOptions={props.mentionOptions?.lookupOptions}\n / @conditional-compile-remove(rich-text-editor) /\n isRichTextEditorEnabled={props.isRichTextEditorEnabled}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={props.onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={props.onInsertInlineImage}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress={props.inlineImagesWithProgress}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage={props.onRemoveInlineImage}\n />\n );\n } else {\n return (\n <ChatMyMessageComponentAsMessageBubble\n {...props}\n onRemoveClick={onRemoveClick}\n onEditClick={onEditClick}\n onResendClick={onResendClick}\n onRenderAvatar={props.onRenderAvatar}\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString={props.onDisplayDateTimeString}\n strings={props.strings}\n inlineImageOptions={props.inlineImageOptions}\n / @conditional-compile-remove(mention) */\n mentionDisplayOptions={props.mentionOptions?.displayOptions}\n />\n );\n }\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import { AttachmentMenuAction } from '../../../types/Attachment';
 import { AttachmentMetadata } from "../../../../../acs-ui-common/src";
 import { MentionDisplayOptions } from '../../MentionPopover';
 type ChatMyMessageComponentAsMessageBubbleProps = {
-    message: ChatMessage | BlockedMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
     disableEditing?: boolean;

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js CHANGED Viewed

@@ -13,6 +13,7 @@ import { createStyleFromV8Style } from '../../styles/v8StyleShim';
 import { mergeClasses } from '@fluentui/react-components';
 import { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';
 import { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';
+/* @conditional-compile-remove(file-sharing-acs) */
 import { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /** @private */
 const MessageBubble = (props) => {
@@ -20,10 +21,16 @@ 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, inlineImageOptions, mentionDisplayOptions, onDisplayDateTimeString, onRenderAttachmentDownloads, actionsForAttachment } = props;
+    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, inlineImageOptions,
+    /* @conditional-compile-remove(mention) */
+    mentionDisplayOptions, onDisplayDateTimeString, onRenderAttachmentDownloads, actionsForAttachment } = props;
     const formattedTimestamp = useMemo(() => {
-        const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
-        const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';
+        const defaultTimeStamp = message.createdOn
+            ? generateDefaultTimestamp(message.createdOn, showDate, strings)
+            : undefined;
+        const customTimestamp = message.createdOn
+            ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)
+            : '';
         return customTimestamp || defaultTimeStamp;
     }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);
     // Track if the action menu was opened by touch - if so we increase the touch targets for the items
@@ -36,7 +43,10 @@ const MessageBubble = (props) => {
     const messageRef = useRef(null);
     const messageActionButtonRef = useRef(null);
     const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
-    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && message.messageType !== 'blocked';
+    const chatActionsEnabled = !disableEditing &&
+        message.status !== 'sending' &&
+        !!message.mine &&
+        /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
     const [messageReadBy, setMessageReadBy] = useState([]);
     const actionMenuProps = chatMessageActionMenuProps({
         ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
@@ -56,6 +66,7 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
+    /* @conditional-compile-remove(file-sharing-acs) */
     const hasMultipleAttachments = useMemo(() => {
         return doesMessageContainMultipleAttachments(message);
     }, [message]);
@@ -68,22 +79,42 @@ const MessageBubble = (props) => {
         }
     }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     const getContent = useCallback(() => {
-        return getMessageBubbleContent(message, strings, userId, inlineImageOptions, mentionDisplayOptions, onRenderAttachmentDownloads, actionsForAttachment);
-    }, [actionsForAttachment, inlineImageOptions, mentionDisplayOptions, message, onRenderAttachmentDownloads, strings, userId]);
-    const isBlockedMessage = false || message.messageType === 'blocked';
+        return getMessageBubbleContent(message, strings, userId, inlineImageOptions,
+        /* @conditional-compile-remove(mention) */
+        mentionDisplayOptions, onRenderAttachmentDownloads, actionsForAttachment);
+    }, [
+        actionsForAttachment,
+        inlineImageOptions,
+        /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
+        message,
+        onRenderAttachmentDownloads,
+        strings,
+        userId
+    ]);
+    const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
-    const chatMessage = React.createElement(React.Fragment, null,
+    const chatMessage = (React.createElement(React.Fragment, null,
         React.createElement("div", { key: props.message.messageId },
             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(chatMessageCommonStyles.body, chatMyMessageStyles.body, chatMessageCommonStyles.bodyWithPlaceholderImage, chatMyMessageStyles.bodyWithPlaceholderImage, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined, mergeStyles(messageContainerStyle)),
+                    className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body,
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    chatMessageCommonStyles.bodyWithPlaceholderImage,
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    chatMyMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
+                        ? chatMessageCommonStyles.blocked
+                        : props.message.status === 'failed'
+                            ? chatMessageCommonStyles.failed
+                            : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,
+                    /* @conditional-compile-remove(file-sharing-acs) */
+                    hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined, mergeStyles(messageContainerStyle)),
                     style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
                     ref: messageRef
                 }, root: {
                     className: chatMyMessageStyles.root,
-                    onBlur: e => {
+                    onBlur: (e) => {
                         // `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) {
@@ -102,7 +133,9 @@ const MessageBubble = (props) => {
                     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
-                    focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
+                    focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
+                        ? chatMyMessageStyles.menuVisible
+                        : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
                 }, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => {
                     if (!wasInteractionByTouch) {
                         return;
@@ -117,7 +150,7 @@ const MessageBubble = (props) => {
                         props.onActionButtonClick(message, setMessageReadBy);
                     }
                 } }, getContent())),
-        chatActionsEnabled && React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }));
+        chatActionsEnabled && (React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }))));
     return chatMessage;
 };
 /** @private */

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageDateFailedStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\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 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 /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/* @private /\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): 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 inlineImageOptions,\n mentionDisplayOptions,\n onDisplayDateTimeString,\n onRenderAttachmentDownloads,\n actionsForAttachment\n } = props;\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\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 && 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 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 hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message as ChatMessage);\n }, [message]);\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }\n }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n const getContent = useCallback(() => {\n return getMessageBubbleContent(message, strings, userId, inlineImageOptions, mentionDisplayOptions, onRenderAttachmentDownloads, actionsForAttachment);\n }, [actionsForAttachment, inlineImageOptions, mentionDisplayOptions, message, onRenderAttachmentDownloads, strings, userId]);\n const isBlockedMessage = false \|\| message.messageType === 'blocked';\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = <>\n <div key={props.message.messageId}>\n <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(chatMessageCommonStyles.body, chatMyMessageStyles.body, chatMessageCommonStyles.bodyWithPlaceholderImage, chatMyMessageStyles.bodyWithPlaceholderImage, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : 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 }} data-testid=\"chat-composite-message\" author={<Text className={chatMessageDateStyle(theme)}>{message.senderDisplayName}</Text>} timestamp={<Text className={props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme)} data-ui-id={ids.messageTimestamp}>\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>\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 ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);"]}
1	+ {"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport {\n chatMessageDateStyle,\n chatMessageFailedTagStyle,\n chatMessageDateFailedStyle\n} from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\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 { AttachmentMenuAction } from '../../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n generateCustomizedTimestamp,\n generateDefaultTimestamp,\n getMessageBubbleContent,\n getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\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 remoteParticipantsCount?: number;\n onActionButtonClick: (\n message: ChatMessage,\n setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n ) => 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 /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/* @private /\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n\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 inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onDisplayDateTimeString,\n onRenderAttachmentDownloads,\n actionsForAttachment\n } = props;\n\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn\n ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n : '';\n\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\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<\n React.MutableRefObject<HTMLElement \| null> \| undefined\n >(undefined);\n\n const chatActionsEnabled =\n !disableEditing &&\n message.status !== 'sending' &&\n !!message.mine &&\n / @conditional-compile-remove(data-loss-prevention) / message.messageType !== 'blocked';\n const [messageReadBy, setMessageReadBy] = useState<{ id: string; 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\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\n / @conditional-compile-remove(file-sharing-acs) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message as ChatMessage);\n }, [message]);\n\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }\n }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n const getContent = useCallback(() => {\n return getMessageBubbleContent(\n message,\n strings,\n userId,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onRenderAttachmentDownloads,\n actionsForAttachment\n );\n }, [\n actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n onRenderAttachmentDownloads,\n strings,\n userId\n ]);\n\n const isBlockedMessage =\n false \|\| / @conditional-compile-remove(data-loss-prevention) / message.messageType === 'blocked';\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n <ChatMyMessage\n attached={attached}\n key={props.message.messageId}\n body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(\n chatMessageCommonStyles.body,\n chatMyMessageStyles.body,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n chatMessageCommonStyles.bodyWithPlaceholderImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n chatMyMessageStyles.bodyWithPlaceholderImage,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n / @conditional-compile-remove(file-sharing-acs) /\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined,\n mergeStyles(messageContainerStyle)\n ),\n style: { ...createStyleFromV8Style(messageContainerStyle) },\n ref: messageRef\n }}\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 }}\n data-testid=\"chat-composite-message\"\n author={<Text className={chatMessageDateStyle(theme)}>{message.senderDisplayName}</Text>}\n timestamp={\n <Text\n className={\n props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme)\n }\n data-ui-id={ids.messageTimestamp}\n >\n {formattedTimestamp}\n </Text>\n }\n details={getMessageDetails()}\n actions={{\n children: actionMenuProps?.children,\n className: mergeClasses(\n chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused \|\| chatMessageActionFlyoutTarget?.current\n ? chatMyMessageStyles.menuVisible\n : chatMyMessageStyles.menuHidden,\n attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n )\n }}\n onTouchStart={() => setWasInteractionByTouch(true)}\n onPointerDown={() => setWasInteractionByTouch(false)}\n onKeyDown={() => setWasInteractionByTouch(false)}\n 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 >\n {getContent()}\n </ChatMyMessage>\n </div>\n {chatActionsEnabled && (\n <ChatMessageActionFlyout\n hidden={!chatMessageActionFlyoutTarget}\n target={chatMessageActionFlyoutTarget}\n increaseFlyoutItemSize={wasInteractionByTouch}\n onDismiss={onActionFlyoutDismiss}\n onEditClick={onEditClick}\n onRemoveClick={onRemoveClick}\n onResendClick={onResendClick}\n strings={strings}\n messageReadBy={messageReadBy}\n messageStatus={messageStatus ?? 'failed'}\n remoteParticipantsCount={remoteParticipantsCount}\n onRenderAvatar={onRenderAvatar}\n showMessageStatus={showMessageStatus}\n />\n )}\n </>\n );\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}