@azure/communication-react 1.5.1-beta.4 → 1.5.1-beta.5

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

@@ -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 { _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 { borderAndBoxShadowStyle } from '../styles/SendBox.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';\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  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineEditButtons: boolean;\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  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  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n\n  const setText = (\n    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,\n    newValue?: string | undefined\n  ): 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    () => onRenderCancelIcon(theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    () => onRenderSubmitIcon(theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary]\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?.length && (\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  return (\n    <Stack\n      className={mergeStyles(\n        borderAndBoxShadowStyle({\n          theme,\n          hasErrorMessage: message.failureReason !== undefined,\n          disabled: false\n        })\n      )}\n    >\n      <InputBoxComponent\n        inlineChildren={props.inlineEditButtons}\n        id={'editbox'}\n        textFieldRef={editTextFieldRef}\n        inputClassName={editBoxStyle(props.inlineEditButtons)}\n        placeholderText={strings.editBoxPlaceholderText}\n        textValue={textValue}\n        onChange={setText}\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      >\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        <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      </InputBoxComponent>\n      {message.failureReason && (\n        <div className={mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' })}>\n          {message.failureReason}\n        </div>\n      )}\n      {onRenderFileUploads()}\n    </Stack>\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\""]}
+{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { borderAndBoxShadowStyle } from '../styles/SendBox.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, metadata?: Record<string, string>, options?: {\n    attachedFilesMetadata?: FileMetadata[];\n  }) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineEditButtons: boolean;\n};\ntype MessageState = 'OK' | 'too short' | 'too long';\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message\n  } = props;\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n  const submitEnabled = messageState === 'OK';\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n  const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n    limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n  }) : undefined;\n  const onRenderThemedCancelIcon = useCallback(() => onRenderCancelIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);\n  const onRenderThemedSubmitIcon = useCallback(() => onRenderSubmitIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, {\n      textField: {\n        borderColor: theme.palette.themePrimary\n      }\n    });\n  }, [theme.palette.themePrimary]);\n  const onRenderFileUploads = useCallback(() => {\n    return attachedFilesMetadata?.length && <div style={{\n      margin: '0.25rem'\n    }}>\n          <_FileUploadCards activeFileUploads={attachedFilesMetadata?.map(file => ({\n        id: file.name,\n        filename: file.name,\n        progress: 1\n      }))} onCancelFileUpload={fileId => {\n        setAttachedFilesMetadata(attachedFilesMetadata?.filter(file => file.name !== fileId));\n      }} />\n        </div>;\n  }, [attachedFilesMetadata]);\n  return <Stack className={mergeStyles(borderAndBoxShadowStyle({\n    theme,\n    hasErrorMessage: message.failureReason !== undefined,\n    disabled: false\n  }))}>\n      <InputBoxComponent inlineChildren={props.inlineEditButtons} id={'editbox'} textFieldRef={editTextFieldRef} inputClassName={editBoxStyle(props.inlineEditButtons)} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onEnterKeyDown={() => {\n      submitEnabled && onSubmit(textValue, message.metadata, {\n        attachedFilesMetadata\n      });\n    }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}>\n        <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n        onCancel && onCancel(message.messageId);\n      }} id={'dismissIconWrapper'} />\n        <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n        submitEnabled && onSubmit(textValue, message.metadata, {\n          attachedFilesMetadata\n        });\n        e.stopPropagation();\n      }} id={'submitIconWrapper'} />\n      </InputBoxComponent>\n      {message.failureReason && <div className={mergeStyles(chatMessageFailedTagStyle(theme), {\n      padding: '0.5rem'\n    })}>\n          {message.failureReason}\n        </div>}\n      {onRenderFileUploads()}\n    </Stack>;\n};\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return message.attachedFilesMetadata;\n  return [];\n};\"../../../../acs-ui-common/src\""]}

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

@@ -1,10 +1,9 @@
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
 import { FileMetadata } from '../FileDownloadCards';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
-import { OnRenderAvatarCallback } from '../../types';
+import { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
 import { FileDownloadHandler } from '../FileDownloadCards';
 declare type ChatMessageComponentAsMessageBubbleProps = {
     message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
-import { Chat, Text } from '@fluentui/react-northstar';
+import { Chat, Text } from "../../../../northstar-wrapper/src";
 import React, { useCallback, useRef, useState } from 'react';
 import { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';
 import { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';
@@ -15,19 +15,13 @@ import { chatMessageActionMenuProps } from './ChatMessageActionMenu';
 import { _FileDownloadCards } from '../FileDownloadCards';
 import { useLocale } from '../../localization';
 const generateDefaultTimestamp = (createdOn, showDate, strings) => {
-    const formattedTimestamp = showDate
-        ? formatTimestampForChatMessage(createdOn, new Date(), strings)
-        : formatTimeForChatMessage(createdOn);
+    const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);
     return formattedTimestamp;
 };
 // onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
 const generateCustomizedTimestamp = (props, createdOn, locale) => {
     /* @conditional-compile-remove(date-time-customization) */
-    return props.onDisplayDateTimeString
-        ? props.onDisplayDateTimeString(createdOn)
-        : locale.onDisplayDateTimeString
-            ? locale.onDisplayDateTimeString(createdOn)
-            : '';
+    return props.onDisplayDateTimeString ? props.onDisplayDateTimeString(createdOn) : locale.onDisplayDateTimeString ? locale.onDisplayDateTimeString(createdOn) : '';
     return '';
 };
 /** @private */
@@ -37,9 +31,7 @@ const MessageBubble = (props) => {
     const theme = useTheme();
     const locale = useLocale();
     const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler } = props;
-    const defaultTimeStamp = message.createdOn
-        ? generateDefaultTimestamp(message.createdOn, showDate, strings)
-        : undefined;
+    const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
     const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';
     const formattedTimestamp = customTimestamp || defaultTimeStamp;
     // Track if the action menu was opened by touch - if so we increase the touch targets for the items
@@ -50,27 +42,22 @@ const MessageBubble = (props) => {
     const messageRef = useRef(null);
     const messageActionButtonRef = useRef(null);
     const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
-    const chatActionsEnabled = !disableEditing &&
-        message.status !== 'sending' &&
-        !!message.mine &&
-        /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
+    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
     const [messageReadBy, setMessageReadBy] = useState([]);
-    const actionMenuProps = wasInteractionByTouch
-        ? undefined
-        : chatMessageActionMenuProps({
-            ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
-            enabled: chatActionsEnabled,
-            menuButtonRef: messageActionButtonRef,
-            // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
-            forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,
-            onActionButtonClick: () => {
-                if (message.messageType === 'chat') {
-                    props.onActionButtonClick(message, setMessageReadBy);
-                    setChatMessageActionFlyoutTarget(messageActionButtonRef);
-                }
-            },
-            theme
-        });
+    const actionMenuProps = wasInteractionByTouch ? undefined : chatMessageActionMenuProps({
+        ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
+        enabled: chatActionsEnabled,
+        menuButtonRef: messageActionButtonRef,
+        // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
+        forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,
+        onActionButtonClick: () => {
+            if (message.messageType === 'chat') {
+                props.onActionButtonClick(message, setMessageReadBy);
+                setChatMessageActionFlyoutTarget(messageActionButtonRef);
+            }
+        },
+        theme
+    });
     const onActionFlyoutDismiss = useCallback(() => {
         // When the flyout dismiss is called, since we control if the action flyout is visible
         // or not we need to set the target to undefined here to actually hide the action flyout
@@ -78,18 +65,13 @@ const MessageBubble = (props) => {
     }, [setChatMessageActionFlyoutTarget]);
     const defaultOnRenderFileDownloads = useCallback(() => {
         var _a;
-        return (React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler, 
-            /* @conditional-compile-remove(file-sharing) */
-            strings: { downloadFile: (_a = props.strings.downloadFile) !== null && _a !== void 0 ? _a : locale.strings.messageThread.downloadFile } }));
-    }, [
-        userId,
-        message,
-        /* @conditional-compile-remove(file-sharing) */
+        return React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler, 
+            /* @conditional-compile-remove(file-sharing) */ strings: {
+                downloadFile: (_a = props.strings.downloadFile) !== null && _a !== void 0 ? _a : locale.strings.messageThread.downloadFile
+            } });
+    }, [userId, message,
         props,
-        /* @conditional-compile-remove(file-sharing) */
-        locale,
-        fileDownloadHandler
-    ]);
+        locale, fileDownloadHandler]);
     const editedOn = 'editedOn' in message ? message.editedOn : undefined;
     const getMessageDetails = useCallback(() => {
         if (messageStatus === 'failed') {
@@ -103,18 +85,16 @@ const MessageBubble = (props) => {
     const getContent = useCallback(() => {
         /* @conditional-compile-remove(data-loss-prevention) */
         if (message.messageType === 'blocked') {
-            return (React.createElement("div", { tabIndex: 0 },
-                React.createElement(BlockedMessageContent, { message: message, strings: strings })));
+            return React.createElement("div", { tabIndex: 0 },
+                React.createElement(BlockedMessageContent, { message: message, strings: strings }));
         }
-        return (React.createElement("div", { tabIndex: 0 },
+        return React.createElement("div", { tabIndex: 0 },
             React.createElement(ChatMessageContent, { message: message, strings: strings, 
-                /* @conditional-compile-remove(teams-inline-images) */
-                onFetchAttachment: props.onFetchAttachments, 
-                /* @conditional-compile-remove(teams-inline-images) */
-                attachmentsMap: props.attachmentsMap }),
-            props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
+                /* @conditional-compile-remove(teams-inline-images) */ onFetchAttachment: props.onFetchAttachments, 
+                /* @conditional-compile-remove(teams-inline-images) */ attachmentsMap: props.attachmentsMap }),
+            props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads());
     }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
-    const chatMessage = (React.createElement(React.Fragment, null,
+    const chatMessage = React.createElement(React.Fragment, null,
         React.createElement("div", { ref: messageRef },
             React.createElement(Chat.Message, { "data-ui-id": "chat-composite-message", className: mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: getContent(), author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), mine: message.mine, timestamp: React.createElement(Text, { "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), positionActionMenu: false, actionMenu: actionMenuProps, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onBlur: () => setWasInteractionByTouch(false), onClick: () => {
                     if (!wasInteractionByTouch) {
@@ -130,7 +110,7 @@ const MessageBubble = (props) => {
                         props.onActionButtonClick(message, setMessageReadBy);
                     }
                 } })),
-        chatActionsEnabled && (React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }))));
+        chatActionsEnabled && React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }));
     return chatMessage;
 };
 /** @private */

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

@@ -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 { IStyle, mergeStyles } from '@fluentui/react';\nimport { Chat, Text, ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport {\n  chatMessageEditedTagStyle,\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle\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) */\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 { OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\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(teams-inline-images) */\n  /**\n   * Optional function to fetch attachments.\n   */\n  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n  /* @conditional-compile-remove(teams-inline-images) */\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  } = 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\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<HTMLElement | 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 = wasInteractionByTouch\n    ? undefined\n    : 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\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) */\n        strings={{ downloadFile: props.strings.downloadFile ?? locale.strings.messageThread.downloadFile }}\n      />\n    ),\n    [\n      userId,\n      message,\n      /* @conditional-compile-remove(file-sharing) */\n      props,\n      /* @conditional-compile-remove(file-sharing) */\n      locale,\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  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}>\n        <ChatMessageContent\n          message={message}\n          strings={strings}\n          /* @conditional-compile-remove(teams-inline-images) */\n          onFetchAttachment={props.onFetchAttachments}\n          /* @conditional-compile-remove(teams-inline-images) */\n          attachmentsMap={props.attachmentsMap}\n        />\n        {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n      </div>\n    );\n  }, [defaultOnRenderFileDownloads, message, props, strings, userId]);\n\n  const chatMessage = (\n    <>\n      <div ref={messageRef}>\n        <Chat.Message\n          data-ui-id=\"chat-composite-message\"\n          className={mergeStyles(messageContainerStyle as IStyle)}\n          styles={messageContainerStyle}\n          content={getContent()}\n          author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>}\n          mine={message.mine}\n          timestamp={<Text data-ui-id={ids.messageTimestamp}>{formattedTimestamp}</Text>}\n          details={getMessageDetails()}\n          positionActionMenu={false}\n          actionMenu={actionMenuProps}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          onBlur={() => 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      </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\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,0CAAoC;AAEzD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AACnI,OAAO,EAAE,wBAAwB,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,uDAAuD;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI7D,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,kBAAkB,EAAuB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAoDhE,MAAM,wBAAwB,GAAG,CAAC,SAAe,EAAE,QAA6B,EAAE,OAA6B,EAAU,EAAE;IACzH,MAAM,kBAAkB,GAAG,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAC1I,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAEF,mFAAmF;AACnF,MAAM,2BAA2B,GAAG,CAAC,KAA+C,EAAE,SAAe,EAAE,MAAuB,EAAU,EAAE;IACxI,0DAA0D;IAC1D,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClK,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AACF,eAAe;AACf,MAAM,aAAa,GAAG,CAAC,KAA+C,EAAe,EAAE;;IACrF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,EACJ,MAAM,EACN,OAAO,EACP,aAAa,EACb,aAAa,EACb,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAW,EACX,uBAAuB,GAAG,CAAC,EAC3B,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACxH,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/G,MAAM,kBAAkB,GAAG,eAAe,IAAI,gBAAgB,CAAC;IAE/D,mGAAmG;IACnG,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1E,wFAAwF;IACxF,wDAAwD;IACxD,iEAAiE;IACjE,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,sBAAsB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAyD,SAAS,CAAC,CAAC;IACtJ,MAAM,kBAAkB,GAAG,CAAC,cAAc,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,uDAAuD,CAAA,OAAO,CAAC,WAAW,KAAK,SAAS,CAAC;IACzL,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAG7C,EAAE,CAAC,CAAC;IACT,MAAM,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC;QACrF,SAAS,EAAE,MAAA,OAAO,CAAC,qBAAqB,mCAAI,EAAE;QAC9C,OAAO,EAAE,kBAAkB;QAC3B,aAAa,EAAE,sBAAsB;QACrC,kIAAkI;QAClI,SAAS,EAAE,6BAA6B,KAAK,sBAAsB;QACnE,mBAAmB,EAAE,GAAG,EAAE;YACxB,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;gBAClC,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;gBACrD,gCAAgC,CAAC,sBAAsB,CAAC,CAAC;aAC1D;QACH,CAAC;QACD,KAAK;KACN,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAS,EAAE;QACnD,sFAAsF;QACtF,wFAAwF;QACxF,gCAAgC,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC,CAAC;IACvC,MAAM,4BAA4B,GAAG,WAAW,CAAC,GAAG,EAAE;;QAAC,OAAA,oBAAC,kBAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC,IAAI,EAAE,EAAE,eAAe,EAAE,mBAAmB;YACrL,+CAA+C,CAAC,OAAO,EAAE;gBACvD,YAAY,EAAE,MAAA,KAAK,CAAC,OAAO,CAAC,YAAY,mCAAI,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY;aACtF,GAAI,CAAA;KAAA,EAAE,CAAC,MAAM,EAAE,OAAO;QACvB,KAAK;QACL,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACtE,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,aAAa,KAAK,QAAQ,EAAE;YAC9B,OAAO,6BAAK,SAAS,EAAE,yBAAyB,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,aAAa,CAAO,CAAC;SACxF;aAAM,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,QAAQ,EAAE;YACrD,OAAO,6BAAK,SAAS,EAAE,yBAAyB,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,SAAS,CAAO,CAAC;SACpF;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,WAAW,EAAE,aAAa,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IACpG,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,uDAAuD;QACvD,IAAI,OAAO,CAAC,WAAW,KAAK,SAAS,EAAE;YACrC,OAAO,6BAAK,QAAQ,EAAE,CAAC;gBACnB,oBAAC,qBAAqB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC;SACV;QACD,OAAO,6BAAK,QAAQ,EAAE,CAAC;YACnB,oBAAC,kBAAkB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO;gBACxD,sDAAsD,CAAC,iBAAiB,EAAE,KAAK,CAAC,kBAAkB;gBAClG,sDAAsD,CAAC,cAAc,EAAE,KAAK,CAAC,cAAc,GAAI;YAC5F,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CACxG,CAAC;IACX,CAAC,EAAE,CAAC,4BAA4B,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACpE,MAAM,WAAW,GAAG;QAChB,6BAAK,GAAG,EAAE,UAAU;YAClB,oBAAC,IAAI,CAAC,OAAO,kBAAY,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAE,qBAAgC,CAAC,EAAE,MAAM,EAAE,qBAAqB,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,OAAO,CAAC,iBAAiB,CAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,oBAAC,IAAI,kBAAa,GAAG,CAAC,gBAAgB,IAAG,kBAAkB,CAAQ,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE;oBACzoB,IAAI,CAAC,qBAAqB,EAAE;wBAC1B,OAAO;qBACR;oBACD,oEAAoE;oBACpE,gEAAgE;oBAChE,uCAAuC;oBACvC,yEAAyE;oBACzE,8DAA8D;oBAC9D,gCAAgC,CAAC,UAAU,CAAC,CAAC;oBAC7C,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;wBAClC,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;qBACtD;gBACH,CAAC,GAAI,CACC;QACL,kBAAkB,IAAI,oBAAC,uBAAuB,IAAC,MAAM,EAAE,CAAC,6BAA6B,EAAE,MAAM,EAAE,6BAA6B,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,QAAQ,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,cAAc,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,GAAI,CACzf,CAAC;IACN,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,mCAAmC,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { Chat, Text } from '@internal/northstar-wrapper';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle } 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) */\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';\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\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(teams-inline-images) */\n  /**\n   * Optional function to fetch attachments.\n   */\n  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n  /* @conditional-compile-remove(teams-inline-images) */\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  } = 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\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<HTMLElement | 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 = wasInteractionByTouch ? undefined : 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) */ strings={{\n    downloadFile: props.strings.downloadFile ?? locale.strings.messageThread.downloadFile\n  }} />, [userId, message, /* @conditional-compile-remove(file-sharing) */\n  props, /* @conditional-compile-remove(file-sharing) */\n  locale, 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    /* @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}>\n        <ChatMessageContent message={message} strings={strings}\n      /* @conditional-compile-remove(teams-inline-images) */ onFetchAttachment={props.onFetchAttachments}\n      /* @conditional-compile-remove(teams-inline-images) */ attachmentsMap={props.attachmentsMap} />\n        {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n      </div>;\n  }, [defaultOnRenderFileDownloads, message, props, strings, userId]);\n  const chatMessage = <>\n      <div ref={messageRef}>\n        <Chat.Message data-ui-id=\"chat-composite-message\" className={mergeStyles((messageContainerStyle as IStyle))} styles={messageContainerStyle} content={getContent()} author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>} mine={message.mine} timestamp={<Text data-ui-id={ids.messageTimestamp}>{formattedTimestamp}</Text>} details={getMessageDetails()} positionActionMenu={false} actionMenu={actionMenuProps} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} onBlur={() => 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      </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);\"../../../../northstar-wrapper/src\"\"../../../../acs-ui-common/src\""]}

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

@@ -4,14 +4,12 @@ import React from 'react';
 /* @conditional-compile-remove(teams-inline-images) */
 import { useEffect } from 'react';
 import { _formatString } from "../../../../acs-ui-common/src";
-import { Parser, ProcessNodeDefinitions } from 'html-to-react';
+import { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions } from 'html-to-react';
 import Linkify from 'react-linkify';
-import { LiveMessage } from 'react-aria-live';
 import { Link } from '@fluentui/react';
 /* @conditional-compile-remove(data-loss-prevention) */
 import { FontIcon, Stack } from '@fluentui/react';
-const processNodeDefinitions = new ProcessNodeDefinitions(React);
-const isValidNode = () => true;
+import LiveMessage from '../Announcer/LiveMessage';
 /** @private */
 export const ChatMessageContent = (props) => {
     switch (props.message.contentType) {
@@ -27,28 +25,32 @@ export const ChatMessageContent = (props) => {
     }
 };
 const MessageContentWithLiveAria = (props) => {
-    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
-        React.createElement(LiveMessage, { message: props.liveMessage, "aria-live": "polite" }),
-        props.content));
+    return React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
+        React.createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
+        props.content);
 };
 const MessageContentAsRichTextHTML = (props) => {
-    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
+    const liveAuthor = _formatString(props.strings.liveAuthorIntro, {
+        author: `${props.message.senderDisplayName}`
+    });
     /* @conditional-compile-remove(teams-inline-images) */
     useEffect(() => {
         var _a;
-        (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map((fileMetadata) => {
+        (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map(fileMetadata => {
             if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {
                 props.onFetchAttachment(fileMetadata);
             }
         });
     }, [props]);
-    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
+    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) });
 };
 const MessageContentAsText = (props) => {
-    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
-                return (React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
-            } }, props.message.content) }));
+    const liveAuthor = _formatString(props.strings.liveAuthorIntro, {
+        author: `${props.message.senderDisplayName}`
+    });
+    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
+                return React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText);
+            } }, props.message.content) });
 };
 /* @conditional-compile-remove(data-loss-prevention) */
 /**
@@ -59,15 +61,13 @@ export const BlockedMessageContent = (props) => {
     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 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 },
+    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))) }));
+            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) => {
@@ -76,54 +76,40 @@ const extractContent = (s) => {
     return span.textContent || span.innerText;
 };
 const messageContentAriaText = (props) => {
-    return props.message.content
-        ? props.message.mine
-            ? _formatString(props.strings.messageContentMineAriaText, {
-                message: props.message.content
-            })
-            : _formatString(props.strings.messageContentAriaText, {
-                author: `${props.message.senderDisplayName}`,
-                message: props.message.content
-            })
-        : undefined;
+    return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {
+        message: props.message.content
+    }) : _formatString(props.strings.messageContentAriaText, {
+        author: `${props.message.senderDisplayName}`,
+        message: props.message.content
+    }) : undefined;
 };
-const processHtmlToReact = (props) => {
-    const htmlToReactParser = new Parser();
-    /* @conditional-compile-remove(teams-inline-images) */
-    const processInlineImage = {
-        // Custom <img> processing
-        shouldProcessNode: (node) => {
-            var _a;
-            // 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((f) => f.id === node.attribs.id)));
-        },
-        processNode: (node, children, index) => {
-            // 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] });
-            }
-            return processNodeDefinitions.processDefaultNode(node, children, index);
+const processNodeDefinitions = ProcessNodeDefinitions();
+const htmlToReactParser = Parser();
+/* @conditional-compile-remove(teams-inline-images) */
+const processInlineImage = (props) => ({
+    // Custom <img> processing
+    shouldProcessNode: (node) => {
+        var _a;
+        // 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(f => f.id === node.attribs.id));
+    },
+    processNode: (node, children, index) => {
+        // 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] });
         }
-    };
-    const addProcessingStep = () => {
-        const steps = [];
-        /* @conditional-compile-remove(teams-inline-images) */
-        steps.push(processInlineImage);
-        return steps;
-    };
-    const processingInstructions = [
-        ...addProcessingStep(),
-        {
-            shouldProcessNode: () => {
-                return true;
-            },
+        return processNodeDefinitions.processDefaultNode(node, children, index);
+    }
+});
+const processHtmlToReact = (props) => {
+    var _a;
+    const steps = [
+        processInlineImage(props), {
+            // Process everything else in the default way
+            shouldProcessNode: IsValidNodeDefinitions.alwaysValid,
             processNode: processNodeDefinitions.processDefaultNode
         }
     ];
-    return htmlToReactParser.parseWithInstructions(props.message.content, isValidNode, processingInstructions);
+    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

@@ -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) */\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, ProcessingInstructions } 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 { LiveMessage } from 'react-aria-live';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images) */\nimport { FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(teams-inline-images) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images) */\n  onFetchAttachment?: (attachment: FileMetadata) => Promise<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\nconst processNodeDefinitions: ProcessNodeDefinitions = new ProcessNodeDefinitions(React);\nconst isValidNode = (): boolean => true;\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} aria-live=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  /* @conditional-compile-remove(teams-inline-images) */\n  useEffect(() => {\n    props.message.attachedFilesMetadata?.map((fileMetadata) => {\n      if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {\n        props.onFetchAttachment(fileMetadata);\n      }\n    });\n  }, [props]);\n\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\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 messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: props.message.content\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: props.message.content\n        })\n    : undefined;\n};\n\ntype NodeProcessInstruction = {\n  shouldProcessNode: unknown;\n  processNode: unknown;\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const htmlToReactParser = new Parser();\n\n  /* @conditional-compile-remove(teams-inline-images) */\n  const processInlineImage: NodeProcessInstruction = {\n    // Custom <img> processing\n    shouldProcessNode: (node): boolean => {\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((f) => f.id === node.attribs.id)\n      );\n    },\n    processNode: (node, children, index): HTMLElement => {\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      return processNodeDefinitions.processDefaultNode(node, children, index);\n    }\n  };\n\n  const addProcessingStep = (): NodeProcessInstruction[] => {\n    const steps: NodeProcessInstruction[] = [];\n    /* @conditional-compile-remove(teams-inline-images) */\n    steps.push(processInlineImage);\n    return steps;\n  };\n\n  const processingInstructions: ProcessingInstructions = [\n    ...addProcessingStep(),\n    {\n      shouldProcessNode: (): boolean => {\n        return true;\n      },\n      processNode: processNodeDefinitions.processDefaultNode\n    }\n  ];\n\n  return htmlToReactParser.parseWithInstructions(props.message.content, isValidNode, processingInstructions);\n};\n\"../../../../acs-ui-common/src\""]}
+{"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) */\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(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images) */\nimport { FileMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(teams-inline-images) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images) */\n  onFetchAttachment?: (attachment: FileMetadata) => Promise<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  const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n    author: `${props.message.senderDisplayName}`\n  });\n\n  /* @conditional-compile-remove(teams-inline-images) */\n  useEffect(() => {\n    props.message.attachedFilesMetadata?.map(fileMetadata => {\n      if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {\n        props.onFetchAttachment(fileMetadata);\n      }\n    });\n  }, [props]);\n  return <MessageContentWithLiveAria message={props.message} liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n    author: `${props.message.senderDisplayName}`\n  });\n  return <MessageContentWithLiveAria message={props.message} liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`} 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 messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n    message: props.message.content\n  }) : _formatString(props.strings.messageContentAriaText, {\n    author: `${props.message.senderDisplayName}`,\n    message: props.message.content\n  }) : undefined;\n};\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/* @conditional-compile-remove(teams-inline-images) */\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  // Custom <img> processing\n  shouldProcessNode: (node): boolean => {\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(f => f.id === node.attribs.id);\n  },\n  processNode: (node, children, index): HTMLElement => {\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    return processNodeDefinitions.processDefaultNode(node, children, index);\n  }\n});\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const steps: ProcessingInstructionType[] = [/* @conditional-compile-remove(teams-inline-images) */\n  processInlineImage(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\""]}