@azure/communication-react 1.5.1-alpha-202304050012 → 1.5.1-alpha-202304070012

package/dist/communication-react.d.ts

@@ -1801,7 +1801,7 @@ export declare type CallErrors = {
  *
  * @public
  */
-export declare type CallErrorTarget = 'Call.addParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant' | /* @conditional-compile-remove(video-background-effects) */ 'VideoEffectsFeature.startEffects' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallAgent.handlePushNotification';
+export declare type CallErrorTarget = 'Call.addParticipant' | 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant' | /* @conditional-compile-remove(video-background-effects) */ 'VideoEffectsFeature.startEffects' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallAgent.handlePushNotification';
 
 /**
  * Callback for {@link CallAdapterSubscribers} 'callIdChanged' event.
@@ -2994,6 +2994,14 @@ export declare interface CameraSitePermissionsProps extends CommonSitePermission
  */
 export declare type CameraSitePermissionsStrings = SitePermissionsStrings;
 
+/**
+ * @public
+ * Callback function run when a message edit is cancelled.
+ */
+export declare type CancelEditCallback = (messageId: string, metadata?: Record<string, string>, options?: {
+    attachedFilesMetadata?: FileMetadata[];
+}) => void;
+
 /**
  * {@link ChatComposite} Adapter interface.
  *
@@ -3001,6 +3009,14 @@ export declare type CameraSitePermissionsStrings = SitePermissionsStrings;
  */
 export declare type ChatAdapter = ChatAdapterThreadManagement & AdapterState<ChatAdapterState> & Disposable & ChatAdapterSubscribers & FileUploadAdapter;
 
+/**
+ * Configuration options to include when creating AzureCommunicationChatAdapter.
+ * @beta
+ */
+export declare type ChatAdapterOptions = {
+    credential?: CommunicationTokenCredential;
+};
+
 /**
  * {@link ChatAdapter} state.
  *
@@ -3413,6 +3429,7 @@ export declare interface ChatMessage extends MessageCommon {
     senderId?: string;
     senderDisplayName?: string;
     status?: MessageStatus;
+    failureReason?: string;
     attached?: MessageAttachedStatus;
     mine?: boolean;
     clientMessageId?: string;
@@ -4311,7 +4328,9 @@ export declare const createAzureCommunicationChatAdapter: ({ endpoint: endpointU
  *
  * @public
  */
-export declare const createAzureCommunicationChatAdapterFromClient: (chatClient: StatefulChatClient, chatThreadClient: ChatThreadClient) => Promise<ChatAdapter>;
+export declare function createAzureCommunicationChatAdapterFromClient(chatClient: StatefulChatClient, chatThreadClient: ChatThreadClient, options?: {
+    credential?: CommunicationTokenCredential;
+}): Promise<ChatAdapter>;
 
 /**
  * Create the default implementation of {@link CallingHandlers} for teams call.
@@ -6091,6 +6110,12 @@ export declare type MessageProps = {
      * @param content - new content of the message
      */
     onUpdateMessage?: UpdateMessageCallback;
+    /**
+     * Optional callback for when a message edit is cancelled.
+     *
+     * @param messageId - message id from chatClient
+     */
+    onCancelMessageEdit?: CancelEditCallback;
     /**
      * Optional callback to delete a message.
      *
@@ -6331,6 +6356,12 @@ export declare type MessageThreadProps = {
      *
      */
     onUpdateMessage?: UpdateMessageCallback;
+    /**
+     * Optional callback for when a message edit is cancelled.
+     *
+     * @param messageId - message id from chatClient
+     */
+    onCancelMessageEdit?: CancelEditCallback;
     /**
      * Optional callback to delete a message.
      *

package/dist/dist-cjs/communication-react/index.js

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202304050012';
+var telemetryVersion = '1.5.1-alpha-202304070012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6348,84 +6348,6 @@ const editBoxStyleSet = {
     }
 };
 
-// Copyright (c) Microsoft Corporation.
-const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
-const onRenderCancelIcon = (color) => {
-    const className = react.mergeStyles(inputBoxIcon, { color });
-    return React__default['default'].createElement(react.Icon, { iconName: 'EditBoxCancel', className: className });
-};
-const onRenderSubmitIcon = (color) => {
-    const className = react.mergeStyles(inputBoxIcon, { color });
-    return React__default['default'].createElement(react.Icon, { iconName: 'EditBoxSubmit', className: className });
-};
-/**
- * @private
- */
-const ChatMessageComponentAsEditBox = (props) => {
-    const { onCancel, onSubmit, strings, message } = props;
-    const [textValue, setTextValue] = React.useState(message.content || '');
-    const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default['default'].useState(getMessageAttachedFilesMetadata(message));
-    const editTextFieldRef = React__default['default'].useRef(null);
-    const theme = useTheme();
-    const messageState = getMessageState(textValue, attachedFilesMetadata !== null && attachedFilesMetadata !== void 0 ? attachedFilesMetadata : []);
-    const submitEnabled = messageState === 'OK';
-    React.useEffect(() => {
-        var _a;
-        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    const setText = (event, newValue) => {
-        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
-    };
-    const textTooLongMessage = messageState === 'too long'
-        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
-        : undefined;
-    const onRenderThemedCancelIcon = React.useCallback(() => onRenderCancelIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
-    const onRenderThemedSubmitIcon = React.useCallback(() => onRenderSubmitIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
-    const editBoxStyles = React.useMemo(() => {
-        return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
-    }, [theme.palette.themePrimary]);
-    const onRenderFileUploads = React.useCallback(() => {
-        return ((attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && (React__default['default'].createElement("div", { style: { margin: '0.25rem' } },
-            React__default['default'].createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map((file) => ({
-                    id: file.name,
-                    filename: file.name,
-                    progress: 1
-                })), onCancelFileUpload: (fileId) => {
-                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
-                } }))));
-    }, [attachedFilesMetadata]);
-    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
-            theme,
-            hasErrorMessage: false,
-            disabled: false
-        })) },
-        React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
-                submitEnabled &&
-                    onSubmit(textValue, message.metadata, {
-                        attachedFilesMetadata
-                    });
-            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
-            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel();
-                }, id: 'dismissIconWrapper' }),
-            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
-                    submitEnabled &&
-                        onSubmit(textValue, message.metadata, {
-                            attachedFilesMetadata
-                        });
-                    e.stopPropagation();
-                }, id: 'submitIconWrapper' })),
-        onRenderFileUploads()));
-};
-const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
-const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
-const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
-// @TODO: Remove when file-sharing feature becomes stable.
-const getMessageAttachedFilesMetadata = (message) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return message.attachedFilesMetadata;
-};
-
 // Copyright (c) Microsoft Corporation.
 const MINIMUM_TOUCH_TARGET_HEIGHT_REM$1 = 3;
 /**
@@ -6522,6 +6444,85 @@ const menuSubIconStyleSet = {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
+const onRenderCancelIcon = (color) => {
+    const className = react.mergeStyles(inputBoxIcon, { color });
+    return React__default['default'].createElement(react.Icon, { iconName: 'EditBoxCancel', className: className });
+};
+const onRenderSubmitIcon = (color) => {
+    const className = react.mergeStyles(inputBoxIcon, { color });
+    return React__default['default'].createElement(react.Icon, { iconName: 'EditBoxSubmit', className: className });
+};
+/**
+ * @private
+ */
+const ChatMessageComponentAsEditBox = (props) => {
+    const { onCancel, onSubmit, strings, message } = props;
+    const [textValue, setTextValue] = React.useState(message.content || '');
+    const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default['default'].useState(getMessageAttachedFilesMetadata(message));
+    const editTextFieldRef = React__default['default'].useRef(null);
+    const theme = useTheme();
+    const messageState = getMessageState(textValue, attachedFilesMetadata !== null && attachedFilesMetadata !== void 0 ? attachedFilesMetadata : []);
+    const submitEnabled = messageState === 'OK';
+    React.useEffect(() => {
+        var _a;
+        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setText = (event, newValue) => {
+        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+    };
+    const textTooLongMessage = messageState === 'too long'
+        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
+        : undefined;
+    const onRenderThemedCancelIcon = React.useCallback(() => onRenderCancelIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
+    const onRenderThemedSubmitIcon = React.useCallback(() => onRenderSubmitIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
+    const editBoxStyles = React.useMemo(() => {
+        return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
+    }, [theme.palette.themePrimary]);
+    const onRenderFileUploads = React.useCallback(() => {
+        return ((attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && (React__default['default'].createElement("div", { style: { margin: '0.25rem' } },
+            React__default['default'].createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map((file) => ({
+                    id: file.name,
+                    filename: file.name,
+                    progress: 1
+                })), onCancelFileUpload: (fileId) => {
+                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
+                } }))));
+    }, [attachedFilesMetadata]);
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
+            theme,
+            hasErrorMessage: message.failureReason !== undefined,
+            disabled: false
+        })) },
+        React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
+                submitEnabled &&
+                    onSubmit(textValue, message.metadata, {
+                        attachedFilesMetadata
+                    });
+            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
+            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                    onCancel && onCancel(message.messageId, message.metadata, { attachedFilesMetadata });
+                }, id: 'dismissIconWrapper' }),
+            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                    submitEnabled &&
+                        onSubmit(textValue, message.metadata, {
+                            attachedFilesMetadata
+                        });
+                    e.stopPropagation();
+                }, id: 'submitIconWrapper' })),
+        message.failureReason && (React__default['default'].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
+        onRenderFileUploads()));
+};
+const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
+const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
+const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
+// @TODO: Remove when file-sharing feature becomes stable.
+const getMessageAttachedFilesMetadata = (message) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return message.attachedFilesMetadata;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -7101,7 +7102,7 @@ const ChatMessageComponent = (props) => {
         if (onDeleteMessage && message.messageId) {
             onDeleteMessage(message.messageId);
         }
-        // when fail to send, message does not have message id, delete message using clientmessageid
+        // when fail to send, message does not have message id, delete message using clientMessageId
         else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {
             onDeleteMessage(clientMessageId);
         }
@@ -7116,7 +7117,8 @@ const ChatMessageComponent = (props) => {
                     message.messageId &&
                     (yield props.onUpdateMessage(message.messageId, text, metadata, options));
                 setIsEditing(false);
-            }), onCancel: () => {
+            }), onCancel: (messageId, metadata, options) => {
+                props.onCancelMessageEdit && props.onCancelMessageEdit(messageId, metadata, options);
                 setIsEditing(false);
             } }));
     }
@@ -7312,13 +7314,14 @@ const DefaultSystemMessage = (props) => {
     }
     return React__default['default'].createElement(React__default['default'].Fragment, null);
 };
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, disableEditing) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const messageProps = {
         message,
         strings,
         showDate: showMessageDate,
         onUpdateMessage,
+        onCancelMessageEdit,
         onDeleteMessage,
         onSendMessage,
         disableEditing
@@ -7412,7 +7415,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  */
 const MessageThread = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, 
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, 
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
@@ -7608,7 +7611,7 @@ const MessageThread = (props) => {
         setLastSendingChatMessage(getLastChatMessageIdWithStatus(newMessages, 'sending'));
     }, [newMessages]);
     /**
-     * This needs to run after messages are rendererd so we can manipulate the scroll bar.
+     * This needs to run after messages are rendered so we can manipulate the scroll bar.
      */
     React.useEffect(() => {
         // If user just sent the latest message then we assume we can move user to bottom of scroll.
@@ -7706,7 +7709,7 @@ const MessageThread = (props) => {
             message.messageType === 'chat' ||
                 /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked'
                 ? message.attached
-                : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
+                : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, props.disableEditing);
         });
     }), [
         messages,
@@ -7724,6 +7727,7 @@ const MessageThread = (props) => {
         readCountForHoveredIndicator,
         onRenderMessage,
         onUpdateMessage,
+        onCancelMessageEdit,
         onDeleteMessage,
         onSendMessage,
         lastSeenChatMessage,
@@ -16867,14 +16871,27 @@ class ChatContext {
  * @private
  */
 class AzureCommunicationChatAdapter {
-    constructor(chatClient, chatThreadClient) {
+    constructor(chatClient, chatThreadClient, 
+    /* @conditional-compile-remove(teams-inline-images) */ options) {
         this.emitter = new EventEmitter__default['default']();
         this.bindAllPublicMethods();
         this.chatClient = chatClient;
         this.chatThreadClient = chatThreadClient;
         this.context = new ChatContext(chatClient.getState(), chatThreadClient.threadId);
-        /* @conditional-compile-remove(file-sharing) */
-        this.fileUploadAdapter = new AzureCommunicationFileUploadAdapter(this.context);
+        /* @conditional-compile-remove(teams-inline-images) */
+        const credential = options === null || options === void 0 ? void 0 : options.credential;
+        /* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images) */
+        let getAuthToken = undefined;
+        /* @conditional-compile-remove(teams-inline-images) */
+        if (credential) {
+            /* @conditional-compile-remove(teams-inline-images) */
+            getAuthToken = () => __awaiter$f(this, void 0, void 0, function* () {
+                const accessToken = yield credential.getToken();
+                return accessToken.token;
+            });
+        }
+        /* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images) */
+        this.fileUploadAdapter = new AzureCommunicationFileUploadAdapter(this.context, getAuthToken);
         const onStateChange = (clientState) => {
             // unsubscribe when the instance gets disposed
             if (!this) {
@@ -17166,7 +17183,10 @@ const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, di
     });
     const chatThreadClient = yield chatClient.getChatThreadClient(threadId);
     yield chatClient.startRealtimeNotifications();
-    const adapter = yield createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient);
+    /* @conditional-compile-remove(teams-inline-images) */
+    const options = { credential: credential };
+    const adapter = yield createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
+    /* @conditional-compile-remove(teams-inline-images) */ options);
     return adapter;
 });
 /**
@@ -17273,9 +17293,14 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$f(void 0, void 0, void 0, function* () {
-    return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
-});
+function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
+/* @conditional-compile-remove(teams-inline-images) */
+options) {
+    return __awaiter$f(this, void 0, void 0, function* () {
+        return new AzureCommunicationChatAdapter(chatClient, chatThreadClient, 
+        /* @conditional-compile-remove(teams-inline-images) */ options);
+    });
+}
 const isChatError = (e) => {
     return e['target'] !== undefined && e['innerError'] !== undefined;
 };
@@ -18574,7 +18599,7 @@ const icon$1 = () => React__default['default'].createElement(reactIcons.MoreHori
  * @private
  */
 const MoreButton = (props) => {
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon$1, onRenderOffIcon: icon$1, onClick: props.onClick, "data-ui-id": 'call-with-chat-composite-more-button' })));
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon$1, onRenderOffIcon: icon$1, onClick: props.onClick, "data-ui-id": 'common-call-composite-more-button' })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -19202,7 +19227,7 @@ const DesktopMoreButton = (props) => {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    return (React__default['default'].createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-more-button", 
+    return (React__default['default'].createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "common-call-composite-more-button", 
         /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems } })));
 };
@@ -19368,7 +19393,7 @@ const CommonCallControlBar = (props) => {
                                         : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                                         return (React__default['default'].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
                                     }),
-                                    props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
+                                    props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
                                     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
                                         /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
                                         !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, 
@@ -19383,7 +19408,7 @@ const CommonCallControlBar = (props) => {
                         _c.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                             return (React__default['default'].createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
                         }),
-                        isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
+                        isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
                         isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton)))))));
 };
 const desktopButtonContainerStyle = {
@@ -20536,6 +20561,7 @@ const MoreDrawer = (props) => {
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton)) {
         drawerMenuItems.push({
             itemKey: 'people',
+            id: 'call-composite-drawer-people-button',
             text: props.strings.peopleButtonLabel,
             iconProps: { iconName: 'MoreDrawerPeople' },
             onItemClick: props.onPeopleButtonClicked,
@@ -20822,7 +20848,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: activePane === 'people', 
                     /* @conditional-compile-remove(one-to-n-calling) */
-                    onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
+                    onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
                     /* @conditional-compile-remove(video-background-effects) */
                     onShowVideoEffectsPicker: setShowVideoEffectsPane }))))),
                 ((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },