@azure/communication-react 1.13.0-alpha-202402080012 → 1.13.0-alpha-202402090012

package/dist/communication-react.d.ts

@@ -10044,6 +10044,10 @@ export declare type StatefulCallClientOptions = {
  * @public
  */
 export declare interface StatefulChatClient extends ChatClient {
+    /**
+     * Cleans up the resource cache from the chat thread client.
+     */
+    dispose(): void;
     /**
      * Holds all the state that we could proxy from ChatClient {@Link @azure/communication-chat#ChatClient} as
      * ChatClientState {@Link ChatClientState}.
@@ -10061,6 +10065,22 @@ export declare interface StatefulChatClient extends ChatClient {
      * @param handler - Original callback to be unsubscribed.
      */
     offStateChange(handler: (state: ChatClientState) => void): void;
+    /**
+     * Downloads a resource for specific message and caches it.
+     *
+     * @param threadId - The thread id of the chat thread.
+     * @param messageId - The message id of the chat message.
+     * @param resourceUrl - The resource url to fetch and cache.
+     */
+    downloadResourceToCache(threadId: string, messageId: string, resourceUrl: string): void;
+    /**
+     * Removes a resource from cache for a specific message.
+     *
+     * @param threadId - The thread id of the chat thread.
+     * @param messageId - The message id of the chat message.
+     * @param resourceUrl - The resource url to remove from cache.
+     */
+    removeResourceFromCache(threadId: string, messageId: string, resourceUrl: string): void;
 }
 
 /**

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

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.13.0-alpha-202402080012';
+var telemetryVersion = '1.13.0-alpha-202402090012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -1809,7 +1809,7 @@ function convertSdkCallToDeclarativeCall(call) {
         },
         /* @conditional-compile-remove(hide-attendee-name) */
         // TODO: Replace this once the SDK supports hide attendee name
-        hideAttendeeNames: true
+        hideAttendeeNames: false
     };
 }
 /**
@@ -10122,12 +10122,19 @@ const chatMessageMenuStyle = react.mergeStyles({
  * @private
  */
 const useChatMessageEditContainerStyles = reactComponents.makeStyles({
-    root: {
-        paddingTop: '1.25rem' //height of the menu button + marginBottom
-    },
-    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), reactComponents.shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), reactComponents.shorthands.borderRadius(reactComponents.tokens.borderRadiusMedium)), reactComponents.shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`)), { 
+    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), reactComponents.shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), reactComponents.shorthands.borderRadius(reactComponents.tokens.borderRadiusMedium)), reactComponents.shorthands.margin('21px', '1px', '1px', '1px')), { 
         // Width should be updated on hover to include the border width change
-        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.margin('0rem')), reactComponents.shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), { width: '100%' }) }),
+        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), reactComponents.shorthands.margin('20px', 0, 0, 0)), { width: '100%' }) }),
+    bodyAttached: {
+        marginBottom: '1px',
+        marginTop: '3px',
+        // Width should be updated on hover to include the border width change
+        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,
+        '&:hover, &:active, &:focus, &:focus-within': {
+            marginTop: '2px',
+            marginBottom: 0
+        }
+    },
     bodyError: Object.assign({}, reactComponents.shorthands.borderColor(errorTextColor)),
     bodyDefault: Object.assign(Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStrokeAccessible)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorCompoundBrandStroke)) })
 });
@@ -10259,11 +10266,11 @@ const ChatMessageComponentAsEditBox = (props) => {
                         }, id: 'submitIconWrapper' }))), /* @conditional-compile-remove(file-sharing) */
             onRenderFileUploads()));
     };
-    const bodyClassName = reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);
-    return (React.createElement(reactChat.ChatMyMessage, { root: {
-            className: reactComponents.mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    return (React.createElement(reactChat.ChatMyMessage, { attached: attached, root: {
+            className: chatMyMessageStyles.root
         }, body: {
-            className: bodyClassName
+            className: reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
         } }, getContent()));
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
@@ -21687,24 +21694,28 @@ class ResourceDownloadQueue {
         const copy = Object.assign({}, message);
         this._messagesNeedingResourceRetrieval.push(copy);
     }
-    startQueue(threadId, operation) {
+    startQueue(threadId, operation, options) {
         return __awaiter$t(this, void 0, void 0, function* () {
             if (this.isActive) {
                 return;
             }
             while (this._messagesNeedingResourceRetrieval.length > 0) {
                 this.isActive = true;
-                const message = this._messagesNeedingResourceRetrieval.shift();
+                let message = this._messagesNeedingResourceRetrieval.shift();
                 if (!message) {
                     this.isActive = false;
                     continue;
                 }
                 try {
-                    const newMessage = yield operation(message, this._credential);
-                    if (newMessage) {
-                        this.isActive = false;
-                        this._context.setChatMessage(threadId, newMessage);
+                    if (options) {
+                        const singleUrl = options.singleUrl;
+                        message = yield this.downloadSingleUrl(message, singleUrl, operation);
                     }
+                    else {
+                        message = yield this.downloadAllPreviewUrls(message, operation);
+                    }
+                    this.isActive = false;
+                    this._context.setChatMessage(threadId, message);
                 }
                 catch (error) {
                     console.log('Downloading Resource error: ', error);
@@ -21712,37 +21723,39 @@ class ResourceDownloadQueue {
             }
         });
     }
-}
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-/**
- * @private
- */
-const requestAttachments = (message, credential) => __awaiter$t(void 0, void 0, void 0, function* () {
-    var _a;
-    const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
-    if (message.type === 'html' && attachments) {
-        if (message.resourceCache === undefined) {
-            message.resourceCache = {};
-        }
-        for (const attachment of attachments) {
-            if (attachment.previewUrl) {
-                const previewUrl = attachment.previewUrl;
-                try {
-                    const src = yield fetchImageSource(previewUrl, credential);
-                    message.resourceCache[previewUrl] = src;
+    downloadSingleUrl(message, resourceUrl, operation) {
+        return __awaiter$t(this, void 0, void 0, function* () {
+            if (message.resourceCache === undefined) {
+                message.resourceCache = {};
+            }
+            const blobUrl = yield operation(resourceUrl, this._credential);
+            message.resourceCache[resourceUrl] = blobUrl;
+            return message;
+        });
+    }
+    downloadAllPreviewUrls(message, operation) {
+        var _a;
+        return __awaiter$t(this, void 0, void 0, function* () {
+            const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
+            if (message.type === 'html' && attachments) {
+                if (message.resourceCache === undefined) {
+                    message.resourceCache = {};
                 }
-                catch (error) {
-                    throw new ResourceDownloadError(message);
+                for (const attachment of attachments) {
+                    if (attachment.previewUrl) {
+                        const blobUrl = yield operation(attachment.previewUrl, this._credential);
+                        message.resourceCache[attachment.previewUrl] = blobUrl;
+                    }
                 }
             }
-        }
+            return message;
+        });
     }
-    return message;
-});
+}
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 /**
  * @private
  */
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const fetchImageSource = (src, credential) => __awaiter$t(void 0, void 0, void 0, function* () {
     function fetchWithAuthentication(url, token) {
         return __awaiter$t(this, void 0, void 0, function* () {
@@ -21761,16 +21774,6 @@ const fetchImageSource = (src, credential) => __awaiter$t(void 0, void 0, void 0
     const blob = yield response.blob();
     return URL.createObjectURL(blob);
 });
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-/**
- * @private
- */
-class ResourceDownloadError extends Error {
-    constructor(chatMessageWithStatus) {
-        super();
-        this.chatMessageWithStatus = chatMessageWithStatus;
-    }
-}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -21787,7 +21790,7 @@ immer.enableMapSet();
 // Needed to generate state diff for verbose logging.
 immer.enablePatches();
 /**
- * @private
+ * @internal
  */
 let ChatContext$1 = class ChatContext {
     constructor(maxListeners, 
@@ -21801,12 +21804,15 @@ let ChatContext$1 = class ChatContext {
         this._batchMode = false;
         this.typingIndicatorInterval = undefined;
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this._messageQueue = undefined;
+        this._inlineImageQueue = undefined;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this._fullsizeImageQueue = undefined;
         this._logger = logger.createClientLogger('communication-react:chat-context');
         this._emitter = new EventEmitter();
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         if (credential) {
-            this._messageQueue = new ResourceDownloadQueue(this, credential);
+            this._inlineImageQueue = new ResourceDownloadQueue(this, credential);
+            this._fullsizeImageQueue = new ResourceDownloadQueue(this, credential);
         }
         if (maxListeners) {
             this._emitter.setMaxListeners(maxListeners);
@@ -21827,6 +21833,52 @@ let ChatContext$1 = class ChatContext {
             this._emitter.emit('stateChanged', this._state);
         }
     }
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    dispose() {
+        this.modifyState((draft) => {
+            Object.keys(draft.threads).forEach((threadId) => {
+                const thread = draft.threads[threadId];
+                Object.keys(thread.chatMessages).forEach((messageId) => {
+                    const cache = thread.chatMessages[messageId].resourceCache;
+                    if (cache) {
+                        Object.keys(cache).forEach((resourceUrl) => {
+                            const blobUrl = cache[resourceUrl];
+                            URL.revokeObjectURL(blobUrl);
+                        });
+                    }
+                    thread.chatMessages[messageId].resourceCache = undefined;
+                });
+            });
+        });
+        // Any item in queue should be removed.
+    }
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    downloadResourceToCache(threadId, messageId, resourceUrl) {
+        this.modifyState((draft) => {
+            var _a;
+            const message = (_a = draft.threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
+            if (message && this._fullsizeImageQueue) {
+                if (!message.resourceCache) {
+                    message.resourceCache = {};
+                }
+                // Need to discuss retry logic in case of failure
+                this._fullsizeImageQueue.addMessage(message);
+                this._fullsizeImageQueue.startQueue(threadId, fetchImageSource, { singleUrl: resourceUrl });
+            }
+        });
+    }
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    removeResourceFromCache(threadId, messageId, resourceUrl) {
+        this.modifyState((draft) => {
+            var _a;
+            const message = (_a = draft.threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
+            if (message && message.resourceCache) {
+                const blobUrl = message.resourceCache[resourceUrl];
+                URL.revokeObjectURL(blobUrl);
+                delete message.resourceCache[resourceUrl];
+            }
+        });
+    }
     setThread(threadId, threadState) {
         this.modifyState((draft) => {
             draft.threads[threadId] = threadState;
@@ -22054,12 +22106,12 @@ let ChatContext$1 = class ChatContext {
         var _a;
         const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
         if (message.type === 'html' && attachments && attachments.length > 0) {
-            if (this._messageQueue &&
-                !this._messageQueue.containsMessageWithSameAttachments(message) &&
+            if (this._inlineImageQueue &&
+                !this._inlineImageQueue.containsMessageWithSameAttachments(message) &&
                 message.resourceCache === undefined) {
                 // Need to discuss retry logic in case of failure
-                this._messageQueue.addMessage(message);
-                this._messageQueue.startQueue(threadId, requestAttachments);
+                this._inlineImageQueue.addMessage(message);
+                this._inlineImageQueue.startQueue(threadId, fetchImageSource);
             }
         }
     }
@@ -22774,6 +22826,21 @@ const _createStatefulChatClientWithDeps = (chatClient, args, options) => {
             eventSubscriber = val;
         }
     });
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    Object.defineProperty(proxy, 'dispose', {
+        configurable: false,
+        value: () => context === null || context === void 0 ? void 0 : context.dispose()
+    });
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    Object.defineProperty(proxy, 'downloadResourceToCache', {
+        configurable: false,
+        value: (threadId, messageId, resourceUrl) => context === null || context === void 0 ? void 0 : context.downloadResourceToCache(threadId, messageId, resourceUrl)
+    });
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    Object.defineProperty(proxy, 'removeResourceFromCache', {
+        configurable: false,
+        value: (threadId, messageId, resourceUrl) => context === null || context === void 0 ? void 0 : context.removeResourceFromCache(threadId, messageId, resourceUrl)
+    });
     Object.defineProperty(proxy, 'getState', {
         configurable: false,
         value: () => context === null || context === void 0 ? void 0 : context.getState()