@azure/communication-react 1.0.0-beta.5 → 1.0.0

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/StartCallButton.styles.d.ts

@@ -1,3 +1,14 @@
+import { IButtonStyles } from '@fluentui/react';
+/**
+ * @private
+ */
 export declare const videoCameraIconStyle: string;
+/**
+ * @private
+ */
 export declare const buttonStyle: string;
+/**
+ * @private
+ */
+export declare const buttonWithIconStyles: IButtonStyles;
 //# sourceMappingURL=StartCallButton.styles.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/StartCallButton.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StartCallButton.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/StartCallButton.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,QAG/B,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC"}
+{"version":3,"file":"StartCallButton.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/StartCallButton.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAe,MAAM,iBAAiB,CAAC;AAE7D;;GAEG;AACH,eAAO,MAAM,oBAAoB,QAG/B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW,QAKtB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,aAIlC,CAAC"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/StartCallButton.styles.js

@@ -1,17 +1,28 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
+/**
+ * @private
+ */
 export const videoCameraIconStyle = mergeStyles({
     marginRight: '0.375rem',
     fontSize: '1.375rem'
 });
+/**
+ * @private
+ */
 export const buttonStyle = mergeStyles({
     fontWeight: 600,
     fontSize: '0.875rem',
     height: '2.75rem',
-    width: '100%',
-    marginTop: '1.125rem',
-    maxWidth: '18.75rem',
-    minWidth: '12.5rem'
+    width: '100%'
 });
+/**
+ * @private
+ */
+export const buttonWithIconStyles = {
+    textContainer: {
+        display: 'contents'
+    }
+};
 //# sourceMappingURL=StartCallButton.styles.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/StartCallButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"StartCallButton.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/StartCallButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,WAAW,EAAE,UAAU;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,SAAS;CACpB,CAAC,CAAC"}
+{"version":3,"file":"StartCallButton.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/StartCallButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAiB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,WAAW,EAAE,UAAU;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,MAAM;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAkB;IACjD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.d.ts

@@ -0,0 +1,29 @@
+import { CallAdapterState, CallCompositePage } from '../adapter/CallAdapter';
+import { CallControlOptions } from '../components/CallControls';
+import { CallState } from "../../../../../calling-stateful-client/src";
+/**
+ * @private
+ */
+export declare const isCameraOn: (state: CallAdapterState) => boolean;
+/**
+ * Reduce the set of call controls visible on mobile.
+ * For example do not show screenshare button.
+ *
+ * @private
+ */
+export declare const reduceCallControlsForMobile: (callControlOptions: CallControlOptions | boolean | undefined) => CallControlOptions | false;
+/**
+ * Get the current call composite page based on the current call composite state
+ *
+ * @param Call - The current call state
+ * @param previousCall - The state of the most recent previous call that has ended.
+ *
+ * @remarks - The previousCall state is needed to determine if the call has ended.
+ * When the call ends a new call object is created, and so we must lookback at the
+ * previous call state to understand how the call has ended. If there is no previous
+ * call we know that this is a fresh call and can display the configuration page.
+ *
+ * @private
+ */
+export declare const getCallCompositePage: (call: CallState | undefined, previousCall: CallState | undefined) => CallCompositePage;
+//# sourceMappingURL=Utils.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Utils.d.ts","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/Utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,mDAA0C;AAK9D;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,gBAAgB,KAAG,OAWpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,uBAClB,kBAAkB,GAAG,OAAO,GAAG,SAAS,KAC3D,kBAAkB,GAAG,KAkBvB,CAAC;AAyBF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,oBAAoB,SACzB,SAAS,GAAG,SAAS,gBACb,SAAS,GAAG,SAAS,KAClC,iBAqCF,CAAC"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js

@@ -0,0 +1,114 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { _isInCall, _isPreviewOn, _isInLobbyOrConnecting } from "../../../../../calling-component-bindings/src";
+const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
+const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300];
+/**
+ * @private
+ */
+export const isCameraOn = (state) => {
+    if (state.call) {
+        const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
+        return !!stream;
+    }
+    else {
+        if (state.devices.selectedCamera) {
+            const previewOn = _isPreviewOn(state.devices);
+            return previewOn;
+        }
+    }
+    return false;
+};
+/**
+ * Reduce the set of call controls visible on mobile.
+ * For example do not show screenshare button.
+ *
+ * @private
+ */
+export const reduceCallControlsForMobile = (callControlOptions) => {
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure call controls a valid object.
+    const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions || {};
+    // Set to compressed mode when composite is optimized for mobile
+    reduceCallControlOptions.displayType = 'compact';
+    // Do not show screen share button when composite is optimized for mobile unless the developer
+    // has explicitly opted in.
+    if (reduceCallControlOptions.screenShareButton !== true) {
+        reduceCallControlOptions.screenShareButton = false;
+    }
+    return reduceCallControlOptions;
+};
+var CallEndReasons;
+(function (CallEndReasons) {
+    CallEndReasons[CallEndReasons["LEFT_CALL"] = 0] = "LEFT_CALL";
+    CallEndReasons[CallEndReasons["ACCESS_DENIED"] = 1] = "ACCESS_DENIED";
+    CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
+})(CallEndReasons || (CallEndReasons = {}));
+const getCallEndReason = (call) => {
+    var _a, _b;
+    if (((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
+        return CallEndReasons.ACCESS_DENIED;
+    }
+    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
+        return CallEndReasons.REMOVED_FROM_CALL;
+    }
+    if (call.callEndReason) {
+        // No error codes match, assume the user simply left the call regularly
+        return CallEndReasons.LEFT_CALL;
+    }
+    throw new Error('No matching call end reason');
+};
+/**
+ * Get the current call composite page based on the current call composite state
+ *
+ * @param Call - The current call state
+ * @param previousCall - The state of the most recent previous call that has ended.
+ *
+ * @remarks - The previousCall state is needed to determine if the call has ended.
+ * When the call ends a new call object is created, and so we must lookback at the
+ * previous call state to understand how the call has ended. If there is no previous
+ * call we know that this is a fresh call and can display the configuration page.
+ *
+ * @private
+ */
+export const getCallCompositePage = (call, previousCall) => {
+    // Must check for ongoing call *before* looking at any previous calls.
+    // If the composite completes one call and joins another, the previous calls
+    // will be populated, but not relevant for determining the page.
+    if (call) {
+        // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.
+        if (_isInLobbyOrConnecting(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'lobby';
+        }
+        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'call';
+        }
+        else {
+            // When the call object has been constructed after clicking , but before 'connecting' has been
+            // set on the call object, we continue to show the configuration screen.
+            // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.
+            // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect
+            // transitional state.
+            return 'configuration';
+        }
+    }
+    if (previousCall) {
+        const reason = getCallEndReason(previousCall);
+        switch (reason) {
+            case CallEndReasons.ACCESS_DENIED:
+                return 'accessDeniedTeamsMeeting';
+            case CallEndReasons.REMOVED_FROM_CALL:
+                return 'removedFromCall';
+            case CallEndReasons.LEFT_CALL:
+                if (previousCall.diagnostics.network.latest.noNetwork) {
+                    return 'joinCallFailedDueToNoNetwork';
+                }
+                return 'leftCall';
+        }
+    }
+    // No call state - show starting page (configuration)
+    return 'configuration';
+};
+//# sourceMappingURL=Utils.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/Utils.ts"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/index.ts"],"names":[],"mappings":"AAGA,cAAc,SAAS,CAAC"}

package/dist/dist-esm/{react-components/src/types/CallParticipant.js → react-composites/src/composites/CallComposite/utils/index.js}

@@ -1,4 +1,4 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-export {};
-//# sourceMappingURL=CallParticipant.js.map
+export * from './Utils';
+//# sourceMappingURL=index.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/utils/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,SAAS,CAAC"}

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

@@ -1,8 +1,13 @@
 /// <reference types="react" />
-import { CommunicationParticipant, DefaultMessageRendererType, MessageProps } from "../../../../react-components/src";
-import { BaseCompositeProps } from '../common/Composite';
+import { CommunicationParticipant, MessageRenderer, MessageProps } from "../../../../react-components/src";
+import { BaseCompositeProps } from '../common/BaseComposite';
 import { ChatCompositeIcons } from '../common/icons';
 import { ChatAdapter } from './adapter/ChatAdapter';
+/**
+ * Props for {@link ChatComposite}.
+ *
+ * @public
+ */
 export interface ChatCompositeProps extends BaseCompositeProps<ChatCompositeIcons> {
     /**
      * An adapter provides logic and data to the composite.
@@ -10,10 +15,10 @@ export interface ChatCompositeProps extends BaseCompositeProps<ChatCompositeIcon
      */
     adapter: ChatAdapter;
     /**
-     * `(messageProps: MessageProps, defaultOnRender?: DefaultMessageRendererType) => JSX.Element`
+     * `(messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element`
      * A callback for customizing the message renderer.
      */
-    onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: DefaultMessageRendererType) => JSX.Element;
+    onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;
     /**
      * `(typingUsers: CommunicationParticipant[]) => JSX.Element`
      * A callback for customizing the typing indicator renderer.
@@ -22,28 +27,32 @@ export interface ChatCompositeProps extends BaseCompositeProps<ChatCompositeIcon
     /**
      * Flags to enable/disable visual elements of the {@link ChatComposite}.
      */
-    visualElements?: ChatCompositeVisualElements;
+    options?: ChatCompositeOptions;
 }
 /**
- * Optional features of the {@linnk ChatComposite}
+ * Optional features of the {@link ChatComposite}.
+ *
+ * @public
  */
-export declare type ChatCompositeVisualElements = {
+export declare type ChatCompositeOptions = {
     /**
      * Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.
-     *
-     * @defaultValue false
-     */
-    showErrorBar?: boolean;
-    /**
-     * Choose to show the participant pane
-     * @defaultValue false
+     * Hide or show the error bar.
+     * @defaultValue true
      */
-    showParticipantPane?: boolean;
+    errorBar?: boolean;
     /**
-     * Choose to show the topic at the top of the chat
-     * @defaultValue false
+     * Show or hide the topic at the top of the chat. Hidden if set to `false`
+     * @defaultValue true
      */
-    showTopic?: boolean;
+    topic?: boolean;
 };
+/**
+ * A customizable UI composite for the chat experience.
+ *
+ * @remarks Chat composite min width and height are respectively 19.5rem and 20rem (312px and 320px, with default rem at 16px)
+ *
+ * @public
+ */
 export declare const ChatComposite: (props: ChatCompositeProps) => JSX.Element;
 //# sourceMappingURL=ChatComposite.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatComposite.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatComposite.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,0BAA0B,EAAE,YAAY,EAAE,yCAAmC;AAEhH,OAAO,EAAiB,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIpD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB,CAAC,kBAAkB,CAAC;IAChF;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,eAAe,CAAC,EAAE,0BAA0B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5G;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,wBAAwB,EAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IAEnF;;OAEG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;CAC9C;AAED;;GAEG;AACH,oBAAY,2BAA2B,GAAG;IACxC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,WAiBzD,CAAC"}
+{"version":3,"file":"ChatComposite.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatComposite.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,eAAe,EAAE,YAAY,EAAE,yCAAmC;AAErG,OAAO,EAAiB,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKpD;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB,CAAC,kBAAkB,CAAC;IAChF;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,eAAe,CAAC,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,wBAAwB,EAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IAEnF;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AACD;;;;GAIG;AACH,oBAAY,oBAAoB,GAAG;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,WAyBzD,CAAC"}

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

@@ -1,13 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import React from 'react';
-import { BaseComposite } from '../common/Composite';
+import { BaseComposite } from '../common/BaseComposite';
 import { ChatAdapterProvider } from './adapter/ChatAdapterProvider';
+import { chatScreenContainerStyle } from './styles/Chat.styles';
 import { ChatScreen } from './ChatScreen';
+/**
+ * A customizable UI composite for the chat experience.
+ *
+ * @remarks Chat composite min width and height are respectively 19.5rem and 20rem (312px and 320px, with default rem at 16px)
+ *
+ * @public
+ */
 export const ChatComposite = (props) => {
-    const { adapter, visualElements, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage } = props;
-    return (React.createElement(BaseComposite, Object.assign({}, props),
-        React.createElement(ChatAdapterProvider, { adapter: adapter },
-            React.createElement(ChatScreen, { showErrorBar: visualElements === null || visualElements === void 0 ? void 0 : visualElements.showErrorBar, showParticipantPane: visualElements === null || visualElements === void 0 ? void 0 : visualElements.showParticipantPane, showTopic: visualElements === null || visualElements === void 0 ? void 0 : visualElements.showTopic, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage }))));
+    const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
+    return (React.createElement("div", { className: chatScreenContainerStyle },
+        React.createElement(BaseComposite, Object.assign({}, props),
+            React.createElement(ChatAdapterProvider, { adapter: adapter },
+                React.createElement(ChatScreen, { options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems })))));
 };
 //# 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":["../../../../../../../react-composites/src/composites/ChatComposite/ChatComposite.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAsB,MAAM,qBAAqB,CAAC;AAGxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+C1C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAE9G,OAAO,CACL,oBAAC,aAAa,oBAAK,KAAK;QACtB,oBAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO;YACnC,oBAAC,UAAU,IACT,YAAY,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,EAC1C,mBAAmB,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,mBAAmB,EACxD,SAAS,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,SAAS,EACpC,wBAAwB,EAAE,wBAAwB,EAClD,uBAAuB,EAAE,uBAAuB,EAChD,eAAe,EAAE,eAAe,GAChC,CACkB,CACR,CACjB,CAAC;AACJ,CAAC,CAAC"}
+{"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,aAAa,EAAsB,MAAM,yBAAyB,CAAC;AAG5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgD1C;;;;;;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,OAAO,CACL,6BAAK,SAAS,EAAE,wBAAwB;QACtC,oBAAC,aAAa,oBAAK,KAAK;YACtB,oBAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO;gBACnC,oBAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,wBAAwB,EAAE,wBAAwB,EAClD,uBAAuB,EAAE,uBAAuB,EAChD,eAAe,EAAE,eAAe,EAChC,2BAA2B,EAAE,2BAA2B,GACxD,CACkB,CACR,CACZ,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -2,10 +2,18 @@
 import * as reselect from 'reselect';
 import { ChatClientState } from "../../../../chat-stateful-client/src";
 import { ChatBaseSelectorProps } from "../../../../chat-component-bindings/src";
+/**
+ * @private
+ */
 export declare type HeaderProps = {
     topic: string;
 };
+/**
+ * @private
+ */
 export declare const ChatHeader: (props: HeaderProps) => JSX.Element;
-export declare const getTopicName: (state: ChatClientState, props: ChatBaseSelectorProps) => string;
+/**
+ * @private
+ */
 export declare const getHeaderProps: reselect.OutputParametricSelector<ChatClientState, ChatBaseSelectorProps, HeaderProps, (res: string) => HeaderProps>;
 //# sourceMappingURL=ChatHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatHeader.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,6CAAuC;AACjE,OAAO,EAAE,qBAAqB,EAAE,gDAA0C;AAG1E,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,WAAW,KAAG,WAQ/C,CAAC;AAIF,eAAO,MAAM,YAAY,UAAW,eAAe,SAAS,qBAAqB,KAAG,MAEnF,CAAC;AAEF,eAAO,MAAM,cAAc,sHAEzB,CAAC"}
+{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatHeader.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,6CAAuC;AACjE,OAAO,EAAE,qBAAqB,EAAE,gDAA0C;AAG1E;;GAEG;AACH,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,WAAW,KAAG,WAQ/C,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,cAAc,sHAEzB,CAAC"}

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

@@ -4,17 +4,21 @@ import { Stack } from '@fluentui/react';
 import React from 'react';
 import * as reselect from 'reselect';
 import { chatHeaderContainerStyle, topicNameLabelStyle } from './styles/Chat.styles';
+/**
+ * @private
+ */
 export const ChatHeader = (props) => {
     return (React.createElement(Stack, { className: chatHeaderContainerStyle, horizontal: true },
         React.createElement(Stack.Item, { align: "center" },
             React.createElement("div", { className: topicNameLabelStyle }, props.topic))));
 };
-// TODO: Consider exporting building-block selectors internally to composites.
-// This will avoid code duplication but still keep the public API clean.
-export const getTopicName = (state, props) => {
+const getTopicName = (state, props) => {
     var _a, _b;
     return ((_b = (_a = state.threads[props.threadId]) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.topic) || '';
 };
+/**
+ * @private
+ */
 export const getHeaderProps = reselect.createSelector([getTopicName], (topic) => {
     return { topic: topic };
 });

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

@@ -1 +1 @@
-{"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;AAMrF,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,8EAA8E;AAC9E,wEAAwE;AACxE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAsB,EAAE,KAA4B,EAAU,EAAE;;IAC3F,OAAO,CAAA,MAAA,MAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,0CAAE,UAAU,0CAAE,KAAK,KAAI,EAAE,CAAC;AAChE,CAAC,CAAC;AAEF,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"}
+{"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"}

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

@@ -1,13 +1,28 @@
 /// <reference types="react" />
-import { CommunicationParticipant, DefaultMessageRendererType, MessageProps } from "../../../../react-components/src";
+import { CommunicationParticipant, MessageProps, MessageRenderer, ParticipantMenuItemsCallback, MessageThreadStyles, SendBoxStylesProps, TypingIndicatorStylesProps } from "../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../common/AvatarPersona';
+import { ChatCompositeOptions } from './ChatComposite';
+/**
+ * @private
+ */
 export declare type ChatScreenProps = {
-    showErrorBar?: boolean;
-    showParticipantPane?: boolean;
-    showTopic?: boolean;
+    options?: ChatCompositeOptions;
     onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
-    onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: DefaultMessageRendererType) => JSX.Element;
+    onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;
     onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;
+    onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
+    styles?: ChatScreenStyles;
 };
+/**
+ * @private
+ */
+export declare type ChatScreenStyles = {
+    messageThread?: MessageThreadStyles;
+    sendBox?: SendBoxStylesProps;
+    typingIndicator?: TypingIndicatorStylesProps;
+};
+/**
+ * @private
+ */
 export declare const ChatScreen: (props: ChatScreenProps) => JSX.Element;
 //# sourceMappingURL=ChatScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatScreen.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":";AAKA,OAAO,EACL,wBAAwB,EACxB,0BAA0B,EAE1B,YAAY,EAKb,yCAAmC;AAepC,OAAO,EAAE,yBAAyB,EAAiB,MAAM,yBAAyB,CAAC;AAGnF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,yBAAyB,CAAC;IACrD,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,eAAe,CAAC,EAAE,0BAA0B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5G,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,wBAAwB,EAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACpF,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,WA2EnD,CAAC"}
+{"version":3,"file":"ChatScreen.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":";AAIA,OAAO,EACL,wBAAwB,EAExB,YAAY,EACZ,eAAe,EAIf,4BAA4B,EAC5B,mBAAmB,EACnB,kBAAkB,EAClB,0BAA0B,EAC3B,yCAAmC;AAEpC,OAAO,EAAiB,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAevD;;GAEG;AACH,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,wBAAwB,CAAC,EAAE,yBAAyB,CAAC;IACrD,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,eAAe,CAAC,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,wBAAwB,EAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACnF,2BAA2B,CAAC,EAAE,4BAA4B,CAAC;IAC3D,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,oBAAY,gBAAgB,GAAG;IAC7B,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,eAAe,CAAC,EAAE,0BAA0B,CAAC;CAC9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,WAsEnD,CAAC"}

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

@@ -1,47 +1,46 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles, Stack } from '@fluentui/react';
+import { ErrorBar, MessageThread, SendBox, TypingIndicator } from "../../../../react-components/src";
 import React, { useCallback, useEffect } from 'react';
-import { ErrorBar, MessageThread, ParticipantList, SendBox, TypingIndicator } from "../../../../react-components/src";
+import { AvatarPersona } from '../common/AvatarPersona';
 import { useAdapter } from './adapter/ChatAdapterProvider';
+import { ChatHeader, getHeaderProps } from './ChatHeader';
 import { useAdaptedSelector } from './hooks/useAdaptedSelector';
 import { usePropsFor } from './hooks/usePropsFor';
-import { ChatHeader, getHeaderProps } from './ChatHeader';
-import { chatContainer, chatWrapper, chatArea, participantListWrapper, listHeader, participantListStack, participantListStyle, participantListContainerPadding } from './styles/Chat.styles';
-import { AvatarPersona } from '../common/AvatarPersona';
-import { useLocale } from '../localization';
+import { chatArea, chatContainer, chatWrapper, participantListContainerPadding, messageThreadChatCompositeStyles, sendBoxChatCompositeStyles, typingIndicatorChatCompositeStyles, typingIndicatorContainerStyles } from './styles/Chat.styles';
+/**
+ * @private
+ */
 export const ChatScreen = (props) => {
-    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, showParticipantPane, showTopic } = props;
+    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, 
+    // onFetchParticipantMenuItems,  // Removed for GA release
+    options, styles } = props;
     const defaultNumberOfChatMessagesToReload = 5;
     const sendBoxParentStyle = mergeStyles({ width: '100%' });
     const adapter = useAdapter();
     useEffect(() => {
         adapter.fetchInitialData();
     }, [adapter]);
-    const locale = useLocale();
-    const chatListHeader = locale.strings.chat.chatListHeader;
     const messageThreadProps = usePropsFor(MessageThread);
-    const participantListProps = usePropsFor(ParticipantList);
     const sendBoxProps = usePropsFor(SendBox);
     const typingIndicatorProps = usePropsFor(TypingIndicator);
     const headerProps = useAdaptedSelector(getHeaderProps);
     const errorBarProps = usePropsFor(ErrorBar);
-    const onRenderAvatarCallback = useCallback((userId, options) => {
-        return React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: onFetchAvatarPersonaData }));
+    const onRenderAvatarCallback = useCallback((userId, defaultOptions) => {
+        return (React.createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
     }, [onFetchAvatarPersonaData]);
+    const sendBoxStyles = Object.assign({}, sendBoxChatCompositeStyles, styles === null || styles === void 0 ? void 0 : styles.sendBox);
+    const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles, styles === null || styles === void 0 ? void 0 : styles.messageThread);
+    const typingIndicatorStyles = Object.assign({}, typingIndicatorChatCompositeStyles, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
     return (React.createElement(Stack, { className: chatContainer, grow: true },
-        !!showTopic && React.createElement(ChatHeader, Object.assign({}, headerProps)),
+        (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 },
-                props.showErrorBar ? React.createElement(ErrorBar, Object.assign({}, errorBarProps)) : React.createElement(React.Fragment, null),
-                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload })),
-                React.createElement(Stack.Item, { align: "center", className: sendBoxParentStyle },
-                    React.createElement("div", { style: { paddingLeft: '0.5rem', paddingRight: '0.5rem' } }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps)))),
-                    React.createElement(SendBox, Object.assign({}, sendBoxProps)))),
-            showParticipantPane && (React.createElement(Stack.Item, { className: participantListWrapper },
-                React.createElement(Stack, { className: participantListStack },
-                    React.createElement(Stack.Item, { className: listHeader }, chatListHeader),
-                    React.createElement(Stack.Item, { className: participantListStyle },
-                        React.createElement(ParticipantList, Object.assign({}, participantListProps, { onRenderAvatar: (userId, options) => (React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { dataProvider: onFetchAvatarPersonaData }))) })))))))));
+                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React.createElement(ErrorBar, Object.assign({}, errorBarProps)),
+                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                React.createElement(Stack, { className: sendBoxParentStyle },
+                    React.createElement("div", { className: mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
+                    React.createElement(SendBox, Object.assign({}, sendBoxProps, { styles: sendBoxStyles })))))));
 };
 //# sourceMappingURL=ChatScreen.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+/**
+ * Strings used by the {@link ChatComposite} directly.
+ *
+ * This strings are in addition to those used by the components from the component library.
+ *
+ * @public
+ */
+export interface ChatCompositeStrings {
+    /**
+     * Chat list header text
+     */
+    chatListHeader: string;
+}
+//# sourceMappingURL=Strings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Strings.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/Strings.tsx"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;CACxB"}

package/dist/dist-esm/react-composites/src/composites/{MeetingComposite/adapter/MeetingAdapter.js → ChatComposite/Strings.js}

@@ -1,4 +1,4 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 export {};
-//# sourceMappingURL=MeetingAdapter.js.map
+//# sourceMappingURL=Strings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC"}