npm - @azure/communication-react - Versions diffs - 1.17.0-alpha-202405150013 → 1.17.0-alpha-202405170014 - Mend

@azure/communication-react 1.17.0-alpha-202405150013 → 1.17.0-alpha-202405170014

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

package/dist/dist-esm/react-components/src/components/Attachment/AttachmentUploadCards.js CHANGED Viewed

@@ -3,7 +3,7 @@
 import { Icon, mergeStyles } from '@fluentui/react';
 import React, { useMemo } from 'react';
 import { _AttachmentCard } from './AttachmentCard';
-import { _AttachmentCardGroup } from './AttachmentCardGroup';
+import { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';
 import { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';
 const actionIconStyle = { height: '1rem' };
 /**
@@ -20,7 +20,7 @@ export const _AttachmentUploadCards = (props) => {
     if (!attachments || attachments.length === 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(_AttachmentCardGroup, null, attachments &&
+    return (React.createElement(_AttachmentCardGroup, { attachmentGroupLayout: _AttachmentCardGroupLayout.Flex }, attachments &&
         attachments
             .filter((attachment) => !attachment.error)
             .map((attachment) => {

package/dist/dist-esm/react-components/src/components/Attachment/AttachmentUploadCards.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;~~AAE7D~~,OAAO,EAAE,wCAAwC,EAAE,MAAM,iBAAiB,CAAC;AAqC3E,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACvF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,wCAAwC,EAAE,CAAC;IACjE,MAAM,4BAA4B,GAAG,OAAO,CAC1C,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB,CAAC;IAC3E,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAClE,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,~~QAClB~~,WAAW;QACV,WAAW;aACR,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;aACzC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;;YAAC,OAAA,CACnB,oBAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,WAAW,EAAE;oBACX;wBACE,IAAI,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,QAAQ;wBACjD,IAAI,EAAE,CACJ,2CAAiB,4BAA4B,EAAE,iBAAc,+BAA+B;4BAC1F,oBAAC,IAAI,IAAC,QAAQ,EAAC,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/E,CACP;wBACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;4BACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gCACrC,IAAI,CAAC;oCACH,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;oCAChF,OAAO,EAAE,CAAC;gCACZ,CAAC;gCAAC,OAAO,CAAC,EAAE,CAAC;oCACX,MAAM,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;gCAC/B,CAAC;4BACH,CAAC,CAAC,CAAC;wBACL,CAAC;qBACF;iBACF,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAA;SAAA,CAAC,CACe,CACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup } from './AttachmentCardGroup';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\n\n/*\n Strings of _AttachmentUploadCards that can be overridden.\n \n @internal\n /\nexport interface _AttachmentUploadCardsStrings {\n /* Aria label to notify user when focus is on cancel attachment upload button. /\n removeAttachment: string;\n /* Aria label to notify user attachment uploading starts. /\n uploading: string;\n /* Aria label to notify user attachment is uploaded. /\n uploadCompleted: string;\n /* Aria label to notify user more attachment action menu. /\n attachmentMoreMenu: string;\n}\n\n/\n @internal\n /\nexport interface AttachmentUploadCardsProps {\n /\n Optional array of {@link AttachmentMetadataInProgress}\n /\n attachments?: AttachmentMetadataInProgress[];\n /\n Optional callback to remove the attachment upload before sending by clicking on\n * cancel icon.\n /\n onCancelAttachmentUpload?: (attachmentId: string) => void;\n /\n Optional arialabel strings for attachment upload cards\n /\n strings?: _AttachmentUploadCardsStrings;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/\n @internal\n */\nexport const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.Element => {\n const attachments = props.attachments;\n const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n const removeAttachmentButtonString = useMemo(\n () => () => {\n return props.strings?.removeAttachment ?? localeStrings.removeAttachment;\n },\n [props.strings?.removeAttachment, localeStrings.removeAttachment]\n );\n\n if (!attachments \|\| attachments.length === 0) {\n return <></>;\n }\n\n return (\n <_AttachmentCardGroup>\n {attachments &&\n attachments\n .filter((attachment) => !attachment.error)\n .map((attachment) => (\n <_AttachmentCard\n attachment={attachment}\n key={attachment.id}\n menuActions={[\n {\n name: props.strings?.removeAttachment ?? 'Remove',\n icon: (\n <div aria-label={removeAttachmentButtonString()} data-testid=\"attachment-upload-card-remove\">\n <Icon iconName=\"CancelAttachmentUpload\" className={mergeStyles(actionIconStyle)} />\n </div>\n ),\n onClick: (attachment) => {\n return new Promise((resolve, reject) => {\n try {\n props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);\n resolve();\n } catch (e) {\n reject((e as Error).message);\n }\n });\n }\n }\n ]}\n strings={props.strings}\n />\n ))}\n </_AttachmentCardGroup>\n );\n};\n"]}
1	+ {"version":3,"file":"AttachmentUploadCards.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentUploadCards.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,wCAAwC,EAAE,MAAM,iBAAiB,CAAC;AAqC3E,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACvF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,wCAAwC,EAAE,CAAC;IACjE,MAAM,4BAA4B,GAAG,OAAO,CAC1C,GAAG,EAAE,CAAC,GAAG,EAAE;;QACT,OAAO,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB,CAAC;IAC3E,CAAC,EACD,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAClE,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,oBAAoB,IAAC,qBAAqB,EAAE,0BAA0B,CAAC,IAAI,IACzE,WAAW;QACV,WAAW;aACR,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;aACzC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;;YAAC,OAAA,CACnB,oBAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,WAAW,EAAE;oBACX;wBACE,IAAI,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,QAAQ;wBACjD,IAAI,EAAE,CACJ,2CAAiB,4BAA4B,EAAE,iBAAc,+BAA+B;4BAC1F,oBAAC,IAAI,IAAC,QAAQ,EAAC,wBAAwB,EAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,GAAI,CAC/E,CACP;wBACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;4BACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gCACrC,IAAI,CAAC;oCACH,KAAK,CAAC,wBAAwB,IAAI,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;oCAChF,OAAO,EAAE,CAAC;gCACZ,CAAC;gCAAC,OAAO,CAAC,EAAE,CAAC;oCACX,MAAM,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;gCAC/B,CAAC;4BACH,CAAC,CAAC,CAAC;wBACL,CAAC;qBACF;iBACF,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAA;SAAA,CAAC,CACe,CACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, mergeStyles } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\n\n/*\n Strings of _AttachmentUploadCards that can be overridden.\n \n @internal\n /\nexport interface _AttachmentUploadCardsStrings {\n /* Aria label to notify user when focus is on cancel attachment upload button. /\n removeAttachment: string;\n /* Aria label to notify user attachment uploading starts. /\n uploading: string;\n /* Aria label to notify user attachment is uploaded. /\n uploadCompleted: string;\n /* Aria label to notify user more attachment action menu. /\n attachmentMoreMenu: string;\n}\n\n/\n @internal\n /\nexport interface AttachmentUploadCardsProps {\n /\n Optional array of {@link AttachmentMetadataInProgress}\n /\n attachments?: AttachmentMetadataInProgress[];\n /\n Optional callback to remove the attachment upload before sending by clicking on\n * cancel icon.\n /\n onCancelAttachmentUpload?: (attachmentId: string) => void;\n /\n Optional arialabel strings for attachment upload cards\n /\n strings?: _AttachmentUploadCardsStrings;\n}\n\nconst actionIconStyle = { height: '1rem' };\n\n/\n @internal\n */\nexport const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.Element => {\n const attachments = props.attachments;\n const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n const removeAttachmentButtonString = useMemo(\n () => () => {\n return props.strings?.removeAttachment ?? localeStrings.removeAttachment;\n },\n [props.strings?.removeAttachment, localeStrings.removeAttachment]\n );\n\n if (!attachments \|\| attachments.length === 0) {\n return <></>;\n }\n\n return (\n <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Flex}>\n {attachments &&\n attachments\n .filter((attachment) => !attachment.error)\n .map((attachment) => (\n <_AttachmentCard\n attachment={attachment}\n key={attachment.id}\n menuActions={[\n {\n name: props.strings?.removeAttachment ?? 'Remove',\n icon: (\n <div aria-label={removeAttachmentButtonString()} data-testid=\"attachment-upload-card-remove\">\n <Icon iconName=\"CancelAttachmentUpload\" className={mergeStyles(actionIconStyle)} />\n </div>\n ),\n onClick: (attachment) => {\n return new Promise((resolve, reject) => {\n try {\n props.onCancelAttachmentUpload && props.onCancelAttachmentUpload(attachment.id);\n resolve();\n } catch (e) {\n reject((e as Error).message);\n }\n });\n }\n }\n ]}\n strings={props.strings}\n />\n ))}\n </_AttachmentCardGroup>\n );\n};\n"]}

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

@@ -11,6 +11,8 @@ import { createStyleFromV8Style } from '../../styles/v8StyleShim';
 import { mergeClasses } from '@fluentui/react-components';
 import { useChatMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';
 import { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /** @private */
 const MessageBubble = (props) => {
     const ids = useIdentifiers();
@@ -54,6 +56,10 @@ const MessageBubble = (props) => {
     ]);
     const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
     const chatMessageCommonStyles = useChatMessageCommonStyles();
+    /* @conditional-compile-remove(attachment-upload) */
+    const hasMultipleAttachments = useMemo(() => {
+        return doesMessageContainMultipleAttachments(message);
+    }, [message]);
     const chatMessageStyles = useChatMessageStyles();
     const chatItemMessageContainerClassName = mergeClasses(chatMessageCommonStyles.body, chatMessageStyles.body,
     // disable placeholder functionality for GA releases as it might confuse users
@@ -61,7 +67,9 @@ const MessageBubble = (props) => {
         ? chatMessageCommonStyles.blocked
         : props.message.status === 'failed'
             ? chatMessageCommonStyles.failed
-            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
+            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap,
+    /* @conditional-compile-remove(attachment-upload) */
+    hasMultipleAttachments ? chatMessageStyles.multipleAttachments : undefined, message.attached === 'top' || message.attached === false
         ? chatMessageStyles.bodyWithAvatar
         : chatMessageStyles.bodyWithoutAvatar,
     // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { chatMessageDateStyle, chatMessageAuthorStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ComponentSlotStyle } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMenuAction } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n generateCustomizedTimestamp,\n generateDefaultTimestamp,\n getMessageBubbleContent,\n getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n strings: MessageThreadStrings;\n userId: string;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n};\n\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 showDate,\n messageContainerStyle,\n strings,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n inlineImageOptions,\n shouldOverlapAvatarAndMessage,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onDisplayDateTimeString\n } = props;\n\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn\n ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n : '';\n\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n const getMessageDetails = useCallback(() => {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }, [strings.editedTag, theme, message]);\n\n const getContent = useCallback(() => {\n return getMessageBubbleContent(\n message,\n strings,\n userId,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment\n );\n }, [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / onRenderAttachmentDownloads,\n strings,\n userId\n ]);\n\n const isBlockedMessage =\n false \|\| / @conditional-compile-remove(data-loss-prevention) / message.messageType === 'blocked';\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n const chatMessageStyles = useChatMessageStyles();\n const chatItemMessageContainerClassName = mergeClasses(\n chatMessageCommonStyles.body,\n chatMessageStyles.body,\n // disable placeholder functionality for GA releases as it might confuse users\n chatMessageStyles.bodyWithPlaceholderImage,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap,\n message.attached === 'top' \|\| message.attached === false\n ? chatMessageStyles.bodyWithAvatar\n : chatMessageStyles.bodyWithoutAvatar,\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n mergeStyles(messageContainerStyle)\n );\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n <FluentChatMessage\n attached={attached}\n key={props.message.messageId}\n root={{\n className: chatMessageStyles.root,\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n }}\n author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>}\n body={{\n className: chatItemMessageContainerClassName,\n style: { ...createStyleFromV8Style(messageContainerStyle) }\n }}\n data-ui-id=\"chat-composite-message\"\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>\n }\n details={getMessageDetails()}\n >\n {getContent()}\n </FluentChatMessage>\n </div>\n </>\n );\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { chatMessageDateStyle, chatMessageAuthorStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ComponentSlotStyle } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMenuAction } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n generateCustomizedTimestamp,\n generateDefaultTimestamp,\n getMessageBubbleContent,\n getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n strings: MessageThreadStrings;\n userId: string;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n};\n\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 showDate,\n messageContainerStyle,\n strings,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n inlineImageOptions,\n shouldOverlapAvatarAndMessage,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onDisplayDateTimeString\n } = props;\n\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn\n ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n : '';\n\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n const getMessageDetails = useCallback(() => {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }, [strings.editedTag, theme, message]);\n\n const getContent = useCallback(() => {\n return getMessageBubbleContent(\n message,\n strings,\n userId,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment\n );\n }, [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / onRenderAttachmentDownloads,\n strings,\n userId\n ]);\n\n const isBlockedMessage =\n false \|\| / @conditional-compile-remove(data-loss-prevention) / message.messageType === 'blocked';\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n / @conditional-compile-remove(attachment-upload) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message as ChatMessage);\n }, [message]);\n const chatMessageStyles = useChatMessageStyles();\n const chatItemMessageContainerClassName = mergeClasses(\n chatMessageCommonStyles.body,\n chatMessageStyles.body,\n // disable placeholder functionality for GA releases as it might confuse users\n chatMessageStyles.bodyWithPlaceholderImage,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap,\n / @conditional-compile-remove(attachment-upload) /\n hasMultipleAttachments ? chatMessageStyles.multipleAttachments : undefined,\n message.attached === 'top' \|\| message.attached === false\n ? chatMessageStyles.bodyWithAvatar\n : chatMessageStyles.bodyWithoutAvatar,\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n mergeStyles(messageContainerStyle)\n );\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n <FluentChatMessage\n attached={attached}\n key={props.message.messageId}\n root={{\n className: chatMessageStyles.root,\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n }}\n author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>}\n body={{\n className: chatItemMessageContainerClassName,\n style: { ...createStyleFromV8Style(messageContainerStyle) }\n }}\n data-ui-id=\"chat-composite-message\"\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>\n }\n details={getMessageDetails()}\n >\n {getContent()}\n </FluentChatMessage>\n </div>\n </>\n );\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}

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

@@ -17,7 +17,7 @@ import { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';
 import { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
 import { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';
 /* @conditional-compile-remove(attachment-upload) */
-import { attachmentMetadataReducer } from '../../utils/ChatMessageComponentAsEditBoxUtils';
+import { attachmentMetadataReducer, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /* @conditional-compile-remove(attachment-upload) */
 import { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';
@@ -59,6 +59,10 @@ export const ChatMessageComponentAsEditBox = (props) => {
     const onRenderThemedSubmitIcon = useCallback((isHover) => {
         return onRenderSubmitIcon(iconClassName(isHover));
     }, [iconClassName]);
+    /* @conditional-compile-remove(attachment-upload) */
+    const hasMultipleAttachments = useMemo(() => {
+        return doesMessageContainMultipleAttachments(message);
+    }, [message]);
     const editBoxStyles = useMemo(() => {
         return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
     }, [theme.palette.themePrimary]);
@@ -108,7 +112,9 @@ export const ChatMessageComponentAsEditBox = (props) => {
     };
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     return (React.createElement(ChatMyMessage, { attached: attached, root: {
-            className: chatMyMessageStyles.root
+            className: mergeClasses(chatMyMessageStyles.root,
+            /* @conditional-compile-remove(attachment-upload) */
+            hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined)
         }, body: {
             className: mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
         } }, getContent()));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(attachment-upload) /\nimport { useReducer } from 'react';\nimport { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../../styles/EditBox.styles';\nimport { InputBoxComponent } from '../../InputBoxComponent';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\n/ @conditional-compile-remove(attachment-upload) /\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport {\n chatMessageFailedTagStyle,\n editChatMessageFailedTagStyle,\n chatMessageFailedTagStackItemStyle,\n editChatMessageButtonsStackStyle,\n useChatMessageEditContainerStyles\n} from '../../styles/ChatMessageComponent.styles';\n/ @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../../MentionPopover';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(attachment-upload) /\nimport { attachmentMetadataReducer } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(attachment-upload) /\nimport { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\n/* @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(attachment-upload) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n / @conditional-compile-remove(mention) /\n const { mentionLookupOptions } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n / @conditional-compile-remove(attachment-upload) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n / @conditional-compile-remove(attachment-upload) / attachmentMetadata ?? []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (event?: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(inputBoxIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n }, [theme.palette.themePrimary]);\n\n / @conditional-compile-remove(attachment-upload) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n !!attachmentMetadata &&\n attachmentMetadata.length > 0 && (\n <div style={{ margin: '0.25rem' }}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={(id) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id });\n }}\n />\n </div>\n )\n );\n }, [attachmentMetadata]);\n\n const getContent = (): JSX.Element => {\n return (\n <>\n <InputBoxComponent\n data-ui-id=\"edit-box\"\n textFieldRef={editTextFieldRef}\n inputClassName={editBoxStyle}\n placeholderText={strings.editBoxPlaceholderText}\n textValue={textValue}\n onChange={setText}\n onKeyDown={(ev) => {\n if (ev.key === 'ArrowUp' \|\| ev.key === 'ArrowDown') {\n ev.stopPropagation();\n }\n }}\n onEnterKeyDown={() => {\n submitEnabled &&\n onSubmit(\n textValue,\n / @conditional-compile-remove(attachment-upload) /\n attachmentMetadata\n );\n }}\n supportNewline={false}\n maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n errorMessage={textTooLongMessage}\n styles={editBoxStyles}\n / @conditional-compile-remove(mention) /\n mentionLookupOptions={mentionLookupOptions}\n ></InputBoxComponent>\n <Stack\n horizontal\n horizontalAlign=\"end\"\n className={editChatMessageButtonsStackStyle}\n tokens={{ childrenGap: '0.25rem' }}\n >\n {message.failureReason && (\n <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n {message.failureReason}\n </div>\n </Stack.Item>\n )}\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n />\n </Stack.Item>\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n // it's very important to pass an empty attachment here\n // so when user remvoes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n submitEnabled &&\n onSubmit(textValue, / @conditional-compile-remove(attachment-upload) / attachmentMetadata);\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </Stack.Item>\n </Stack>\n {/ @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads()}\n </>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: chatMyMessageStyles.root\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(attachment-upload) /\nimport { useReducer } from 'react';\nimport { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../../styles/EditBox.styles';\nimport { InputBoxComponent } from '../../InputBoxComponent';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\n/ @conditional-compile-remove(attachment-upload) /\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport {\n chatMessageFailedTagStyle,\n editChatMessageFailedTagStyle,\n chatMessageFailedTagStackItemStyle,\n editChatMessageButtonsStackStyle,\n useChatMessageEditContainerStyles\n} from '../../styles/ChatMessageComponent.styles';\n/ @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../../MentionPopover';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(attachment-upload) /\nimport {\n attachmentMetadataReducer,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(attachment-upload) /\nimport { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\n/* @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(attachment-upload) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n / @conditional-compile-remove(mention) /\n const { mentionLookupOptions } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n / @conditional-compile-remove(attachment-upload) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n / @conditional-compile-remove(attachment-upload) / attachmentMetadata ?? []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (event?: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(inputBoxIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n / @conditional-compile-remove(attachment-upload) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message);\n }, [message]);\n\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n }, [theme.palette.themePrimary]);\n\n / @conditional-compile-remove(attachment-upload) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n !!attachmentMetadata &&\n attachmentMetadata.length > 0 && (\n <div style={{ margin: '0.25rem' }}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={(id) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id });\n }}\n />\n </div>\n )\n );\n }, [attachmentMetadata]);\n\n const getContent = (): JSX.Element => {\n return (\n <>\n <InputBoxComponent\n data-ui-id=\"edit-box\"\n textFieldRef={editTextFieldRef}\n inputClassName={editBoxStyle}\n placeholderText={strings.editBoxPlaceholderText}\n textValue={textValue}\n onChange={setText}\n onKeyDown={(ev) => {\n if (ev.key === 'ArrowUp' \|\| ev.key === 'ArrowDown') {\n ev.stopPropagation();\n }\n }}\n onEnterKeyDown={() => {\n submitEnabled &&\n onSubmit(\n textValue,\n / @conditional-compile-remove(attachment-upload) /\n attachmentMetadata\n );\n }}\n supportNewline={false}\n maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n errorMessage={textTooLongMessage}\n styles={editBoxStyles}\n / @conditional-compile-remove(mention) /\n mentionLookupOptions={mentionLookupOptions}\n ></InputBoxComponent>\n <Stack\n horizontal\n horizontalAlign=\"end\"\n className={editChatMessageButtonsStackStyle}\n tokens={{ childrenGap: '0.25rem' }}\n >\n {message.failureReason && (\n <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n {message.failureReason}\n </div>\n </Stack.Item>\n )}\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n />\n </Stack.Item>\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n // it's very important to pass an empty attachment here\n // so when user remvoes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n submitEnabled &&\n onSubmit(textValue, / @conditional-compile-remove(attachment-upload) / attachmentMetadata);\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </Stack.Item>\n </Stack>\n {/ @conditional-compile-remove(attachment-upload) / onRenderAttachmentUploads()}\n </>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n / @conditional-compile-remove(attachment-upload) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n"]}

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

@@ -5,7 +5,7 @@ import React, { useMemo } from 'react';
 import { Suspense } from 'react';
 import { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';
 /* @conditional-compile-remove(rich-text-editor) */
-import { ErrorBoundary } from '../../ErrorBoundary';
+import { _ErrorBoundary } from '../../ErrorBoundary';
 /* @conditional-compile-remove(rich-text-editor) */
 const ChatMessageComponentAsRichTextEditBox = React.lazy(() => import('./ChatMessageComponentAsRichTextEditBox'));
 /**
@@ -27,7 +27,7 @@ export const ChatMessageComponentAsEditBoxPicker = (props) => {
     }, [props]);
     /* @conditional-compile-remove(rich-text-editor) */
     if (richTextEditor) {
-        return (React.createElement(ErrorBoundary, { fallback: simpleEditBox },
+        return (React.createElement(_ErrorBoundary, { fallback: simpleEditBox },
             React.createElement(Suspense, { fallback: simpleEditBox },
                 React.createElement(ChatMessageComponentAsRichTextEditBox, Object.assign({}, props)))));
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsEditBoxPicker.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,mDAAmD;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAKhF,mDAAmD;AACnD,OAAO,EAAE,~~aAAa~~,EAAE,MAAM,qBAAqB,CAAC;~~AAEpD~~,mDAAmD;AACnD,MAAM,qCAAqC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,yCAAyC,CAAC,CAAC,CAAC;AAElH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,GAEtD,EAAE,CAAC,MAAM,CAAC,yCAAyC,CAAC,CAAC;AAmBxD;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAAC,KAA+C,EAAe,EAAE;IAClH,mDAAmD;IACnD,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,oBAAC,6BAA6B,oBAAK,KAAK,EAAI,CAAC;IACtD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,mDAAmD;IACnD,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,CACL,oBAAC,~~aAAa~~,IAAC,QAAQ,EAAE,aAAa;~~YACpC~~,oBAAC,QAAQ,IAAC,QAAQ,EAAE,aAAa;gBAC/B,oBAAC,qCAAqC,oBAAK,KAAK,EAAI,CAC3C,~~CACG~~,~~CACjB~~,CAAC;IACJ,CAAC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(rich-text-editor) /\nimport { Suspense } from 'react';\nimport { ChatMessage } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\n/ @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../../MentionPopover';\n/ @conditional-compile-remove(rich-text-editor) /\nimport type { ChatMessageComponentAsRichTextEditBoxProps } from './ChatMessageComponentAsRichTextEditBox';\n/ @conditional-compile-remove(rich-text-editor) /\nimport { ~~ErrorBoundary~~ } from '../../ErrorBoundary';\n\n/ @conditional-compile-remove(rich-text-editor) /\nconst ChatMessageComponentAsRichTextEditBox = React.lazy(() => import('./ChatMessageComponentAsRichTextEditBox'));\n\n/\n @private\n * Use this function to load RoosterJS dependencies early in the lifecycle.\n * It should be the same import as used for lazy loading.\n \n @conditional-compile-remove(rich-text-editor)\n /\nexport const loadChatMessageComponentAsRichTextEditBox = (): Promise<{\n default: React.ComponentType<ChatMessageComponentAsRichTextEditBoxProps>;\n}> => import('./ChatMessageComponentAsRichTextEditBox');\n\n/\n @private\n /\nexport type ChatMessageComponentAsEditBoxPickerProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n richTextEditor?: boolean;\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBoxPicker = (props: ChatMessageComponentAsEditBoxPickerProps): JSX.Element => {\n / @conditional-compile-remove(rich-text-editor) /\n const { richTextEditor } = props;\n\n const simpleEditBox = useMemo(() => {\n return <ChatMessageComponentAsEditBox {...props} />;\n }, [props]);\n\n / @conditional-compile-remove(rich-text-editor) */\n if (richTextEditor) {\n return (\n <~~ErrorBoundary~~ fallback={simpleEditBox}>\n <Suspense fallback={simpleEditBox}>\n <ChatMessageComponentAsRichTextEditBox {...props} />\n </Suspense>\n </~~ErrorBoundary~~>\n );\n }\n\n return simpleEditBox;\n};\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsEditBoxPicker.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,mDAAmD;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAKhF,mDAAmD;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,mDAAmD;AACnD,MAAM,qCAAqC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,yCAAyC,CAAC,CAAC,CAAC;AAElH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,GAEtD,EAAE,CAAC,MAAM,CAAC,yCAAyC,CAAC,CAAC;AAmBxD;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAAC,KAA+C,EAAe,EAAE;IAClH,mDAAmD;IACnD,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,oBAAC,6BAA6B,oBAAK,KAAK,EAAI,CAAC;IACtD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,mDAAmD;IACnD,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,CACL,oBAAC,cAAc,IAAC,QAAQ,EAAE,aAAa;YACrC,oBAAC,QAAQ,IAAC,QAAQ,EAAE,aAAa;gBAC/B,oBAAC,qCAAqC,oBAAK,KAAK,EAAI,CAC3C,CACI,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(rich-text-editor) /\nimport { Suspense } from 'react';\nimport { ChatMessage } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\n/ @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../../MentionPopover';\n/ @conditional-compile-remove(rich-text-editor) /\nimport type { ChatMessageComponentAsRichTextEditBoxProps } from './ChatMessageComponentAsRichTextEditBox';\n/ @conditional-compile-remove(rich-text-editor) /\nimport { _ErrorBoundary } from '../../ErrorBoundary';\n\n/ @conditional-compile-remove(rich-text-editor) /\nconst ChatMessageComponentAsRichTextEditBox = React.lazy(() => import('./ChatMessageComponentAsRichTextEditBox'));\n\n/\n @private\n * Use this function to load RoosterJS dependencies early in the lifecycle.\n * It should be the same import as used for lazy loading.\n \n @conditional-compile-remove(rich-text-editor)\n /\nexport const loadChatMessageComponentAsRichTextEditBox = (): Promise<{\n default: React.ComponentType<ChatMessageComponentAsRichTextEditBoxProps>;\n}> => import('./ChatMessageComponentAsRichTextEditBox');\n\n/\n @private\n /\nexport type ChatMessageComponentAsEditBoxPickerProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n richTextEditor?: boolean;\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBoxPicker = (props: ChatMessageComponentAsEditBoxPickerProps): JSX.Element => {\n / @conditional-compile-remove(rich-text-editor) /\n const { richTextEditor } = props;\n\n const simpleEditBox = useMemo(() => {\n return <ChatMessageComponentAsEditBox {...props} />;\n }, [props]);\n\n / @conditional-compile-remove(rich-text-editor) */\n if (richTextEditor) {\n return (\n <_ErrorBoundary fallback={simpleEditBox}>\n <Suspense fallback={simpleEditBox}>\n <ChatMessageComponentAsRichTextEditBox {...props} />\n </Suspense>\n </_ErrorBoundary>\n );\n }\n\n return simpleEditBox;\n};\n"]}

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

@@ -16,7 +16,7 @@ import { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMess
 import { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';
 import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /* @conditional-compile-remove(attachment-upload) */
-import { attachmentMetadataReducer, getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';
+import { attachmentMetadataReducer, getMessageWithAttachmentMetadata, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 import { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';
 import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';
 import { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';
@@ -58,6 +58,10 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
     const onRenderThemedSubmitIcon = useCallback((isHover) => {
         return onRenderSubmitIcon(iconClassName(isHover));
     }, [iconClassName]);
+    /* @conditional-compile-remove(attachment-upload) */
+    const hasMultipleAttachments = useMemo(() => {
+        return doesMessageContainMultipleAttachments(message);
+    }, [message]);
     const actionButtons = useMemo(() => {
         return (React.createElement(Stack, { horizontal: true },
             React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
@@ -116,7 +120,9 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
     };
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     return (React.createElement(ChatMyMessage, { attached: attached, root: {
-            className: chatMyMessageStyles.root
+            className: mergeClasses(chatMyMessageStyles.root,
+            /* @conditional-compile-remove(attachment-upload) */
+            hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined)
         }, body: {
             className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
         } }, getContent()));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useMemo, useState } from 'react';\n/* @conditional-compile-remove(attachment-upload) /\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(attachment-upload) /\nimport {\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/ @conditional-compile-remove(attachment-upload) /\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n\n/* @private /\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(attachment-upload) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n / @conditional-compile-remove(attachment-upload) / attachmentMetadata ?? []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n const setText = (newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId={strings.editBoxCancelButton}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n // it's very important to pass an empty attachment here\n // so when user remvoes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n submitEnabled &&\n onSubmit(textValue, / @conditional-compile-remove(attachment-upload) / attachmentMetadata);\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId={strings.editBoxSubmitButton}\n />\n </Stack>\n );\n }, [\n / @conditional-compile-remove(attachment-upload) /\n attachmentMetadata,\n message.messageId,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n onSubmit,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n submitEnabled,\n textValue\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return { ...locale.richTextSendBox, ...strings };\n return locale.sendBox;\n }, [\n / @conditional-compile-remove(rich-text-editor) / locale.richTextSendBox,\n / @conditional-compile-remove(rich-text-editor) / strings,\n locale.sendBox\n ]);\n\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id: attachmentId });\n }, []);\n\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={setText}\n editorComponentRef={editTextFieldRef}\n initialContent={message.content}\n content={textValue}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n / @conditional-compile-remove(attachment-upload) */\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: chatMyMessageStyles.root\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n\nexport default ChatMessageComponentAsRichTextEditBox;\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useMemo, useState } from 'react';\n/* @conditional-compile-remove(attachment-upload) /\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(attachment-upload) /\nimport {\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/ @conditional-compile-remove(attachment-upload) /\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n\n/* @private /\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(attachment-upload) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n / @conditional-compile-remove(attachment-upload) / attachmentMetadata ?? []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n const setText = (newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n / @conditional-compile-remove(attachment-upload) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message);\n }, [message]);\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId={strings.editBoxCancelButton}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n // it's very important to pass an empty attachment here\n // so when user remvoes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n submitEnabled &&\n onSubmit(textValue, / @conditional-compile-remove(attachment-upload) / attachmentMetadata);\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId={strings.editBoxSubmitButton}\n />\n </Stack>\n );\n }, [\n / @conditional-compile-remove(attachment-upload) /\n attachmentMetadata,\n message.messageId,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n onSubmit,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n submitEnabled,\n textValue\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return { ...locale.richTextSendBox, ...strings };\n return locale.sendBox;\n }, [\n / @conditional-compile-remove(rich-text-editor) / locale.richTextSendBox,\n / @conditional-compile-remove(rich-text-editor) / strings,\n locale.sendBox\n ]);\n\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id: attachmentId });\n }, []);\n\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={setText}\n editorComponentRef={editTextFieldRef}\n initialContent={message.content}\n content={textValue}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n / @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n / @conditional-compile-remove(attachment-upload) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n\nexport default ChatMessageComponentAsRichTextEditBox;\n"]}

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

@@ -13,6 +13,8 @@ import { createStyleFromV8Style } from '../../styles/v8StyleShim';
 import { mergeClasses } from '@fluentui/react-components';
 import { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';
 import { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /** @private */
 const MessageBubble = (props) => {
     var _a;
@@ -68,6 +70,10 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
+    /* @conditional-compile-remove(attachment-upload) */
+    const hasMultipleAttachments = useMemo(() => {
+        return doesMessageContainMultipleAttachments(message);
+    }, [message]);
     const getMessageDetails = useCallback(() => {
         if (messageStatus === 'failed') {
             return React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
@@ -105,7 +111,9 @@ const MessageBubble = (props) => {
                         ? chatMessageCommonStyles.blocked
                         : props.message.status === 'failed'
                             ? chatMessageCommonStyles.failed
-                            : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),
+                            : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,
+                    /* @conditional-compile-remove(attachment-upload) */
+                    hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined, mergeStyles(messageContainerStyle)),
                     style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
                     ref: messageRef
                 }, root: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { chatMessageDateStyle, chatMessageFailedTagStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMenuAction } from '../../../types/Attachment';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n generateCustomizedTimestamp,\n generateDefaultTimestamp,\n getMessageBubbleContent,\n getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onEditClick: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n strings: MessageThreadStrings;\n userId: string;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n remoteParticipantsCount?: number;\n onActionButtonClick: (\n message: ChatMessage,\n setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n ) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/* @private /\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n\n const {\n userId,\n message,\n onRemoveClick,\n onResendClick,\n disableEditing,\n showDate,\n messageContainerStyle,\n strings,\n onEditClick,\n remoteParticipantsCount = 0,\n onRenderAvatar,\n showMessageStatus,\n messageStatus,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onDisplayDateTimeString,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment\n } = props;\n\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn\n ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n : '';\n\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n // `focused` state is used for show/hide actionMenu\n const [focused, setFocused] = React.useState<boolean>(false);\n\n // The chat message action flyout should target the Chat.Message action menu if clicked,\n // or target the chat message if opened via touch press.\n // Undefined indicates the flyout menu should not be being shown.\n const messageRef = useRef<HTMLDivElement \| null>(null);\n const messageActionButtonRef = useRef<HTMLDivElement \| null>(null);\n const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n React.MutableRefObject<HTMLElement \| null> \| undefined\n >(undefined);\n\n const chatActionsEnabled =\n !disableEditing &&\n message.status !== 'sending' &&\n !!message.mine &&\n / @conditional-compile-remove(data-loss-prevention) / message.messageType !== 'blocked';\n const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n const actionMenuProps = chatMessageActionMenuProps({\n ariaLabel: strings.actionMenuMoreOptions ?? '',\n enabled: chatActionsEnabled,\n menuButtonRef: messageActionButtonRef,\n menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n onActionButtonClick: () => {\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n setChatMessageActionFlyoutTarget(messageActionButtonRef);\n }\n },\n theme\n });\n\n const onActionFlyoutDismiss = useCallback((): void => {\n // When the flyout dismiss is called, since we control if the action flyout is visible\n // or not we need to set the target to undefined here to actually hide the action flyout\n setChatMessageActionFlyoutTarget(undefined);\n }, [setChatMessageActionFlyoutTarget]);\n\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }\n }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n const getContent = useCallback(() => {\n return getMessageBubbleContent(\n message,\n strings,\n userId,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment\n );\n }, [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / onRenderAttachmentDownloads,\n strings,\n userId\n ]);\n\n const isBlockedMessage =\n false \|\| / @conditional-compile-remove(data-loss-prevention) / message.messageType === 'blocked';\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n <ChatMyMessage\n attached={attached}\n key={props.message.messageId}\n body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(\n chatMessageCommonStyles.body,\n chatMyMessageStyles.body,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n mergeStyles(messageContainerStyle)\n ),\n style: { ...createStyleFromV8Style(messageContainerStyle) },\n ref: messageRef\n }}\n root={{\n className: chatMyMessageStyles.root,\n onBlur: (e) => {\n // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n if (chatMessageActionFlyoutTarget?.current) {\n // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n return;\n }\n const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n setFocused(shouldPreserveFocusState);\n },\n onFocus: () => {\n // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n setFocused(true);\n },\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n role: 'none',\n tabIndex: -1\n }}\n data-ui-id=\"chat-composite-message\"\n author={\n <Text className={chatMessageDateStyle} tabIndex={0}>\n {message.senderDisplayName}\n </Text>\n }\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n {formattedTimestamp}\n </Text>\n }\n details={getMessageDetails()}\n actions={{\n children: actionMenuProps?.children,\n className: mergeClasses(\n chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused \|\| chatMessageActionFlyoutTarget?.current\n ? chatMyMessageStyles.menuVisible\n : chatMyMessageStyles.menuHidden,\n attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n )\n }}\n onTouchStart={() => setWasInteractionByTouch(true)}\n onPointerDown={() => setWasInteractionByTouch(false)}\n onKeyDown={() => setWasInteractionByTouch(false)}\n onClick={() => {\n if (!wasInteractionByTouch) {\n return;\n }\n // If the message was touched via touch we immediately open the menu\n // flyout (when using mouse the 3-dot menu that appears on hover\n // must be clicked to open the flyout).\n // In doing so here we set the target of the flyout to be the message and\n // not the 3-dot menu button to position the flyout correctly.\n setChatMessageActionFlyoutTarget(messageRef);\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n }\n }}\n >\n {getContent()}\n </ChatMyMessage>\n </div>\n {chatActionsEnabled && (\n <ChatMessageActionFlyout\n hidden={!chatMessageActionFlyoutTarget}\n target={chatMessageActionFlyoutTarget}\n increaseFlyoutItemSize={wasInteractionByTouch}\n onDismiss={onActionFlyoutDismiss}\n onEditClick={onEditClick}\n onRemoveClick={onRemoveClick}\n onResendClick={onResendClick}\n strings={strings}\n messageReadBy={messageReadBy}\n messageStatus={messageStatus ?? 'failed'}\n remoteParticipantsCount={remoteParticipantsCount}\n onRenderAvatar={onRenderAvatar}\n showMessageStatus={showMessageStatus}\n />\n )}\n </>\n );\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}
1	+ {"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { chatMessageDateStyle, chatMessageFailedTagStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMenuAction } from '../../../types/Attachment';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n generateCustomizedTimestamp,\n generateDefaultTimestamp,\n getMessageBubbleContent,\n getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onEditClick: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n strings: MessageThreadStrings;\n userId: string;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n remoteParticipantsCount?: number;\n onActionButtonClick: (\n message: ChatMessage,\n setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n ) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/* @private /\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n\n const {\n userId,\n message,\n onRemoveClick,\n onResendClick,\n disableEditing,\n showDate,\n messageContainerStyle,\n strings,\n onEditClick,\n remoteParticipantsCount = 0,\n onRenderAvatar,\n showMessageStatus,\n messageStatus,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onDisplayDateTimeString,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment\n } = props;\n\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn\n ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n : '';\n\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n // `focused` state is used for show/hide actionMenu\n const [focused, setFocused] = React.useState<boolean>(false);\n\n // The chat message action flyout should target the Chat.Message action menu if clicked,\n // or target the chat message if opened via touch press.\n // Undefined indicates the flyout menu should not be being shown.\n const messageRef = useRef<HTMLDivElement \| null>(null);\n const messageActionButtonRef = useRef<HTMLDivElement \| null>(null);\n const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n React.MutableRefObject<HTMLElement \| null> \| undefined\n >(undefined);\n\n const chatActionsEnabled =\n !disableEditing &&\n message.status !== 'sending' &&\n !!message.mine &&\n / @conditional-compile-remove(data-loss-prevention) / message.messageType !== 'blocked';\n const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n const actionMenuProps = chatMessageActionMenuProps({\n ariaLabel: strings.actionMenuMoreOptions ?? '',\n enabled: chatActionsEnabled,\n menuButtonRef: messageActionButtonRef,\n menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n onActionButtonClick: () => {\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n setChatMessageActionFlyoutTarget(messageActionButtonRef);\n }\n },\n theme\n });\n\n const onActionFlyoutDismiss = useCallback((): void => {\n // When the flyout dismiss is called, since we control if the action flyout is visible\n // or not we need to set the target to undefined here to actually hide the action flyout\n setChatMessageActionFlyoutTarget(undefined);\n }, [setChatMessageActionFlyoutTarget]);\n\n / @conditional-compile-remove(attachment-upload) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message as ChatMessage);\n }, [message]);\n\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }\n }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n const getContent = useCallback(() => {\n return getMessageBubbleContent(\n message,\n strings,\n userId,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment\n );\n }, [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / onRenderAttachmentDownloads,\n strings,\n userId\n ]);\n\n const isBlockedMessage =\n false \|\| / @conditional-compile-remove(data-loss-prevention) / message.messageType === 'blocked';\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n <ChatMyMessage\n attached={attached}\n key={props.message.messageId}\n body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(\n chatMessageCommonStyles.body,\n chatMyMessageStyles.body,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n / @conditional-compile-remove(attachment-upload) /\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined,\n mergeStyles(messageContainerStyle)\n ),\n style: { ...createStyleFromV8Style(messageContainerStyle) },\n ref: messageRef\n }}\n root={{\n className: chatMyMessageStyles.root,\n onBlur: (e) => {\n // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n if (chatMessageActionFlyoutTarget?.current) {\n // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n return;\n }\n const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n setFocused(shouldPreserveFocusState);\n },\n onFocus: () => {\n // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n setFocused(true);\n },\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n role: 'none',\n tabIndex: -1\n }}\n data-ui-id=\"chat-composite-message\"\n author={\n <Text className={chatMessageDateStyle} tabIndex={0}>\n {message.senderDisplayName}\n </Text>\n }\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n {formattedTimestamp}\n </Text>\n }\n details={getMessageDetails()}\n actions={{\n children: actionMenuProps?.children,\n className: mergeClasses(\n chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused \|\| chatMessageActionFlyoutTarget?.current\n ? chatMyMessageStyles.menuVisible\n : chatMyMessageStyles.menuHidden,\n attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n )\n }}\n onTouchStart={() => setWasInteractionByTouch(true)}\n onPointerDown={() => setWasInteractionByTouch(false)}\n onKeyDown={() => setWasInteractionByTouch(false)}\n onClick={() => {\n if (!wasInteractionByTouch) {\n return;\n }\n // If the message was touched via touch we immediately open the menu\n // flyout (when using mouse the 3-dot menu that appears on hover\n // must be clicked to open the flyout).\n // In doing so here we set the target of the flyout to be the message and\n // not the 3-dot menu button to position the flyout correctly.\n setChatMessageActionFlyoutTarget(messageRef);\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n }\n }}\n >\n {getContent()}\n </ChatMyMessage>\n </div>\n {chatActionsEnabled && (\n <ChatMessageActionFlyout\n hidden={!chatMessageActionFlyoutTarget}\n target={chatMessageActionFlyoutTarget}\n increaseFlyoutItemSize={wasInteractionByTouch}\n onDismiss={onActionFlyoutDismiss}\n onEditClick={onEditClick}\n onRemoveClick={onRemoveClick}\n onResendClick={onResendClick}\n strings={strings}\n messageReadBy={messageReadBy}\n messageStatus={messageStatus ?? 'failed'}\n remoteParticipantsCount={remoteParticipantsCount}\n onRenderAvatar={onRenderAvatar}\n showMessageStatus={showMessageStatus}\n />\n )}\n </>\n );\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}

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

@@ -7,10 +7,10 @@ interface ErrorBoundaryState {
     hasError: boolean;
 }
 /**
- * @private
+ * @internal
  * ErrorBoundary component to handle errors in React components.
  */
-export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export declare class _ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
     constructor(props: ErrorBoundaryProps);
     static getDerivedStateFromError(): ErrorBoundaryState;
     componentDidCatch(error: Error): void;

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

@@ -2,10 +2,10 @@
 // Licensed under the MIT License.
 import React from 'react';
 /**
- * @private
+ * @internal
  * ErrorBoundary component to handle errors in React components.
  */
-export class ErrorBoundary extends React.Component {
+export class _ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
         this.state = { hasError: false };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAoB,MAAM,OAAO,CAAC;AAWzC;;;GAGG;AACH,MAAM,OAAO,~~aAAc~~,SAAQ,KAAK,CAAC,SAAiD;~~IACxF~~,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,6DAA6D;QAC7D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB,CAAC,KAAY;QAC5B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,eAAe;YACf,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;QACD,4BAA4B;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode } from 'react';\n\ninterface ErrorBoundaryProps {\n fallback: ReactNode;\n children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean;\n}\n\n/*\n @~~private~~\n * ErrorBoundary component to handle errors in React components.\n */\nexport class ~~ErrorBoundary~~ extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(): ErrorBoundaryState {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n componentDidCatch(error: Error): void {\n console.error(error);\n }\n\n render(): ReactNode {\n if (this.state.hasError) {\n // handle error\n return this.props.fallback;\n }\n // otherwise render children\n return this.props.children;\n }\n}\n"]}
1	+ {"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAoB,MAAM,OAAO,CAAC;AAWzC;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAAiD;IACzF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,6DAA6D;QAC7D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB,CAAC,KAAY;QAC5B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,eAAe;YACf,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;QACD,4BAA4B;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode } from 'react';\n\ninterface ErrorBoundaryProps {\n fallback: ReactNode;\n children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean;\n}\n\n/*\n @internal\n * ErrorBoundary component to handle errors in React components.\n */\nexport class _ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(): ErrorBoundaryState {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n componentDidCatch(error: Error): void {\n console.error(error);\n }\n\n render(): ReactNode {\n if (this.state.hasError) {\n // handle error\n return this.props.fallback;\n }\n // otherwise render children\n return this.props.children;\n }\n}\n"]}