npm - @azure/communication-react - Versions diffs - 1.10.1-alpha-202312010014 → 1.11.0-alpha-202312030013 - Mend

@azure/communication-react 1.10.1-alpha-202312010014 → 1.11.0-alpha-202312030013

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 (53) hide show

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

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

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

@@ -1,7 +1,7 @@
 import { IStyle } from '@fluentui/react';
 import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
-import { FileMetadata } from '../FileDownloadCards';
+import { AttachmentMetadata } from '../FileDownloadCards';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
 import { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
@@ -62,7 +62,7 @@ declare type ChatMessageComponentAsMessageBubbleProps = {
     /**
      * Optional function to fetch attachments.
      */
-    onFetchAttachments?: (attachment: FileMetadata[], messageId: string) => Promise<void>;
+    onFetchAttachments?: (attachment: AttachmentMetadata[], messageId: string) => Promise<void>;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta

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

@@ -89,13 +89,18 @@ 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 } })), [
+    const defaultOnRenderFileDownloads = useCallback(() => {
+        return (React.createElement(_FileDownloadCards, { userId: userId,
+            /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+            fileMetadata: message.files || [], 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,
         /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
         strings,
+        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
         fileDownloadHandler
     ]);
     const editedOn = 'editedOn' in message ? message.editedOn : undefined;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../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 {\n chatMessageEditedTagStyle,\n chatMessageDateStyle,\n chatMessageFailedTagStyle,\n chatMessageAuthorStyle\n} 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 {\n useChatMessageStyles,\n useChatMyMessageStyles,\n useChatMessageCommonStyles\n} from '../styles/MessageThread.styles';\n\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: (\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 / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n /\n Optional function to fetch attachments.\n /\n onFetchAttachments?: (attachment: FileMetadata[], messageId: string) => 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};\n\nconst generateDefaultTimestamp = (\n createdOn: Date,\n showDate: boolean \| undefined,\n strings: MessageThreadStrings\n): string => {\n const formattedTimestamp = showDate\n ? formatTimestampForChatMessage(createdOn, new Date(), strings)\n : formatTimeForChatMessage(createdOn);\n\n return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (\n props: ChatMessageComponentAsMessageBubbleProps,\n createdOn: Date,\n locale: ComponentLocale\n): string => {\n / @conditional-compile-remove(date-time-customization) /\n return props.onDisplayDateTimeString\n ? props.onDisplayDateTimeString(createdOn)\n : locale.onDisplayDateTimeString\n ? locale.onDisplayDateTimeString(createdOn)\n : '';\n\n return '';\n};\n/* @private /\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): 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 fileDownloadHandler,\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked,\n shouldOverlapAvatarAndMessage\n } = props;\n\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n\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<\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 const defaultOnRenderFileDownloads = useCallback(\n () => (\n <_FileDownloadCards\n userId={userId}\n fileMetadata={message['attachedFilesMetadata'] \|\| []}\n downloadHandler={fileDownloadHandler}\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/\n strings={{ downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage }}\n />\n ),\n [\n userId,\n message,\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/\n strings,\n fileDownloadHandler\n ]\n );\n\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(\n async (attachmentId: string): Promise<void> => {\n if (onInlineImageClicked === undefined) {\n return;\n }\n await onInlineImageClicked(attachmentId, message.messageId);\n },\n [message, onInlineImageClicked]\n );\n\n const getContent = useCallback(() => {\n / @conditional-compile-remove(data-loss-prevention) /\n if (message.messageType === 'blocked') {\n return (\n <div tabIndex={0}>\n <BlockedMessageContent message={message} strings={strings} />\n </div>\n );\n }\n return (\n <div tabIndex={0} className=\"ui-chat__message__content\">\n <ChatMessageContent\n message={message}\n strings={strings}\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchAttachments={props.onFetchAttachments}\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n attachmentsMap={props.attachmentsMap}\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions={props.mentionDisplayOptions}\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked={handleOnInlineImageClicked}\n />\n {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n </div>\n );\n }, [\n defaultOnRenderFileDownloads,\n message,\n props,\n strings,\n userId,\n / @conditional-compile-remove(image-gallery) /\n handleOnInlineImageClicked\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 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,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap,\n message.attached === 'top' \|\| message.attached === false\n ? chatMessageStyles.bodyWithAvatar\n : chatMessageStyles.bodyWithoutAvatar,\n mergeStyles(messageContainerStyle)\n );\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n {message.mine ? (\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 chatMyMessageStyles.body,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n attached !== 'top' ? chatMyMessageStyles.bodyAttached : 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 // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n role: 'none',\n tabIndex: -1\n }}\n data-ui-id=\"chat-composite-message\"\n author={\n <Text className={chatMessageDateStyle} tabIndex={0}>\n {message.senderDisplayName}\n </Text>\n }\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\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 ) : (\n <FluentChatMessage\n attached={attached}\n key={props.message.messageId}\n 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 }}\n author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>}\n body={{\n className: chatItemMessageContainerClassName,\n style: { ...createStyleFromV8Style(messageContainerStyle) }\n }}\n data-ui-id=\"chat-composite-message\"\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>\n }\n >\n {getContent()}\n </FluentChatMessage>\n )}\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 ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../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 {\n chatMessageEditedTagStyle,\n chatMessageDateStyle,\n chatMessageFailedTagStyle,\n chatMessageAuthorStyle\n} 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 { AttachmentMetadata } 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 {\n useChatMessageStyles,\n useChatMyMessageStyles,\n useChatMessageCommonStyles\n} from '../styles/MessageThread.styles';\n\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: (\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 / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n /\n Optional function to fetch attachments.\n /\n onFetchAttachments?: (attachment: AttachmentMetadata[], messageId: string) => 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};\n\nconst generateDefaultTimestamp = (\n createdOn: Date,\n showDate: boolean \| undefined,\n strings: MessageThreadStrings\n): string => {\n const formattedTimestamp = showDate\n ? formatTimestampForChatMessage(createdOn, new Date(), strings)\n : formatTimeForChatMessage(createdOn);\n\n return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (\n props: ChatMessageComponentAsMessageBubbleProps,\n createdOn: Date,\n locale: ComponentLocale\n): string => {\n / @conditional-compile-remove(date-time-customization) /\n return props.onDisplayDateTimeString\n ? props.onDisplayDateTimeString(createdOn)\n : locale.onDisplayDateTimeString\n ? locale.onDisplayDateTimeString(createdOn)\n : '';\n\n return '';\n};\n/* @private /\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): 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 fileDownloadHandler,\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked,\n shouldOverlapAvatarAndMessage\n } = props;\n\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n\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<\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 const defaultOnRenderFileDownloads = useCallback(() => {\n return (\n <_FileDownloadCards\n userId={userId}\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/\n fileMetadata={(message as ChatMessage).files \|\| []}\n downloadHandler={fileDownloadHandler}\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/\n strings={{ downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage }}\n />\n );\n }, [\n userId,\n message,\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/\n strings,\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/\n fileDownloadHandler\n ]);\n\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(\n async (attachmentId: string): Promise<void> => {\n if (onInlineImageClicked === undefined) {\n return;\n }\n await onInlineImageClicked(attachmentId, message.messageId);\n },\n [message, onInlineImageClicked]\n );\n\n const getContent = useCallback(() => {\n / @conditional-compile-remove(data-loss-prevention) /\n if (message.messageType === 'blocked') {\n return (\n <div tabIndex={0}>\n <BlockedMessageContent message={message} strings={strings} />\n </div>\n );\n }\n return (\n <div tabIndex={0} className=\"ui-chat__message__content\">\n <ChatMessageContent\n message={message}\n strings={strings}\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchAttachments={props.onFetchAttachments}\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n attachmentsMap={props.attachmentsMap}\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions={props.mentionDisplayOptions}\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked={handleOnInlineImageClicked}\n />\n {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n </div>\n );\n }, [\n defaultOnRenderFileDownloads,\n message,\n props,\n strings,\n userId,\n / @conditional-compile-remove(image-gallery) /\n handleOnInlineImageClicked\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 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,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap,\n message.attached === 'top' \|\| message.attached === false\n ? chatMessageStyles.bodyWithAvatar\n : chatMessageStyles.bodyWithoutAvatar,\n mergeStyles(messageContainerStyle)\n );\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n {message.mine ? (\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 chatMyMessageStyles.body,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n attached !== 'top' ? chatMyMessageStyles.bodyAttached : 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 // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n role: 'none',\n tabIndex: -1\n }}\n data-ui-id=\"chat-composite-message\"\n author={\n <Text className={chatMessageDateStyle} tabIndex={0}>\n {message.senderDisplayName}\n </Text>\n }\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\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 ) : (\n <FluentChatMessage\n attached={attached}\n key={props.message.messageId}\n 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 }}\n author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>}\n body={{\n className: chatItemMessageContainerClassName,\n style: { ...createStyleFromV8Style(messageContainerStyle) }\n }}\n data-ui-id=\"chat-composite-message\"\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>\n }\n >\n {getContent()}\n </FluentChatMessage>\n )}\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 ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n\"../../../../acs-ui-common/src\""]}

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

@@ -3,7 +3,7 @@ import { MessageStatus } from "../../../../acs-ui-common/src";
 import { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';
 import { ChatMessage, OnRenderAvatarCallback } from '../../types';
 import { BlockedMessage } from '../../types';
-import { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';
+import { FileDownloadHandler, AttachmentMetadata } from '../FileDownloadCards';
 import { MentionOptions } from '../MentionPopover';
 import { MessageStatusIndicatorProps } from '../MessageStatusIndicator';
 /**
@@ -32,7 +32,7 @@ export declare type ChatMessageComponentWrapperProps = _ChatMessageProps & {
     }[]) => void) => void;
     fileDownloadHandler?: FileDownloadHandler;
     onDisplayDateTimeString?: (messageDate: Date) => string;
-    onFetchInlineAttachment: (attachments: FileMetadata[], messageId: string) => Promise<void>;
+    onFetchInlineAttachment: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;
     onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
     inlineAttachments: Record<string, Record<string, string>>;
     mentionOptions?: MentionOptions;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types';\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { FileDownloadHandler, ~~FileMetadata~~ } from '../FileDownloadCards';\n/ @conditional-compile-remove(mention) /\nimport { MentionOptions } from '../MentionPopover';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapper } from './FluentChatMessageComponentWrapper';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\n\n/\n Props for {@link ChatMessageComponentWrapper}\n \n @private\n /\nexport type ChatMessageComponentWrapperProps = _ChatMessageProps & {\n /\n UserId of the current user.\n /\n userId: string;\n styles: MessageThreadStyles \| undefined;\n shouldOverlapAvatarAndMessage: boolean;\n onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element \| null) \| undefined;\n defaultStatusRenderer: (\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage,\n participantCount: number,\n readCount: number,\n status?: MessageStatus\n ) => JSX.Element;\n onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMessageStatus?: boolean;\n participantCount?: number;\n readCount?: number;\n / @conditional-compile-remove(file-sharing) /\n onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n onActionButtonClick: (\n message: ChatMessage,\n setMessageReadBy: (\n readBy: {\n id: string;\n displayName: string;\n }[]\n ) => void\n ) => void;\n / @conditional-compile-remove(file-sharing) /\n fileDownloadHandler?: FileDownloadHandler;\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchInlineAttachment: (attachments: ~~FileMetadata~~[], messageId: string) => Promise<void>;\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n inlineAttachments: Record<string, Record<string, string>>;\n / @conditional-compile-remove(mention) /\n mentionOptions?: MentionOptions;\n};\n\n/\n The wrapper component to display different types of chat message.\n \n @private\n /\nexport const ChatMessageComponentWrapper = (props: ChatMessageComponentWrapperProps): JSX.Element => {\n const { message, styles, onRenderMessage, key: messageKey } = props;\n\n const systemMessageStyle = useMemo(() => {\n return {\n paddingTop: '0.5rem'\n };\n }, []);\n\n const customMessageStyle = useMemo(() => {\n return { paddingTop: '1rem', paddingBottom: '0.25rem' };\n }, []);\n\n / @conditional-compile-remove(data-loss-prevention) */\n // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)\n if (message.messageType === 'blocked') {\n const myChatMessageStyle =\n message.status === 'failed'\n ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n : styles?.myChatMessageContainer;\n const blockedMessageStyle = styles?.blockedMessageContainer;\n const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;\n return (\n <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n );\n }\n\n switch (message.messageType) {\n case 'chat': {\n const myChatMessageStyle =\n message.status === 'failed'\n ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n : styles?.myChatMessageContainer;\n const chatMessageStyle = styles?.chatMessageContainer;\n const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;\n return (\n <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n );\n }\n\n case 'system': {\n const messageContainerStyle = styles?.systemMessageContainer;\n const systemMessageComponent =\n onRenderMessage === undefined ? (\n <DefaultSystemMessage {...props} />\n ) : (\n onRenderMessage({ ...props, messageContainerStyle }, (props) => <DefaultSystemMessage {...props} />)\n );\n return (\n <div key={messageKey} style={systemMessageStyle}>\n {systemMessageComponent}\n </div>\n );\n }\n\n default: {\n // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.\n const customMessageComponent = onRenderMessage === undefined ? <></> : onRenderMessage({ ...props });\n return (\n <div key={messageKey} style={customMessageStyle}>\n {customMessageComponent}\n </div>\n );\n }\n }\n};\n\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types';\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { FileDownloadHandler, AttachmentMetadata } from '../FileDownloadCards';\n/ @conditional-compile-remove(mention) /\nimport { MentionOptions } from '../MentionPopover';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapper } from './FluentChatMessageComponentWrapper';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\n\n/\n Props for {@link ChatMessageComponentWrapper}\n \n @private\n /\nexport type ChatMessageComponentWrapperProps = _ChatMessageProps & {\n /\n UserId of the current user.\n /\n userId: string;\n styles: MessageThreadStyles \| undefined;\n shouldOverlapAvatarAndMessage: boolean;\n onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element \| null) \| undefined;\n defaultStatusRenderer: (\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage,\n participantCount: number,\n readCount: number,\n status?: MessageStatus\n ) => JSX.Element;\n onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMessageStatus?: boolean;\n participantCount?: number;\n readCount?: number;\n / @conditional-compile-remove(file-sharing) /\n onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n onActionButtonClick: (\n message: ChatMessage,\n setMessageReadBy: (\n readBy: {\n id: string;\n displayName: string;\n }[]\n ) => void\n ) => void;\n / @conditional-compile-remove(file-sharing) /\n fileDownloadHandler?: FileDownloadHandler;\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchInlineAttachment: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n inlineAttachments: Record<string, Record<string, string>>;\n / @conditional-compile-remove(mention) /\n mentionOptions?: MentionOptions;\n};\n\n/\n The wrapper component to display different types of chat message.\n \n @private\n /\nexport const ChatMessageComponentWrapper = (props: ChatMessageComponentWrapperProps): JSX.Element => {\n const { message, styles, onRenderMessage, key: messageKey } = props;\n\n const systemMessageStyle = useMemo(() => {\n return {\n paddingTop: '0.5rem'\n };\n }, []);\n\n const customMessageStyle = useMemo(() => {\n return { paddingTop: '1rem', paddingBottom: '0.25rem' };\n }, []);\n\n / @conditional-compile-remove(data-loss-prevention) */\n // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)\n if (message.messageType === 'blocked') {\n const myChatMessageStyle =\n message.status === 'failed'\n ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n : styles?.myChatMessageContainer;\n const blockedMessageStyle = styles?.blockedMessageContainer;\n const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;\n return (\n <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n );\n }\n\n switch (message.messageType) {\n case 'chat': {\n const myChatMessageStyle =\n message.status === 'failed'\n ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n : styles?.myChatMessageContainer;\n const chatMessageStyle = styles?.chatMessageContainer;\n const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;\n return (\n <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n );\n }\n\n case 'system': {\n const messageContainerStyle = styles?.systemMessageContainer;\n const systemMessageComponent =\n onRenderMessage === undefined ? (\n <DefaultSystemMessage {...props} />\n ) : (\n onRenderMessage({ ...props, messageContainerStyle }, (props) => <DefaultSystemMessage {...props} />)\n );\n return (\n <div key={messageKey} style={systemMessageStyle}>\n {systemMessageComponent}\n </div>\n );\n }\n\n default: {\n // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.\n const customMessageComponent = onRenderMessage === undefined ? <></> : onRenderMessage({ ...props });\n return (\n <div key={messageKey} style={customMessageStyle}>\n {customMessageComponent}\n </div>\n );\n }\n }\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -3,13 +3,13 @@ import { ChatMessage } from '../../types/ChatMessage';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MentionDisplayOptions } from '../MentionPopover';
 import { MessageThreadStrings } from '../MessageThread';
-import { FileMetadata } from '../FileDownloadCards';
+import { AttachmentMetadata } from '../FileDownloadCards';
 declare type ChatMessageContentProps = {
     message: ChatMessage;
     strings: MessageThreadStrings;
     mentionDisplayOptions?: MentionDisplayOptions;
     attachmentsMap?: Record<string, string>;
-    onFetchAttachments?: (attachments: FileMetadata[], messageId: string) => Promise<void>;
+    onFetchAttachments?: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;
     onInlineImageClicked?: (attachmentId: string) => void;
 };
 declare type BlockedMessageContentProps = {

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

@@ -47,13 +47,13 @@ const MessageContentAsRichTextHTML = (props) => {
         if (!attachmentsMap || !onFetchAttachments) {
             return;
         }
-        const attachments = (_a = message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.filter((fileMetadata) => {
-            return fileMetadata.attachmentType === 'inlineImage' && attachmentsMap[fileMetadata.id] === undefined;
+        const attachments = (_a = message.inlineImages) === null || _a === void 0 ? void 0 : _a.filter((inlinedImages) => {
+            return attachmentsMap[inlinedImages.id] === undefined;
         });
         if (attachments && attachments.length > 0) {
             onFetchAttachments(attachments, message.messageId);
         }
-    }, [message.attachedFilesMetadata, message.messageId, onFetchAttachments, attachmentsMap]);
+    }, [message.inlineImages, message.messageId, onFetchAttachments, attachmentsMap]);
     return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
 const MessageContentAsText = (props) => {
@@ -110,15 +110,15 @@ const processInlineImage = (props) => ({
     // Custom <img> processing
     shouldProcessNode: (node) => {
         var _a;
-        function isImageNode(file) {
-            return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;
+        function matchingImageNode(imageMetadata) {
+            return imageMetadata.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)));
+            ((_a = props.message.inlineImages) === null || _a === void 0 ? void 0 : _a.find(matchingImageNode)));
     },
     processNode: (node, children, index) => {
         node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\n\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { FileMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n attachmentsMap?: Record<string, string>;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchAttachments?: (attachments: FileMetadata[], messageId: string) => Promise<void>;\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked?: (attachmentId: string) => void;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/* @private /\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>\n );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n const {\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n // message is used only in useEffect that is under teams-inline-images-and-file-sharing cc\n message,\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n attachmentsMap,\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchAttachments\n } = props;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n useEffect(() => {\n if (!attachmentsMap \|\| !onFetchAttachments) {\n return;\n }\n const attachments = message.attachedFilesMetadata?.filter((fileMetadata) => {\n return fileMetadata.attachmentType === 'inlineImage' && attachmentsMap[fileMetadata.id] === undefined;\n });\n if (attachments && attachments.length > 0) {\n onFetchAttachments(attachments, message.messageId);\n }\n }, [message.attachedFilesMetadata, message.messageId, onFetchAttachments, attachmentsMap]);\n\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\n/\n @private\n /\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent \|\| span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContent(props.message.content \|\| '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content\n ? props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : undefined;\n};\n\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n // Custom <img> processing\n shouldProcessNode: (node): boolean => {\n function isImageNode(file: FileMetadata): boolean {\n return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;\n }\n\n // Process img node with id in attachments list\n return (\n node.name &&\n node.name === 'img' &&\n node.attribs &&\n node.attribs.id &&\n props.message.attachedFilesMetadata?.find(isImageNode)\n );\n },\n processNode: (node, children, index): JSX.Element => {\n node.attribs = { ...node.attribs, 'aria-label': node.attribs.name };\n // logic to check id in map/list\n if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n }\n / @conditional-compile-remove(image-gallery) /\n const handleOnClick = (): void => {\n props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);\n };\n / @conditional-compile-remove(image-gallery) /\n return (\n <span\n data-ui-id={node.attribs.id}\n onClick={handleOnClick}\n tabIndex={0}\n role=\"button\"\n style={{\n cursor: 'pointer'\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleOnClick();\n }\n }}\n >\n {processNodeDefinitions.processDefaultNode(node, children, index)}\n </span>\n );\n return processNodeDefinitions.processDefaultNode(node, children, index);\n }\n});\n\n/ @conditional-compile-remove(mention) /\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n shouldProcessNode: (node) => {\n if (props.mentionDisplayOptions?.onRenderMention) {\n // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n return node.name === 'msft-mention';\n }\n return false;\n },\n processNode: (node) => {\n if (props.mentionDisplayOptions?.onRenderMention) {\n const { id } = node.attribs;\n const mention: Mention = {\n id: id,\n displayText: node.children[0]?.data ?? ''\n };\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return processNodeDefinitions.processDefaultNode;\n }\n});\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const steps: ProcessingInstructionType[] = [\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n processInlineImage(props),\n / @conditional-compile-remove(mention) */\n processMention(props),\n {\n // Process everything else in the default way\n shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n processNode: processNodeDefinitions.processDefaultNode\n }\n ];\n\n return htmlToReactParser.parseWithInstructions(\n props.message.content ?? '',\n IsValidNodeDefinitions.alwaysValid,\n steps\n );\n};\n\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\n\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { AttachmentMetadata, InlineImageMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n attachmentsMap?: Record<string, string>;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchAttachments?: (attachments: AttachmentMetadata[], messageId: string) => Promise<void>;\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked?: (attachmentId: string) => void;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/* @private /\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>\n );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n const {\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n // message is used only in useEffect that is under teams-inline-images-and-file-sharing cc\n message,\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n attachmentsMap,\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n onFetchAttachments\n } = props;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n useEffect(() => {\n if (!attachmentsMap \|\| !onFetchAttachments) {\n return;\n }\n const attachments = message.inlineImages?.filter((inlinedImages) => {\n return attachmentsMap[inlinedImages.id] === undefined;\n });\n if (attachments && attachments.length > 0) {\n onFetchAttachments(attachments, message.messageId);\n }\n }, [message.inlineImages, message.messageId, onFetchAttachments, attachmentsMap]);\n\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\n/\n @private\n /\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent \|\| span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContent(props.message.content \|\| '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content\n ? props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : undefined;\n};\n\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n // Custom <img> processing\n shouldProcessNode: (node): boolean => {\n function matchingImageNode(imageMetadata: InlineImageMetadata): boolean {\n return imageMetadata.id === node.attribs.id;\n }\n\n // Process img node with id in attachments list\n return (\n node.name &&\n node.name === 'img' &&\n node.attribs &&\n node.attribs.id &&\n props.message.inlineImages?.find(matchingImageNode)\n );\n },\n processNode: (node, children, index): JSX.Element => {\n node.attribs = { ...node.attribs, 'aria-label': node.attribs.name };\n // logic to check id in map/list\n if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n }\n / @conditional-compile-remove(image-gallery) /\n const handleOnClick = (): void => {\n props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);\n };\n / @conditional-compile-remove(image-gallery) /\n return (\n <span\n data-ui-id={node.attribs.id}\n onClick={handleOnClick}\n tabIndex={0}\n role=\"button\"\n style={{\n cursor: 'pointer'\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleOnClick();\n }\n }}\n >\n {processNodeDefinitions.processDefaultNode(node, children, index)}\n </span>\n );\n return processNodeDefinitions.processDefaultNode(node, children, index);\n }\n});\n\n/ @conditional-compile-remove(mention) /\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n shouldProcessNode: (node) => {\n if (props.mentionDisplayOptions?.onRenderMention) {\n // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n return node.name === 'msft-mention';\n }\n return false;\n },\n processNode: (node) => {\n if (props.mentionDisplayOptions?.onRenderMention) {\n const { id } = node.attribs;\n const mention: Mention = {\n id: id,\n displayText: node.children[0]?.data ?? ''\n };\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return processNodeDefinitions.processDefaultNode;\n }\n});\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const steps: ProcessingInstructionType[] = [\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n processInlineImage(props),\n / @conditional-compile-remove(mention) */\n processMention(props),\n {\n // Process everything else in the default way\n shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n processNode: processNodeDefinitions.processDefaultNode\n }\n ];\n\n return htmlToReactParser.parseWithInstructions(\n props.message.content ?? '',\n IsValidNodeDefinitions.alwaysValid,\n steps\n );\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/FileDownloadCards.d.ts CHANGED Viewed

@@ -1,61 +1,60 @@
 /// <reference types="react" />
 /**
+ * Represents the type of attachment
  * @beta
  */
-export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | 'unknown';
+export declare type ChatAttachmentType = 'file' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | 'unknown';
 /**
- * Base interface that all Meta Data should extend.
- * Typically used for ACS to ACS file transfers.
+ * Metadata containing basic information about the uploaded file.
+ *
  * @beta
  */
-export interface BaseFileMetadata {
+export interface FileMetadata {
+    attachmentType: 'file';
     /**
-     * File name to be displayed.
-     */
-    name: string;
-    /**
-     * Extension is used for rendering the file icon.
-     * An unknown extension will be rendered as a generic icon.
-     * Example: `jpeg`
+     * Extension hint, useful for rendering a specific icon.
+     * An unknown or empty extension will be rendered as a generic icon.
+     * Example: `pdf`
      */
     extension: string;
-    /**
-     * Download URL for the file.
-     */
-    url: string;
     /**
      * Unique ID of the file.
      */
     id: string;
     /**
-     * Attachment Type
+     * File name to be displayed.
      */
-    attachmentType: FileMetadataAttachmentType;
-}
-/**
- * Meta Data containing basic information about the uploaded file.
- * Typically used for ACS to ACS file transfers.
- * @beta
- */
-export interface FileSharingMetadata extends BaseFileMetadata {
-    attachmentType: 'fileSharing';
+    name: string;
+    /**
+     * Download URL for the file.
+     */
+    url: string;
     payload?: Record<string, string>;
 }
 /**
- * Meta Data containing data for images.
+ * Metadata for rendering images inline with a message.
+ * This does not include images attached as files.
  * @beta
  */
-export interface ImageFileMetadata extends BaseFileMetadata {
+export interface InlineImageMetadata {
     attachmentType: 'inlineImage';
+    /**
+     * Unique ID of the attachment.
+     */
+    id: string;
     previewUrl?: string;
+    /**
+     * Download URL for the full resolution version.
+     */
+    url: string;
 }
 /**
- * Meta Data containing information about the uploaded file.
+ * Metadata containing information about the uploaded file.
  * @beta
  */
-export declare type FileMetadata = FileSharingMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ ImageFileMetadata;
+export declare type AttachmentMetadata = FileMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ InlineImageMetadata;
 /**
- * Meta Data of the attachment object returned by the ACS SDK.
+ * Metadata of the attachment object returned by the ACS SDK.
  * @beta
  */
 export interface AttachmentDownloadResult {
@@ -109,21 +108,21 @@ export interface FileDownloadError {
  *
  * ```
  * @param userId - The user ID of the user downloading the file.
- * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.
+ * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.
  */
-export declare type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL | FileDownloadError>;
+export declare type FileDownloadHandler = (userId: string, fileMetadata: AttachmentMetadata) => Promise<URL | FileDownloadError>;
 /**
  * @internal
  */
-export interface _FileDownloadCards {
+export interface _FileDownloadCardsProps {
     /**
      * User id of the local participant
      */
     userId: string;
     /**
-     * A chat message metadata that inculdes file metadata
+     * A chat message metadata that includes file metadata
      */
-    fileMetadata: FileMetadata[];
+    fileMetadata?: AttachmentMetadata[];
     /**
      * A function of type {@link FileDownloadHandler} for handling file downloads.
      * If the function is not specified, the file's `url` will be opened in a new tab to
@@ -135,12 +134,12 @@ export interface _FileDownloadCards {
      */
     onDownloadErrorMessage?: (errMsg: string) => void;
     /**
-     * Optional arialabel strings for file download cards
+     * Optional aria label strings for file download cards
      */
     strings?: _FileDownloadCardsStrings;
 }
 /**
  * @internal
  */
-export declare const _FileDownloadCards: (props: _FileDownloadCards) => JSX.Element;
+export declare const _FileDownloadCards: (props: _FileDownloadCardsProps) => JSX.Element;
 //# sourceMappingURL=FileDownloadCards.d.ts.map