npm - @azure/communication-react - Versions diffs - 1.5.2-alpha-202301190014.0 → 1.6.0 - Mend

@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1026) hide show

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { concatStyleSets, ContextualMenu, DirectionalHint, Persona, PersonaSize, useTheme } from '@fluentui/react';
-import { _formatString } from "../../../../acs-ui-common/src";
+import { _pxToRem, _formatString } from "../../../../acs-ui-common/src";
 import React, { useMemo } from 'react';
 import { chatMessageMenuStyle, menuIconStyleSet, menuItemIncreasedSizeStyles, menuSubIconStyleSet } from '../styles/ChatMessageComponent.styles';
 /**
@@ -14,7 +14,7 @@ export const ChatMessageActionFlyout = (props) => {
     const theme = useTheme();
     const messageReadByCount = (_a = props.messageReadBy) === null || _a === void 0 ? void 0 : _a.length;
     const sortedMessageReadyByList = [...((_b = props.messageReadBy) !== null && _b !== void 0 ? _b : [])].sort((a, b) => a.displayName.localeCompare(b.displayName));
-    const messageReadByList = sortedMessageReadyByList === null || sortedMessageReadyByList === void 0 ? void 0 : sortedMessageReadyByList.map((person) => {
+    const messageReadByList = sortedMessageReadyByList === null || sortedMessageReadyByList === void 0 ? void 0 : sortedMessageReadyByList.map(person => {
         const personaOptions = {
             hidePersonaDetails: true,
             size: PersonaSize.size24,
@@ -30,7 +30,9 @@ export const ChatMessageActionFlyout = (props) => {
         return {
             key: person.displayName,
             text: person.displayName,
-            itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
+            itemProps: {
+                styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
+            },
             onRenderIcon: () => { var _a; return onRenderAvatar ? onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions)); },
             iconProps: {
                 styles: menuIconStyleSet
@@ -38,36 +40,33 @@ export const ChatMessageActionFlyout = (props) => {
         };
     });
     const menuItems = useMemo(() => {
-        const items = [
-            {
+        const items = [{
                 key: 'Edit',
                 'data-ui-id': 'chat-composite-message-contextual-menu-edit-action',
                 text: props.strings.editMessage,
                 itemProps: {
                     styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
                 },
-                iconProps: { iconName: 'MessageEdit', styles: menuIconStyleSet },
+                iconProps: {
+                    iconName: 'MessageEdit',
+                    styles: menuIconStyleSet
+                },
                 onClick: props.onEditClick
-            },
-            {
+            }, {
                 key: 'Remove',
                 text: props.strings.removeMessage,
-                itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
+                itemProps: {
+                    styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
+                },
                 iconProps: {
                     iconName: 'MessageRemove',
                     styles: menuIconStyleSet
                 },
                 onClick: props.onRemoveClick
-            }
-        ];
+            }];
         // only show read by x of x if more than 3 participants in total including myself
         // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide
-        if (props.remoteParticipantsCount &&
-            messageReadByCount !== undefined &&
-            props.remoteParticipantsCount >= 2 &&
-            props.showMessageStatus &&
-            props.strings.messageReadCount &&
-            props.messageStatus !== 'failed') {
+        if (props.remoteParticipantsCount && messageReadByCount !== undefined && props.remoteParticipantsCount >= 2 && props.showMessageStatus && props.strings.messageReadCount && props.messageStatus !== 'failed') {
             items.push({
                 key: 'Read Count',
                 'data-ui-id': 'chat-composite-message-contextual-menu-read-info',
@@ -89,7 +88,16 @@ export const ChatMessageActionFlyout = (props) => {
                 subMenuProps: {
                     id: 'chat-composite-message-contextual-menu-read-name-list',
                     items: messageReadByList !== null && messageReadByList !== void 0 ? messageReadByList : [],
-                    calloutProps: preventUnwantedDismissProps
+                    calloutProps: preventUnwantedDismissProps,
+                    styles: concatStyleSets({
+                        root: {
+                            maxWidth: _pxToRem(320),
+                            span: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis'
+                            }
+                        }
+                    })
                 },
                 iconProps: {
                     iconName: 'MessageSeen',
@@ -133,27 +141,9 @@ export const ChatMessageActionFlyout = (props) => {
             });
         }
         return items;
-    }, [
-        props.strings.editMessage,
-        props.strings.removeMessage,
-        props.strings.messageReadCount,
-        props.strings.resendMessage,
-        props.messageStatus,
-        props.increaseFlyoutItemSize,
-        props.onEditClick,
-        props.onRemoveClick,
-        props.onResendClick,
-        props.remoteParticipantsCount,
-        props.showMessageStatus,
-        messageReadByCount,
-        theme.palette.neutralPrimary,
-        theme.palette.neutralTertiary,
-        theme.palette.neutralLighter,
-        theme.palette.themeDarkAlt,
-        messageReadByList
-    ]);
+    }, [props.strings.editMessage, props.strings.removeMessage, props.strings.messageReadCount, props.strings.resendMessage, props.messageStatus, props.increaseFlyoutItemSize, props.onEditClick, props.onRemoveClick, props.onResendClick, props.remoteParticipantsCount, props.showMessageStatus, messageReadByCount, theme.palette.neutralPrimary, theme.palette.neutralTertiary, theme.palette.neutralLighter, theme.palette.themeDarkAlt, messageReadByList]);
     // gap space uses pixels
-    return (React.createElement(ContextualMenu, { id: "chat-composite-message-contextual-menu", alignTargetEdge: true, gapSpace: 5 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: preventUnwantedDismissProps }));
+    return React.createElement(ContextualMenu, { id: "chat-composite-message-contextual-menu", alignTargetEdge: true, gapSpace: 5 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: preventUnwantedDismissProps });
 };
 /**
  * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageActionsFlyout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageActionsFlyout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n concatStyleSets,\n ContextualMenu,\n DirectionalHint,\n IContextualMenuItem,\n IPersona,\n Persona,\n PersonaSize,\n Target,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { MessageThreadStrings } from '../MessageThread';\nimport {\n chatMessageMenuStyle,\n menuIconStyleSet,\n menuItemIncreasedSizeStyles,\n menuSubIconStyleSet\n} from '../styles/ChatMessageComponent.styles';\n\n/** @private /\nexport interface ChatMessageActionFlyoutProps {\n target?: Target;\n hidden: boolean;\n strings: MessageThreadStrings;\n onEditClick?: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n onDismiss: () => void;\n messageReadBy?: { id: string; displayName: string }[];\n remoteParticipantsCount?: number;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Increase the height of the flyout items.\n * Recommended when interacting with the chat message using touch.\n /\n increaseFlyoutItemSize: boolean;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n Chat message actions flyout that contains actions such as Edit Message, or Remove Message.\n \n @private\n /\nexport const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JSX.Element => {\n const theme = useTheme();\n const messageReadByCount = props.messageReadBy?.length;\n\n const sortedMessageReadyByList = [...(props.messageReadBy ?? [])].sort((a, b) =>\n a.displayName.localeCompare(b.displayName)\n );\n\n const messageReadByList: IContextualMenuItem[] \| undefined = sortedMessageReadyByList?.map((person) => {\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size24,\n text: person.displayName,\n showOverflowTooltip: false,\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n const { onRenderAvatar } = props;\n return {\n key: person.displayName,\n text: person.displayName,\n itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n onRenderIcon: () =>\n onRenderAvatar ? onRenderAvatar(person.id ?? '', personaOptions) : <Persona {...personaOptions} />,\n iconProps: {\n styles: menuIconStyleSet\n }\n };\n });\n\n const menuItems = useMemo((): IContextualMenuItem[] => {\n const items: IContextualMenuItem[] = [\n {\n key: 'Edit',\n 'data-ui-id': 'chat-composite-message-contextual-menu-edit-action',\n text: props.strings.editMessage,\n itemProps: {\n styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n },\n iconProps: { iconName: 'MessageEdit', styles: menuIconStyleSet },\n onClick: props.onEditClick\n },\n {\n key: 'Remove',\n text: props.strings.removeMessage,\n itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n iconProps: {\n iconName: 'MessageRemove',\n styles: menuIconStyleSet\n },\n onClick: props.onRemoveClick\n }\n ];\n // only show read by x of x if more than 3 participants in total including myself\n // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide\n if (\n props.remoteParticipantsCount &&\n messageReadByCount !== undefined &&\n props.remoteParticipantsCount >= 2 &&\n props.showMessageStatus &&\n props.strings.messageReadCount &&\n props.messageStatus !== 'failed'\n ) {\n items.push({\n key: 'Read Count',\n 'data-ui-id': 'chat-composite-message-contextual-menu-read-info',\n text: _formatString(props.strings.messageReadCount, {\n messageReadByCount: `${messageReadByCount}`,\n remoteParticipantsCount: `${props.remoteParticipantsCount}`\n }),\n itemProps: {\n styles: concatStyleSets(\n {\n linkContent: {\n color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary\n },\n root: {\n borderTop: `1px solid ${theme.palette.neutralLighter}`\n }\n },\n props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n )\n },\n calloutProps: preventUnwantedDismissProps,\n subMenuProps: {\n id: 'chat-composite-message-contextual-menu-read-name-list',\n items: messageReadByList ?? [],\n calloutProps: preventUnwantedDismissProps\n },\n iconProps: {\n iconName: 'MessageSeen',\n styles: {\n root: {\n color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary\n }\n }\n },\n submenuIconProps: {\n iconName: 'HorizontalGalleryRightButton',\n styles: menuSubIconStyleSet\n },\n disabled: messageReadByCount <= 0\n });\n } else if (props.messageStatus === 'failed' && props.strings.resendMessage) {\n items.push({\n key: 'Resend',\n text: props.strings.resendMessage,\n itemProps: {\n styles: concatStyleSets(\n {\n linkContent: {\n color: theme.palette.neutralPrimary\n },\n root: {\n borderTop: `1px solid ${theme.palette.neutralLighter}`\n }\n },\n props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n )\n },\n calloutProps: preventUnwantedDismissProps,\n iconProps: {\n iconName: 'MessageResend',\n styles: {\n root: {\n color: theme.palette.themeDarkAlt\n }\n }\n },\n onClick: props.onResendClick\n });\n }\n\n return items;\n }, [\n props.strings.editMessage,\n props.strings.removeMessage,\n props.strings.messageReadCount,\n props.strings.resendMessage,\n props.messageStatus,\n props.increaseFlyoutItemSize,\n props.onEditClick,\n props.onRemoveClick,\n props.onResendClick,\n props.remoteParticipantsCount,\n props.showMessageStatus,\n messageReadByCount,\n theme.palette.neutralPrimary,\n theme.palette.neutralTertiary,\n theme.palette.neutralLighter,\n theme.palette.themeDarkAlt,\n messageReadByList\n ]);\n\n // gap space uses pixels\n return (\n <ContextualMenu\n id=\"chat-composite-message-contextual-menu\"\n alignTargetEdge={true}\n gapSpace={5 /px/}\n isBeakVisible={false}\n items={menuItems}\n hidden={props.hidden}\n target={props.target}\n onDismiss={props.onDismiss}\n directionalHint={DirectionalHint.topRightEdge}\n className={chatMessageMenuStyle}\n calloutProps={preventUnwantedDismissProps}\n />\n );\n};\n\n/\n Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.\n */\nconst preventUnwantedDismissProps = {\n preventDismissOnEvent: (ev: Event \| React.FocusEvent \| React.KeyboardEvent \| React.MouseEvent): boolean => {\n return ev.type === 'resize';\n }\n};\n\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageActionsFlyout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, ContextualMenu, DirectionalHint, IContextualMenuItem, IPersona, Persona, PersonaSize, Target, useTheme } from '@fluentui/react';\nimport { _pxToRem, _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageMenuStyle, menuIconStyleSet, menuItemIncreasedSizeStyles, menuSubIconStyleSet } from '../styles/ChatMessageComponent.styles';\n\n/** @private /\nexport interface ChatMessageActionFlyoutProps {\n target?: Target;\n hidden: boolean;\n strings: MessageThreadStrings;\n onEditClick?: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n onDismiss: () => void;\n messageReadBy?: {\n id: string;\n displayName: string;\n }[];\n remoteParticipantsCount?: number;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Increase the height of the flyout items.\n * Recommended when interacting with the chat message using touch.\n /\n increaseFlyoutItemSize: boolean;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n Chat message actions flyout that contains actions such as Edit Message, or Remove Message.\n \n @private\n /\nexport const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JSX.Element => {\n const theme = useTheme();\n const messageReadByCount = props.messageReadBy?.length;\n const sortedMessageReadyByList = [...(props.messageReadBy ?? [])].sort((a, b) => a.displayName.localeCompare(b.displayName));\n const messageReadByList: IContextualMenuItem[] \| undefined = sortedMessageReadyByList?.map(person => {\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size24,\n text: person.displayName,\n showOverflowTooltip: false,\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n const {\n onRenderAvatar\n } = props;\n return {\n key: person.displayName,\n text: person.displayName,\n itemProps: {\n styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n },\n onRenderIcon: () => onRenderAvatar ? onRenderAvatar(person.id ?? '', personaOptions) : <Persona {...personaOptions} />,\n iconProps: {\n styles: menuIconStyleSet\n }\n };\n });\n const menuItems = useMemo((): IContextualMenuItem[] => {\n const items: IContextualMenuItem[] = [{\n key: 'Edit',\n 'data-ui-id': 'chat-composite-message-contextual-menu-edit-action',\n text: props.strings.editMessage,\n itemProps: {\n styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n },\n iconProps: {\n iconName: 'MessageEdit',\n styles: menuIconStyleSet\n },\n onClick: props.onEditClick\n }, {\n key: 'Remove',\n text: props.strings.removeMessage,\n itemProps: {\n styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n },\n iconProps: {\n iconName: 'MessageRemove',\n styles: menuIconStyleSet\n },\n onClick: props.onRemoveClick\n }];\n // only show read by x of x if more than 3 participants in total including myself\n // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide\n if (props.remoteParticipantsCount && messageReadByCount !== undefined && props.remoteParticipantsCount >= 2 && props.showMessageStatus && props.strings.messageReadCount && props.messageStatus !== 'failed') {\n items.push({\n key: 'Read Count',\n 'data-ui-id': 'chat-composite-message-contextual-menu-read-info',\n text: _formatString(props.strings.messageReadCount, {\n messageReadByCount: `${messageReadByCount}`,\n remoteParticipantsCount: `${props.remoteParticipantsCount}`\n }),\n itemProps: {\n styles: concatStyleSets({\n linkContent: {\n color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary\n },\n root: {\n borderTop: `1px solid ${theme.palette.neutralLighter}`\n }\n }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)\n },\n calloutProps: preventUnwantedDismissProps,\n subMenuProps: {\n id: 'chat-composite-message-contextual-menu-read-name-list',\n items: messageReadByList ?? [],\n calloutProps: preventUnwantedDismissProps,\n styles: concatStyleSets({\n root: {\n maxWidth: _pxToRem(320),\n span: {\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n })\n },\n iconProps: {\n iconName: 'MessageSeen',\n styles: {\n root: {\n color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary\n }\n }\n },\n submenuIconProps: {\n iconName: 'HorizontalGalleryRightButton',\n styles: menuSubIconStyleSet\n },\n disabled: messageReadByCount <= 0\n });\n } else if (props.messageStatus === 'failed' && props.strings.resendMessage) {\n items.push({\n key: 'Resend',\n text: props.strings.resendMessage,\n itemProps: {\n styles: concatStyleSets({\n linkContent: {\n color: theme.palette.neutralPrimary\n },\n root: {\n borderTop: `1px solid ${theme.palette.neutralLighter}`\n }\n }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)\n },\n calloutProps: preventUnwantedDismissProps,\n iconProps: {\n iconName: 'MessageResend',\n styles: {\n root: {\n color: theme.palette.themeDarkAlt\n }\n }\n },\n onClick: props.onResendClick\n });\n }\n return items;\n }, [props.strings.editMessage, props.strings.removeMessage, props.strings.messageReadCount, props.strings.resendMessage, props.messageStatus, props.increaseFlyoutItemSize, props.onEditClick, props.onRemoveClick, props.onResendClick, props.remoteParticipantsCount, props.showMessageStatus, messageReadByCount, theme.palette.neutralPrimary, theme.palette.neutralTertiary, theme.palette.neutralLighter, theme.palette.themeDarkAlt, messageReadByList]);\n\n // gap space uses pixels\n return <ContextualMenu id=\"chat-composite-message-contextual-menu\" alignTargetEdge={true} gapSpace={5 /px/} isBeakVisible={false} items={menuItems} hidden={props.hidden} target={props.target} onDismiss={props.onDismiss} directionalHint={DirectionalHint.topRightEdge} className={chatMessageMenuStyle} calloutProps={preventUnwantedDismissProps} />;\n};\n\n/\n Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.\n */\nconst preventUnwantedDismissProps = {\n preventDismissOnEvent: (ev: Event \| React.FocusEvent \| React.KeyboardEvent \| React.MouseEvent): boolean => {\n return ev.type === 'resize';\n }\n};\"../../../../acs-ui-common/src\""]}

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { MessageThreadStrings } from '../MessageThread';
-import { ChatMessage, OnRenderAvatarCallback } from '../../types';
+import { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
 import { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';
 declare type ChatMessageComponentProps = {
     message: ChatMessage;
@@ -12,13 +11,23 @@ declare type ChatMessageComponentProps = {
     onUpdateMessage?: (messageId: string, content: string, metadata?: Record<string, string>, options?: {
         attachedFilesMetadata?: FileMetadata[];
     }) => Promise<void>;
+    onCancelEditMessage?: (messageId: string) => void;
+    /**
+     * Callback to delete a message. Also called before resending a message that failed to send.
+     * @param messageId ID of the message to delete
+     */
     onDeleteMessage?: (messageId: string) => Promise<void>;
     /**
-     * Optional callback called when message is sent
+     * Callback to send a message
+     * @param content The message content to send
      */
     onSendMessage?: (content: string) => Promise<void>;
     strings: MessageThreadStrings;
     messageStatus?: string;
+    /**
+     * Optional text to display when the message status is 'failed'.
+     */
+    failureReason?: string;
     /**
      * Whether the status indicator for each message is displayed or not.
      */

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

@@ -19,37 +19,32 @@ export const ChatMessageComponent = (props) => {
     const [isEditing, setIsEditing] = useState(false);
     const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);
     const { onDeleteMessage, onSendMessage, message } = props;
+    const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;
+    const content = 'content' in message ? message.content : undefined;
     const onRemoveClick = useCallback(() => {
         if (onDeleteMessage && message.messageId) {
             onDeleteMessage(message.messageId);
         }
-        // when fail to send, message does not have message id, delete message using clientmessageid
-        else if (onDeleteMessage && message.clientMessageId) {
-            onDeleteMessage(message.clientMessageId);
+        // when fail to send, message does not have message id, delete message using clientMessageId
+        else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {
+            onDeleteMessage(clientMessageId);
         }
-    }, [message.messageId, message.clientMessageId, onDeleteMessage]);
+    }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);
     const onResendClick = useCallback(() => {
-        var _a;
-        onDeleteMessage && message.clientMessageId && onDeleteMessage(message.clientMessageId);
-        onSendMessage && onSendMessage((_a = message.content) !== null && _a !== void 0 ? _a : '');
-    }, [message.clientMessageId, message.content, onSendMessage, onDeleteMessage]);
-    if (props.message.messageType !== 'chat') {
-        return React.createElement(React.Fragment, null);
-    }
-    else if (isEditing) {
-        return (React.createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter(void 0, void 0, void 0, function* () {
-                props.onUpdateMessage &&
-                    props.message.messageId &&
-                    (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
+        onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
+        onSendMessage && onSendMessage(content !== undefined ? content : '');
+    }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
+    if (isEditing && message.messageType === 'chat') {
+        return React.createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter(void 0, void 0, void 0, function* () {
+                props.onUpdateMessage && message.messageId && (yield props.onUpdateMessage(message.messageId, text, metadata, options));
                 setIsEditing(false);
-            }), onCancel: () => {
+            }), onCancel: messageId => {
+                props.onCancelEditMessage && props.onCancelEditMessage(messageId);
                 setIsEditing(false);
-            } }));
+            } });
     }
     else {
-        return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar,
-            /* @conditional-compile-remove(date-time-customization) */
-            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings })));
+        return React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, strings: props.strings }));
     }
 };
 //# sourceMappingURL=ChatMessageComponent.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["~~../../../../../../../~~react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;~~AAIlC~~,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;~~AA4D5F~~;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;~~IAElD~~,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;~~IAE1E~~,MAAM,~~EAAE~~,eAAe,~~EAAE~~,aAAa,~~EAAE~~,OAAO,~~EAAE~~,GAAG,KAAK,CAAC;~~IAC1D~~,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,eAAe,EAAE;~~YACnD~~,eAAe,CAAC,~~OAAO,CAAC,~~eAAe,CAAC,CAAC;~~SAC1C~~;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,~~eAAe~~,EAAE,eAAe,CAAC,CAAC,CAAC;~~IAClE~~,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;;QACrC,eAAe,IAAI,~~OAAO,CAAC,~~eAAe,IAAI,eAAe,CAAC,~~OAAO,CAAC,~~eAAe,CAAC,CAAC;~~QACvF~~,aAAa,IAAI,aAAa,CAAC,~~MAAA,~~OAAO,CAAC,OAAO,~~mCAAI~~,EAAE,CAAC,CAAC;~~IACxD~~,CAAC,EAAE,CAAC,~~OAAO,CAAC,~~eAAe,EAAE,OAAO,~~CAAC,OAAO,~~EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;~~IAE~~/E,IAAI,~~KAAK~~,~~CAAC~~,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;~~QACxC~~,OAAO,~~yCAAK,CAAC;KACd;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,CACL,~~oBAAC,6BAA6B,~~IAC5B~~,OAAO,EAAE,OAAO,~~EAChB~~,iBAAiB,EAAE,KAAK,CAAC,6BAA6B,~~EACtD~~,OAAO,EAAE,KAAK,CAAC,OAAO,~~EACtB~~,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;~~gBAC1C~~,KAAK,CAAC,eAAe~~;oBACnB~~,~~KAAK~~,~~CAAC,~~OAAO,CAAC,SAAS~~;oBACvB~~,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,~~KAAK,CAAC,~~OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;~~gBAClF~~,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,~~EACD~~,QAAQ,EAAE,~~GAAG~~,EAAE;~~gBACb~~,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,~~GACD~~,~~CACH,~~CAAC;~~KACH~~;SAAM;QACL,OAAO,~~CACL,~~oBAAC,mCAAmC,~~oBAC9B~~,KAAK,~~IACT~~,aAAa,EAAE,aAAa,~~EAC5B~~,WAAW,EAAE,WAAW,~~EACxB~~,aAAa,EAAE,aAAa,~~EAC5B~~,cAAc,EAAE,KAAK,CAAC,cAAc~~;YACpC~~,~~0DAA0D;YAC1D,uBAAuB,~~EAAE,~~KAAK,CAAC,uBAAuB,EACtD,~~OAAO,EAAE,KAAK,CAAC,OAAO,~~IACtB~~,~~CACH,~~CAAC;~~KACH~~;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ~~ComponentSlotStyle } from '@fluentui/react-northstar';\nimport {~~ _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageComponentProps = {\n message: ChatMessage;\n userId: string;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onUpdateMessage?: (\n messageId: string~~,\n~~ content: string~~,\n~~ metadata?: Record<string, string~~>,\n~~ options?: {\n attachedFilesMetadata?: FileMetadata[];\n }\n ) => Promise<void>;\n onDeleteMessage?: (messageId: string) => Promise<void>;\n /*\n ~~Optional~~ ~~callback~~ ~~called~~ ~~when~~ message is ~~sent~~\n /\n onSendMessage?: (content: string) => Promise<void>;\n strings: MessageThreadStrings;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Inline the accept and reject edit buttons when editing a message.\n * Setting to false will mean they are on a new line inside the editable chat message.\n /\n inlineAcceptRejectEditButtons: boolean;\n /\n Optional callback to render uploaded files in the message component.\n /\n onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n /\n Optional function called when someone clicks on the file download icon.\n /\n fileDownloadHandler?: FileDownloadHandler;\n remoteParticipantsCount?: number;\n onActionButtonClick: (\n message: ChatMessage~~,\n~~ setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n ) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/\n @private\n /\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n const [isEditing, setIsEditing] = useState(false);\n\n const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n const { ~~onDeleteMessage,~~ ~~onSendMessage,~~ message } = ~~props~~;\n const onRemoveClick = useCallback(() => {\n if (onDeleteMessage && message.messageId) {\n onDeleteMessage(message.messageId);\n }\n // when fail to send, message does not have message id, delete message using ~~clientmessageid~~\n else if (onDeleteMessage && message.clientMessageId) {\n onDeleteMessage(~~message.~~clientMessageId);\n }\n }, [message.messageId, message.~~clientMessageId~~, ~~onDeleteMessage~~]);\n const onResendClick = useCallback(() => {\n onDeleteMessage && ~~message.~~clientMessageId && onDeleteMessage(~~message.~~clientMessageId);\n onSendMessage && onSendMessage(~~message.~~content ?? '');\n }, [~~message.~~clientMessageId, ~~message.~~content, onSendMessage, onDeleteMessage]);\n\n if (~~props.~~message.messageType ~~!==~~ 'chat') {\n return ~~<></>;\n } else if (isEditing) {\n return (\n~~ <ChatMessageComponentAsEditBox\n message={message}\n inlineEditButtons={props.inlineAcceptRejectEditButtons}\n strings={props.strings}\n onSubmit={async (text, metadata, options) => {\n props.onUpdateMessage ~~&&\n props.~~message.messageId ~~&&\n~~ (await props.onUpdateMessage(~~props.~~message.messageId, text, metadata, options));\n setIsEditing(false);\n }}\n onCancel={() => {\n setIsEditing(false);\n }}\n ~~/>\n );\n~~ } else {\n return ~~(\n~~ <ChatMessageComponentAsMessageBubble\n {...props}\n onRemoveClick={onRemoveClick}\n onEditClick={onEditClick}\n onResendClick={onResendClick}\n onRenderAvatar={props.onRenderAvatar}\n / ~~@conditional-compile-remove(date-time-customization) */\n onDisplayDateTimeString={props.onDisplayDateTimeString}\n~~ strings={props.strings}\n ~~/>\n );\n~~ }\n};\n\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAGlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AAgE5F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAC1E,MAAM,EACJ,eAAe,EACf,aAAa,EACb,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,iBAAiB,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,OAAO,GAAG,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,eAAe,EAAE;YAC7E,eAAe,CAAC,eAAe,CAAC,CAAC;SAClC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,eAAe,IAAI,eAAe,IAAI,eAAe,CAAC,eAAe,CAAC,CAAC;QACvE,aAAa,IAAI,aAAa,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAC/D,IAAI,SAAS,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;QAC/C,OAAO,oBAAC,6BAA6B,IAAC,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,KAAK,CAAC,6BAA6B,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;gBAClL,KAAK,CAAC,eAAe,IAAI,OAAO,CAAC,SAAS,IAAI,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;gBACxH,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE;gBACvB,KAAK,CAAC,mBAAmB,IAAI,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBAClE,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,GAAI,CAAC;KACP;SAAM;QACL,OAAO,oBAAC,mCAAmC,oBAAK,KAAK,IAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC;KAC/M;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\ntype ChatMessageComponentProps = {\n message: ChatMessage;\n userId: string;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onUpdateMessage?: (messageId: string, content: string, metadata?: Record<string, string>, options?: {\n attachedFilesMetadata?: FileMetadata[];\n }) => Promise<void>;\n onCancelEditMessage?: (messageId: string) => void;\n /*\n Callback to delete a message. Also called before resending a message that failed to send.\n * @param messageId ID of the message to delete\n /\n onDeleteMessage?: (messageId: string) => Promise<void>;\n /\n Callback to send a message\n * @param content The message content to send\n /\n onSendMessage?: (content: string) => Promise<void>;\n strings: MessageThreadStrings;\n messageStatus?: string;\n /\n Optional text to display when the message status is 'failed'.\n /\n failureReason?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Inline the accept and reject edit buttons when editing a message.\n * Setting to false will mean they are on a new line inside the editable chat message.\n /\n inlineAcceptRejectEditButtons: boolean;\n /\n Optional callback to render uploaded files in the message component.\n /\n onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n /\n Optional function called when someone clicks on the file download icon.\n /\n fileDownloadHandler?: FileDownloadHandler;\n remoteParticipantsCount?: number;\n onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n id: string;\n displayName: string;\n }[]) => void) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/\n @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n const [isEditing, setIsEditing] = useState(false);\n const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n const {\n onDeleteMessage,\n onSendMessage,\n message\n } = props;\n const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n const content = 'content' in message ? message.content : undefined;\n const onRemoveClick = useCallback(() => {\n if (onDeleteMessage && message.messageId) {\n onDeleteMessage(message.messageId);\n }\n // when fail to send, message does not have message id, delete message using clientMessageId\n else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n onDeleteMessage(clientMessageId);\n }\n }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n const onResendClick = useCallback(() => {\n onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n onSendMessage && onSendMessage(content !== undefined ? content : '');\n }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n if (isEditing && message.messageType === 'chat') {\n return <ChatMessageComponentAsEditBox message={message} inlineEditButtons={props.inlineAcceptRejectEditButtons} strings={props.strings} onSubmit={async (text, metadata, options) => {\n props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text, metadata, options));\n setIsEditing(false);\n }} onCancel={messageId => {\n props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n setIsEditing(false);\n }} />;\n } else {\n return <ChatMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar} strings={props.strings} />;\n }\n};\"../../../../acs-ui-common/src\""]}

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

@@ -4,7 +4,7 @@ import { ChatMessage } from '../../types';
 import { FileMetadata } from '../FileDownloadCards';
 /** @private */
 export declare type ChatMessageComponentAsEditBoxProps = {
-    onCancel?: () => void;
+    onCancel?: (messageId: string) => void;
     onSubmit: (text: string, metadata?: Record<string, string>, options?: {
         attachedFilesMetadata?: FileMetadata[];
     }) => void;

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

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { concatStyleSets, Icon, mergeStyles, Stack } from '@fluentui/react';
+import { Chat } from "../../../../northstar-wrapper/src";
 import { _formatString } from "../../../../acs-ui-common/src";
 import { useTheme } from '../../theming/FluentThemeProvider';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -8,13 +9,18 @@ import { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from
 import { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';
 import { borderAndBoxShadowStyle } from '../styles/SendBox.styles';
 import { _FileUploadCards } from '../FileUploadCards';
+import { chatMessageFailedTagStyle, chatMessageEditContainerStyle } from '../styles/ChatMessageComponent.styles';
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const onRenderCancelIcon = (color) => {
-    const className = mergeStyles(inputBoxIcon, { color });
+    const className = mergeStyles(inputBoxIcon, {
+        color
+    });
     return React.createElement(Icon, { iconName: 'EditBoxCancel', className: className });
 };
 const onRenderSubmitIcon = (color) => {
-    const className = mergeStyles(inputBoxIcon, { color });
+    const className = mergeStyles(inputBoxIcon, {
+        color
+    });
     return React.createElement(Icon, { iconName: 'EditBoxSubmit', className: className });
 };
 /**
@@ -35,54 +41,66 @@ 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 onRenderThemedCancelIcon = useCallback(() => onRenderCancelIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
     const onRenderThemedSubmitIcon = useCallback(() => onRenderSubmitIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
     const editBoxStyles = useMemo(() => {
-        return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
+        return concatStyleSets(editBoxStyleSet, {
+            textField: {
+                borderColor: theme.palette.themePrimary
+            }
+        });
     }, [theme.palette.themePrimary]);
     const onRenderFileUploads = useCallback(() => {
-        return ((attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && (React.createElement("div", { style: { margin: '0.25rem' } },
-            React.createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map((file) => ({
+        return (attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && React.createElement("div", { style: {
+                margin: '0.25rem'
+            } },
+            React.createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map(file => ({
                     id: file.name,
                     filename: file.name,
                     progress: 1
-                })), onCancelFileUpload: (fileId) => {
-                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
-                } }))));
+                })), onCancelFileUpload: fileId => {
+                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter(file => file.name !== fileId));
+                } }));
     }, [attachedFilesMetadata]);
-    return (React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
-            theme,
-            hasErrorMessage: false,
-            disabled: false
-        })) },
-        React.createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
-                submitEnabled &&
-                    onSubmit(textValue, message.metadata, {
+    const getContent = () => {
+        return React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
+                theme,
+                hasErrorMessage: message.failureReason !== undefined,
+                disabled: false
+            })) },
+            React.createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
+                    if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
+                        ev.stopPropagation();
+                    }
+                }, onEnterKeyDown: () => {
+                    submitEnabled && onSubmit(textValue, message.metadata, {
                         attachedFilesMetadata
                     });
-            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
-            React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel();
-                }, id: 'dismissIconWrapper' }),
-            React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
-                    submitEnabled &&
-                        onSubmit(textValue, message.metadata, {
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
+                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                        onCancel && onCancel(message.messageId);
+                    }, id: 'dismissIconWrapper' }),
+                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
+                        submitEnabled && onSubmit(textValue, message.metadata, {
                             attachedFilesMetadata
                         });
-                    e.stopPropagation();
-                }, id: 'submitIconWrapper' })),
-        onRenderFileUploads()));
+                        e.stopPropagation();
+                    }, id: 'submitIconWrapper' })),
+            message.failureReason && React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), {
+                    padding: '0.5rem'
+                }) }, message.failureReason),
+            onRenderFileUploads());
+    };
+    return React.createElement(Chat.Message, { styles: chatMessageEditContainerStyle, content: getContent() });
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
 const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
 const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
 // @TODO: Remove when file-sharing feature becomes stable.
 const getMessageAttachedFilesMetadata = (message) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return message.attachedFilesMetadata;
     return [];
 };
 //# sourceMappingURL=ChatMessageComponentAsEditBox.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { borderAndBoxShadowStyle } from '../styles/SendBox.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\n\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, { color });\n return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\n\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, { color });\n return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: () => void;\n onSubmit: (\n text: string,\n metadata?: Record<string, string>,\n options?: {\n attachedFilesMetadata?: FileMetadata[];\n }\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n /\n Inline the accept and reject edit buttons when editing a message.\n * Setting to false will mean they are on a new line inside the editable chat message.\n /\n inlineEditButtons: boolean;\n};\n\ntype MessageState = 'OK' \| 'too short' \| 'too long';\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n\n const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n const submitEnabled = messageState === 'OK';\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (\n event: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>,\n newValue?: string \| undefined\n ): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const onRenderThemedCancelIcon = useCallback(\n () => onRenderCancelIcon(theme.palette.neutralSecondary),\n [theme.palette.neutralSecondary]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n () => onRenderSubmitIcon(theme.palette.neutralSecondary),\n [theme.palette.neutralSecondary]\n );\n\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n }, [theme.palette.themePrimary]);\n\n const onRenderFileUploads = useCallback(() => {\n return (\n attachedFilesMetadata?.length && (\n <div style={{ margin: '0.25rem' }}>\n <_FileUploadCards\n activeFileUploads={attachedFilesMetadata?.map((file) => ({\n id: file.name,\n filename: file.name,\n progress: 1\n }))}\n onCancelFileUpload={(fileId) => {\n setAttachedFilesMetadata(attachedFilesMetadata?.filter((file) => file.name !== fileId));\n }}\n />\n </div>\n )\n );\n }, [attachedFilesMetadata]);\n\n return (\n <Stack\n className={mergeStyles(\n borderAndBoxShadowStyle({\n theme,\n hasErrorMessage: false,\n disabled: false\n })\n )}\n >\n <InputBoxComponent\n inlineChildren={props.inlineEditButtons}\n id={'editbox'}\n textFieldRef={editTextFieldRef}\n inputClassName={editBoxStyle(props.inlineEditButtons)}\n placeholderText={strings.editBoxPlaceholderText}\n textValue={textValue}\n onChange={setText}\n onEnterKeyDown={() => {\n submitEnabled &&\n onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n }}\n supportNewline={false}\n maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n errorMessage={textTooLongMessage}\n styles={editBoxStyles}\n >\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel();\n }}\n id={'dismissIconWrapper'}\n />\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n submitEnabled &&\n onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </InputBoxComponent>\n {onRenderFileUploads()}\n </Stack>\n );\n};\n\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean =>\n messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState =>\n isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] \| undefined => {\n / @conditional-compile-remove(file-sharing) */\n return message.attachedFilesMetadata;\n return [];\n};\n\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAc,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,0CAAoC;AACnD,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3G,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,yBAAyB,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AACjH,MAAM,yBAAyB,GAAG,IAAI,CAAC;AACvC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAe,EAAE;IACxD,MAAM,SAAS,GAAG,WAAW,CAAC,YAAY,EAAE;QAC1C,KAAK;KACN,CAAC,CAAC;IACH,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACnE,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAe,EAAE;IACxD,MAAM,SAAS,GAAG,WAAW,CAAC,YAAY,EAAE;QAC1C,KAAK;KACN,CAAC,CAAC;IACH,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACnE,CAAC,CAAC;AAkBF;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;IACtG,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAC1E,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC,CAAC;IACnH,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,EAAE,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,YAAY,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,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;IACF,MAAM,kBAAkB,GAAG,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,EAAE;QAC/F,WAAW,EAAE,GAAG,yBAAyB,EAAE;KAC5C,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACf,MAAM,wBAAwB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzI,MAAM,wBAAwB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzI,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,eAAe,CAAC,eAAe,EAAE;YACtC,SAAS,EAAE;gBACT,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aACxC;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;IACjC,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,OAAO,CAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,KAAI,6BAAK,KAAK,EAAE;gBAClD,MAAM,EAAE,SAAS;aAClB;YACK,oBAAC,gBAAgB,IAAC,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC3E,EAAE,EAAE,IAAI,CAAC,IAAI;oBACb,QAAQ,EAAE,IAAI,CAAC,IAAI;oBACnB,QAAQ,EAAE,CAAC;iBACZ,CAAC,CAAC,EAAE,kBAAkB,EAAE,MAAM,CAAC,EAAE;oBAChC,wBAAwB,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;gBACxF,CAAC,GAAI,CACG,CAAC;IACb,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAG,GAAgB,EAAE;QACnC,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC;gBAC3D,KAAK;gBACL,eAAe,EAAE,OAAO,CAAC,aAAa,KAAK,SAAS;gBACpD,QAAQ,EAAE,KAAK;aAChB,CAAC,CAAC;YACC,oBAAC,iBAAiB,IAAC,cAAc,EAAE,KAAK,CAAC,iBAAiB,EAAE,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,YAAY,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAAE,eAAe,EAAE,OAAO,CAAC,sBAAsB,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,EAAE;oBAC5Q,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE;wBAClD,EAAE,CAAC,eAAe,EAAE,CAAC;qBACtB;gBACH,CAAC,EAAE,cAAc,EAAE,GAAG,EAAE;oBACtB,aAAa,IAAI,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE;wBACrD,qBAAqB;qBACtB,CAAC,CAAC;gBACL,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,EAAE,aAAa;gBACnH,oBAAC,cAAc,IAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAAE,YAAY,EAAE,wBAAwB,EAAE,OAAO,EAAE,GAAG,EAAE;wBAC1L,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;oBAC1C,CAAC,EAAE,EAAE,EAAE,oBAAoB,GAAI;gBAC7B,oBAAC,cAAc,IAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAAE,YAAY,EAAE,wBAAwB,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;wBACzL,aAAa,IAAI,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE;4BACrD,qBAAqB;yBACtB,CAAC,CAAC;wBACH,CAAC,CAAC,eAAe,EAAE,CAAC;oBACtB,CAAC,EAAE,EAAE,EAAE,mBAAmB,GAAI,CACV;YACnB,OAAO,CAAC,aAAa,IAAI,6BAAK,SAAS,EAAE,WAAW,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAE;oBACxF,OAAO,EAAE,QAAQ;iBAClB,CAAC,IACK,OAAO,CAAC,aAAa,CAClB;YACP,mBAAmB,EAAE,CAChB,CAAC;IACb,CAAC,CAAC;IACF,OAAO,oBAAC,IAAI,CAAC,OAAO,IAAC,MAAM,EAAE,6BAA6B,EAAE,OAAO,EAAE,UAAU,EAAE,GAAI,CAAC;AACxF,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,WAAmB,EAAW,EAAE,CAAC,WAAW,CAAC,MAAM,GAAG,yBAAyB,CAAC;AAC1G,MAAM,cAAc,GAAG,CAAC,WAAmB,EAAE,qBAAqC,EAAW,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,IAAI,qBAAqB,CAAC,MAAM,KAAK,CAAC,CAAC;AACtK,MAAM,eAAe,GAAG,CAAC,WAAmB,EAAE,qBAAqC,EAAgB,EAAE,CAAC,cAAc,CAAC,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;AAE3N,0DAA0D;AAC1D,MAAM,+BAA+B,GAAG,CAAC,OAAoB,EAA8B,EAAE;IAC3F,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { Chat } from '@internal/northstar-wrapper';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { borderAndBoxShadowStyle } from '../styles/SendBox.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, chatMessageEditContainerStyle } from '../styles/ChatMessageComponent.styles';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, {\n color\n });\n return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, {\n color\n });\n return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (text: string, metadata?: Record<string, string>, options?: {\n attachedFilesMetadata?: FileMetadata[];\n }) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n /\n Inline the accept and reject edit buttons when editing a message.\n * Setting to false will mean they are on a new line inside the editable chat message.\n /\n inlineEditButtons: boolean;\n};\ntype MessageState = 'OK' \| 'too short' \| 'too long';\n\n/\n @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const {\n onCancel,\n onSubmit,\n strings,\n message\n } = props;\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n const submitEnabled = messageState === 'OK';\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n const setText = (event?: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n }) : undefined;\n const onRenderThemedCancelIcon = useCallback(() => onRenderCancelIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);\n const onRenderThemedSubmitIcon = useCallback(() => onRenderSubmitIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, {\n textField: {\n borderColor: theme.palette.themePrimary\n }\n });\n }, [theme.palette.themePrimary]);\n const onRenderFileUploads = useCallback(() => {\n return attachedFilesMetadata?.length && <div style={{\n margin: '0.25rem'\n }}>\n <_FileUploadCards activeFileUploads={attachedFilesMetadata?.map(file => ({\n id: file.name,\n filename: file.name,\n progress: 1\n }))} onCancelFileUpload={fileId => {\n setAttachedFilesMetadata(attachedFilesMetadata?.filter(file => file.name !== fileId));\n }} />\n </div>;\n }, [attachedFilesMetadata]);\n const getContent = (): JSX.Element => {\n return <Stack className={mergeStyles(borderAndBoxShadowStyle({\n theme,\n hasErrorMessage: message.failureReason !== undefined,\n disabled: false\n }))}>\n <InputBoxComponent inlineChildren={props.inlineEditButtons} id={'editbox'} textFieldRef={editTextFieldRef} inputClassName={editBoxStyle(props.inlineEditButtons)} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onKeyDown={ev => {\n if (ev.key === 'ArrowUp' \|\| ev.key === 'ArrowDown') {\n ev.stopPropagation();\n }\n }} onEnterKeyDown={() => {\n submitEnabled && onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}>\n <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n onCancel && onCancel(message.messageId);\n }} id={'dismissIconWrapper'} />\n <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n submitEnabled && onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n e.stopPropagation();\n }} id={'submitIconWrapper'} />\n </InputBoxComponent>\n {message.failureReason && <div className={mergeStyles(chatMessageFailedTagStyle(theme), {\n padding: '0.5rem'\n })}>\n {message.failureReason}\n </div>}\n {onRenderFileUploads()}\n </Stack>;\n };\n return <Chat.Message styles={chatMessageEditContainerStyle} content={getContent()} />;\n};\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] \| undefined => {\n return [];\n};\"../../../../northstar-wrapper/src\"\"../../../../acs-ui-common/src\""]}

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

@@ -1,8 +1,7 @@
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
-import { OnRenderAvatarCallback } from '../../types';
+import { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
 import { FileDownloadHandler } from '../FileDownloadCards';
 declare type ChatMessageComponentAsMessageBubbleProps = {
     message: ChatMessage;