@azure/communication-react 1.14.1-alpha-202404020012 → 1.15.0-alpha-202404040013

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.js

@@ -13,10 +13,10 @@ import { inputBoxContentStackStyle, inputBoxRichTextStackItemStyle, inputBoxRich
  */
 export const RichTextInputBoxComponent = (props) => {
     const { placeholderText, initialContent, onChange, onEnterKeyDown, editorComponentRef, disabled, strings, actionComponents, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     onRenderAttachmentUploads, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    hasFiles, richTextEditorStyleProps, isHorizontalLayoutDisabled = false } = props;
+    /* @conditional-compile-remove(attachment-upload) */
+    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false } = props;
     const theme = useTheme();
     const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);
     const onRenderRichTextEditorIcon = useCallback((isHover) => (React.createElement(Icon, { iconName: isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting)) })), [disabled, showRichTextEditorFormatting, theme]);
@@ -54,11 +54,11 @@ export const RichTextInputBoxComponent = (props) => {
     const useHorizontalLayout = useMemo(() => {
         return (!isHorizontalLayoutDisabled &&
             !showRichTextEditorFormatting &&
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ !hasFiles);
+            /* @conditional-compile-remove(attachment-upload) */ !hasAttachments);
     }, [
         isHorizontalLayoutDisabled,
         showRichTextEditorFormatting,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFiles
+        /* @conditional-compile-remove(attachment-upload) */ hasAttachments
     ]);
     return (React.createElement("div", { className: richTextBorderBoxStyle({
             theme: theme,
@@ -68,7 +68,7 @@ export const RichTextInputBoxComponent = (props) => {
             React.createElement(Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(Stack.Item, { className: inputBoxRichTextStackItemStyle },
                     React.createElement(RichTextEditor, { initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle })),
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&
+                /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&
                     onRenderAttachmentUploads()),
             actionButtons)));
 };

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n  richTextActionButtonsDividerStyle,\n  richTextActionButtonsStackStyle,\n  richTextActionButtonsStyle,\n  richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n  inputBoxContentStackStyle,\n  inputBoxRichTextStackItemStyle,\n  inputBoxRichTextStackStyle,\n  richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  hasFiles?: boolean;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  isHorizontalLayoutDisabled?: boolean;\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentUploads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    hasFiles,\n    richTextEditorStyleProps,\n    isHorizontalLayoutDisabled = false\n  } = props;\n  const theme = useTheme();\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={\n          isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n        }\n        className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting))}\n      />\n    ),\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton\n            onRenderIcon={onRenderRichTextEditorIcon}\n            onClick={(e) => {\n              setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n              editorComponentRef.current?.focus();\n              e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n            }}\n            ariaLabel={strings.richTextFormatButtonTooltip}\n            tooltipContent={strings.richTextFormatButtonTooltip}\n            className={richTextActionButtonsStyle}\n            data-testId={'rich-text-input-box-format-button'}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    editorComponentRef,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting]\n  );\n\n  const useHorizontalLayout = useMemo(() => {\n    return (\n      !isHorizontalLayoutDisabled &&\n      !showRichTextEditorFormatting &&\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ !hasFiles\n    );\n  }, [\n    isHorizontalLayoutDisabled,\n    showRichTextEditorFormatting,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFiles\n  ]);\n\n  return (\n    <div\n      className={richTextBorderBoxStyle({\n        theme: theme,\n        disabled: !!disabled\n      })}\n    >\n      {/* This layout is used for the compact view when formatting options are not shown */}\n      <Stack\n        grow\n        horizontal={useHorizontalLayout}\n        horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n        className={inputBoxContentStackStyle}\n        wrap={useHorizontalLayout}\n      >\n        {/* Fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <Stack.Item className={inputBoxRichTextStackItemStyle}>\n            <RichTextEditor\n              initialContent={initialContent}\n              placeholderText={placeholderText}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              ref={editorComponentRef}\n              strings={strings}\n              showRichTextEditorFormatting={showRichTextEditorFormatting}\n              styles={richTextEditorStyle}\n            />\n          </Stack.Item>\n          {\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&\n              onRenderAttachmentUploads()\n          }\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n  richTextActionButtonsDividerStyle,\n  richTextActionButtonsStackStyle,\n  richTextActionButtonsStyle,\n  richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n  inputBoxContentStackStyle,\n  inputBoxRichTextStackItemStyle,\n  inputBoxRichTextStackStyle,\n  richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  /* @conditional-compile-remove(attachment-upload) */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-upload) */\n  hasAttachments?: boolean;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  isHorizontalLayoutDisabled?: boolean;\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    /* @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    hasAttachments,\n    richTextEditorStyleProps,\n    isHorizontalLayoutDisabled = false\n  } = props;\n  const theme = useTheme();\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={\n          isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n        }\n        className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting))}\n      />\n    ),\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton\n            onRenderIcon={onRenderRichTextEditorIcon}\n            onClick={(e) => {\n              setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n              editorComponentRef.current?.focus();\n              e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n            }}\n            ariaLabel={strings.richTextFormatButtonTooltip}\n            tooltipContent={strings.richTextFormatButtonTooltip}\n            className={richTextActionButtonsStyle}\n            data-testId={'rich-text-input-box-format-button'}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    editorComponentRef,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting]\n  );\n\n  const useHorizontalLayout = useMemo(() => {\n    return (\n      !isHorizontalLayoutDisabled &&\n      !showRichTextEditorFormatting &&\n      /* @conditional-compile-remove(attachment-upload) */ !hasAttachments\n    );\n  }, [\n    isHorizontalLayoutDisabled,\n    showRichTextEditorFormatting,\n    /* @conditional-compile-remove(attachment-upload) */ hasAttachments\n  ]);\n\n  return (\n    <div\n      className={richTextBorderBoxStyle({\n        theme: theme,\n        disabled: !!disabled\n      })}\n    >\n      {/* This layout is used for the compact view when formatting options are not shown */}\n      <Stack\n        grow\n        horizontal={useHorizontalLayout}\n        horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n        className={inputBoxContentStackStyle}\n        wrap={useHorizontalLayout}\n      >\n        {/* Fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <Stack.Item className={inputBoxRichTextStackItemStyle}>\n            <RichTextEditor\n              initialContent={initialContent}\n              placeholderText={placeholderText}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              ref={editorComponentRef}\n              strings={strings}\n              showRichTextEditorFormatting={showRichTextEditorFormatting}\n              styles={richTextEditorStyle}\n            />\n          </Stack.Item>\n          {\n            /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&\n              onRenderAttachmentUploads()\n          }\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.d.ts

@@ -114,7 +114,7 @@ export interface RichTextSendBoxProps {
      * cancel icon.
      * @beta
      */
-    onCancelAttachmentUpload?: (fileId: string) => void;
+    onCancelAttachmentUpload?: (attachmentId: string) => void;
     /**
      * Callback function used when the send button is clicked.
      */

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js

@@ -10,13 +10,13 @@ import { RichTextSendBoxErrors } from './RichTextSendBoxErrors';
 import { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';
 import { useTheme } from '../../theming';
 import { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { _AttachmentUploadCards } from '../AttachmentUploadCards';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { attachmentUploadCardsStyles } from '../styles/SendBox.styles';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
 /**
  * A component to render SendBox with Rich Text Editor support.
@@ -25,9 +25,9 @@ import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
  */
 export const RichTextSendBox = (props) => {
     const { disabled = false, systemMessage, onSendMessage, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     activeAttachmentUploads, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     onCancelAttachmentUpload } = props;
     const theme = useTheme();
     const locale = useLocale();
@@ -41,7 +41,7 @@ export const RichTextSendBox = (props) => {
     }, [localeStrings, props.strings]);
     const [contentValue, setContentValue] = useState('');
     const [contentValueOverflow, setContentValueOverflow] = useState(false);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const editorComponentRef = useRef(null);
     const contentTooLongMessage = useMemo(() => (contentValueOverflow ? strings.textTooLong : undefined), [contentValueOverflow, strings.textTooLong]);
@@ -57,10 +57,10 @@ export const RichTextSendBox = (props) => {
         if (disabled || contentValueOverflow) {
             return;
         }
-        // Don't send message until all files have been uploaded successfully
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        // Don't send message until all attachments have been uploaded successfully
+        /* @conditional-compile-remove(attachment-upload) */
         setAttachmentUploadsPendingError(undefined);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {
             setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
@@ -69,7 +69,7 @@ export const RichTextSendBox = (props) => {
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
+            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
             onSendMessage(message);
             setContentValue('');
             (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
@@ -80,30 +80,30 @@ export const RichTextSendBox = (props) => {
         contentValueOverflow,
         disabled,
         onSendMessage,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError
+        /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
+        /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError
     ]);
     const hasErrorMessage = useMemo(() => {
         var _a;
         return (!!systemMessage ||
             !!contentTooLongMessage ||
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             !!attachmentUploadsPendingError ||
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             !!((_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError));
     }, [
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         activeAttachmentUploads,
         contentTooLongMessage,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         attachmentUploadsPendingError,
         systemMessage
     ]);
     const onRenderSendIcon = useCallback((isHover) => (React.createElement(Icon, { iconName: isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
             theme,
             hasText: !!contentValue,
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-            hasFile: false,
+            /* @conditional-compile-remove(attachment-upload) */
+            hasAttachment: false,
             hasErrorMessage: hasErrorMessage,
             defaultTextColor: theme.palette.neutralSecondary,
             disabled: disabled
@@ -111,22 +111,22 @@ export const RichTextSendBox = (props) => {
     const sendBoxErrorsProps = useMemo(() => {
         var _a;
         return {
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             attachmentUploadsPendingError: attachmentUploadsPendingError,
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             attachmentUploadError: (_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError,
             systemMessage: systemMessage,
             textTooLongMessage: contentTooLongMessage
         };
     }, [
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         activeAttachmentUploads,
         contentTooLongMessage,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         attachmentUploadsPendingError,
         systemMessage
     ]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentUploads = useCallback(() => {
         return (React.createElement(Stack, { className: attachmentUploadCardsStyles },
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
@@ -149,16 +149,16 @@ export const RichTextSendBox = (props) => {
                 e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
             }, className: richTextActionButtonsStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel }));
     }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const hasAttachmentUploads = useMemo(() => {
         return (hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads));
     }, [activeAttachmentUploads]);
     return (React.createElement(Stack, null,
         React.createElement(RichTextSendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(RichTextInputBoxComponent, { placeholderText: strings.placeholderText, onChange: setContent, onEnterKeyDown: sendMessageOnClick, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             onRenderAttachmentUploads: onRenderAttachmentUploads, 
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-            hasFiles: hasAttachmentUploads })));
+            /* @conditional-compile-remove(attachment-upload) */
+            hasAttachments: hasAttachmentUploads })));
 };
 //# sourceMappingURL=RichTextSendBox.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../types/Attachment';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  insertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  insertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  insertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  insertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  insertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  insertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  insertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  deleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  deleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  deleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  deleteTableMenu: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active attachment uploads where each object has attributes\n   * of a attachment upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeAttachmentUploads?: AttachmentMetadata[];\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (fileId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onCancelAttachmentUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(\n        activeAttachmentUploads\n      )\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n    }\n    editorComponentRef.current?.focus();\n  }, [\n    contentValue,\n    contentValueOverflow,\n    disabled,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      !!activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()?.uploadError\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n          hasFile: false,\n          hasErrorMessage: hasErrorMessage,\n          defaultTextColor: theme.palette.neutralSecondary,\n          disabled: disabled\n        })}\n      />\n    ),\n    [contentValue, disabled, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentUploadError: activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()\n        ?.uploadError,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\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            activeAttachmentUploads={activeAttachmentUploads}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeAttachmentUploads,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploadCompleted,\n    strings.uploading,\n    theme\n  ]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n      />\n    );\n  }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const hasAttachmentUploads = useMemo(() => {\n    return (\n      hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads)\n    );\n  }, [activeAttachmentUploads]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        placeholderText={strings.placeholderText}\n        onChange={setContent}\n        onEnterKeyDown={sendMessageOnClick}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n        hasFiles={hasAttachmentUploads}\n      />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAA8B,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AACzG,oDAAoD;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,oDAAoD;AACpD,OAAO,EAAE,6BAA6B,EAAE,8BAA8B,EAAE,MAAM,uBAAuB,CAAC;AAGtG,oDAAoD;AACpD,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,oDAAoD;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AA6H5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,aAAa;IACb,oDAAoD;IACpD,uBAAuB;IACvB,oDAAoD;IACpD,wBAAwB,EACzB,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,OAAO,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACtC,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;IAChC,CAAC,EAAE,CAAC,mDAAmD,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEjH,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,uCAAY,aAAa,GAAK,KAAK,CAAC,OAAO,EAAG;IAChD,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,oDAAoD;IACpD,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAChF,SAAS,CACV,CAAC;IACF,MAAM,kBAAkB,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAEpE,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,EAC9D,CAAC,oBAAoB,EAAE,OAAO,CAAC,WAAW,CAAC,CAC5C,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,QAAiB,EAAQ,EAAE;QACzD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,uBAAuB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QAC3D,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAS,EAAE;;QAChD,IAAI,QAAQ,IAAI,oBAAoB,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QACD,2EAA2E;QAC3E,oDAAoD;QACpD,gCAAgC,CAAC,SAAS,CAAC,CAAC;QAE5C,oDAAoD;QACpD,IAAI,8BAA8B,CAAC,uBAAuB,CAAC,EAAE,CAAC;YAC5D,gCAAgC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,6BAA6B,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC5G,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,YAAY,CAAC;QAC7B,wEAAwE;QACxE,6DAA6D;QAC7D,IACE,YAAY,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC;YAChC,oDAAoD,CAAC,6BAA6B,CAAC,uBAAuB,CAAC,EAC3G,CAAC;YACD,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,eAAe,CAAC,EAAE,CAAC,CAAC;YACpB,MAAA,kBAAkB,CAAC,OAAO,0CAAE,eAAe,EAAE,CAAC;QAChD,CAAC;QACD,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACtC,CAAC,EAAE;QACD,YAAY;QACZ,oBAAoB;QACpB,QAAQ;QACR,aAAa;QACb,oDAAoD,CAAC,uBAAuB;QAC5E,oDAAoD,CAAC,OAAO,CAAC,6BAA6B;KAC3F,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;;QACnC,OAAO,CACL,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,qBAAqB;YACvB,oDAAoD;YACpD,CAAC,CAAC,6BAA6B;YAC/B,oDAAoD;YACpD,CAAC,CAAC,CAAA,MAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,MAAM,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE,0CAAE,WAAW,CAAA,CACzG,CAAC;IACJ,CAAC,EAAE;QACD,oDAAoD;QACpD,uBAAuB;QACvB,qBAAqB;QACrB,oDAAoD;QACpD,6BAA6B;QAC7B,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAgB,EAAE,EAAE,CAAC,CACpB,oBAAC,IAAI,IACH,QAAQ,EAAE,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,EACxE,SAAS,EAAE,aAAa,CAAC;YACvB,KAAK;YACL,OAAO,EAAE,CAAC,CAAC,YAAY;YACvB,oDAAoD;YACpD,aAAa,EAAE,KAAK;YACpB,eAAe,EAAE,eAAe;YAChC,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;YAChD,QAAQ,EAAE,QAAQ;SACnB,CAAC,GACF,CACH,EACD,CAAC,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,CAAC,CACjD,CAAC;IAEF,MAAM,kBAAkB,GAA+B,OAAO,CAAC,GAAG,EAAE;;QAClE,OAAO;YACL,oDAAoD;YACpD,6BAA6B,EAAE,6BAA6B;YAC5D,oDAAoD;YACpD,qBAAqB,EAAE,MAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,MAAM,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE,0CAC5G,WAAW;YACf,aAAa,EAAE,aAAa;YAC5B,kBAAkB,EAAE,qBAAqB;SAC1C,CAAC;IACJ,CAAC,EAAE;QACD,oDAAoD;QACpD,uBAAuB;QACvB,qBAAqB;QACrB,oDAAoD;QACpD,6BAA6B;QAC7B,aAAa;KACd,CAAC,CAAC;IAEH,oDAAoD;IACpD,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAG,EAAE;QACjD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,2BAA2B;YAC3C,oBAAC,qBAAqB,IAAC,OAAO,EAAE,KAAK;gBACnC,oBAAC,sBAAsB,IACrB,uBAAuB,EAAE,uBAAuB,EAChD,wBAAwB,EAAE,wBAAwB,EAClD,OAAO,EAAE;wBACP,gBAAgB,EAAE,OAAO,CAAC,gBAAgB;wBAC1C,SAAS,EAAE,OAAO,CAAC,SAAS;wBAC5B,eAAe,EAAE,OAAO,CAAC,eAAe;qBACzC,GACD,CACoB,CAClB,CACT,CAAC;IACJ,CAAC,EAAE;QACD,uBAAuB;QACvB,wBAAwB;QACxB,OAAO,CAAC,gBAAgB;QACxB,OAAO,CAAC,eAAe;QACvB,OAAO,CAAC,SAAS;QACjB,KAAK;KACN,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,CACL,oBAAC,cAAc,IACb,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,kBAAkB,EAAE,CAAC;gBACrB,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,gFAAgF;YACvG,CAAC,EACD,SAAS,EAAE,0BAA0B,EACrC,SAAS,EAAE,aAAa,CAAC,mBAAmB,EAC5C,cAAc,EAAE,aAAa,CAAC,mBAAmB,GACjD,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE9E,oDAAoD;IACpD,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,CACL,6BAA6B,CAAC,uBAAuB,CAAC,IAAI,8BAA8B,CAAC,uBAAuB,CAAC,CAClH,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,oBAAC,KAAK;QACJ,oBAAC,qBAAqB,oBAAK,kBAAkB,EAAI;QACjD,oBAAC,yBAAyB,IACxB,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,QAAQ,EAAE,UAAU,EACpB,cAAc,EAAE,kBAAkB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,UAAU,EAC5B,wBAAwB,EAAE,0BAA0B;YACpD,oDAAoD;YACpD,yBAAyB,EAAE,yBAAyB;YACpD,oDAAoD;YACpD,cAAc,EAAE,oBAAoB,GACpC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../types/Attachment';\n/* @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  insertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  insertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  insertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  insertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  insertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  insertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  insertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  deleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  deleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  deleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  deleteTableMenu: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active attachment uploads where each object has attributes\n   * of a attachment upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeAttachmentUploads?: AttachmentMetadata[];\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    onCancelAttachmentUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n    }\n    editorComponentRef.current?.focus();\n  }, [\n    contentValue,\n    contentValueOverflow,\n    disabled,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()?.uploadError\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(attachment-upload) */\n          hasAttachment: false,\n          hasErrorMessage: hasErrorMessage,\n          defaultTextColor: theme.palette.neutralSecondary,\n          disabled: disabled\n        })}\n      />\n    ),\n    [contentValue, disabled, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadError: activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()\n        ?.uploadError,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={activeAttachmentUploads}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeAttachmentUploads,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploadCompleted,\n    strings.uploading,\n    theme\n  ]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n      />\n    );\n  }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const hasAttachmentUploads = useMemo(() => {\n    return (\n      hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads)\n    );\n  }, [activeAttachmentUploads]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        placeholderText={strings.placeholderText}\n        onChange={setContent}\n        onEnterKeyDown={sendMessageOnClick}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(attachment-upload) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(attachment-upload) */\n        hasAttachments={hasAttachmentUploads}\n      />\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js

@@ -7,9 +7,9 @@ import { SendBoxErrorBar } from '../SendBoxErrorBar';
  */
 export const RichTextSendBoxErrors = (props) => {
     const { 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     attachmentUploadError, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     attachmentUploadsPendingError, systemMessage, textTooLongMessage } = props;
     const [sendBoxError, setSendBoxError] = useState(undefined);
     useEffect(() => {
@@ -34,11 +34,11 @@ export const RichTextSendBoxErrors = (props) => {
             if (prev) {
                 errors.push(prev);
             }
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             if (attachmentUploadsPendingError) {
                 errors.push(attachmentUploadsPendingError);
             }
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             if (attachmentUploadError) {
                 errors.push(attachmentUploadError);
             }
@@ -50,8 +50,8 @@ export const RichTextSendBoxErrors = (props) => {
             return sortedErrors[0];
         });
     }, [
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadError,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
+        /* @conditional-compile-remove(attachment-upload) */ attachmentUploadError,
+        /* @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
     ]);
     const onDismiss = useCallback(() => {
         if (systemMessage && !isMessageEmpty(systemMessage)) {

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBoxErrors.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RichTextSendBoxErrorsProps {\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  attachmentUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  attachmentUploadError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RichTextSendBoxErrors = (props: RichTextSendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadError,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    if (\n      (textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&\n      (systemMessage === undefined || isMessageEmpty(systemMessage))\n    ) {\n      setSendBoxError(undefined);\n    }\n  }, [systemMessage, textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadsPendingError) {\n        errors.push(attachmentUploadsPendingError);\n      }\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadError) {\n        errors.push(attachmentUploadError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadError,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}
+{"version":3,"file":"RichTextSendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBoxErrors.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RichTextSendBoxErrorsProps {\n  /* @conditional-compile-remove(attachment-upload) */\n  attachmentUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(attachment-upload) */\n  attachmentUploadError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RichTextSendBoxErrors = (props: RichTextSendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadError,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    if (\n      (textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&\n      (systemMessage === undefined || isMessageEmpty(systemMessage))\n    ) {\n      setSendBoxError(undefined);\n    }\n  }, [systemMessage, textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadsPendingError) {\n        errors.push(attachmentUploadsPendingError);\n      }\n      /* @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadError) {\n        errors.push(attachmentUploadError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */ attachmentUploadError,\n    /* @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}

package/dist/dist-esm/react-components/src/components/SendBox.d.ts

@@ -116,8 +116,8 @@ export interface SendBoxProps {
      */
     autoFocus?: 'sendBoxTextField';
     /**
-     * Optional callback to render uploaded files in the SendBox. The sendBox will expand
-     * vertically to accommodate the uploaded files. Attachment uploads will
+     * Optional callback to render uploaded attachments in the SendBox. The sendBox will expand
+     * vertically to accommodate the uploaded attachments. Attachment uploads will
      * be rendered below the text area in sendBox.
      * @beta
      */
@@ -133,7 +133,7 @@ export interface SendBoxProps {
      * cancel icon.
      * @beta
      */
-    onCancelAttachmentUpload?: (fileId: string) => void;
+    onCancelAttachmentUpload?: (attachmentId: string) => void;
 }
 /**
  * Component for typing and sending messages.

package/dist/dist-esm/react-components/src/components/SendBox.js

@@ -8,16 +8,16 @@ import { useLocale } from '../localization';
 import { useIdentifiers } from '../identifiers';
 import { InputBoxComponent } from './InputBoxComponent';
 import { InputBoxButton } from './InputBoxButton';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { SendBoxErrors } from './SendBoxErrors';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { _AttachmentUploadCards } from './AttachmentUploadCards';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { attachmentUploadCardsStyles } from './styles/SendBox.styles';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from './utils/SendBoxUtils';
 import { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText } from './utils/SendBoxUtils';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+/* @conditional-compile-remove(attachment-upload) */
 import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
 /**
  * Component for typing and sending messages.
@@ -31,7 +31,7 @@ export const SendBox = (props) => {
     const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, 
     /* @conditional-compile-remove(mention) */
     mentionLookupOptions, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     activeAttachmentUploads } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.sendBox;
@@ -40,7 +40,7 @@ export const SendBox = (props) => {
     const [textValue, setTextValue] = useState('');
     const [textValueOverflow, setTextValueOverflow] = useState(false);
     const sendTextFieldRef = React.useRef(null);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
@@ -48,10 +48,10 @@ export const SendBox = (props) => {
         if (disabled || textValueOverflow) {
             return;
         }
-        // Don't send message until all files have been uploaded successfully
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        // Don't send message until all attachments have been uploaded successfully
+        /* @conditional-compile-remove(attachment-upload) */
         setAttachmentUploadsPendingError(undefined);
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(attachment-upload) */
         if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {
             setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
@@ -60,7 +60,7 @@ export const SendBox = (props) => {
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
+            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
             onSendMessage && onSendMessage(message);
             setTextValue('');
         }
@@ -80,25 +80,25 @@ export const SendBox = (props) => {
     const mergedSendIconStyle = useMemo(() => sendIconStyle({
         theme,
         hasText: !!textValue,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFile: hasCompletedAttachmentUploads(activeAttachmentUploads),
+        /* @conditional-compile-remove(attachment-upload) */ hasAttachment: hasCompletedAttachmentUploads(activeAttachmentUploads),
         hasErrorMessage: !!errorMessage,
         customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     }), [
         theme,
         textValue,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
+        /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
         errorMessage,
         styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     ]);
     const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
-    // Ensure that errors are cleared when there are no files in sendBox
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    // Ensure that errors are cleared when there are no attachments in sendBox
+    /* @conditional-compile-remove(attachment-upload) */
     React.useEffect(() => {
         if (!(activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((upload) => !upload.uploadError).length)) {
             setAttachmentUploadsPendingError(undefined);
         }
     }, [activeAttachmentUploads]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const sendBoxErrorsProps = useMemo(() => {
         var _a;
         return {
@@ -106,7 +106,7 @@ export const SendBox = (props) => {
             attachmentUploadError: (_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError
         };
     }, [activeAttachmentUploads, attachmentUploadsPendingError]);
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentUploads = useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         if (!(activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((upload) => !upload.uploadError).length)) {
@@ -128,8 +128,8 @@ export const SendBox = (props) => {
         localeStrings.uploadCompleted
     ]);
     return (React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
-        ) },
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
+        ) }, /* @conditional-compile-remove(attachment-upload) */
+        React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
@@ -151,7 +151,7 @@ export const SendBox = (props) => {
                         }
                         e.stopPropagation();
                     }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel })),
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            /* @conditional-compile-remove(attachment-upload) */
             onRenderAttachmentUploads())));
 };
 //# sourceMappingURL=SendBox.js.map