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

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatComposite.d.ts

@@ -3,6 +3,7 @@ import { CommunicationParticipant, MessageRenderer, MessageProps } from "../../.
 import { BaseCompositeProps } from '../common/BaseComposite';
 import { ChatCompositeIcons } from '../common/icons';
 import { ChatAdapter } from './adapter/ChatAdapter';
+import { AttachmentOptions } from "../../../../react-components/src";
 /**
  * Props for {@link ChatComposite}.
  *
@@ -28,6 +29,12 @@ export interface ChatCompositeProps extends BaseCompositeProps<ChatCompositeIcon
      * Flags to enable/disable visual elements of the {@link ChatComposite}.
      */
     options?: ChatCompositeOptions;
+    /**
+     * Optimizes the composite form factor for either desktop or mobile.
+     * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.
+     * @defaultValue 'desktop'
+     */
+    formFactor?: 'desktop' | 'mobile';
 }
 /**
  * Optional features of the {@link ChatComposite}.
@@ -41,6 +48,13 @@ export type ChatCompositeOptions = {
      * @defaultValue true
      */
     errorBar?: boolean;
+    /**
+     * Show or hide the participant pane. This feature is in beta and not supported on mobile or narrow screen views.
+     * @defaultValue false
+     *
+     * @beta
+     */
+    participantPane?: boolean;
     /**
      * Show or hide the topic at the top of the chat. Hidden if set to `false`
      * @defaultValue true
@@ -51,6 +65,19 @@ export type ChatCompositeOptions = {
      * When undefined nothing has focus on render
      */
     autoFocus?: 'sendBoxTextField';
+    /**
+     * Properties for configuring the File Sharing feature.
+     * If undefined, file sharing feature will be disabled.
+     * @beta
+     */
+    attachmentOptions?: AttachmentOptions;
+    /**
+     * Enables rich text editor for the send and edit boxes
+     * @defaultValue `false`
+     *
+     * @beta
+     */
+    richTextEditor?: boolean;
 };
 /**
  * A customizable UI composite for the chat experience.

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatComposite.js

@@ -14,9 +14,17 @@ import { ChatScreen } from './ChatScreen';
  */
 export const ChatComposite = (props) => {
     const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
-    return React.createElement("div", { className: chatScreenContainerStyle },
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const formFactor = props['formFactor'] || 'desktop';
+    return (React.createElement("div", { className: chatScreenContainerStyle },
         React.createElement(BaseProvider, Object.assign({}, props),
             React.createElement(ChatAdapterProvider, { adapter: adapter },
-                React.createElement(ChatScreen, { options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems }))));
+                React.createElement(ChatScreen
+                /* @conditional-compile-remove(file-sharing-acs) */
+                , { 
+                    /* @conditional-compile-remove(file-sharing-acs) */
+                    formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems, 
+                    /* @conditional-compile-remove(file-sharing-acs) */
+                    attachmentOptions: options === null || options === void 0 ? void 0 : options.attachmentOptions })))));
 };
 //# sourceMappingURL=ChatComposite.js.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatComposite.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposite.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/ChatComposite.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAsB,MAAM,yBAAyB,CAAC;AAG3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAoD1C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,uBAAuB,EACvB,eAAe,EACf,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IACV,OAAO,6BAAK,SAAS,EAAE,wBAAwB;QAC3C,oBAAC,YAAY,oBAAK,KAAK;YACrB,oBAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO;gBACnC,oBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,eAAe,EAAE,eAAe,EAAE,2BAA2B,EAAE,2BAA2B,GAAI,CAC9M,CACT,CACX,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommunicationParticipant, MessageRenderer, MessageProps } from '@internal/react-components';\nimport React from 'react';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { ChatCompositeIcons } from '../common/icons';\nimport { ChatAdapter } from './adapter/ChatAdapter';\nimport { ChatAdapterProvider } from './adapter/ChatAdapterProvider';\nimport { chatScreenContainerStyle } from './styles/Chat.styles';\nimport { ChatScreen } from './ChatScreen';\n/**\n * Props for {@link ChatComposite}.\n *\n * @public\n */\nexport interface ChatCompositeProps extends BaseCompositeProps<ChatCompositeIcons> {\n  /**\n   * An adapter provides logic and data to the composite.\n   * Composite can also be controlled using the adapter.\n   */\n  adapter: ChatAdapter;\n  /**\n   * `(messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element`\n   * A callback for customizing the message renderer.\n   */\n  onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n  /**\n   * `(typingUsers: CommunicationParticipant[]) => JSX.Element`\n   * A callback for customizing the typing indicator renderer.\n   */\n  onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n  /**\n   * Flags to enable/disable visual elements of the {@link ChatComposite}.\n   */\n  options?: ChatCompositeOptions;\n}\n\n/**\n * Optional features of the {@link ChatComposite}.\n *\n * @public\n */\nexport type ChatCompositeOptions = {\n  /**\n   * Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.\n   * Hide or show the error bar.\n   * @defaultValue true\n   */\n  errorBar?: boolean;\n  /**\n   * Show or hide the topic at the top of the chat. Hidden if set to `false`\n   * @defaultValue true\n   */\n  topic?: boolean;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n};\n\n/**\n * A customizable UI composite for the chat experience.\n *\n * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)\n *\n * @public\n */\nexport const ChatComposite = (props: ChatCompositeProps): JSX.Element => {\n  const {\n    adapter,\n    options,\n    onFetchAvatarPersonaData,\n    onRenderTypingIndicator,\n    onRenderMessage,\n    onFetchParticipantMenuItems\n  } = props;\n  return <div className={chatScreenContainerStyle}>\n      <BaseProvider {...props}>\n        <ChatAdapterProvider adapter={adapter}>\n          <ChatScreen options={options} onFetchAvatarPersonaData={onFetchAvatarPersonaData} onRenderTypingIndicator={onRenderTypingIndicator} onRenderMessage={onRenderMessage} onFetchParticipantMenuItems={onFetchParticipantMenuItems} />\n        </ChatAdapterProvider>\n      </BaseProvider>\n    </div>;\n};"]}
+{"version":3,"file":"ChatComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatComposite.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAsB,MAAM,yBAAyB,CAAC;AAG3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAuF1C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,uBAAuB,EACvB,eAAe,EACf,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IAEV,mDAAmD;IACnD,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC;IAEpD,OAAO,CACL,6BAAK,SAAS,EAAE,wBAAwB;QACtC,oBAAC,YAAY,oBAAK,KAAK;YACrB,oBAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO;gBACnC,oBAAC,UAAU;gBACT,mDAAmD;;oBAAnD,mDAAmD;oBACnD,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,wBAAwB,EAAE,wBAAwB,EAClD,uBAAuB,EAAE,uBAAuB,EAChD,eAAe,EAAE,eAAe,EAChC,2BAA2B,EAAE,2BAA2B;oBACxD,mDAAmD;oBACnD,iBAAiB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,GAC7C,CACkB,CACT,CACX,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommunicationParticipant, MessageRenderer, MessageProps } from '@internal/react-components';\nimport React from 'react';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { ChatCompositeIcons } from '../common/icons';\nimport { ChatAdapter } from './adapter/ChatAdapter';\nimport { ChatAdapterProvider } from './adapter/ChatAdapterProvider';\nimport { chatScreenContainerStyle } from './styles/Chat.styles';\nimport { ChatScreen } from './ChatScreen';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentOptions } from '@internal/react-components';\n\n/**\n * Props for {@link ChatComposite}.\n *\n * @public\n */\nexport interface ChatCompositeProps extends BaseCompositeProps<ChatCompositeIcons> {\n  /**\n   * An adapter provides logic and data to the composite.\n   * Composite can also be controlled using the adapter.\n   */\n  adapter: ChatAdapter;\n  /**\n   * `(messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element`\n   * A callback for customizing the message renderer.\n   */\n  onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n  /**\n   * `(typingUsers: CommunicationParticipant[]) => JSX.Element`\n   * A callback for customizing the typing indicator renderer.\n   */\n  onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n  /**\n   * Flags to enable/disable visual elements of the {@link ChatComposite}.\n   */\n  options?: ChatCompositeOptions;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n}\n\n/**\n * Optional features of the {@link ChatComposite}.\n *\n * @public\n */\nexport type ChatCompositeOptions = {\n  /**\n   * Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.\n   * Hide or show the error bar.\n   * @defaultValue true\n   */\n  errorBar?: boolean;\n  /* @conditional-compile-remove(chat-composite-participant-pane) */\n  /**\n   * Show or hide the participant pane. This feature is in beta and not supported on mobile or narrow screen views.\n   * @defaultValue false\n   *\n   * @beta\n   */\n  participantPane?: boolean;\n  /**\n   * Show or hide the topic at the top of the chat. Hidden if set to `false`\n   * @defaultValue true\n   */\n  topic?: boolean;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Properties for configuring the File Sharing feature.\n   * If undefined, file sharing feature will be disabled.\n   * @beta\n   */\n  attachmentOptions?: AttachmentOptions;\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  /**\n   * Enables rich text editor for the send and edit boxes\n   * @defaultValue `false`\n   *\n   * @beta\n   */\n  richTextEditor?: boolean;\n};\n\n/**\n * A customizable UI composite for the chat experience.\n *\n * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)\n *\n * @public\n */\nexport const ChatComposite = (props: ChatCompositeProps): JSX.Element => {\n  const {\n    adapter,\n    options,\n    onFetchAvatarPersonaData,\n    onRenderTypingIndicator,\n    onRenderMessage,\n    onFetchParticipantMenuItems\n  } = props;\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const formFactor = props['formFactor'] || 'desktop';\n\n  return (\n    <div className={chatScreenContainerStyle}>\n      <BaseProvider {...props}>\n        <ChatAdapterProvider adapter={adapter}>\n          <ChatScreen\n            /* @conditional-compile-remove(file-sharing-acs) */\n            formFactor={formFactor}\n            options={options}\n            onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n            onRenderTypingIndicator={onRenderTypingIndicator}\n            onRenderMessage={onRenderMessage}\n            onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n            /* @conditional-compile-remove(file-sharing-acs) */\n            attachmentOptions={options?.attachmentOptions}\n          />\n        </ChatAdapterProvider>\n      </BaseProvider>\n    </div>\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatHeader.js

@@ -8,9 +8,9 @@ import { chatHeaderContainerStyle, topicNameLabelStyle } from './styles/Chat.sty
  * @private
  */
 export const ChatHeader = (props) => {
-    return React.createElement(Stack, { className: chatHeaderContainerStyle, horizontal: true },
+    return (React.createElement(Stack, { className: chatHeaderContainerStyle, horizontal: true },
         React.createElement(Stack.Item, { align: "center" },
-            React.createElement("div", { className: topicNameLabelStyle }, props.topic)));
+            React.createElement("div", { className: topicNameLabelStyle }, props.topic))));
 };
 const getTopicName = (state, props) => {
     var _a, _b;
@@ -20,8 +20,6 @@ const getTopicName = (state, props) => {
  * @private
  */
 export const getHeaderProps = reselect.createSelector([getTopicName], (topic) => {
-    return {
-        topic: topic
-    };
+    return { topic: topic };
 });
 //# sourceMappingURL=ChatHeader.js.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/ChatHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AASrF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAkB,EAAe,EAAE;IAC5D,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,wBAAwB,EAAE,UAAU;QACzD,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ;YACxB,6BAAK,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,KAAK,CAAO,CAC7C,CACP,CAAC;AACb,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,CAAC,KAAsB,EAAE,KAA4B,EAAU,EAAE;;IACpF,OAAO,CAAA,MAAA,MAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,0CAAE,UAAU,0CAAE,KAAK,KAAI,EAAE,CAAC;AAChE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAe,EAAE;IAC3F,OAAO;QACL,KAAK,EAAE,KAAK;KACb,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\nimport * as reselect from 'reselect';\nimport { ChatClientState } from '@internal/chat-stateful-client';\nimport { ChatBaseSelectorProps } from '@internal/chat-component-bindings';\nimport { chatHeaderContainerStyle, topicNameLabelStyle } from './styles/Chat.styles';\n\n/**\n * @private\n */\nexport type HeaderProps = {\n  topic: string;\n};\n\n/**\n * @private\n */\nexport const ChatHeader = (props: HeaderProps): JSX.Element => {\n  return <Stack className={chatHeaderContainerStyle} horizontal>\n      <Stack.Item align=\"center\">\n        <div className={topicNameLabelStyle}>{props.topic}</div>\n      </Stack.Item>\n    </Stack>;\n};\nconst getTopicName = (state: ChatClientState, props: ChatBaseSelectorProps): string => {\n  return state.threads[props.threadId]?.properties?.topic || '';\n};\n\n/**\n * @private\n */\nexport const getHeaderProps = reselect.createSelector([getTopicName], (topic): HeaderProps => {\n  return {\n    topic: topic\n  };\n});"]}
+{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AASrF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAkB,EAAe,EAAE;IAC5D,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,wBAAwB,EAAE,UAAU;QACpD,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ;YACxB,6BAAK,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,KAAK,CAAO,CAC7C,CACP,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAsB,EAAE,KAA4B,EAAU,EAAE;;IACpF,OAAO,CAAA,MAAA,MAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,0CAAE,UAAU,0CAAE,KAAK,KAAI,EAAE,CAAC;AAChE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAe,EAAE;IAC3F,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AAC1B,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\nimport * as reselect from 'reselect';\nimport { ChatClientState } from '@internal/chat-stateful-client';\nimport { ChatBaseSelectorProps } from '@internal/chat-component-bindings';\nimport { chatHeaderContainerStyle, topicNameLabelStyle } from './styles/Chat.styles';\n\n/**\n * @private\n */\nexport type HeaderProps = {\n  topic: string;\n};\n\n/**\n * @private\n */\nexport const ChatHeader = (props: HeaderProps): JSX.Element => {\n  return (\n    <Stack className={chatHeaderContainerStyle} horizontal>\n      <Stack.Item align=\"center\">\n        <div className={topicNameLabelStyle}>{props.topic}</div>\n      </Stack.Item>\n    </Stack>\n  );\n};\n\nconst getTopicName = (state: ChatClientState, props: ChatBaseSelectorProps): string => {\n  return state.threads[props.threadId]?.properties?.topic || '';\n};\n\n/**\n * @private\n */\nexport const getHeaderProps = reselect.createSelector([getTopicName], (topic): HeaderProps => {\n  return { topic: topic };\n});\n"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.d.ts

@@ -2,6 +2,7 @@
 import { CommunicationParticipant, MessageProps, MessageRenderer, MessageThreadStyles, ParticipantMenuItemsCallback, SendBoxStylesProps, TypingIndicatorStylesProps } from "../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../common/AvatarPersona';
 import { ChatCompositeOptions } from './ChatComposite';
+import { AttachmentOptions } from "../../../../react-components/src";
 /**
  * @private
  */
@@ -12,6 +13,7 @@ export type ChatScreenProps = {
     onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;
     onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
     styles?: ChatScreenStyles;
+    attachmentOptions?: AttachmentOptions;
     formFactor?: 'desktop' | 'mobile';
 };
 /**

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js

@@ -14,29 +14,78 @@ import { mergeStyles, Stack } from '@fluentui/react';
 import { PersonaSize } from '@fluentui/react';
 import { ErrorBar, MessageThread, TypingIndicator, useTheme } from "../../../../react-components/src";
 import React, { useCallback, useEffect, useMemo } from 'react';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { useReducer } from 'react';
 import { useState } from 'react';
 import { AvatarPersona } from '../common/AvatarPersona';
 import { useAdapter } from './adapter/ChatAdapterProvider';
 import { ChatHeader, getHeaderProps } from './ChatHeader';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { AttachmentUploadButtonWrapper as AttachmentUploadButton } from './file-sharing';
 import { useAdaptedSelector } from './hooks/useAdaptedSelector';
 import { usePropsFor } from './hooks/usePropsFor';
 import { chatArea, chatContainer, chatWrapper, messageThreadChatCompositeStyles, sendboxContainerStyles, typingIndicatorContainerStyles } from './styles/Chat.styles';
 import { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';
+/* @conditional-compile-remove(chat-composite-participant-pane) */
+import { ChatScreenPeoplePane } from './ChatScreenPeoplePane';
 import { toFlatCommunicationIdentifier } from "../../../../acs-ui-common/src";
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { removeImageTags } from "../../../../acs-ui-common/src";
+/* @conditional-compile-remove(file-sharing-acs) */
+import { AttachmentDownloadErrorBar } from './AttachmentDownloadErrorBar';
+import { _AttachmentDownloadCards } from "../../../../react-components/src";
 import { ImageOverlay } from "../../../../react-components/src";
+/* @conditional-compile-remove(file-sharing-acs) */
+import { nanoid } from 'nanoid';
+/* @conditional-compile-remove(file-sharing-acs) */
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { AttachmentUploadActionType, AttachmentUploadReducer } from './file-sharing/AttachmentUpload';
 import { SendBoxPicker } from '../common/SendBoxPicker';
+/* @conditional-compile-remove(rich-text-editor-composite-support) */
+import { loadRichTextSendBox } from '../common/SendBoxPicker';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { cancelInlineImageUpload, getEditBoxMessagesInlineImages, getImageFileNameFromAttributes, getSendBoxInlineImages, onInsertInlineImageForEditBox, onInsertInlineImageForSendBox, updateContentStringWithUploadedInlineImages } from './ImageUpload/ImageUploadUtils';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { isMicrosoftTeamsUserIdentifier } from '@azure/communication-common';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { SEND_BOX_UPLOADS_KEY_VALUE } from '../common/constants';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { ImageUploadReducer } from './ImageUpload/ImageUploadReducer';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { useLocale } from '../localization';
 import { useSelector } from './hooks/useSelector';
 import { getChatMessages, getThreadId, getUserId } from './selectors/baseSelectors';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+import { getCreatedBy, getTextOnlyChat } from './selectors/baseSelectors';
 /**
  * @private
  */
 export const ChatScreen = (props) => {
-    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, formFactor } = props;
+    var _a, _b, _c, _d, _e;
+    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, 
+    /* @conditional-compile-remove(file-sharing-acs) */
+    attachmentOptions, formFactor } = props;
     const defaultNumberOfChatMessagesToReload = 5;
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
     const [overlayImageItem, setOverlayImageItem] = useState();
     const [isImageOverlayOpen, setIsImageOverlayOpen] = useState(false);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const [uploads, handleUploadAction] = useReducer(AttachmentUploadReducer, []);
     const adapter = useAdapter();
     const theme = useTheme();
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const localeStrings = useLocale().strings;
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const textOnlyChat = !!useSelector(getTextOnlyChat);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const createdBy = useSelector(getCreatedBy);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const isACSChat = createdBy && !isMicrosoftTeamsUserIdentifier(createdBy);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const [editBoxInlineImageUploads, handleEditBoxInlineImageUploadAction] = useReducer(ImageUploadReducer, undefined);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const [sendBoxInlineImageUploads, handleSendBoxInlineImageUploadAction] = useReducer(ImageUploadReducer, undefined);
     useEffect(() => {
         // Initial data should be always fetched by the composite(or external caller) instead of the adapter
         const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -47,6 +96,15 @@ export const ChatScreen = (props) => {
         });
         fetchData();
     }, [adapter]);
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    useEffect(() => {
+        // if rich text editor is enabled, the rich text editor component should be loaded early for good UX
+        if (options === null || options === void 0 ? void 0 : options.richTextEditor) {
+            // this line is needed to load the Rooster JS dependencies early in the lifecycle
+            // when the rich text editor is enabled
+            loadRichTextSendBox();
+        }
+    }, [options === null || options === void 0 ? void 0 : options.richTextEditor]);
     const messageThreadProps = usePropsFor(MessageThread);
     const typingIndicatorProps = usePropsFor(TypingIndicator);
     const headerProps = useAdaptedSelector(getHeaderProps);
@@ -66,7 +124,9 @@ export const ChatScreen = (props) => {
         const resourceFetchResult = (_a = message.resourceCache) === null || _a === void 0 ? void 0 : _a[overlayImageItemRef.current.imageUrl];
         if (overlayImageItemRef.current.imageSrc === '' && resourceFetchResult) {
             const fullSizeImageSrc = getResourceSourceUrl(resourceFetchResult);
-            if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItemRef.current.imageSrc === fullSizeImageSrc) {
+            if (fullSizeImageSrc === undefined ||
+                fullSizeImageSrc === '' ||
+                overlayImageItemRef.current.imageSrc === fullSizeImageSrc) {
                 return;
             }
             setOverlayImageItem(Object.assign(Object.assign({}, overlayImageItemRef.current), { imageSrc: fullSizeImageSrc }));
@@ -83,7 +143,7 @@ export const ChatScreen = (props) => {
         return src;
     };
     const onRenderAvatarCallback = useCallback((userId, defaultOptions) => {
-        return React.createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData }));
+        return (React.createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
     }, [onFetchAvatarPersonaData]);
     const messageThreadStyles = useMemo(() => {
         return Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
@@ -96,11 +156,74 @@ export const ChatScreen = (props) => {
     }, [styles === null || styles === void 0 ? void 0 : styles.sendBox]);
     const userIdObject = useSelector(getUserId);
     const userId = toFlatCommunicationIdentifier(userIdObject);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const setKeyboardFocusAfterFileSelection = useCallback(() => {
+        var _a;
+        // look up sendbox by ID for now, we will use `useRef`
+        // once attachment button is moved inside of send box component
+        // see ADO workitem #3764245
+        /* @conditional-compile-remove(rich-text-editor-composite-support) */
+        if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.richTextEditor) {
+            const richTextSendBox = document === null || document === void 0 ? void 0 : document.querySelector(`[id="richTextSendBox"]`);
+            richTextSendBox === null || richTextSendBox === void 0 ? void 0 : richTextSendBox.focus();
+            return;
+        }
+        const sendBox = document === null || document === void 0 ? void 0 : document.querySelector(`[id="sendbox"]`);
+        // set send box on focus after file selection per A11y requirement
+        sendBox === null || sendBox === void 0 ? void 0 : sendBox.focus();
+    }, [
+        /* @conditional-compile-remove(rich-text-editor-composite-support) */
+        (_a = props.options) === null || _a === void 0 ? void 0 : _a.richTextEditor
+    ]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const attachmentUploadButtonOnChange = useCallback((files) => {
+        var _a;
+        setKeyboardFocusAfterFileSelection();
+        if (!files) {
+            return;
+        }
+        // Get files, change to tasks, store locally and pass back to Contoso
+        const newUploads = Array.from(files).map((file) => {
+            const taskId = nanoid();
+            return {
+                file,
+                taskId,
+                metadata: {
+                    id: taskId,
+                    name: file.name,
+                    progress: 0
+                },
+                notifyUploadProgressChanged: (value) => {
+                    handleUploadAction({ type: AttachmentUploadActionType.Progress, taskId, progress: value });
+                },
+                notifyUploadCompleted: (id, url) => {
+                    handleUploadAction({ type: AttachmentUploadActionType.Completed, taskId, id, url });
+                },
+                notifyUploadFailed: (message) => {
+                    handleUploadAction({ type: AttachmentUploadActionType.Failed, taskId, message });
+                    // remove the failed upload task when error banner is auto dismissed after 10 seconds
+                    // so the banner won't be shown again on UI re-rendering.
+                    setTimeout(() => {
+                        handleUploadAction({ type: AttachmentUploadActionType.Remove, id: taskId });
+                    }, 10 * 1000);
+                }
+            };
+        });
+        handleUploadAction({ type: AttachmentUploadActionType.Set, newUploads });
+        (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentSelection(newUploads);
+    }, [attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions, setKeyboardFocusAfterFileSelection]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const onRenderAttachmentDownloads = useCallback((message) => {
+        var _a, _b, _c;
+        return ((_b = (_a = message === null || message === void 0 ? void 0 : message.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0) ? (React.createElement(_AttachmentDownloadCards, { attachments: message.attachments, message: message, actionsForAttachment: (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _c === void 0 ? void 0 : _c.actionsForAttachment, onActionHandlerFailed: (errorMessage) => {
+                setDownloadErrorMessage(errorMessage);
+            } })) : (React.createElement(React.Fragment, null));
+    }, [(_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _b === void 0 ? void 0 : _b.actionsForAttachment]);
     const threadId = useSelector(getThreadId);
     const onInlineImageClicked = useCallback((attachmentId, messageId) => {
         var _a, _b, _c;
         const message = adapterChatMessages[messageId];
-        const inlinedImages = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.filter(attachment => {
+        const inlinedImages = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.filter((attachment) => {
             return attachment.attachmentType === 'image' && attachment.id === attachmentId;
         });
         const attachment = inlinedImages === null || inlinedImages === void 0 ? void 0 : inlinedImages[0];
@@ -143,28 +266,26 @@ export const ChatScreen = (props) => {
     const onRenderInlineImage = useCallback((inlineImage, defaultOnRender) => {
         var _a, _b, _c;
         const message = adapterChatMessages[inlineImage.messageId];
-        const attachment = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.find(attachment => attachment.id === inlineImage.imageAttributes.id);
+        const attachment = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.find((attachment) => attachment.id === inlineImage.imageAttributes.id);
         if (attachment === undefined) {
             return defaultOnRender(inlineImage);
         }
         let pointerEvents = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';
         const resourceCache = message === null || message === void 0 ? void 0 : message.resourceCache;
-        if (resourceCache && attachment.previewUrl && resourceCache[attachment.previewUrl] && ((_c = resourceCache[attachment.previewUrl]) === null || _c === void 0 ? void 0 : _c.error)) {
+        if (resourceCache &&
+            attachment.previewUrl &&
+            resourceCache[attachment.previewUrl] &&
+            ((_c = resourceCache[attachment.previewUrl]) === null || _c === void 0 ? void 0 : _c.error)) {
             pointerEvents = 'none';
         }
-        return React.createElement("span", { key: inlineImage.imageAttributes.id, onClick: () => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: e => {
+        return (React.createElement("span", { key: inlineImage.imageAttributes.id, onClick: () => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);
                 }
-            }, style: {
-                cursor: 'pointer',
-                pointerEvents
-            } }, defaultOnRender(inlineImage));
+            }, style: { cursor: 'pointer', pointerEvents } }, defaultOnRender(inlineImage)));
     }, [adapterChatMessages, onInlineImageClicked]);
     const inlineImageOptions = useMemo(() => {
-        return {
-            onRenderInlineImage: onRenderInlineImage
-        };
+        return { onRenderInlineImage: onRenderInlineImage };
     }, [onRenderInlineImage]);
     const onDownloadButtonClicked = useCallback((imageSrc) => {
         if (imageSrc === '') {
@@ -187,33 +308,183 @@ export const ChatScreen = (props) => {
             document.body.removeChild(a);
         }
     }, [overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId]);
-    const onSendMessageHandler = useCallback(function (content) {
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const attachmentButton = useMemo(() => {
+        var _a, _b, _c;
+        if (!((_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentSelection) ||
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            textOnlyChat) {
+            return null;
+        }
+        return (React.createElement(AttachmentUploadButton, { supportedMediaTypes: (_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _b === void 0 ? void 0 : _b.supportedMediaTypes, disableMultipleUploads: (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _c === void 0 ? void 0 : _c.disableMultipleUploads, onChange: attachmentUploadButtonOnChange }));
+        return React.createElement(React.Fragment, null);
+    }, [
+        (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _c === void 0 ? void 0 : _c.handleAttachmentSelection,
+        (_d = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _d === void 0 ? void 0 : _d.supportedMediaTypes,
+        (_e = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _e === void 0 ? void 0 : _e.disableMultipleUploads,
+        attachmentUploadButtonOnChange,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        textOnlyChat
+    ]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const attachments = useMemo(() => {
+        return uploads === null || uploads === void 0 ? void 0 : uploads.map((v) => v.metadata);
+    }, [uploads]);
+    const onSendMessageHandler = useCallback(function (content, 
+    /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ options) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield adapter.sendMessage(content, {});
+            var _a;
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            content = updateContentStringWithUploadedInlineImages(content, sendBoxInlineImageUploads);
+            /* @conditional-compile-remove(file-sharing-acs) */
+            const attachments = (_a = options === null || options === void 0 ? void 0 : options.attachments) !== null && _a !== void 0 ? _a : [];
+            /* @conditional-compile-remove(file-sharing-acs) */
+            handleUploadAction({ type: AttachmentUploadActionType.Clear });
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            handleSendBoxInlineImageUploadAction({
+                type: AttachmentUploadActionType.Clear,
+                messageId: SEND_BOX_UPLOADS_KEY_VALUE
+            });
+            /* @conditional-compile-remove(file-sharing-acs) */
+            yield adapter.sendMessage(content, {
+                attachments: attachments,
+                /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                type: options === null || options === void 0 ? void 0 : options.type
+            });
+            /* @conditional-compile-remove(file-sharing-acs) */
+            return;
+            yield adapter.sendMessage(content, {
+                /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                type: options === null || options === void 0 ? void 0 : options.type
+            });
         });
-    }, [adapter]);
-    const onUpdateMessageHandler = useCallback(function (messageId, content) {
+    }, [
+        adapter,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleSendBoxInlineImageUploadAction,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads
+    ]);
+    const onUpdateMessageHandler = useCallback(function (messageId, content, 
+    /* @conditional-compile-remove(file-sharing-acs) */ options) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield messageThreadProps.onUpdateMessage(messageId, content);
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            content = updateContentStringWithUploadedInlineImages(content, editBoxInlineImageUploads, messageId);
+            yield messageThreadProps.onUpdateMessage(messageId, content, 
+            /* @conditional-compile-remove(file-sharing-acs) */ options);
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            handleEditBoxInlineImageUploadAction({ type: AttachmentUploadActionType.Clear, messageId });
         });
-    }, [messageThreadProps]);
-    return React.createElement(Stack, { className: chatContainer, grow: true },
+    }, [
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleEditBoxInlineImageUploadAction,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads,
+        messageThreadProps
+    ]);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const onCancelEditMessageHandler = useCallback((messageId) => {
+        handleEditBoxInlineImageUploadAction({ type: AttachmentUploadActionType.Clear, messageId });
+    }, [handleEditBoxInlineImageUploadAction]);
+    /* @conditional-compile-remove(file-sharing-acs) */
+    const onCancelUploadHandler = useCallback((id) => {
+        var _a, _b;
+        handleUploadAction({ type: AttachmentUploadActionType.Remove, id });
+        (_b = (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentRemoval) === null || _b === void 0 ? void 0 : _b.call(_a, id);
+    }, [attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions]);
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    const richTextEditorOptions = useMemo(() => {
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        const onPasteCallback = !!isACSChat || textOnlyChat ? removeImageTags : undefined;
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor)
+            ? {
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: onPasteCallback
+            }
+            : undefined;
+    }, [
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        isACSChat,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        textOnlyChat,
+        options === null || options === void 0 ? void 0 : options.richTextEditor
+    ]);
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    const richTextEditBoxOptions = useMemo(() => {
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor)
+            ? Object.assign(Object.assign({}, richTextEditorOptions), { 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onInsertInlineImage: (imageAttributes, messageId) => {
+                    onInsertInlineImageForEditBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), messageId, adapter, handleEditBoxInlineImageUploadAction, localeStrings.chat);
+                }, 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                messagesInlineImagesWithProgress: getEditBoxMessagesInlineImages(editBoxInlineImageUploads), 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onRemoveInlineImage: (imageAttributes, messageId) => {
+                    cancelInlineImageUpload(imageAttributes, editBoxInlineImageUploads, messageId, handleEditBoxInlineImageUploadAction, adapter);
+                } }) : undefined;
+    }, [
+        options === null || options === void 0 ? void 0 : options.richTextEditor,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ richTextEditorOptions,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ editBoxInlineImageUploads,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ adapter,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ localeStrings.chat
+    ]);
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    const richTextSendBoxOptions = useMemo(() => {
+        return (options === null || options === void 0 ? void 0 : options.richTextEditor)
+            ? Object.assign(Object.assign({}, richTextEditorOptions), { 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onInsertInlineImage: (imageAttributes) => {
+                    onInsertInlineImageForSendBox(imageAttributes, getImageFileNameFromAttributes(imageAttributes), adapter, handleSendBoxInlineImageUploadAction, localeStrings.chat);
+                }, 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                inlineImagesWithProgress: getSendBoxInlineImages(sendBoxInlineImageUploads), 
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onRemoveInlineImage: (imageAttributes) => {
+                    cancelInlineImageUpload(imageAttributes, sendBoxInlineImageUploads, SEND_BOX_UPLOADS_KEY_VALUE, handleSendBoxInlineImageUploadAction, adapter);
+                } }) : undefined;
+    }, [
+        options === null || options === void 0 ? void 0 : options.richTextEditor,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ richTextEditorOptions,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ sendBoxInlineImageUploads,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ localeStrings.chat,
+        adapter
+    ]);
+    return (React.createElement(Stack, { className: chatContainer, grow: true },
         (options === null || options === void 0 ? void 0 : options.topic) !== false && React.createElement(ChatHeader, Object.assign({}, headerProps)),
         React.createElement(Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
             React.createElement(Stack, { className: chatWrapper, grow: true },
                 (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React.createElement(ErrorBar, Object.assign({}, errorBarProps)),
-                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onUpdateMessage: onUpdateMessageHandler, onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                /* @conditional-compile-remove(file-sharing-acs) */
+                React.createElement(AttachmentDownloadErrorBar, { onDismissDownloadErrorMessage: useCallback(() => {
+                        setDownloadErrorMessage('');
+                    }, []), attachmentDownloadErrorMessage: downloadErrorMessage || '' }),
+                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onUpdateMessage: onUpdateMessageHandler, 
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    onCancelEditMessage: onCancelEditMessageHandler, onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
+                    /* @conditional-compile-remove(file-sharing-acs) */
+                    onRenderAttachmentDownloads: onRenderAttachmentDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles, 
+                    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                    richTextEditorOptions: richTextEditBoxOptions })),
                 React.createElement(Stack, { className: mergeStyles(sendboxContainerStyles) },
-                    React.createElement("div", { className: mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? onRenderTypingIndicator(typingIndicatorProps.typingUsers) : React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles }))),
+                    React.createElement("div", { className: mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
                     React.createElement(Stack, { horizontal: formFactor === 'mobile' },
-                        formFactor === 'mobile',
+                        formFactor === 'mobile' && (
+                        /* @conditional-compile-remove(file-sharing-acs) */
+                        React.createElement(Stack, { verticalAlign: "center" }, attachmentButton)),
                         React.createElement(Stack, { grow: true },
                             React.createElement(SendBoxPicker, { styles: sendBoxStyles, autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, 
+                                /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                                richTextEditorOptions: richTextSendBoxOptions, 
+                                /* @conditional-compile-remove(file-sharing-acs) */
+                                attachments: attachments, 
+                                /* @conditional-compile-remove(file-sharing-acs) */
+                                onCancelAttachmentUpload: onCancelUploadHandler, 
                                 // we need to overwrite onSendMessage for SendBox because we need to clear attachment state
                                 // when submit button is clicked
                                 onSendMessage: onSendMessageHandler })),
-                        formFactor !== 'mobile')))),
-        overlayImageItem && React.createElement(ImageOverlay, Object.assign({}, overlayImageItem, { isOpen: isImageOverlayOpen, onDismiss: () => {
+                        formFactor !== 'mobile' &&
+                            /* @conditional-compile-remove(file-sharing-acs) */
+                            attachmentButton))),
+            /* @conditional-compile-remove(chat-composite-participant-pane) */
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
+        overlayImageItem && (React.createElement(ImageOverlay, Object.assign({}, overlayImageItem, { isOpen: isImageOverlayOpen, onDismiss: () => {
                 setOverlayImageItem(undefined);
                 setIsImageOverlayOpen(false);
                 adapter.removeResourceFromCache({
@@ -221,6 +492,6 @@ export const ChatScreen = (props) => {
                     messageId: overlayImageItem.messageId,
                     resourceUrl: overlayImageItem.imageUrl
                 });
-            }, onDownloadButtonClicked: onDownloadButtonClicked })));
+            }, onDownloadButtonClicked: onDownloadButtonClicked })))));
 };
 //# sourceMappingURL=ChatScreen.js.map