@azure/communication-react 1.16.0-alpha-202405132107 → 1.16.0-alpha-202405140014

package/dist/communication-react.d.ts

@@ -217,13 +217,26 @@ export declare type AreParamEqual<A extends (props: any) => JSX.Element | undefi
  */
 export declare type AreTypeEqual<A, B> = A extends B ? (B extends A ? true : false) : false;
 
+/**
+ * @beta
+ * A callback function that defines what actions user can perform on an attachment.
+ * By default, the UI library would have default actions that opens attachment URL in a new tab.
+ * You can override the default actions or add new actions by providing this callback function.
+ * Moreover, you can also return dynamic actions based on the properties in {@link AttachmentMetadata} and/or {@link ChatMessage}.
+ *
+ * @param attachment - The file attachment that user is trying to perform actions on.
+ * @param message - The chat message that contains this attachment.
+ * @returns A list of {@link AttachmentMenuAction} that defines the type of actions user can perform on the attachment.
+ */
+export declare type AttachmentActionHandler = (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];
+
 /**
  * @beta
  *
  * Attachment download options defines the list of actions that can be performed on an attachment.
  */
 export declare interface AttachmentDownloadOptions {
-    actionsForAttachment: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];
+    actionsForAttachment: AttachmentActionHandler;
 }
 
 /**
@@ -239,17 +252,14 @@ export declare interface AttachmentMenuAction {
 }
 
 /**
- * Metadata containing basic information about the attachment.
+ * Data model that represents a chat message attachment
+ * where it contains an ID to uniquely identify the attachment,
+ * a name that represents the name of file, and
+ * a URL to download the attachment.
  *
  * @beta
  */
 export declare interface AttachmentMetadata {
-    /**
-     * Extension hint, useful for rendering a specific icon.
-     * An unknown or empty extension will be rendered as a generic icon.
-     * Example: `pdf`
-     */
-    extension?: string;
     /**
      * Unique ID of the attachment.
      */
@@ -261,15 +271,33 @@ export declare interface AttachmentMetadata {
     /**
      * Download URL for the attachment.
      */
-    url?: string;
+    url: string;
 }
 
 /**
- * Metadata containing basic information about the uploading attachment.
+ * Data model that represents a chat message attachment being uploaded
+ * where it contains an ID to uniquely identify the attachment,
+ * a name that represents the name of file,
+ * an optional URL to download the attachment,
+ * an optional progress value between 0 and 1 indicating the progress of the upload, and
+ * an optional error object that contains error message would be shown to the user.
+ *
  *
  * @beta
  */
-export declare interface AttachmentMetadataWithProgress extends AttachmentMetadata {
+export declare interface AttachmentMetadataInProgress {
+    /**
+     * Unique ID of the attachment.
+     */
+    id: string;
+    /**
+     * Attachment name to be displayed.
+     */
+    name: string;
+    /**
+     * Download URL for the attachment.
+     */
+    url?: string;
     /**
      * A number between 0 and 1 indicating the progress of the upload.
      */
@@ -315,19 +343,6 @@ export declare type AttachmentRemovalHandler = (attachmentId: string) => void;
  */
 export declare type AttachmentSelectionHandler = (attachmentUploads: AttachmentUploadTask[]) => void;
 
-/**
- * @internal
- */
-export declare interface _AttachmentUploadAdapter {
-    registerActiveUploads: (files: File[]) => AttachmentUploadTask[];
-    registerCompletedUploads: (metadata: AttachmentMetadata[]) => AttachmentUploadTask[];
-    clearUploads: () => void;
-    cancelUpload: (id: string) => void;
-    updateUploadProgress: (id: string, progress: number) => void;
-    updateUploadStatusMessage: (id: string, errorMessage: string) => void;
-    updateUploadMetadata: (id: string, metadata: AttachmentMetadata) => void;
-}
-
 /**
  * @beta
  */
@@ -363,12 +378,6 @@ export declare interface AttachmentUploadOptions {
     handleAttachmentRemoval?: AttachmentRemovalHandler;
 }
 
-/**
- * A record containing {@link AttachmentMetadata} mapped to unique attachment upload task ids.
- * @internal
- */
-export declare type _AttachmentUploadsUiState = Record<string, AttachmentMetadataWithProgress>;
-
 /**
  * A upload task represents and manages an attachment that is being uploaded.
  * When using the Composite, an attachment upload task is created for each file user is selected to upload.
@@ -3329,13 +3338,7 @@ export declare interface CallWithChatAdapterManagement {
      *
      * @public
      */
-    sendMessage(content: string, options?: SendMessageOptions): Promise<void>;
-    /**
-     * Send a message with attachments in the chat thread.
-     *
-     * @beta
-     */
-    sendMessageWithAttachments(content: string, attachments: AttachmentMetadata[]): Promise<void>;
+    sendMessage(content: string, options?: SendMessageOptions | /* @conditional-compile-remove(attachment-upload) */ MessageOptions): Promise<void>;
     /**
      * Send a read receipt for a message.
      *
@@ -3353,7 +3356,7 @@ export declare interface CallWithChatAdapterManagement {
      *
      * @public
      */
-    updateMessage(messageId: string, content: string, metadata?: Record<string, string>): Promise<void>;
+    updateMessage(messageId: string, content: string, options?: Record<string, string> | /* @conditional-compile-remove(attachment-upload) */ MessageOptions): Promise<void>;
     /**
      * Delete a message in the thread.
      *
@@ -3369,20 +3372,6 @@ export declare interface CallWithChatAdapterManagement {
      * @public
      */
     loadPreviousChatMessages(messagesToLoad: number): Promise<boolean>;
-    /** @internal */
-    registerActiveUploads: (files: File[]) => AttachmentUploadTask[];
-    /** @internal */
-    registerCompletedUploads: (metadata: AttachmentMetadata[]) => AttachmentUploadTask[];
-    /** @internal */
-    clearUploads: () => void;
-    /** @internal */
-    cancelUpload: (id: string) => void;
-    /** @internal */
-    updateUploadProgress: (id: string, progress: number) => void;
-    /** @internal */
-    updateUploadStatusMessage: (id: string, errorMessage: string) => void;
-    /** @internal */
-    updateUploadMetadata: (id: string, metadata: AttachmentMetadata) => void;
     /** @public */
     downloadResourceToCache(resourceDetails: ResourceDetails): Promise<void>;
     /** @public */
@@ -3567,14 +3556,6 @@ export declare interface CallWithChatAdapterUiState {
      * @public
      */
     page: CallCompositePage;
-    /**
-     * Files being uploaded by a user in the current thread.
-     * Should be set to null once the upload is complete.
-     * Array of type {@link _AttachmentUploadsUiState}
-     *
-     * @internal
-     */
-    _attachmentUploads?: _AttachmentUploadsUiState;
     /**
      * State to track whether the end user has opted in to using a
      * out of date version of a supported browser. Allows the user
@@ -4551,7 +4532,7 @@ export declare type CaptionsReceivedListener = (event: {
  *
  * @public
  */
-export declare type ChatAdapter = ChatAdapterThreadManagement & AdapterState<ChatAdapterState> & Disposable_2 & ChatAdapterSubscribers & _AttachmentUploadAdapter;
+export declare type ChatAdapter = ChatAdapterThreadManagement & AdapterState<ChatAdapterState> & Disposable_2 & ChatAdapterSubscribers;
 
 /**
  * {@link ChatAdapter} state.
@@ -4654,12 +4635,9 @@ export declare interface ChatAdapterThreadManagement {
     fetchInitialData(): Promise<void>;
     /**
      * Send a message in the thread.
+     * Please note that SendMessageOptions is being deprecated, please use MessageOptions instead.
      */
-    sendMessage(content: string, options?: SendMessageOptions): Promise<void>;
-    /**
-     * Send a message with attachments in the chat thread.
-     */
-    sendMessageWithAttachments(content: string, attachments: AttachmentMetadata[]): Promise<void>;
+    sendMessage(content: string, options?: SendMessageOptions | /* @conditional-compile-remove(attachment-upload) */ MessageOptions): Promise<void>;
     /**
      * Send a read receipt for a message.
      */
@@ -4678,10 +4656,9 @@ export declare interface ChatAdapterThreadManagement {
     setTopic(topicName: string): Promise<void>;
     /**
      * Update a message content.
+     * Please note that metadata is being deprecated, please use MessageOptions.metadata instead.
      */
-    updateMessage(messageId: string, content: string, metadata?: Record<string, string>, options?: {
-        attachmentMetadata?: AttachmentMetadata[];
-    }): Promise<void>;
+    updateMessage(messageId: string, content: string, options?: Record<string, string> | /* @conditional-compile-remove(attachment-upload) */ MessageOptions): Promise<void>;
     /**
      * Delete a message in the thread.
      */
@@ -4711,14 +4688,6 @@ export declare interface ChatAdapterThreadManagement {
  */
 export declare type ChatAdapterUiState = {
     error?: Error;
-    /**
-     * Attachments being uploaded by a user in the current thread.
-     * Should be set to null once the upload is complete.
-     * Array of type {@link _AttachmentUploadsUiState}
-     *
-     * @internal
-     */
-    _attachmentUploads?: _AttachmentUploadsUiState;
 };
 
 /**
@@ -4975,16 +4944,13 @@ export declare type ChatErrorTarget = 'ChatClient.createChatThread' | 'ChatClien
  * @public
  */
 export declare type ChatHandlers = {
-    onSendMessage: (content: string, options?: SendMessageOptions) => Promise<void>;
+    onSendMessage: (content: string, options?: SendMessageOptions | /* @conditional-compile-remove(attachment-upload) */ MessageOptions) => Promise<void>;
     onMessageSeen: (chatMessageId: string) => Promise<void>;
     onTyping: () => Promise<void>;
     onRemoveParticipant: (userId: string) => Promise<void>;
     updateThreadTopicName: (topicName: string) => Promise<void>;
     onLoadPreviousChatMessages: (messagesToLoad: number) => Promise<boolean>;
-    onUpdateMessage: (messageId: string, content: string, options?: {
-        metadata?: Record<string, string>;
-        attachmentMetadata?: AttachmentMetadata[];
-    }) => Promise<void>;
+    onUpdateMessage: (messageId: string, content: string, options?: MessageOptions) => Promise<void>;
     onDeleteMessage: (messageId: string) => Promise<void>;
 };
 
@@ -8107,6 +8073,18 @@ export declare type MessageDeletedListener = MessageReceivedListener;
  */
 export declare type MessageEditedListener = MessageReceivedListener;
 
+/**
+ * @beta
+ * Message option that defines properties that can be set when
+ * sending or updating a chat message.
+ * @property metadata - Metadata that contains additional information about the message to be passed betrween 2 users.
+ * @property attachments - Attachments that contains file attachments attached to the message.
+ */
+export declare type MessageOptions = {
+    metadata?: Record<string, string>;
+    attachments?: AttachmentMetadata[];
+};
+
 /**
  * Props to render a single message.
  *
@@ -8122,7 +8100,7 @@ export declare type MessageProps = {
     /**
      * Strings from parent MessageThread component
      */
-    strings: MessageThreadStrings;
+    strings: MessageThreadStrings & /* @conditional-compile-remove(rich-text-editor) */ Partial<RichTextStrings>;
     /**
      * Custom CSS styles for chat message container.
      */
@@ -8384,7 +8362,7 @@ export declare type MessageThreadProps = {
      * Optional callback to render attachments in the message component.
      * @beta
      */
-    onRenderAttachmentDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+    onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to edit a message.
      *
@@ -9700,11 +9678,11 @@ export declare interface RichTextSendBoxProps {
      */
     systemMessage?: string;
     /**
-     * Optional array of type {@link AttachmentMetadataWithProgress}
+     * Optional array of type {@link AttachmentMetadataInProgress}
      * to render attachments being uploaded in the SendBox.
      * @beta
      */
-    attachmentsWithProgress?: AttachmentMetadataWithProgress[];
+    attachments?: AttachmentMetadataInProgress[];
     /**
      * enumerable to determine if the input box has focus on render or not.
      * When undefined nothing has focus on render
@@ -9719,7 +9697,7 @@ export declare interface RichTextSendBoxProps {
     /**
      * Callback function used when the send button is clicked.
      */
-    onSendMessage: (content: string) => Promise<void>;
+    onSendMessage: (content: string, options?: MessageOptions) => Promise<void>;
     /**
      * Optional callback called when user is typing
      */
@@ -9731,39 +9709,47 @@ export declare interface RichTextSendBoxProps {
  *
  * @beta
  */
-export declare interface RichTextSendBoxStrings extends SendBoxStrings {
+export declare interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
+}
+
+/**
+ * Strings of RichText that can be overridden.
+ *
+ * @beta
+ */
+export declare interface RichTextStrings {
     /**
      * Tooltip text for the bold button.
      */
-    boldTooltip: string;
+    richTextBoldTooltip: string;
     /**
      * Tooltip text for the italic button.
      */
-    italicTooltip: string;
+    richTextItalicTooltip: string;
     /**
      * Tooltip text for the underline button.
      */
-    underlineTooltip: string;
+    richTextUnderlineTooltip: string;
     /**
      * Tooltip text for the bullet list button.
      */
-    bulletListTooltip: string;
+    richTextBulletListTooltip: string;
     /**
      * Tooltip text for the number list button.
      */
-    numberListTooltip: string;
+    richTextNumberListTooltip: string;
     /**
      * Tooltip text for the increase indent button.
      */
-    increaseIndentTooltip: string;
+    richTextIncreaseIndentTooltip: string;
     /**
      * Tooltip text for the decrease indent button.
      */
-    decreaseIndentTooltip: string;
+    richTextDecreaseIndentTooltip: string;
     /**
      * Tooltip text insert table button.
      */
-    insertTableTooltip: string;
+    richTextInsertTableTooltip: string;
     /**
      * Tooltip text for the rich text format button button.
      */
@@ -9771,43 +9757,43 @@ export declare interface RichTextSendBoxStrings extends SendBoxStrings {
     /**
      * Text for the insert menu item.
      */
-    insertRowOrColumnMenu: string;
+    richTextInsertRowOrColumnMenu: string;
     /**
      * Title for the insert table menu.
      */
-    insertTableMenuTitle: string;
+    richTextInsertTableMenuTitle: string;
     /**
      * Text for the insert menu item to insert row above the current selection.
      */
-    insertRowAboveMenu: string;
+    richTextInsertRowAboveMenu: string;
     /**
      * Text for the insert menu item to insert row below the current selection.
      */
-    insertRowBelowMenu: string;
+    richTextInsertRowBelowMenu: string;
     /**
      * Text for the insert menu item to insert column to the left from the current selection.
      */
-    insertColumnLeftMenu: string;
+    richTextInsertColumnLeftMenu: string;
     /**
      * Text for the insert menu item to insert column to the right from the current selection.
      */
-    insertColumnRightMenu: string;
+    richTextInsertColumnRightMenu: string;
     /**
      * Text for the delete row or column menu.
      */
-    deleteRowOrColumnMenu: string;
+    richTextDeleteRowOrColumnMenu: string;
     /**
      * Text for the delete column menu.
      */
-    deleteColumnMenu: string;
+    richTextDeleteColumnMenu: string;
     /**
      * Text for the delete row menu.
      */
-    deleteRowMenu: string;
+    richTextDeleteRowMenu: string;
     /**
      * Text for the delete table menu.
      */
-    deleteTableMenu: string;
+    richTextDeleteTableMenu: string;
 }
 
 /**
@@ -9912,7 +9898,7 @@ export declare interface SendBoxProps {
     /**
      * Optional override behavior on send button click
      */
-    onSendMessage?: (content: string) => Promise<void>;
+    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
     /**
      * Optional props needed to lookup suggestions in the mention scenario.
      * @beta
@@ -9962,11 +9948,11 @@ export declare interface SendBoxProps {
      */
     onRenderAttachmentUploads?: () => JSX.Element;
     /**
-     * Optional array of type {@link AttachmentMetadataWithProgress}
+     * Optional array of type {@link AttachmentMetadataInProgress}
      * to render attachments being uploaded in the SendBox.
      * @beta
      */
-    attachmentsWithProgress?: AttachmentMetadataWithProgress[];
+    attachments?: AttachmentMetadataInProgress[];
     /**
      * Optional callback to remove the attachment upload before sending by clicking on
      * cancel icon.
@@ -11016,10 +11002,7 @@ export declare interface UnsupportedOperatingSystemStrings {
  * @public
  * Callback function run when a message is updated.
  */
-export declare type UpdateMessageCallback = (messageId: string, content: string, options?: {
-    metadata?: Record<string, string>;
-    attachmentMetadata?: AttachmentMetadata[];
-}) => Promise<void>;
+export declare type UpdateMessageCallback = (messageId: string, content: string, options?: MessageOptions) => Promise<void>;
 
 /**
  * A custom React hook to simplify the creation of {@link CallAdapter}.

package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-DWzf8cuK.js → ChatMessageComponentAsRichTextEditBox-BZZrW3na.js}

@@ -4,7 +4,7 @@ var react = require('@fluentui/react');
 var reactChat = require('@fluentui-contrib/react-chat');
 var reactComponents = require('@fluentui/react-components');
 require('@azure/communication-common');
-var index = require('./index-W6o1SuXO.js');
+var index = require('./index-m47fKkX4.js');
 var React = require('react');
 require('reselect');
 require('@azure/communication-calling');
@@ -41,10 +41,11 @@ require('@azure/communication-calling-effects');
  * @private
  */
 const ChatMessageComponentAsRichTextEditBox = (props) => {
+    var _a;
     const { onCancel, onSubmit, strings, message } = props;
     const [textValue, setTextValue] = React.useState(message.content || '');
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    const [attachmentMetadata, setAttachmentMetadata] = React.useState(index.getMessageWithAttachmentMetadata(message));
+    const [attachmentMetadata, handleAttachmentAction] = React.useReducer(index.attachmentMetadataReducer, (_a = index.getMessageWithAttachmentMetadata(message)) !== null && _a !== void 0 ? _a : []);
     const editTextFieldRef = React.useRef(null);
     const theme = index.useTheme();
     const messageState = index.getMessageState(textValue, 
@@ -75,17 +76,18 @@ const ChatMessageComponentAsRichTextEditBox = (props) => {
                     onCancel && onCancel(message.messageId);
                 }, id: 'dismissIconWrapper', "data-testId": strings.editBoxCancelButton }),
             React.createElement(index.InputBoxButton, { className: index.richTextActionButtonsStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                    // it's very important to pass an empty attachment here
+                    // so when user remvoes all attachments, UI can reflect it instantly
+                    // if you set it to undefined, the attachments pre-edited would still be there
+                    // until edit message event is received
                     submitEnabled &&
-                        onSubmit(textValue, message.metadata, 
-                        /* @conditional-compile-remove(attachment-upload) */ {
-                            attachmentMetadata
-                        });
+                        onSubmit(textValue, /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata);
                     e.stopPropagation();
                 }, id: 'submitIconWrapper', "data-testId": strings.editBoxSubmitButton })));
     }, [
-        /* @conditional-compile-remove(attachment-upload) */ attachmentMetadata,
+        /* @conditional-compile-remove(attachment-upload) */
+        attachmentMetadata,
         message.messageId,
-        message.metadata,
         onCancel,
         onRenderThemedCancelIcon,
         onRenderThemedSubmitIcon,
@@ -97,17 +99,24 @@ const ChatMessageComponentAsRichTextEditBox = (props) => {
     ]);
     const richTextLocaleStrings = React.useMemo(() => {
         /* @conditional-compile-remove(rich-text-editor) */
-        return locale.richTextSendBox;
-    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);
+        return Object.assign(Object.assign({}, locale.richTextSendBox), strings);
+    }, [
+        /* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox,
+        /* @conditional-compile-remove(rich-text-editor) */ strings,
+        locale.sendBox
+    ]);
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onCancelAttachmentUpload = React.useCallback((attachmentId) => {
-        setAttachmentMetadata(attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.filter((attachment) => attachment.id !== attachmentId));
-    }, [attachmentMetadata]);
+        // edit box only capable of removing attachments
+        // we need to expand attachment actions
+        // if we want to support more actions e.g. add
+        handleAttachmentAction({ type: 'remove', id: attachmentId });
+    }, []);
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentUploads = React.useCallback(() => {
         return (React.createElement(react.Stack, { className: index.attachmentUploadCardsStyles },
             React.createElement(index.FluentV9ThemeProvider, { v8Theme: theme },
-                React.createElement(index._AttachmentUploadCards, { attachmentsWithProgress: attachmentMetadata, onCancelAttachmentUpload: onCancelAttachmentUpload }))));
+                React.createElement(index._AttachmentUploadCards, { attachments: attachmentMetadata, onCancelAttachmentUpload: onCancelAttachmentUpload }))));
     }, [attachmentMetadata, onCancelAttachmentUpload, theme]);
     const getContent = () => {
         return (React.createElement(react.Stack, { className: react.mergeStyles(index.editBoxWidthStyles) },
@@ -126,4 +135,4 @@ const ChatMessageComponentAsRichTextEditBox = (props) => {
 
 exports.ChatMessageComponentAsRichTextEditBox = ChatMessageComponentAsRichTextEditBox;
 exports.default = ChatMessageComponentAsRichTextEditBox;
-//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox-DWzf8cuK.js.map
+//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox-BZZrW3na.js.map

package/dist/dist-cjs/communication-react/ChatMessageComponentAsRichTextEditBox-BZZrW3na.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageComponentAsRichTextEditBox-BZZrW3na.js","sources":["../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"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"],"names":["useState","useReducer","attachmentMetadataReducer","getMessageWithAttachmentMetadata","useTheme","getMessageState","useChatMessageRichTextEditContainerStyles","useChatMyMessageStyles","useLocale","_formatString","MAXIMUM_LENGTH_OF_MESSAGE","useCallback","mergeStyles","richTextEditBoxActionButtonIcon","onRenderCancelIcon","onRenderSubmitIcon","useMemo","Stack","InputBoxButton","richTextActionButtonsStyle","attachmentUploadCardsStyles","FluentV9ThemeProvider","_AttachmentUploadCards","editBoxWidthStyles","RichTextSendBoxErrors","RichTextInputBoxComponent","editBoxRichTextEditorStyle","ChatMyMessage","mergeClasses"],"mappings":"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"}