@azure/communication-react 1.14.0 → 1.14.1-alpha-202403261958

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

@@ -0,0 +1,83 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { ContentEdit, Watermark } from 'roosterjs-editor-plugins';
+import { Editor } from 'roosterjs-editor-core';
+import { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';
+import { ribbonButtonStyle, ribbonOverflowButtonStyle, ribbonStyle, richTextEditorWrapperStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';
+import { useTheme } from '../../theming';
+import { ribbonButtons, ribbonButtonsStrings } from './RichTextRibbonButtons';
+import { isDarkThemed } from '../../theming/themeUtils';
+/**
+ * A component to wrap RoosterJS Rich Text Editor.
+ *
+ * @beta
+ */
+export const RichTextEditor = React.forwardRef((props, ref) => {
+    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting } = props;
+    const editor = useRef(null);
+    const theme = useTheme();
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                if (editor.current) {
+                    editor.current.focus();
+                }
+            },
+            setEmptyContent() {
+                if (editor.current) {
+                    editor.current.setContent('');
+                }
+            }
+        };
+    }, []);
+    const ribbonPlugin = React.useMemo(() => {
+        return createRibbonPlugin();
+    }, []);
+    const editorCreator = useCallback((div, options) => {
+        editor.current = new Editor(div, options);
+        // Remove default values for background color and color
+        // setBackgroundColor and setTextColor can't be used here as they cause the editor to be focused
+        // color will be set in richTextEditorWrapperStyle instead of inline styles
+        div.style.backgroundColor = '';
+        div.style.color = '';
+        return editor.current;
+    }, []);
+    const placeholderPlugin = React.useMemo(() => {
+        return new Watermark('');
+    }, []);
+    useEffect(() => {
+        if (placeholderText !== undefined) {
+            placeholderPlugin.updateWatermark(placeholderText);
+        }
+    }, [placeholderPlugin, placeholderText]);
+    const plugins = useMemo(() => {
+        const contentEdit = new ContentEdit();
+        const updateContentPlugin = createUpdateContentPlugin(UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput, (content) => {
+            onChange && onChange(content);
+        });
+        return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];
+    }, [onChange, placeholderPlugin, ribbonPlugin]);
+    const ribbon = useMemo(() => {
+        const buttons = ribbonButtons(theme);
+        return (React.createElement(Ribbon, { styles: ribbonStyle, buttons: buttons, plugin: ribbonPlugin, overflowButtonProps: {
+                styles: ribbonButtonStyle(theme),
+                menuProps: {
+                    items: [], // CommandBar will determine items rendered in overflow
+                    isBeakVisible: false,
+                    styles: ribbonOverflowButtonStyle(theme)
+                }
+            }, strings: ribbonButtonsStrings(strings), "data-testid": 'rich-text-editor-ribbon' }));
+    }, [strings, ribbonPlugin, theme]);
+    return (React.createElement("div", { "data-testid": 'rich-text-editor-wrapper' },
+        showRichTextEditorFormatting && ribbon,
+        React.createElement("div", { className: richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting) },
+            React.createElement(Rooster, { initialContent: initialContent, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle(props.styles), editorCreator: editorCreator, 
+                // TODO: confirm the color during inline images implementation
+                imageSelectionBorderColor: 'blue', 
+                // doNotAdjustEditorColor is used to fix the default background color for Rooster component
+                doNotAdjustEditorColor: true, "data-testid": 'rooster-rich-text-editor', 
+                // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught
+                onKeyDown: props.onKeyDown }))));
+});
+//# sourceMappingURL=RichTextEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorWrapperStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons, ribbonButtonsStrings } from './RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  initialContent?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n  setEmptyContent: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting } = props;\n  const editor = useRef<IEditor | null>(null);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            editor.current.setContent('');\n          }\n        }\n      };\n    },\n    []\n  );\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n    editor.current = new Editor(div, options);\n    // Remove default values for background color and color\n    // setBackgroundColor and setTextColor can't be used here as they cause the editor to be focused\n    // color will be set in richTextEditorWrapperStyle instead of inline styles\n    div.style.backgroundColor = '';\n    div.style.color = '';\n\n    return editor.current;\n  }, []);\n\n  const placeholderPlugin = React.useMemo(() => {\n    return new Watermark('');\n  }, []);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updateWatermark(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const plugins = useMemo(() => {\n    const contentEdit = new ContentEdit();\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];\n  }, [onChange, placeholderPlugin, ribbonPlugin]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      <Ribbon\n        styles={ribbonStyle}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n        data-testid={'rich-text-editor-ribbon'}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        <Rooster\n          initialContent={initialContent}\n          inDarkMode={isDarkThemed(theme)}\n          plugins={plugins}\n          className={richTextEditorStyle(props.styles)}\n          editorCreator={editorCreator}\n          // TODO: confirm the color during inline images implementation\n          imageSelectionBorderColor={'blue'}\n          // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n          doNotAdjustEditorColor={true}\n          data-testid={'rooster-rich-text-editor'}\n          // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n          onKeyDown={props.onKeyDown}\n        />\n      </div>\n    </div>\n  );\n});\n"]}

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

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { BaseCustomStyles } from '../../types';
+import { RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';
+import { RichTextSendBoxStrings } from './RichTextSendBox';
+/**
+ * @private
+ */
+export interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {
+}
+/**
+ * @private
+ */
+export interface RichTextInputBoxComponentProps {
+    placeholderText?: string;
+    initialContent?: string;
+    onChange: (newValue?: string) => void;
+    onEnterKeyDown?: () => void;
+    editorComponentRef: React.RefObject<RichTextEditorComponentRef>;
+    strings: Partial<RichTextSendBoxStrings>;
+    disabled: boolean;
+    actionComponents: ReactNode;
+    onRenderFileUploads?: () => JSX.Element;
+    hasFiles?: boolean;
+    richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;
+    isHorizontalLayoutDisabled?: boolean;
+}
+/**
+ * @private
+ */
+export declare const RichTextInputBoxComponent: (props: RichTextInputBoxComponentProps) => JSX.Element;
+//# sourceMappingURL=RichTextInputBoxComponent.d.ts.map

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

@@ -0,0 +1,74 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, 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) */
+    onRenderFileUploads, 
+    /* @conditional-compile-remove(file-sharing) */
+    hasFiles, 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]);
+    const actionButtons = useMemo(() => {
+        return (React.createElement(Stack.Item, { align: "end", className: richTextActionButtonsStackStyle },
+            React.createElement(Stack, { horizontal: true },
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderRichTextEditorIcon, onClick: (e) => {
+                        var _a;
+                        setShowRichTextEditorFormatting(!showRichTextEditorFormatting);
+                        (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        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' }),
+                React.createElement(Icon, { iconName: "RichTextDividerIcon", className: richTextActionButtonsDividerStyle(theme) }),
+                actionComponents)));
+    }, [
+        actionComponents,
+        editorComponentRef,
+        onRenderRichTextEditorIcon,
+        showRichTextEditorFormatting,
+        strings.richTextFormatButtonTooltip,
+        theme
+    ]);
+    const richTextEditorStyle = useMemo(() => {
+        return richTextEditorStyleProps(showRichTextEditorFormatting);
+    }, [richTextEditorStyleProps, showRichTextEditorFormatting]);
+    const onKeyDown = useCallback((ev) => {
+        if (isEnterKeyEventFromCompositionSession(ev)) {
+            return;
+        }
+        if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {
+            ev.preventDefault();
+            onEnterKeyDown && onEnterKeyDown();
+        }
+    }, [onEnterKeyDown, showRichTextEditorFormatting]);
+    const useHorizontalLayout = useMemo(() => {
+        return (!isHorizontalLayoutDisabled &&
+            !showRichTextEditorFormatting &&
+            /* @conditional-compile-remove(file-sharing) */ !hasFiles);
+    }, [
+        isHorizontalLayoutDisabled,
+        showRichTextEditorFormatting,
+        /* @conditional-compile-remove(file-sharing) */ hasFiles
+    ]);
+    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, { initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle })), /* @conditional-compile-remove(file-sharing) */
+                onRenderFileUploads && onRenderFileUploads()),
+            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, 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(file-sharing) */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\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(file-sharing) */\n    onRenderFileUploads,\n    /* @conditional-compile-remove(file-sharing) */\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(file-sharing) */ !hasFiles\n    );\n  }, [\n    isHorizontalLayoutDisabled,\n    showRichTextEditorFormatting,\n    /* @conditional-compile-remove(file-sharing) */ 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          {/* @conditional-compile-remove(file-sharing) */ onRenderFileUploads && onRenderFileUploads()}\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,12 @@
+import { Theme } from '@fluentui/react';
+import { LocalizedStrings, RibbonButton } from 'roosterjs-react';
+import { RichTextSendBoxStrings } from './RichTextSendBox';
+/**
+ * @private
+ */
+export declare const ribbonButtons: (theme: Theme) => RibbonButton<string>[];
+/**
+ * @private
+ */
+export declare const ribbonButtonsStrings: (strings: Partial<RichTextSendBoxStrings>) => LocalizedStrings<string>;
+//# sourceMappingURL=RichTextRibbonButtons.d.ts.map

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

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { KnownRibbonButtonKey, getButtons } from 'roosterjs-react';
+import { ribbonButtonStyle, ribbonDividerStyle } from '../styles/RichTextEditor.styles';
+const dividerRibbonButton = (theme) => {
+    return {
+        key: 'Divider',
+        iconName: 'RichTextDividerIcon',
+        unlocalizedText: '',
+        onClick: () => { },
+        isDisabled: () => true,
+        commandBarProperties: {
+            buttonStyles: ribbonDividerStyle(theme)
+        }
+    };
+};
+const boldButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Bold, theme, 'RichTextBoldButtonIcon');
+};
+const italicButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Italic, theme, 'RichTextItalicButtonIcon');
+};
+const underlineButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Underline, theme, 'RichTextUnderlineButtonIcon');
+};
+const bulletListButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.BulletedList, theme, 'RichTextBulletListButtonIcon');
+};
+const numberListButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.NumberedList, theme, 'RichTextNumberListButtonIcon');
+};
+const indentIncreaseButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.IncreaseIndent, theme, 'RichTextIndentIncreaseButtonIcon');
+};
+const indentDecreaseButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.DecreaseIndent, theme, 'RichTextIndentDecreaseButtonIcon');
+};
+const createKnownRibbonButton = (key, theme, icon) => {
+    var _a;
+    const buttons = getButtons([key]);
+    if (buttons.length > 0) {
+        const button = buttons[0];
+        // AllButtonStringKeys is a union of all the string keys of all the buttons
+        const result = buttons[0];
+        button.iconName = icon;
+        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)), canCheck: false });
+        return result;
+    }
+    return undefined;
+};
+/**
+ * @private
+ */
+export const ribbonButtons = (theme) => {
+    const buttons = [];
+    [
+        boldButton(theme),
+        italicButton(theme),
+        underlineButton(theme),
+        dividerRibbonButton(theme),
+        bulletListButton(theme),
+        numberListButton(theme),
+        indentIncreaseButton(theme),
+        indentDecreaseButton(theme)
+    ].forEach((item) => {
+        if (item !== undefined) {
+            buttons.push(item);
+        }
+    });
+    return buttons;
+};
+/**
+ * @private
+ */
+export const ribbonButtonsStrings = (strings) => {
+    return {
+        buttonNameBold: strings.boldTooltip,
+        buttonNameItalic: strings.italicTooltip,
+        buttonNameUnderline: strings.underlineTooltip,
+        buttonNameBulletedList: strings.bulletListTooltip,
+        buttonNameNumberedList: strings.numberListTooltip,
+        buttonNameIncreaseIndent: strings.increaseIndentTooltip,
+        buttonNameDecreaseIndent: strings.decreaseIndentTooltip
+    };
+};
+//# sourceMappingURL=RichTextRibbonButtons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextRibbonButtons.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextRibbonButtons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Theme } from '@fluentui/react';\nimport { KnownRibbonButtonKey, LocalizedStrings, RibbonButton, getButtons } from 'roosterjs-react';\nimport { ribbonButtonStyle, ribbonDividerStyle } from '../styles/RichTextEditor.styles';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\n\nconst dividerRibbonButton = (theme: Theme): RibbonButton<string> => {\n  return {\n    key: 'Divider',\n    iconName: 'RichTextDividerIcon',\n    unlocalizedText: '',\n    onClick: () => {},\n    isDisabled: () => true,\n    commandBarProperties: {\n      buttonStyles: ribbonDividerStyle(theme)\n    }\n  };\n};\n\nconst boldButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Bold, theme, 'RichTextBoldButtonIcon');\n};\n\nconst italicButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Italic, theme, 'RichTextItalicButtonIcon');\n};\n\nconst underlineButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.Underline, theme, 'RichTextUnderlineButtonIcon');\n};\n\nconst bulletListButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.BulletedList, theme, 'RichTextBulletListButtonIcon');\n};\n\nconst numberListButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.NumberedList, theme, 'RichTextNumberListButtonIcon');\n};\n\nconst indentIncreaseButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.IncreaseIndent, theme, 'RichTextIndentIncreaseButtonIcon');\n};\n\nconst indentDecreaseButton = (theme: Theme): RibbonButton<string> | undefined => {\n  return createKnownRibbonButton(KnownRibbonButtonKey.DecreaseIndent, theme, 'RichTextIndentDecreaseButtonIcon');\n};\n\nconst createKnownRibbonButton = (\n  key: KnownRibbonButtonKey,\n  theme: Theme,\n  icon: string\n): RibbonButton<string> | undefined => {\n  const buttons = getButtons([key]);\n  if (buttons.length > 0) {\n    const button = buttons[0];\n    // AllButtonStringKeys is a union of all the string keys of all the buttons\n    const result = buttons[0] as RibbonButton<typeof button.key>;\n    button.iconName = icon;\n    button.commandBarProperties = {\n      ...button.commandBarProperties,\n      buttonStyles: {\n        ...button.commandBarProperties?.buttonStyles,\n        ...ribbonButtonStyle(theme)\n      },\n      canCheck: false\n    };\n    return result;\n  }\n  return undefined;\n};\n\n/**\n * @private\n */\nexport const ribbonButtons = (theme: Theme): RibbonButton<string>[] => {\n  const buttons: RibbonButton<string>[] = [];\n  [\n    boldButton(theme),\n    italicButton(theme),\n    underlineButton(theme),\n    dividerRibbonButton(theme),\n    bulletListButton(theme),\n    numberListButton(theme),\n    indentIncreaseButton(theme),\n    indentDecreaseButton(theme)\n  ].forEach((item) => {\n    if (item !== undefined) {\n      buttons.push(item);\n    }\n  });\n\n  return buttons;\n};\n\n/**\n * @private\n */\nexport const ribbonButtonsStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {\n  return {\n    buttonNameBold: strings.boldTooltip,\n    buttonNameItalic: strings.italicTooltip,\n    buttonNameUnderline: strings.underlineTooltip,\n    buttonNameBulletedList: strings.bulletListTooltip,\n    buttonNameNumberedList: strings.numberListTooltip,\n    buttonNameIncreaseIndent: strings.increaseIndentTooltip,\n    buttonNameDecreaseIndent: strings.decreaseIndentTooltip\n  };\n};\n"]}

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

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import { SendBoxStrings } from '../SendBox';
+import { ActiveFileUpload } from '../AttachmentUploadCards';
+/**
+ * Strings of {@link RichTextSendBox} that can be overridden.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxStrings extends SendBoxStrings {
+    /**
+     * Tooltip text for the bold button.
+     */
+    boldTooltip: string;
+    /**
+     * Tooltip text for the italic button.
+     */
+    italicTooltip: string;
+    /**
+     * Tooltip text for the underline button.
+     */
+    underlineTooltip: string;
+    /**
+     * Tooltip text for the bullet list button.
+     */
+    bulletListTooltip: string;
+    /**
+     * Tooltip text for the number list button.
+     */
+    numberListTooltip: string;
+    /**
+     * Tooltip text for the increase indent button.
+     */
+    increaseIndentTooltip: string;
+    /**
+     * Tooltip text for the decrease indent button.
+     */
+    decreaseIndentTooltip: string;
+    /**
+     * Tooltip text for the rich text format button button.
+     */
+    richTextFormatButtonTooltip: string;
+}
+/**
+ * Props for {@link RichTextSendBox}.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxProps {
+    /**
+     * Optional boolean to disable text box
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Optional strings to override in component
+     */
+    strings?: Partial<RichTextSendBoxStrings>;
+    /**
+     * Optional text for system message above the text box
+     */
+    systemMessage?: string;
+    /**
+     * Optional array of active file uploads where each object has attributes
+     * of a file upload like name, progress, errorMessage etc.
+     * @beta
+     */
+    activeFileUploads?: ActiveFileUpload[];
+    /**
+     * Optional callback to remove the file upload before sending by clicking on
+     * cancel icon.
+     * @beta
+     */
+    onCancelFileUpload?: (fileId: string) => void;
+    /**
+     * Callback function used when the send button is clicked.
+     */
+    onSendMessage: (content: string) => Promise<void>;
+}
+/**
+ * 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,154 @@
+// 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';
+import { InputBoxButton } from '../InputBoxButton';
+import { RichTextSendBoxErrors } from './RichTextSendBoxErrors';
+import { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';
+import { useTheme } from '../../theming';
+import { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';
+/* @conditional-compile-remove(file-sharing) */
+import { _AttachmentUploadCards } from '../AttachmentUploadCards';
+/* @conditional-compile-remove(file-sharing) */
+import { hasCompletedFileUploads, hasIncompleteFileUploads } from '../utils/SendBoxUtils';
+/* @conditional-compile-remove(file-sharing) */
+import { attachmentUploadCardsStyles } from '../styles/SendBox.styles';
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export const RichTextSendBox = (props) => {
+    const { disabled = false, systemMessage, onSendMessage, 
+    /* @conditional-compile-remove(file-sharing) */
+    activeFileUploads, 
+    /* @conditional-compile-remove(file-sharing) */
+    onCancelFileUpload } = 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) */
+    const [attachmentUploadsPendingError, setFileUploadsPendingError] = useState(undefined);
+    const editorComponentRef = useRef(null);
+    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 sendMessageOnClick = useCallback(() => {
+        var _a, _b;
+        if (disabled || contentValueOverflow) {
+            return;
+        }
+        // Don't send message until all files have been uploaded successfully
+        /* @conditional-compile-remove(file-sharing) */
+        setFileUploadsPendingError(undefined);
+        /* @conditional-compile-remove(file-sharing) */
+        if (hasIncompleteFileUploads(activeFileUploads)) {
+            setFileUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
+            return;
+        }
+        const message = contentValue;
+        // we don't want to send empty messages including spaces, newlines, tabs
+        // Message can be empty if there is a valid file upload
+        if (sanitizeText(message).length > 0 ||
+            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
+            onSendMessage(message);
+            setContentValue('');
+            (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
+        }
+        (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [
+        contentValue,
+        contentValueOverflow,
+        disabled,
+        onSendMessage,
+        /* @conditional-compile-remove(file-sharing) */ activeFileUploads,
+        /* @conditional-compile-remove(file-sharing) */ strings.attachmentUploadsPendingError
+    ]);
+    const hasErrorMessage = useMemo(() => {
+        var _a;
+        return (!!systemMessage ||
+            !!contentTooLongMessage ||
+            /* @conditional-compile-remove(file-sharing) */
+            !!attachmentUploadsPendingError ||
+            /* @conditional-compile-remove(file-sharing) */
+            !!((_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error));
+    }, [
+        /* @conditional-compile-remove(file-sharing) */
+        activeFileUploads,
+        contentTooLongMessage,
+        /* @conditional-compile-remove(file-sharing) */
+        attachmentUploadsPendingError,
+        systemMessage
+    ]);
+    const onRenderSendIcon = useCallback((isHover) => (React.createElement(Icon, { iconName: isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
+            theme,
+            hasText: !!contentValue,
+            /* @conditional-compile-remove(file-sharing) */
+            hasFile: false,
+            hasErrorMessage: hasErrorMessage,
+            defaultTextColor: theme.palette.neutralSecondary,
+            disabled: disabled
+        }) })), [contentValue, disabled, hasErrorMessage, theme]);
+    const sendBoxErrorsProps = useMemo(() => {
+        var _a;
+        return {
+            /* @conditional-compile-remove(file-sharing) */
+            attachmentUploadsPendingError: attachmentUploadsPendingError,
+            /* @conditional-compile-remove(file-sharing) */
+            attachmentUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error,
+            systemMessage: systemMessage,
+            textTooLongMessage: contentTooLongMessage
+        };
+    }, [
+        /* @conditional-compile-remove(file-sharing) */
+        activeFileUploads,
+        contentTooLongMessage,
+        /* @conditional-compile-remove(file-sharing) */
+        attachmentUploadsPendingError,
+        systemMessage
+    ]);
+    /* @conditional-compile-remove(file-sharing) */
+    const onRenderFileUploads = useCallback(() => {
+        return (React.createElement(Stack, { className: attachmentUploadCardsStyles },
+            React.createElement(_AttachmentUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: onCancelFileUpload, strings: {
+                    removeAttachment: strings.removeAttachment,
+                    uploading: strings.uploading,
+                    uploadCompleted: strings.uploadCompleted
+                } })));
+    }, [activeFileUploads, onCancelFileUpload, strings.removeAttachment, strings.uploadCompleted, strings.uploading]);
+    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 }));
+    }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
+    /* @conditional-compile-remove(file-sharing) */
+    const hasFileUploads = useMemo(() => {
+        return hasCompletedFileUploads(activeFileUploads) || hasIncompleteFileUploads(activeFileUploads);
+    }, [activeFileUploads]);
+    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(file-sharing) */
+            onRenderFileUploads: onRenderFileUploads, 
+            /* @conditional-compile-remove(file-sharing) */
+            hasFiles: hasFileUploads })));
+};
+//# sourceMappingURL=RichTextSendBox.js.map

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

@@ -0,0 +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(file-sharing) */\nimport { ActiveFileUpload, _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { hasCompletedFileUploads, hasIncompleteFileUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\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 for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: 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(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (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(file-sharing) */\n    activeFileUploads,\n    /* @conditional-compile-remove(file-sharing) */\n    onCancelFileUpload\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(file-sharing) */\n  const [attachmentUploadsPendingError, setFileUploadsPendingError] = 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(file-sharing) */\n    setFileUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(file-sharing) */\n    if (hasIncompleteFileUploads(activeFileUploads)) {\n      setFileUploadsPendingError({ 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 file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)\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(file-sharing) */ activeFileUploads,\n    /* @conditional-compile-remove(file-sharing) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!activeFileUploads?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\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(file-sharing) */\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(file-sharing) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(file-sharing) */\n      attachmentUploadError: activeFileUploads?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <_AttachmentUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={onCancelFileUpload}\n          strings={{\n            removeAttachment: strings.removeAttachment,\n            uploading: strings.uploading,\n            uploadCompleted: strings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, onCancelFileUpload, strings.removeAttachment, strings.uploadCompleted, strings.uploading]);\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(file-sharing) */\n  const hasFileUploads = useMemo(() => {\n    return hasCompletedFileUploads(activeFileUploads) || hasIncompleteFileUploads(activeFileUploads);\n  }, [activeFileUploads]);\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(file-sharing) */\n        onRenderFileUploads={onRenderFileUploads}\n        /* @conditional-compile-remove(file-sharing) */\n        hasFiles={hasFileUploads}\n      />\n    </Stack>\n  );\n};\n"]}