npm - @azure/communication-react - Versions diffs - 1.9.0 → 1.10.0-beta.1 - Mend

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n};\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage;\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};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return <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};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>;\n }}>\n {props.message.content}\n </Linkify>} />;\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};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n author: `${props.message.senderDisplayName}`\n });\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content \|\| '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: []\n })\n }) : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: []\n })\n }) : undefined;\n};\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const steps: ProcessingInstructionType[] = [{\n // Process everything else in the default way\n shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n processNode: processNodeDefinitions.processDefaultNode\n }];\n return htmlToReactParser.parseWithInstructions(props.message.content ?? '', IsValidNodeDefinitions.alwaysValid, steps);\n};\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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';\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';\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 onFetchAttachment?: (attachment: FileMetadata) => 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};\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};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return <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};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n useEffect(() => {\n props.message.attachedFilesMetadata?.map(fileMetadata => {\n if (props.onFetchAttachment && props.attachmentsMap && fileMetadata.attachmentType === 'inlineImage' && props.attachmentsMap[fileMetadata.id] === undefined) {\n props.onFetchAttachment(fileMetadata);\n }\n });\n }, [props]);\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>;\n }}>\n {props.message.content}\n </Linkify>} />;\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 = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink ? props.message.linkText ?? props.strings.blockedWarningLinkText : '';\n const liveAuthor = props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return <MessageContentWithLiveAria message={props.message} liveMessage={liveBlockedWarningText} ariaLabel={liveBlockedWarningText} content={<Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>}\n </Stack>} />;\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};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n author: `${props.message.senderDisplayName}`\n });\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content \|\| '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: []\n })\n }) : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: []\n })\n }) : undefined;\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 node.name && node.name === 'img' && node.attribs && node.attribs.id && props.message.attachedFilesMetadata?.find(isImageNode);\n },\n processNode: (node, children, index): JSX.Element => {\n node.attribs = {\n ...node.attribs,\n 'aria-label': node.attribs.name\n };\n // logic to check id in map/list\n if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n node.attribs = {\n ...node.attribs,\n src: props.attachmentsMap[node.attribs.id]\n };\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 <span data-ui-id={node.attribs.id} onClick={handleOnClick} tabIndex={0} role=\"button\" style={{\n cursor: 'pointer'\n }} onKeyDown={e => {\n if (e.key === 'Enter') {\n handleOnClick();\n }\n }}>\n {processNodeDefinitions.processDefaultNode(node, children, index)}\n </span>;\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 {\n id\n } = 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});\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const steps: ProcessingInstructionType[] = [/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n processInlineImage(props), / @conditional-compile-remove(mention) */\n processMention(props), {\n // Process everything else in the default way\n shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n processNode: processNodeDefinitions.processDefaultNode\n }];\n return htmlToReactParser.parseWithInstructions(props.message.content ?? '', IsValidNodeDefinitions.alwaysValid, steps);\n};\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Mention } from '../MentionPopover';
+/**
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
+ *
+ * @private
+ */
+export declare const defaultOnMentionRender: (mention: Mention) => JSX.Element;
+//# sourceMappingURL=MentionRenderer.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js ADDED Viewed

@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/**
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
+ *
+ * @private
+ */
+export const defaultOnMentionRender = (mention) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const MsftMention = 'msft-mention';
+    return React.createElement(MsftMention, { id: mention.id }, mention.displayText);
+};
+//# sourceMappingURL=MentionRenderer.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MentionRenderer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MentionRenderer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAgB,EAAe,EAAE;IACtE,8DAA8D;IAC9D,MAAM,WAAW,GAAI,cAAsB,CAAC;IAC5C,OAAO,oBAAC,WAAW,IAAC,EAAE,EAAE,OAAO,CAAC,EAAE,IAAG,OAAO,CAAC,WAAW,CAAe,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { Mention } from '../MentionPopover';\n\n/**\n * Provides the default implementation for rendering an Mention in a message thread\n * @param mention - The mention to render\n *\n * @private\n */\nexport const defaultOnMentionRender = (mention: Mention): JSX.Element => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const MsftMention = ('msft-mention' as any);\n return <MsftMention id={mention.id}>{mention.displayText}</MsftMention>;\n};"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.d.ts ADDED Viewed

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { IButtonStyles, ILinkStyles } from '@fluentui/react';
+import { BaseCustomStyles } from '../../types';
+/**
+ * @beta
+ * Props for BrowserPermissionDenied component.
+ */
+export interface BrowserPermissionDeniedProps {
+    /**
+     * Action to be taken by the more help link. Possible to send to external page or show other modal.
+     */
+    onTroubleshootingClick?: () => void;
+    /**
+     * Action to be taken by the try again primary button.
+     */
+    onTryAgainClick?: () => void;
+    /**
+     * Localization strings for BrowserPermissionDenied component.
+     */
+    strings?: BrowserPermissionDeniedStrings;
+    /**
+     * Allows users to pass in an object contains custom CSS styles.
+     * @Example
+     * ```
+     * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />
+     * ```
+     */
+    styles?: BrowserPermissionDeniedStyles;
+}
+/**
+ * @beta
+ * Strings for BrowserPermissionDenied component
+ */
+export interface BrowserPermissionDeniedStrings {
+    /**
+     * Main button text string.
+     */
+    primaryButtonText: string;
+    /**
+     * Main text string.
+     */
+    primaryText: string;
+    /**
+     * Subtext string.
+     */
+    secondaryText: string;
+    /**
+     * More help link string.
+     */
+    linkText: string;
+}
+/**
+ * Fluent styles for {@link BrowserPermissionDenied}.
+ *
+ * @beta
+ */
+export interface BrowserPermissionDeniedStyles extends BaseCustomStyles {
+    /** Styles for the primary button. */
+    primaryButton?: IButtonStyles;
+    /** Styles for the help troubleshooting link text. */
+    troubleshootingLink?: ILinkStyles;
+}
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
+ */
+export declare const BrowserPermissionDenied: (props: BrowserPermissionDeniedProps) => JSX.Element;
+//# sourceMappingURL=BrowserPermissionDenied.d.ts.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js ADDED Viewed

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';
+/* @conditional-compile-remove(call-readiness) */
+import { useLocale } from '../../localization';
+/* @conditional-compile-remove(call-readiness) */
+import { iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';
+/* @conditional-compile-remove(call-readiness) */
+import { isValidString } from '../utils';
+/* @conditional-compile-remove(call-readiness) */
+const BrowserPermissionDeniedContainer = (props) => {
+    const { onTroubleshootingClick, onTryAgainClick, strings, styles } = props;
+    return React.createElement(Stack, { style: {
+            padding: '2rem',
+            paddingTop: '2.5rem',
+            maxWidth: '25.375rem'
+        } },
+        React.createElement(Stack, { horizontal: true, style: {
+                paddingBottom: '1.5rem'
+            }, horizontalAlign: 'space-between' },
+            React.createElement(Stack, { styles: iconContainerStyles, horizontalAlign: 'center' },
+                React.createElement(Icon, { styles: iconPrimaryStyles, iconName: 'BrowserPermissionDeniedError' }))),
+        React.createElement(Stack, { styles: textContainerStyles },
+            isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && React.createElement(Text, { styles: primaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
+            isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText),
+            onTryAgainClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, styles === null || styles === void 0 ? void 0 : styles.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onTryAgainClick }),
+            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, styles === null || styles === void 0 ? void 0 : styles.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)));
+};
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
+ */
+export const BrowserPermissionDenied = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
+    const locale = useLocale().strings.BrowserPermissionDenied;
+    /* @conditional-compile-remove(call-readiness) */
+    return React.createElement(BrowserPermissionDeniedContainer, Object.assign({}, props, { strings: props.strings ? props.strings : locale }));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=BrowserPermissionDenied.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BrowserPermissionDenied.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/BrowserPermissionDenied.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,iDAAiD;AACjD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACzF,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,iDAAiD;AACjD,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,cAAc,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AAEtM,iDAAiD;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAgEzC,iDAAiD;AACjD,MAAM,gCAAgC,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC5F,MAAM,EACJ,sBAAsB,EACtB,eAAe,EACf,OAAO,EACP,MAAM,EACP,GAAG,KAAK,CAAC;IACV,OAAO,oBAAC,KAAK,IAAC,KAAK,EAAE;YACnB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,WAAW;SACtB;QACG,oBAAC,KAAK,IAAC,UAAU,QAAC,KAAK,EAAE;gBACzB,aAAa,EAAE,QAAQ;aACxB,EAAE,eAAe,EAAE,eAAe;YAC/B,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,QAAQ;gBAC3D,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,8BAA8B,GAAS,CAC5E,CACF;QACR,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB;YAC/B,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAQ;YACrG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAQ;YAE3G,eAAe,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,IAAI,oBAAC,aAAa,IAAC,MAAM,EAAE,cAAc,CAAC,mBAAmB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAAE,OAAO,EAAE,eAAe,GAAI;YAEjN,sBAAsB,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,CAAC,cAAc,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,EAAE,OAAO,EAAE,sBAAsB,IACpK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CACb,CACH,CACF,CAAC;AACb,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC1F,iDAAiD;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC;IAC3D,iDAAiD;IACjD,OAAO,oBAAC,gCAAgC,oBAAK,KAAK,IAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC;IACxG,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IButtonStyles, ILinkStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport { iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';\nimport { BaseCustomStyles } from '../../types';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDenied component.\n */\nexport interface BrowserPermissionDeniedProps {\n /**\n * Action to be taken by the more help link. Possible to send to external page or show other modal.\n */\n onTroubleshootingClick?: () => void;\n /**\n * Action to be taken by the try again primary button.\n */\n onTryAgainClick?: () => void;\n /**\n * Localization strings for BrowserPermissionDenied component.\n */\n strings?: BrowserPermissionDeniedStrings;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />\n * ```\n */\n styles?: BrowserPermissionDeniedStyles;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDenied component\n */\nexport interface BrowserPermissionDeniedStrings {\n /**\n * Main button text string.\n */\n primaryButtonText: string;\n /**\n * Main text string.\n */\n primaryText: string;\n /**\n * Subtext string.\n */\n secondaryText: string;\n /**\n * More help link string.\n */\n linkText: string;\n}\n\n/**\n * Fluent styles for {@link BrowserPermissionDenied}.\n *\n * @beta\n */\nexport interface BrowserPermissionDeniedStyles extends BaseCustomStyles {\n /** Styles for the primary button. */\n primaryButton?: IButtonStyles;\n /** Styles for the help troubleshooting link text. */\n troubleshootingLink?: ILinkStyles;\n}\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedContainer = (props: BrowserPermissionDeniedProps): JSX.Element => {\n const {\n onTroubleshootingClick,\n onTryAgainClick,\n strings,\n styles\n } = props;\n return <Stack style={{\n padding: '2rem',\n paddingTop: '2.5rem',\n maxWidth: '25.375rem'\n }}>\n <Stack horizontal style={{\n paddingBottom: '1.5rem'\n }} horizontalAlign={'space-between'}>\n <Stack styles={iconContainerStyles} horizontalAlign={'center'}>\n <Icon styles={iconPrimaryStyles} iconName={'BrowserPermissionDeniedError'}></Icon>\n </Stack>\n </Stack>\n <Stack styles={textContainerStyles}>\n {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n\n {onTryAgainClick && isValidString(strings?.primaryButtonText) && <PrimaryButton styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)} text={strings?.primaryButtonText} onClick={onTryAgainClick} />}\n\n {onTroubleshootingClick && isValidString(strings?.linkText) && <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n {strings?.linkText}\n </Link>}\n </Stack>\n </Stack>;\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDenied = (props: BrowserPermissionDeniedProps): JSX.Element => {\n /* @conditional-compile-remove(call-readiness) */\n const locale = useLocale().strings.BrowserPermissionDenied;\n /* @conditional-compile-remove(call-readiness) */\n return <BrowserPermissionDeniedContainer {...props} strings={props.strings ? props.strings : locale} />;\n return <></>;\n};\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.d.ts ADDED Viewed

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';
+/**
+ * @beta
+ * Props for BrowserPermissionDeniedIOS component.
+ */
+export interface BrowserPermissionDeniedIOSProps extends BrowserPermissionDeniedProps {
+    /**
+     * Localization strings for BrowserPermissionDeniedIOS component.
+     */
+    strings?: BrowserPermissionDeniedIOSStrings;
+    /**
+     * Link to image source.
+     *
+     * Image is inserted into the top of the component.
+     */
+    imageSource?: string;
+}
+/**
+ * @beta
+ * Strings for BrowserPermissionDeniedIOS component
+ */
+export interface BrowserPermissionDeniedIOSStrings extends BrowserPermissionDeniedStrings {
+    /**
+     * Image alt text
+     */
+    imageAltText: string;
+    /**
+     * Main text string.
+     */
+    primaryText: string;
+    /**
+     * Subtext string.
+     */
+    secondaryText: string;
+    /**
+     * Step 1 string
+     */
+    step1Text: string;
+    /**
+     * Step 1 digit string
+     */
+    step1DigitText: string;
+    /**
+     * Step 2 string
+     */
+    step2Text: string;
+    /**
+     * Step 2 digit string
+     */
+    step2DigitText: string;
+    /**
+     * Step 3 string
+     */
+    step3Text: string;
+    /**
+     * Step 3 digit string
+     */
+    step3DigitText: string;
+    /**
+     * Step 4 string
+     */
+    step4Text: string;
+    /**
+     * Step 4 digit string
+     */
+    step4DigitText: string;
+}
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
+ */
+export declare const BrowserPermissionDeniedIOS: (props: BrowserPermissionDeniedIOSProps) => JSX.Element;
+//# sourceMappingURL=BrowserPermissionDeniedIOS.d.ts.map