@azure/communication-react 1.20.0 → 1.21.0-alpha-202410190016

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

@@ -0,0 +1,100 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { RichTextEditor } from './RichTextEditor';
+import { useTheme } from '../../theming';
+import { Icon, Stack } from '@fluentui/react';
+import { InputBoxButton } from '../InputBoxButton';
+import { isEnterKeyEventFromCompositionSession } from '../utils';
+import { richTextActionButtonsDividerStyle, richTextActionButtonsStackStyle, richTextActionButtonsStyle, richTextFormatButtonIconStyle } from '../styles/RichTextEditor.styles';
+import { inputBoxContentStackStyle, inputBoxRichTextStackItemStyle, inputBoxRichTextStackStyle, richTextBorderBoxStyle } from '../styles/RichTextInputBoxComponent.styles';
+/**
+ * @private
+ */
+export const RichTextInputBoxComponent = (props) => {
+    const { placeholderText, initialContent, onChange, onEnterKeyDown, editorComponentRef, disabled, strings, actionComponents, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    onRenderAttachmentUploads, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, autoFocus, onTyping, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onInsertInlineImage } = props;
+    const theme = useTheme();
+    // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet
+    const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(undefined);
+    const [contentModel, setContentModel] = useState(undefined);
+    const onRenderRichTextEditorIcon = useCallback((isHover) => {
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+        return (React.createElement(Icon, { iconName: isHover || isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || isRichTextEditorToolbarShown)) }));
+    }, [disabled, showRichTextEditorFormatting, theme]);
+    useEffect(() => {
+        var _a;
+        if (showRichTextEditorFormatting !== undefined) {
+            // Focus the editor when toolbar shown/hidden
+            (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        // we don't need execute this useEffect if editorComponentRef is changed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showRichTextEditorFormatting]);
+    const actionButtons = useMemo(() => {
+        return (React.createElement(Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
+            React.createElement(Stack, { horizontal: true },
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderRichTextEditorIcon, onClick: (e) => {
+                        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+                        setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);
+                        e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
+                    }, ariaLabel: strings.richTextFormatButtonTooltip, tooltipContent: strings.richTextFormatButtonTooltip, className: richTextActionButtonsStyle, "data-testId": 'rich-text-input-box-format-button', ariaExpanded: showRichTextEditorFormatting }),
+                React.createElement(Icon, { iconName: "RichTextDividerIcon", className: richTextActionButtonsDividerStyle(theme) }),
+                actionComponents)));
+    }, [
+        actionComponents,
+        onRenderRichTextEditorIcon,
+        showRichTextEditorFormatting,
+        strings.richTextFormatButtonTooltip,
+        theme
+    ]);
+    const richTextEditorStyle = useMemo(() => {
+        return richTextEditorStyleProps(showRichTextEditorFormatting === true);
+    }, [richTextEditorStyleProps, showRichTextEditorFormatting]);
+    const onKeyDown = useCallback((ev) => {
+        if (isEnterKeyEventFromCompositionSession(ev)) {
+            return;
+        }
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+        if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {
+            ev.preventDefault();
+            onEnterKeyDown && onEnterKeyDown();
+        }
+        else {
+            onTyping === null || onTyping === void 0 ? void 0 : onTyping();
+        }
+    }, [onEnterKeyDown, showRichTextEditorFormatting, onTyping]);
+    const useHorizontalLayout = useMemo(() => {
+        const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;
+        return (!isHorizontalLayoutDisabled &&
+            !isRichTextEditorToolbarShown &&
+            /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachments);
+    }, [
+        isHorizontalLayoutDisabled,
+        showRichTextEditorFormatting,
+        /* @conditional-compile-remove(file-sharing-acs) */ hasAttachments
+    ]);
+    const onContentModelUpdate = useCallback((contentModel) => {
+        setContentModel(contentModel);
+    }, []);
+    return (React.createElement("div", { className: richTextBorderBoxStyle({
+            theme: theme,
+            disabled: !!disabled
+        }) },
+        React.createElement(Stack, { grow: true, horizontal: useHorizontalLayout, horizontalAlign: useHorizontalLayout ? 'end' : 'space-between', className: inputBoxContentStackStyle, wrap: useHorizontalLayout },
+            React.createElement(Stack, { grow: true, className: inputBoxRichTextStackStyle },
+                React.createElement(Stack.Item, { className: inputBoxRichTextStackItemStyle },
+                    React.createElement(RichTextEditor, { contentModel: contentModel, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting === true, styles: richTextEditorStyle, autoFocus: autoFocus, onContentModelUpdate: onContentModelUpdate, 
+                        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                        onPaste: props.onPaste, 
+                        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                        onInsertInlineImage: onInsertInlineImage })), /* @conditional-compile-remove(file-sharing-acs) */
+                onRenderAttachmentUploads && onRenderAttachmentUploads()),
+            actionButtons)));
+};
+//# sourceMappingURL=RichTextInputBoxComponent.js.map

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

@@ -0,0 +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, useEffect, 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';\nimport type { ContentModelDocument } from 'roosterjs-content-model-types';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  onChange: (\n    newValue?: string,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages?: Record<string, string>[]\n  ) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  // Partial needs to be removed when the rich text editor feature goes to GA\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing-acs) */\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  autoFocus?: 'sendBoxTextField';\n  onTyping?: () => Promise<void>;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onPaste?: (event: { content: DocumentFragment }) => void;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;\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(file-sharing-acs) */\n    onRenderAttachmentUploads,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    hasAttachments,\n    richTextEditorStyleProps,\n    isHorizontalLayoutDisabled = false,\n    autoFocus,\n    onTyping,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onInsertInlineImage\n  } = props;\n  const theme = useTheme();\n  // undefined is used to indicate that the rich text editor toolbar state wasn't changed yet\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState<boolean | undefined>(undefined);\n  const [contentModel, setContentModel] = useState<ContentModelDocument | undefined>(undefined);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => {\n      const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n      return (\n        <Icon\n          iconName={\n            isHover || isRichTextEditorToolbarShown ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n          }\n          className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || isRichTextEditorToolbarShown))}\n        />\n      );\n    },\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  useEffect(() => {\n    if (showRichTextEditorFormatting !== undefined) {\n      // Focus the editor when toolbar shown/hidden\n      editorComponentRef.current?.focus();\n    }\n    // we don't need execute this useEffect if editorComponentRef is changed\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showRichTextEditorFormatting]);\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              const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n              setShowRichTextEditorFormatting(!isRichTextEditorToolbarShown);\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            ariaExpanded={showRichTextEditorFormatting}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting === true);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n      if (ev.key === 'Enter' && ev.shiftKey === false && !isRichTextEditorToolbarShown) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      } else {\n        onTyping?.();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting, onTyping]\n  );\n\n  const useHorizontalLayout = useMemo(() => {\n    const isRichTextEditorToolbarShown = showRichTextEditorFormatting === true;\n    return (\n      !isHorizontalLayoutDisabled &&\n      !isRichTextEditorToolbarShown &&\n      /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachments\n    );\n  }, [\n    isHorizontalLayoutDisabled,\n    showRichTextEditorFormatting,\n    /* @conditional-compile-remove(file-sharing-acs) */ hasAttachments\n  ]);\n\n  const onContentModelUpdate = useCallback((contentModel: ContentModelDocument | undefined) => {\n    setContentModel(contentModel);\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              contentModel={contentModel}\n              initialContent={initialContent}\n              placeholderText={placeholderText}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              ref={editorComponentRef}\n              strings={strings}\n              showRichTextEditorFormatting={showRichTextEditorFormatting === true}\n              styles={richTextEditorStyle}\n              autoFocus={autoFocus}\n              onContentModelUpdate={onContentModelUpdate}\n              /* @conditional-compile-remove(rich-text-editor-image-upload) */\n              onPaste={props.onPaste}\n              /* @conditional-compile-remove(rich-text-editor-image-upload) */\n              onInsertInlineImage={onInsertInlineImage}\n            />\n          </Stack.Item>\n          {/* @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentUploads && onRenderAttachmentUploads()}\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,211 @@
+/// <reference types="react" />
+import { SendBoxStrings } from '../SendBox';
+import { AttachmentMetadataInProgress, MessageOptions } from "../../../../acs-ui-common/src";
+/**
+ * Strings of {@link RichTextSendBox} that can be overridden.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
+}
+/**
+ * Options for the rich text editor configuration.
+ *
+ * @beta
+ */
+export interface RichTextEditorOptions {
+    /**
+     * Optional callback to handle paste event.
+     */
+    onPaste?: (event: {
+        content: DocumentFragment;
+    }) => void;
+}
+/**
+ * Strings of RichText that can be overridden.
+ *
+ * @beta
+ */
+export interface RichTextStrings {
+    /**
+     * Tooltip text for the bold button.
+     */
+    richTextBoldTooltip: string;
+    /**
+     * Tooltip text for the italic button.
+     */
+    richTextItalicTooltip: string;
+    /**
+     * Tooltip text for the underline button.
+     */
+    richTextUnderlineTooltip: string;
+    /**
+     * Tooltip text for the bullet list button.
+     */
+    richTextBulletListTooltip: string;
+    /**
+     * Tooltip text for the number list button.
+     */
+    richTextNumberListTooltip: string;
+    /**
+     * Tooltip text for the increase indent button.
+     */
+    richTextIncreaseIndentTooltip: string;
+    /**
+     * Tooltip text for the decrease indent button.
+     */
+    richTextDecreaseIndentTooltip: string;
+    /**
+     * Tooltip text insert table button.
+     */
+    richTextInsertTableTooltip: string;
+    /**
+     * Tooltip text for the rich text format button button.
+     */
+    richTextFormatButtonTooltip: string;
+    /**
+     * Text for the insert menu item.
+     */
+    richTextInsertRowOrColumnMenu: string;
+    /**
+     * Title for the insert table menu.
+     */
+    richTextInsertTableMenuTitle: string;
+    /**
+     * Text for the insert menu item to insert row above the current selection.
+     */
+    richTextInsertRowAboveMenu: string;
+    /**
+     * Text for the insert menu item to insert row below the current selection.
+     */
+    richTextInsertRowBelowMenu: string;
+    /**
+     * Text for the insert menu item to insert column to the left from the current selection.
+     */
+    richTextInsertColumnLeftMenu: string;
+    /**
+     * Text for the insert menu item to insert column to the right from the current selection.
+     */
+    richTextInsertColumnRightMenu: string;
+    /**
+     * Text for the delete row or column menu.
+     */
+    richTextDeleteRowOrColumnMenu: string;
+    /**
+     * Text for the delete column menu.
+     */
+    richTextDeleteColumnMenu: string;
+    /**
+     * Text for the delete row menu.
+     */
+    richTextDeleteRowMenu: string;
+    /**
+     * Text for the delete table menu.
+     */
+    richTextDeleteTableMenu: string;
+    /**
+     * Text for the rich text toolbar more button.
+     */
+    richTextToolbarMoreButtonAriaLabel: string;
+    /**
+     * Text for announcement when a new bulleted list item is added.
+     */
+    richTextNewBulletedListItemAnnouncement: string;
+    /**
+     * Text for announcement when a new numbered list item is added.
+     */
+    richTextNewNumberedListItemAnnouncement: string;
+    /**
+     * Text for announcement when the bulleted list style is applied.
+     */
+    richTextBulletedListAppliedAnnouncement: string;
+    /**
+     * Text for announcement when the numbered list style is applied.
+     */
+    richTextNumberedListAppliedAnnouncement: string;
+    /**
+     * Error message indicating image upload is not complete.
+     */
+    imageUploadsPendingError: string;
+}
+/**
+ * Props for {@link RichTextSendBox}.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxProps {
+    /**
+     * Optional boolean to disable text box
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Optional callback to handle paste event.
+     */
+    onPaste?: (event: {
+        content: DocumentFragment;
+    }) => void;
+    /**
+     * Optional strings to override in component
+     */
+    strings?: Partial<RichTextSendBoxStrings>;
+    /**
+     * Optional text for system message above the text box
+     */
+    systemMessage?: string;
+    /**
+     * Optional array of type {@link AttachmentMetadataInProgress}
+     * to render attachments being uploaded in the SendBox.
+     * @beta
+     */
+    attachments?: AttachmentMetadataInProgress[];
+    /**
+     * enumerable to determine if the input box has focus on render or not.
+     * When undefined nothing has focus on render
+     */
+    autoFocus?: 'sendBoxTextField';
+    /**
+     * Optional callback to remove the attachment upload before sending by clicking on
+     * cancel icon.
+     */
+    onCancelAttachmentUpload?: (attachmentId: string) => void;
+    /**
+     * Optional callback invoked after inline image is removed from the UI.
+     * @param imageAttributes - attributes of the image such as id, src, style, etc.
+     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].
+     *        Note that if the src attribute is a local blob url, it has been revoked at this point.
+     */
+    onRemoveInlineImage?: (imageAttributes: Record<string, string>) => void;
+    /**
+     * Callback function used when the send button is clicked.
+     */
+    onSendMessage: (content: string, options?: MessageOptions) => Promise<void>;
+    /**
+     * Optional callback called when user is typing
+     */
+    onTyping?: () => Promise<void>;
+    /**
+     * Optional callback to handle an inline image that's inserted in the rich text editor.
+     * When not provided, pasting images into rich text editor will be disabled.
+     * @param imageAttributes - attributes of the image such as id, src, style, etc.
+     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']
+     */
+    onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;
+    /**
+     * Optional Array of type {@link AttachmentMetadataInProgress}
+     * to render the errorBar for inline images inserted in the RichTextSendBox when:
+     *   - there is an error provided in the inlineImagesWithProgress
+     *   - progress is less than 1 when the send button is clicked
+     *   - content html string is longer than the max allowed length.
+     *     (Note that the id and the url prop of the inlineImagesWithProgress will be used as the id and src attribute of the content html
+     *     when calculating the content length, only for the purpose of displaying the content length overflow error.)
+     */
+    inlineImagesWithProgress?: AttachmentMetadataInProgress[];
+}
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export declare const RichTextSendBox: (props: RichTextSendBoxProps) => JSX.Element;
+//# sourceMappingURL=RichTextSendBox.d.ts.map

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

@@ -0,0 +1,274 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { RichTextInputBoxComponent } from './RichTextInputBoxComponent';
+import { Icon, Stack } from '@fluentui/react';
+import { useLocale } from '../../localization';
+import { sendIconStyle } from '../styles/SendBox.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { useV9CustomStyles } from '../styles/SendBox.styles';
+import { InputBoxButton } from '../InputBoxButton';
+import { RichTextSendBoxErrors } from './RichTextSendBoxErrors';
+import { isMessageTooLong, isSendBoxButtonDisabled, sanitizeText, modifyInlineImagesInContentString } from '../utils/SendBoxUtils';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { hasInlineImageContent, getContentWithUpdatedInlineImagesInfo } from '../utils/SendBoxUtils';
+import { useTheme } from '../../theming';
+import { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { _AttachmentUploadCards } from '../Attachment/AttachmentUploadCards';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads, toAttachmentMetadata } from '../utils/SendBoxUtils';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { SendBoxErrorBarType } from '../SendBoxErrorBar';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { attachmentUploadCardsStyles } from '../styles/SendBox.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export const RichTextSendBox = (props) => {
+    const { disabled = false, systemMessage, autoFocus, onSendMessage, onTyping, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    attachments, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    onCancelAttachmentUpload, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onPaste, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onInsertInlineImage, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    inlineImagesWithProgress, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    onRemoveInlineImage } = props;
+    const theme = useTheme();
+    const locale = useLocale();
+    const localeStrings = useMemo(() => {
+        /* @conditional-compile-remove(rich-text-editor) */
+        return locale.strings.richTextSendBox;
+        return locale.strings.sendBox;
+    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);
+    const strings = useMemo(() => {
+        return Object.assign(Object.assign({}, localeStrings), props.strings);
+    }, [localeStrings, props.strings]);
+    const [contentValue, setContentValue] = useState('');
+    const [contentValueOverflow, setContentValueOverflow] = useState(false);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
+    const editorComponentRef = useRef(null);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const customV9Styles = useV9CustomStyles();
+    const contentTooLongMessage = useMemo(() => (contentValueOverflow ? strings.textTooLong : undefined), [contentValueOverflow, strings.textTooLong]);
+    const setContent = useCallback((newValue) => {
+        if (newValue === undefined) {
+            return;
+        }
+        setContentValueOverflow(isMessageTooLong(newValue.length));
+        setContentValue(newValue);
+    }, []);
+    const onChangeHandler = useCallback((newValue, 
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */ removedInlineImages) => {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        removedInlineImages === null || removedInlineImages === void 0 ? void 0 : removedInlineImages.forEach((removedInlineImage) => onRemoveInlineImage && onRemoveInlineImage(removedInlineImage));
+        setContent(newValue);
+    }, [setContent, /* @conditional-compile-remove(rich-text-editor-image-upload) */ onRemoveInlineImage]);
+    const hasContent = useMemo(() => {
+        var _a;
+        // get plain text content from the editor to check if the message is empty
+        // as the content may contain tags even when the content is empty
+        const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
+        const hasPlainText = sanitizeText(contentValue !== null && contentValue !== void 0 ? contentValue : '').length > 0 && sanitizeText(plainTextContent !== null && plainTextContent !== void 0 ? plainTextContent : '').length > 0;
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        const hasInlineImages = hasInlineImageContent(contentValue);
+        return hasPlainText || /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasInlineImages;
+    }, [contentValue]);
+    const sendMessageOnClick = useCallback(() => {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {
+            const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(contentValue, inlineImagesWithProgress);
+            const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);
+            // Set contentValueOverflow state to display the error bar
+            setContentValueOverflow(messageTooLong);
+            // The change from the setContentValueOverflow in the previous line will not kick in yet.
+            // We need to relay on the local value of messageTooLong to return early if the message is too long.
+            if (messageTooLong) {
+                return;
+            }
+        }
+        if (disabled || contentValueOverflow) {
+            return;
+        }
+        // Don't send message until all attachments have been uploaded successfully
+        /* @conditional-compile-remove(file-sharing-acs) */
+        setAttachmentUploadsPendingError(undefined);
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        const hasIncompleteImageUploads = hasIncompleteAttachmentUploads(inlineImagesWithProgress);
+        /* @conditional-compile-remove(file-sharing-acs) */
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (
+        /* @conditional-compile-remove(file-sharing-acs) */ hasIncompleteAttachmentUploads(attachments) ||
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */ hasIncompleteImageUploads) {
+            /* @conditional-compile-remove(file-sharing-acs) */
+            let errorMessage = strings.attachmentUploadsPendingError;
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            if (hasIncompleteImageUploads) {
+                errorMessage = strings.imageUploadsPendingError || '';
+            }
+            setAttachmentUploadsPendingError({
+                message: errorMessage,
+                timestamp: Date.now(),
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                errorBarType: SendBoxErrorBarType.info
+            });
+            return;
+        }
+        // we don't want to send empty messages including spaces, newlines, tabs
+        // Message can be empty if there is a valid attachment upload
+        if (hasContent || /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments)) {
+            const sendMessage = (content) => {
+                var _a, _b;
+                onSendMessage(content, 
+                /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                {
+                    /* @conditional-compile-remove(file-sharing-acs) */
+                    attachments: toAttachmentMetadata(attachments),
+                    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                    type: 'html'
+                });
+                setContentValue('');
+                (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
+                (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            };
+            modifyInlineImagesInContentString(contentValue, [], (content) => {
+                sendMessage(content);
+            });
+        }
+    }, [
+        disabled,
+        contentValueOverflow,
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachments,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        inlineImagesWithProgress,
+        contentValue,
+        hasContent,
+        /* @conditional-compile-remove(file-sharing-acs) */
+        strings.attachmentUploadsPendingError,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        strings.imageUploadsPendingError,
+        onSendMessage
+    ]);
+    const hasErrorMessage = useMemo(() => {
+        var _a, _b;
+        return (!!systemMessage ||
+            !!contentTooLongMessage ||
+            /* @conditional-compile-remove(file-sharing-acs) */
+            !!attachmentUploadsPendingError ||
+            /* @conditional-compile-remove(file-sharing-acs) */
+            !!((_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) ||
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            !!((_b = inlineImagesWithProgress === null || inlineImagesWithProgress === void 0 ? void 0 : inlineImagesWithProgress.filter((image) => image.error).pop()) === null || _b === void 0 ? void 0 : _b.error));
+    }, [
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachments,
+        contentTooLongMessage,
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachmentUploadsPendingError,
+        systemMessage,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        inlineImagesWithProgress
+    ]);
+    const isSendBoxButtonDisabledValue = useMemo(() => {
+        return isSendBoxButtonDisabled({
+            hasContent,
+            /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),
+            hasError: hasErrorMessage,
+            disabled
+        });
+    }, [/* @conditional-compile-remove(file-sharing-acs) */ attachments, disabled, hasContent, hasErrorMessage]);
+    const onRenderSendIcon = useCallback((isHover) => {
+        return (React.createElement(Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
+                theme,
+                isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,
+                defaultTextColor: theme.palette.neutralSecondary
+            }) }));
+    }, [theme, isSendBoxButtonDisabledValue, hasContent]);
+    const sendBoxErrorsProps = useMemo(() => {
+        var _a, _b, _c, _d;
+        /* @conditional-compile-remove(file-sharing-acs) */
+        const uploadErrorMessage = (_b = (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message;
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        const imageUploadErrorMessage = (_d = (_c = inlineImagesWithProgress === null || inlineImagesWithProgress === void 0 ? void 0 : inlineImagesWithProgress.filter((image) => image.error).pop()) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.message;
+        /* @conditional-compile-remove(file-sharing-acs) */
+        const errorMessage = uploadErrorMessage || /* @conditional-compile-remove(rich-text-editor-image-upload) */ imageUploadErrorMessage;
+        return {
+            /* @conditional-compile-remove(file-sharing-acs) */
+            attachmentUploadsPendingError: attachmentUploadsPendingError,
+            /* @conditional-compile-remove(file-sharing-acs) */
+            attachmentProgressError: errorMessage
+                ? {
+                    message: errorMessage,
+                    timestamp: Date.now(),
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    errorBarType: SendBoxErrorBarType.error
+                }
+                : undefined,
+            systemMessage: systemMessage,
+            textTooLongMessage: contentTooLongMessage
+        };
+    }, [
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachments,
+        contentTooLongMessage,
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachmentUploadsPendingError,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        inlineImagesWithProgress,
+        systemMessage
+    ]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const onRenderAttachmentUploads = useCallback(() => {
+        return (React.createElement(Stack, { className: attachmentUploadCardsStyles },
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme, className: customV9Styles.clearBackground },
+                React.createElement(_AttachmentUploadCards, { attachments: attachments, onCancelAttachmentUpload: onCancelAttachmentUpload, strings: {
+                        removeAttachment: strings.removeAttachment,
+                        uploading: strings.uploading,
+                        uploadCompleted: strings.uploadCompleted,
+                        attachmentMoreMenu: strings.attachmentMoreMenu
+                    }, disabled: disabled }))));
+    }, [
+        theme,
+        customV9Styles.clearBackground,
+        attachments,
+        onCancelAttachmentUpload,
+        strings.removeAttachment,
+        strings.uploading,
+        strings.uploadCompleted,
+        strings.attachmentMoreMenu,
+        disabled
+    ]);
+    const sendButton = useMemo(() => {
+        return (React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
+                sendMessageOnClick();
+                e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
+            }, className: richTextActionButtonsStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, disabled: isSendBoxButtonDisabledValue }));
+    }, [isSendBoxButtonDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const hasAttachmentUploads = useMemo(() => {
+        return isAttachmentUploadCompleted(attachments) || hasIncompleteAttachmentUploads(attachments);
+    }, [attachments]);
+    return (React.createElement(Stack, null,
+        React.createElement(RichTextSendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
+        React.createElement(RichTextInputBoxComponent, { placeholderText: strings.placeholderText, autoFocus: autoFocus, onChange: onChangeHandler, onEnterKeyDown: sendMessageOnClick, onTyping: onTyping, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
+            /* @conditional-compile-remove(file-sharing-acs) */
+            onRenderAttachmentUploads: onRenderAttachmentUploads, 
+            /* @conditional-compile-remove(file-sharing-acs) */
+            hasAttachments: hasAttachmentUploads, 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onPaste: onPaste, 
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onInsertInlineImage: onInsertInlineImage })));
+};
+//# sourceMappingURL=RichTextSendBox.js.map