@azure/communication-react 1.15.0 → 1.16.0-alpha-202404160012

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js

@@ -17,18 +17,54 @@ import { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMes
  * @private
  */
 export const FluentChatMessageComponent = (props) => {
-    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, inlineImageOptions, userId } = props;
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, 
+    /* @conditional-compile-remove(date-time-customization) */
+    onDisplayDateTimeString, inlineImageOptions, 
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    actionsForAttachment, userId, 
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    onRenderAttachmentDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionOptions } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const onRenderAttachmentDownloadsMemo = useMemo(() => {
+        return onRenderAttachmentDownloads;
+        return undefined;
+    }, [onRenderAttachmentDownloads]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
     // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
     const defaultChatMessageRenderer = useCallback((messageProps) => {
-        if (messageProps.message.messageType === 'chat') {
-            return React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, messageProps, { strings: messageProps.strings, message: messageProps.message, userId: userId, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, inlineImageOptions: inlineImageOptions }));
+        if (messageProps.message.messageType === 'chat' ||
+            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
+            return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, messageProps, { 
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+                onRenderAttachmentDownloads: onRenderAttachmentDownloadsMemo, strings: messageProps.strings, message: messageProps.message, userId: userId, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, 
+                /* @conditional-compile-remove(date-time-customization) */
+                onDisplayDateTimeString: onDisplayDateTimeString, inlineImageOptions: inlineImageOptions, 
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+                actionsForAttachment: actionsForAttachment, 
+                /* @conditional-compile-remove(mention) */
+                mentionDisplayOptions: mentionOptions === null || mentionOptions === void 0 ? void 0 : mentionOptions.displayOptions })));
         }
         return React.createElement(React.Fragment, null);
-    }, [userId, shouldOverlapAvatarAndMessage, inlineImageOptions]);
+    }, [
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        onRenderAttachmentDownloadsMemo,
+        userId,
+        shouldOverlapAvatarAndMessage,
+        /* @conditional-compile-remove(date-time-customization) */
+        onDisplayDateTimeString,
+        inlineImageOptions,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        actionsForAttachment,
+        /* @conditional-compile-remove(mention) */
+        mentionOptions === null || mentionOptions === void 0 ? void 0 : mentionOptions.displayOptions
+    ]);
     const messageRenderer = useCallback((messageProps) => {
-        return onRenderMessage === undefined ? defaultChatMessageRenderer(Object.assign({}, messageProps)) : onRenderMessage(messageProps, defaultChatMessageRenderer);
+        return onRenderMessage === undefined
+            ? defaultChatMessageRenderer(Object.assign({}, messageProps))
+            : onRenderMessage(messageProps, defaultChatMessageRenderer);
     }, [defaultChatMessageRenderer, onRenderMessage]);
     const shouldShowAvatar = useMemo(() => {
         return message.attached === 'top' || message.attached === false;
@@ -37,9 +73,7 @@ export const FluentChatMessageComponent = (props) => {
         return getFluentUIAttachedValue(message.attached);
     }, [message.attached]);
     const messageRootProps = useMemo(() => {
-        return {
-            className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon)
-        };
+        return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
     const messageBodyProps = useMemo(() => {
         return {
@@ -51,7 +85,16 @@ export const FluentChatMessageComponent = (props) => {
             tabIndex: -1,
             role: 'none'
         };
-    }, [chatMessageRenderStyles.avatarNoOverlap, chatMessageRenderStyles.avatarOverlap, chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyWithAvatar, chatMessageRenderStyles.bodyWithoutAvatar, shouldOverlapAvatarAndMessage, shouldShowAvatar, styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer]);
+    }, [
+        chatMessageRenderStyles.avatarNoOverlap,
+        chatMessageRenderStyles.avatarOverlap,
+        chatMessageRenderStyles.bodyCommon,
+        chatMessageRenderStyles.bodyWithAvatar,
+        chatMessageRenderStyles.bodyWithoutAvatar,
+        shouldOverlapAvatarAndMessage,
+        shouldShowAvatar,
+        styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer
+    ]);
     const avatar = useMemo(() => {
         const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
         const personaOptions = {
@@ -60,12 +103,12 @@ export const FluentChatMessageComponent = (props) => {
             text: message.senderDisplayName,
             showOverflowTooltip: false
         };
-        return React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions)));
+        return (React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))));
     }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
     // Fluent UI message components are used here as for default message renderer,
     // timestamp and author name should be shown but they aren't shown for custom renderer.
     // More investigations are needed to check if this can be simplified with states.
     // Avatar should be shown for both custom and default renderers.
-    return React.createElement(FluentChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props)));
+    return (React.createElement(FluentChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props))));
 };
 //# sourceMappingURL=FluentChatMessageComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FluentChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { gutterWithAvatar, gutterWithHiddenAvatar, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\n\n/**\n * Props for {@link FluentChatMessageComponentWrapper}\n *\n * @private\n */\nexport type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n  message: ChatMessage;\n};\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    inlineImageOptions,\n    userId\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n    if (messageProps.message.messageType === 'chat') {\n      return <ChatMessageComponentAsMessageBubble {...messageProps} strings={messageProps.strings} message={messageProps.message} userId={userId} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} inlineImageOptions={inlineImageOptions} />;\n    }\n    return <></>;\n  }, [userId, shouldOverlapAvatarAndMessage, inlineImageOptions]);\n  const messageRenderer = useCallback((messageProps: MessageProps) => {\n    return onRenderMessage === undefined ? defaultChatMessageRenderer({\n      ...messageProps\n    }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n  }, [defaultChatMessageRenderer, onRenderMessage]);\n  const shouldShowAvatar = useMemo(() => {\n    return message.attached === 'top' || message.attached === false;\n  }, [message.attached]);\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n  const messageRootProps = useMemo(() => {\n    return {\n      className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon)\n    };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n  const messageBodyProps = useMemo(() => {\n    return {\n      // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles?.chatItemMessageContainer)),\n      style: styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {},\n      // make body not focusable to remove repetitions from narrators.\n      // inner components are already focusable\n      tabIndex: -1,\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.avatarNoOverlap, chatMessageRenderStyles.avatarOverlap, chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyWithAvatar, chatMessageRenderStyles.bodyWithoutAvatar, shouldOverlapAvatarAndMessage, shouldShowAvatar, styles?.chatItemMessageContainer]);\n  const avatar = useMemo(() => {\n    const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n    const personaOptions: IPersona = {\n      hidePersonaDetails: true,\n      size: PersonaSize.size32,\n      text: message.senderDisplayName,\n      showOverflowTooltip: false\n    };\n    return <div className={mergeStyles(chatAvatarStyle)}>\n        {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}\n      </div>;\n  }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Avatar should be shown for both custom and default renderers.\n  return <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n      {messageRenderer({\n      ...props\n    })}\n    </FluentChatMessage>;\n};"]}
+{"version":3,"file":"FluentChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport {\n  gutterWithAvatar,\n  gutterWithHiddenAvatar,\n  useChatMessageRenderStyles\n} from '../../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\n\n/**\n * Props for {@link FluentChatMessageComponentWrapper}\n *\n * @private\n */\nexport type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n};\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    /* @conditional-compile-remove(date-time-customization) */\n    onDisplayDateTimeString,\n    inlineImageOptions,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    actionsForAttachment,\n    userId,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(mention) */\n    mentionOptions\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentDownloadsMemo = useMemo(() => {\n    return onRenderAttachmentDownloads;\n    return undefined;\n  }, [onRenderAttachmentDownloads]);\n\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      if (\n        messageProps.message.messageType === 'chat' ||\n        /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked'\n      ) {\n        return (\n          <ChatMessageComponentAsMessageBubble\n            {...messageProps}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n            strings={messageProps.strings}\n            message={messageProps.message}\n            userId={userId}\n            shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n            /* @conditional-compile-remove(date-time-customization) */\n            onDisplayDateTimeString={onDisplayDateTimeString}\n            inlineImageOptions={inlineImageOptions}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            actionsForAttachment={actionsForAttachment}\n            /* @conditional-compile-remove(mention) */\n            mentionDisplayOptions={mentionOptions?.displayOptions}\n          />\n        );\n      }\n      return <></>;\n    },\n    [\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      onRenderAttachmentDownloadsMemo,\n      userId,\n      shouldOverlapAvatarAndMessage,\n      /* @conditional-compile-remove(date-time-customization) */\n      onDisplayDateTimeString,\n      inlineImageOptions,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      actionsForAttachment,\n      /* @conditional-compile-remove(mention) */\n      mentionOptions?.displayOptions\n    ]\n  );\n\n  const messageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      return onRenderMessage === undefined\n        ? defaultChatMessageRenderer({ ...messageProps })\n        : onRenderMessage(messageProps, defaultChatMessageRenderer);\n    },\n    [defaultChatMessageRenderer, onRenderMessage]\n  );\n\n  const shouldShowAvatar = useMemo(() => {\n    return message.attached === 'top' || message.attached === false;\n  }, [message.attached]);\n\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n\n  const messageRootProps = useMemo(() => {\n    return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n\n  const messageBodyProps = useMemo(() => {\n    return {\n      // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(\n        chatMessageRenderStyles.bodyCommon,\n        !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar,\n        shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap,\n        mergeStyles(styles?.chatItemMessageContainer)\n      ),\n      style:\n        styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {},\n      // make body not focusable to remove repetitions from narrators.\n      // inner components are already focusable\n      tabIndex: -1,\n      role: 'none'\n    };\n  }, [\n    chatMessageRenderStyles.avatarNoOverlap,\n    chatMessageRenderStyles.avatarOverlap,\n    chatMessageRenderStyles.bodyCommon,\n    chatMessageRenderStyles.bodyWithAvatar,\n    chatMessageRenderStyles.bodyWithoutAvatar,\n    shouldOverlapAvatarAndMessage,\n    shouldShowAvatar,\n    styles?.chatItemMessageContainer\n  ]);\n\n  const avatar = useMemo(() => {\n    const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n    const personaOptions: IPersona = {\n      hidePersonaDetails: true,\n      size: PersonaSize.size32,\n      text: message.senderDisplayName,\n      showOverflowTooltip: false\n    };\n    return (\n      <div className={mergeStyles(chatAvatarStyle)}>\n        {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}\n      </div>\n    );\n  }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Avatar should be shown for both custom and default renderers.\n  return (\n    <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n      {messageRenderer({ ...props })}\n    </FluentChatMessage>\n  );\n};\n"]}

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

@@ -1,12 +1,17 @@
 /// <reference types="react" />
 import { MessageThreadStrings } from '../../MessageThread';
 import { ChatMessage } from '../../../types';
+import { AttachmentMetadata } from '../../../types/Attachment';
+import { MentionLookupOptions } from '../../MentionPopover';
 /** @private */
 export type ChatMessageComponentAsEditBoxProps = {
     onCancel?: (messageId: string) => void;
-    onSubmit: (text: string, metadata?: Record<string, string>, options?: {}) => void;
+    onSubmit: (text: string, metadata?: Record<string, string>, options?: {
+        attachmentMetadata?: AttachmentMetadata[];
+    }) => void;
     message: ChatMessage;
     strings: MessageThreadStrings;
+    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

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

@@ -10,18 +10,26 @@ import { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from
 import { InputBoxComponent } from '../../InputBoxComponent';
 import { InputBoxButton } from '../../InputBoxButton';
 import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
+import { _AttachmentUploadCards } from '../../AttachmentUploadCards';
 import { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
 import { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';
 import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
+/* @conditional-compile-remove(attachment-upload) */
+import { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /**
  * @private
  */
 export const ChatMessageComponentAsEditBox = (props) => {
     const { onCancel, onSubmit, strings, message } = props;
+    /* @conditional-compile-remove(mention) */
+    const { mentionLookupOptions } = props;
     const [textValue, setTextValue] = useState(message.content || '');
+    /* @conditional-compile-remove(attachment-upload) */
+    const [attachmentMetadata, setAttachmentMetadata] = React.useState(getMessageWithAttachmentMetadata(message));
     const editTextFieldRef = React.useRef(null);
     const theme = useTheme();
-    const messageState = getMessageState(textValue);
+    const messageState = getMessageState(textValue, 
+    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
     const submitEnabled = messageState === 'OK';
     const editContainerStyles = useChatMessageEditContainerStyles();
     const chatMyMessageStyles = useChatMyMessageStyles();
@@ -32,14 +40,12 @@ export const ChatMessageComponentAsEditBox = (props) => {
     const setText = (event, newValue) => {
         setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
     };
-    const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {
-        limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`
-    }) : undefined;
+    const textTooLongMessage = messageState === 'too long'
+        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
+        : undefined;
     const iconClassName = useCallback((isHover) => {
         const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
-        return mergeStyles(inputBoxIcon, {
-            color
-        });
+        return mergeStyles(inputBoxIcon, { color });
     }, [theme.palette.accent, theme.palette.neutralSecondary]);
     const onRenderThemedCancelIcon = useCallback((isHover) => {
         return onRenderCancelIcon(iconClassName(isHover));
@@ -48,41 +54,54 @@ export const ChatMessageComponentAsEditBox = (props) => {
         return onRenderSubmitIcon(iconClassName(isHover));
     }, [iconClassName]);
     const editBoxStyles = useMemo(() => {
-        return concatStyleSets(editBoxStyleSet, {
-            textField: {
-                borderColor: theme.palette.themePrimary
-            }
-        });
+        return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
     }, [theme.palette.themePrimary]);
+    /* @conditional-compile-remove(attachment-upload) */
+    const onRenderAttachmentUploads = useCallback(() => {
+        return (!!attachmentMetadata &&
+            attachmentMetadata.length > 0 && (React.createElement("div", { style: { margin: '0.25rem' } },
+            React.createElement(_AttachmentUploadCards, { activeAttachmentUploads: attachmentMetadata, onCancelAttachmentUpload: (attachmentId) => {
+                    setAttachmentMetadata(attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.filter((attachment) => attachment.id !== attachmentId));
+                } }))));
+    }, [attachmentMetadata]);
     const getContent = () => {
-        return React.createElement(React.Fragment, null,
-            React.createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
                     if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
                         ev.stopPropagation();
                     }
                 }, onEnterKeyDown: () => {
-                    submitEnabled && onSubmit(textValue, message.metadata);
-                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles }),
-            React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: {
-                    childrenGap: '0.25rem'
-                } },
-                message.failureReason && React.createElement(Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
-                    React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason)),
+                    submitEnabled &&
+                        onSubmit(textValue, message.metadata, 
+                        /* @conditional-compile-remove(attachment-upload) */ {
+                            attachmentMetadata
+                        });
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions }),
+            React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
+                message.failureReason && (React.createElement(Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
+                    React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason))),
                 React.createElement(Stack.Item, { align: "end" },
                     React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
                             onCancel && onCancel(message.messageId);
                         }, id: 'dismissIconWrapper' })),
                 React.createElement(Stack.Item, { align: "end" },
-                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
-                            submitEnabled && onSubmit(textValue, message.metadata);
+                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                            submitEnabled &&
+                                onSubmit(textValue, message.metadata, 
+                                /* @conditional-compile-remove(attachment-upload) */ {
+                                    attachmentMetadata
+                                });
                             e.stopPropagation();
-                        }, id: 'submitIconWrapper' }))));
+                        }, id: 'submitIconWrapper' }))), /* @conditional-compile-remove(attachment-upload) */
+            onRenderAttachmentUploads()));
     };
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
-    return React.createElement(ChatMyMessage, { attached: attached, root: {
+    return (React.createElement(ChatMyMessage, { attached: attached, root: {
             className: chatMyMessageStyles.root
         }, body: {
             className: mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
-        } }, getContent());
+        } }, getContent()));
 };
 //# sourceMappingURL=ChatMessageComponentAsEditBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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';\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';\nimport { _AttachmentUploadCards } from '../../AttachmentUploadCards';\nimport { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, metadata?: Record<string, string>, options?: {}) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message\n  } = props;\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(textValue);\n  const submitEnabled = messageState === 'OK';\n  const editContainerStyles = useChatMessageEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n  const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n    limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n  }) : undefined;\n  const iconClassName = useCallback((isHover: boolean) => {\n    const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n    return mergeStyles(inputBoxIcon, {\n      color\n    });\n  }, [theme.palette.accent, theme.palette.neutralSecondary]);\n  const onRenderThemedCancelIcon = useCallback((isHover: boolean) => {\n    return onRenderCancelIcon(iconClassName(isHover));\n  }, [iconClassName]);\n  const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => {\n    return onRenderSubmitIcon(iconClassName(isHover));\n  }, [iconClassName]);\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, {\n      textField: {\n        borderColor: theme.palette.themePrimary\n      }\n    });\n  }, [theme.palette.themePrimary]);\n  const getContent = (): JSX.Element => {\n    return <>\n        <InputBoxComponent data-ui-id=\"edit-box\" textFieldRef={editTextFieldRef} inputClassName={editBoxStyle} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onKeyDown={ev => {\n        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n          ev.stopPropagation();\n        }\n      }} onEnterKeyDown={() => {\n        submitEnabled && onSubmit(textValue, message.metadata);\n      }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}></InputBoxComponent>\n        <Stack horizontal horizontalAlign=\"end\" className={editChatMessageButtonsStackStyle} tokens={{\n        childrenGap: '0.25rem'\n      }}>\n          {message.failureReason && <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n              <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n                {message.failureReason}\n              </div>\n            </Stack.Item>}\n          <Stack.Item align=\"end\">\n            <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }} id={'dismissIconWrapper'} />\n          </Stack.Item>\n          <Stack.Item align=\"end\">\n            <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n            submitEnabled && onSubmit(textValue, message.metadata);\n            e.stopPropagation();\n          }} id={'submitIconWrapper'} />\n          </Stack.Item>\n        </Stack>\n        {}\n      </>;\n  };\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return <ChatMyMessage attached={attached} root={{\n    className: chatMyMessageStyles.root\n  }} body={{\n    className: mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)\n  }}>\n      {getContent()}\n    </ChatMyMessage>;\n};"]}
+{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAc,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,yCAAgC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAChE,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC9G,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAGrE,OAAO,EACL,yBAAyB,EACzB,6BAA6B,EAC7B,kCAAkC,EAClC,gCAAgC,EAChC,iCAAiC,EAClC,MAAM,0CAA0C,CAAC;AAGlD,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,gDAAgD,CAAC;AACxD,oDAAoD;AACpD,OAAO,EAAE,gCAAgC,EAAE,MAAM,gDAAgD,CAAC;AAmBlG;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;IACtG,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACvD,0CAA0C;IAC1C,MAAM,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAEvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAC1E,oDAAoD;IACpD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,gCAAgC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9G,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,eAAe,CAClC,SAAS;IACT,oDAAoD,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,EAAE,CAC9E,CAAC;IACF,MAAM,aAAa,GAAG,YAAY,KAAK,IAAI,CAAC;IAE5C,MAAM,mBAAmB,GAAG,iCAAiC,EAAE,CAAC;IAChE,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,CAAC,KAA+D,EAAE,QAAiB,EAAQ,EAAE;QAC3G,YAAY,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GACtB,YAAY,KAAK,UAAU;QACzB,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,WAAW,EAAE,GAAG,yBAAyB,EAAE,EAAE,CAAC;QAC1F,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,OAAgB,EAAE,EAAE;QACnB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAC9E,OAAO,WAAW,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IAC9C,CAAC,EACD,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CACvD,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,eAAe,CAAC,eAAe,EAAE,EAAE,SAAS,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;IACtG,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;IAEjC,oDAAoD;IACpD,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAG,EAAE;QACjD,OAAO,CACL,CAAC,CAAC,kBAAkB;YACpB,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;YAC/B,oBAAC,sBAAsB,IACrB,uBAAuB,EAAE,kBAAkB,EAC3C,wBAAwB,EAAE,CAAC,YAAY,EAAE,EAAE;oBACzC,qBAAqB,CAAC,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC;gBACpG,CAAC,GACD,CACE,CACP,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,GAAgB,EAAE;QACnC,OAAO,CACL;YACE,oBAAC,iBAAiB,kBACL,UAAU,EACrB,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EAAE,YAAY,EAC5B,eAAe,EAAE,OAAO,CAAC,sBAAsB,EAC/C,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE;oBAChB,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;wBACnD,EAAE,CAAC,eAAe,EAAE,CAAC;oBACvB,CAAC;gBACH,CAAC,EACD,cAAc,EAAE,GAAG,EAAE;oBACnB,aAAa;wBACX,QAAQ,CACN,SAAS,EACT,OAAO,CAAC,QAAQ;wBAChB,oDAAoD,CAAC;4BACnD,kBAAkB;yBACnB,CACF,CAAC;gBACN,CAAC,EACD,cAAc,EAAE,KAAK,EACrB,SAAS,EAAE,yBAAyB,EACpC,YAAY,EAAE,kBAAkB,EAChC,MAAM,EAAE,aAAa;gBACrB,0CAA0C;gBAC1C,oBAAoB,EAAE,oBAAoB,GACvB;YACrB,oBAAC,KAAK,IACJ,UAAU,QACV,eAAe,EAAC,KAAK,EACrB,SAAS,EAAE,gCAAgC,EAC3C,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;gBAEjC,OAAO,CAAC,aAAa,IAAI,CACxB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,kCAAkC;oBAC5E,6BAAK,SAAS,EAAE,WAAW,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAE,6BAA6B,CAAC,IACzF,OAAO,CAAC,aAAa,CAClB,CACK,CACd;gBACD,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK;oBACrB,oBAAC,cAAc,IACb,SAAS,EAAE,kBAAkB,EAC7B,SAAS,EAAE,OAAO,CAAC,mBAAmB,EACtC,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAC3C,YAAY,EAAE,wBAAwB,EACtC,OAAO,EAAE,GAAG,EAAE;4BACZ,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;wBAC1C,CAAC,EACD,EAAE,EAAE,oBAAoB,GACxB,CACS;gBACb,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK;oBACrB,oBAAC,cAAc,IACb,SAAS,EAAE,kBAAkB,EAC7B,SAAS,EAAE,OAAO,CAAC,mBAAmB,EACtC,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAC3C,YAAY,EAAE,wBAAwB,EACtC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4BACb,aAAa;gCACX,QAAQ,CACN,SAAS,EACT,OAAO,CAAC,QAAQ;gCAChB,oDAAoD,CAAC;oCACnD,kBAAkB;iCACnB,CACF,CAAC;4BACJ,CAAC,CAAC,eAAe,EAAE,CAAC;wBACtB,CAAC,EACD,EAAE,EAAE,mBAAmB,GACvB,CACS,CACP,EACP,oDAAoD;YAAC,yBAAyB,EAAE,CAChF,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,OAAO,CACL,oBAAC,aAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE;YACJ,SAAS,EAAE,mBAAmB,CAAC,IAAI;SACpC,EACD,IAAI,EAAE;YACJ,SAAS,EAAE,YAAY,CACrB,mBAAmB,CAAC,IAAI,EACxB,OAAO,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,EACrG,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAClE;SACF,IAEA,UAAU,EAAE,CACC,CACjB,CAAC;AACJ,CAAC,CAAC","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';\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';\nimport { _AttachmentUploadCards } from '../../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../../types/Attachment';\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';\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    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\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, setAttachmentMetadata] = React.useState(getMessageWithAttachmentMetadata(message));\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            activeAttachmentUploads={attachmentMetadata}\n            onCancelAttachmentUpload={(attachmentId) => {\n              setAttachmentMetadata(attachmentMetadata?.filter((attachment) => attachment.id !== attachmentId));\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                message.metadata,\n                /* @conditional-compile-remove(attachment-upload) */ {\n                  attachmentMetadata\n                }\n              );\n          }}\n          supportNewline={false}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          errorMessage={textTooLongMessage}\n          styles={editBoxStyles}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        ></InputBoxComponent>\n        <Stack\n          horizontal\n          horizontalAlign=\"end\"\n          className={editChatMessageButtonsStackStyle}\n          tokens={{ childrenGap: '0.25rem' }}\n        >\n          {message.failureReason && (\n            <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n              <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n                {message.failureReason}\n              </div>\n            </Stack.Item>\n          )}\n          <Stack.Item align=\"end\">\n            <InputBoxButton\n              className={editingButtonStyle}\n              ariaLabel={strings.editBoxCancelButton}\n              tooltipContent={strings.editBoxCancelButton}\n              onRenderIcon={onRenderThemedCancelIcon}\n              onClick={() => {\n                onCancel && onCancel(message.messageId);\n              }}\n              id={'dismissIconWrapper'}\n            />\n          </Stack.Item>\n          <Stack.Item align=\"end\">\n            <InputBoxButton\n              className={editingButtonStyle}\n              ariaLabel={strings.editBoxSubmitButton}\n              tooltipContent={strings.editBoxSubmitButton}\n              onRenderIcon={onRenderThemedSubmitIcon}\n              onClick={(e) => {\n                submitEnabled &&\n                  onSubmit(\n                    textValue,\n                    message.metadata,\n                    /* @conditional-compile-remove(attachment-upload) */ {\n                      attachmentMetadata\n                    }\n                  );\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"]}

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

@@ -1,14 +1,30 @@
-/// <reference types="react" />
+import React from 'react';
 import { ChatMessage } from '../../../types';
+import { AttachmentMetadata } from '../../../types';
 import { MessageThreadStrings } from '../../MessageThread';
+import { MentionLookupOptions } from '../../MentionPopover';
+import type { ChatMessageComponentAsRichTextEditBoxProps } from './ChatMessageComponentAsRichTextEditBox';
+/**
+ * @private
+ * Use this function to load RoosterJS dependencies early in the lifecycle.
+ * It should be the same import as used for lazy loading.
+ *
+ * @conditional-compile-remove(rich-text-editor)
+ */
+export declare const loadChatMessageComponentAsRichTextEditBox: () => Promise<{
+    default: React.ComponentType<ChatMessageComponentAsRichTextEditBoxProps>;
+}>;
 /**
  * @private
  */
 export type ChatMessageComponentAsEditBoxPickerProps = {
     onCancel?: (messageId: string) => void;
-    onSubmit: (text: string, metadata?: Record<string, string>, options?: {}) => void;
+    onSubmit: (text: string, metadata?: Record<string, string>, options?: {
+        attachmentMetadata?: AttachmentMetadata[];
+    }) => void;
     message: ChatMessage;
     strings: MessageThreadStrings;
+    mentionLookupOptions?: MentionLookupOptions;
     richTextEditor?: boolean;
 };
 /**

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

@@ -1,11 +1,36 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React from 'react';
+import React, { useMemo } from 'react';
+/* @conditional-compile-remove(rich-text-editor) */
+import { Suspense } from 'react';
 import { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';
+/* @conditional-compile-remove(rich-text-editor) */
+import { ErrorBoundary } from '../../ErrorBoundary';
+/* @conditional-compile-remove(rich-text-editor) */
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => import('./ChatMessageComponentAsRichTextEditBox'));
+/**
+ * @private
+ * Use this function to load RoosterJS dependencies early in the lifecycle.
+ * It should be the same import as used for lazy loading.
+ *
+ * @conditional-compile-remove(rich-text-editor)
+ */
+export const loadChatMessageComponentAsRichTextEditBox = () => import('./ChatMessageComponentAsRichTextEditBox');
 /**
  * @private
  */
 export const ChatMessageComponentAsEditBoxPicker = (props) => {
-    return React.createElement(ChatMessageComponentAsEditBox, Object.assign({}, props));
+    /* @conditional-compile-remove(rich-text-editor) */
+    const { richTextEditor } = props;
+    const simpleEditBox = useMemo(() => {
+        return React.createElement(ChatMessageComponentAsEditBox, Object.assign({}, props));
+    }, [props]);
+    /* @conditional-compile-remove(rich-text-editor) */
+    if (richTextEditor) {
+        return (React.createElement(ErrorBoundary, { fallback: simpleEditBox },
+            React.createElement(Suspense, { fallback: simpleEditBox },
+                React.createElement(ChatMessageComponentAsRichTextEditBox, Object.assign({}, props)))));
+    }
+    return simpleEditBox;
 };
 //# sourceMappingURL=ChatMessageComponentAsEditBoxPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsEditBoxPicker.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAYhF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAAC,KAA+C,EAAe,EAAE;IAClH,OAAO,oBAAC,6BAA6B,oBAAK,KAAK,EAAI,CAAC;AACtD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ChatMessage } from '../../../types';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\n/**\n * @private\n */\nexport type ChatMessageComponentAsEditBoxPickerProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, metadata?: Record<string, string>, options?: {}) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  richTextEditor?: boolean;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBoxPicker = (props: ChatMessageComponentAsEditBoxPickerProps): JSX.Element => {\n  return <ChatMessageComponentAsEditBox {...props} />;\n};"]}
+{"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;AAsBxD;;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 '../../../types';\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    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\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.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { MessageThreadStrings } from '../../MessageThread';
+import { ChatMessage } from '../../../types';
+import { AttachmentMetadata } from '../../../types/Attachment';
+/** @private */
+export type ChatMessageComponentAsRichTextEditBoxProps = {
+    onCancel?: (messageId: string) => void;
+    onSubmit: (text: string, metadata?: Record<string, string>, options?: {
+        attachmentMetadata?: AttachmentMetadata[];
+    }) => void;
+    message: ChatMessage;
+    strings: MessageThreadStrings;
+};
+/**
+ * @private
+ */
+export declare const ChatMessageComponentAsRichTextEditBox: (props: ChatMessageComponentAsRichTextEditBoxProps) => JSX.Element;
+export default ChatMessageComponentAsRichTextEditBox;
+//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.d.ts.map

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

@@ -0,0 +1,114 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles, Stack } from '@fluentui/react';
+import { ChatMyMessage } from '@fluentui-contrib/react-chat';
+import { mergeClasses } from '@fluentui/react-components';
+import { _formatString } from "../../../../../acs-ui-common/src";
+import { useTheme } from '../../../theming';
+import React, { useCallback, useMemo, useState } from 'react';
+import { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';
+import { InputBoxButton } from '../../InputBoxButton';
+import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
+import { _AttachmentUploadCards } from '../../AttachmentUploadCards';
+import { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
+import { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';
+import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
+/* @conditional-compile-remove(attachment-upload) */
+import { getMessageWithAttachmentMetadata } from '../../utils/ChatMessageComponentAsEditBoxUtils';
+import { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';
+import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';
+import { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';
+import { useLocale } from '../../../localization';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';
+/* @conditional-compile-remove(attachment-upload) */
+import { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';
+/**
+ * @private
+ */
+export const ChatMessageComponentAsRichTextEditBox = (props) => {
+    const { onCancel, onSubmit, strings, message } = props;
+    const [textValue, setTextValue] = useState(message.content || '');
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const [attachmentMetadata, setAttachmentMetadata] = useState(getMessageWithAttachmentMetadata(message));
+    const editTextFieldRef = React.useRef(null);
+    const theme = useTheme();
+    const messageState = getMessageState(textValue, 
+    /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
+    const submitEnabled = messageState === 'OK';
+    const editContainerStyles = useChatMessageRichTextEditContainerStyles();
+    const chatMyMessageStyles = useChatMyMessageStyles();
+    const locale = useLocale().strings;
+    const setText = (newValue) => {
+        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+    };
+    const textTooLongMessage = messageState === 'too long'
+        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
+        : undefined;
+    const iconClassName = useCallback((isHover) => {
+        const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
+        return mergeStyles(richTextEditBoxActionButtonIcon, { color });
+    }, [theme.palette.accent, theme.palette.neutralSecondary]);
+    const onRenderThemedCancelIcon = useCallback((isHover) => {
+        return onRenderCancelIcon(iconClassName(isHover));
+    }, [iconClassName]);
+    const onRenderThemedSubmitIcon = useCallback((isHover) => {
+        return onRenderSubmitIcon(iconClassName(isHover));
+    }, [iconClassName]);
+    const actionButtons = useMemo(() => {
+        return (React.createElement(Stack, { horizontal: true },
+            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                    onCancel && onCancel(message.messageId);
+                }, id: 'dismissIconWrapper' }),
+            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                    submitEnabled &&
+                        onSubmit(textValue, message.metadata, 
+                        /* @conditional-compile-remove(attachment-upload) */ {
+                            attachmentMetadata
+                        });
+                    e.stopPropagation();
+                }, id: 'submitIconWrapper' })));
+    }, [
+        /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata,
+        message.messageId,
+        message.metadata,
+        onCancel,
+        onRenderThemedCancelIcon,
+        onRenderThemedSubmitIcon,
+        onSubmit,
+        strings.editBoxCancelButton,
+        strings.editBoxSubmitButton,
+        submitEnabled,
+        textValue
+    ]);
+    const richTextLocaleStrings = useMemo(() => {
+        /* @conditional-compile-remove(rich-text-editor) */
+        return locale.richTextSendBox;
+        return locale.sendBox;
+    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const onCancelAttachmentUpload = useCallback((attachmentId) => {
+        setAttachmentMetadata(attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.filter((attachment) => attachment.id !== attachmentId));
+    }, [attachmentMetadata]);
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const onRenderAttachmentUploads = useCallback(() => {
+        return (React.createElement(Stack, { className: attachmentUploadCardsStyles },
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+                React.createElement(_AttachmentUploadCards, { activeAttachmentUploads: attachmentMetadata, onCancelAttachmentUpload: onCancelAttachmentUpload }))));
+    }, [attachmentMetadata, onCancelAttachmentUpload, theme]);
+    const getContent = () => {
+        return (React.createElement(Stack, { className: mergeStyles(editBoxWidthStyles) },
+            React.createElement(RichTextSendBoxErrors, { textTooLongMessage: textTooLongMessage, systemMessage: message.failureReason }),
+            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: setText, editorComponentRef: editTextFieldRef, initialContent: message.content, content: textValue, strings: richTextLocaleStrings, disabled: false, actionComponents: actionButtons, richTextEditorStyleProps: editBoxRichTextEditorStyle, isHorizontalLayoutDisabled: true, 
+                /* @conditional-compile-remove(attachment-upload) */
+                onRenderAttachmentUploads: onRenderAttachmentUploads })));
+    };
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    return (React.createElement(ChatMyMessage, { attached: attached, root: {
+            className: chatMyMessageStyles.root
+        }, body: {
+            className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
+        } }, getContent()));
+};
+export default ChatMessageComponentAsRichTextEditBox;
+//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.js.map