[Chat] Update stateful client to return an empty string in failure cases (#4230)

Author: JoshuaLai

change-beta/@azure-communication-react-06134909-f150-4a1a-a093-383e4a9f89bc.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "feature",
+  "workstream": "InlineImages",
+  "comment": "Chat Stateful Client now returns and empty string in cases of errors",
+  "packageName": "@azure/communication-react",
+  "email": "9044372+JoshuaLai@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-06134909-f150-4a1a-a093-383e4a9f89bc.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "feature",
+  "workstream": "InlineImages",
+  "comment": "Chat Stateful Client now returns and empty string in cases of errors",
+  "packageName": "@azure/communication-react",
+  "email": "9044372+JoshuaLai@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/chat-component-bindings/src/messageThreadSelector.ts

@@ -11,7 +11,7 @@ import {
   getUserId
 } from './baseSelectors';
 import { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';
-import { ChatClientState, ChatMessageWithStatus } from '@internal/chat-stateful-client';
+import { ChatClientState, ChatMessageWithStatus, ResourceFetchResult } from '@internal/chat-stateful-client';
 import { memoizeFnAll } from '@internal/acs-ui-common';
 import {
   ChatMessage,
@@ -158,8 +158,8 @@ const processChatMessageContent = (message: ChatMessageWithStatus): string | und
       document.querySelectorAll('img').forEach((img) => {
         const attachmentPreviewUrl = attachments.find((attachment) => attachment.id === img.id)?.previewUrl;
         if (attachmentPreviewUrl) {
-          const src = message.resourceCache?.[attachmentPreviewUrl].sourceUrl ?? '';
-          img.src = src;
+          const resourceCache = message.resourceCache?.[attachmentPreviewUrl];
+          img.src = getResourceSourceUrl(resourceCache);
         }
       });
       content = document.body.innerHTML;
@@ -185,13 +185,24 @@ const processChatMessageContent = (message: ChatMessageWithStatus): string | und
 const generateImageAttachmentImgHtml = (message: ChatMessageWithStatus, attachment: ChatAttachment): string => {
   if (attachment.previewUrl !== undefined) {
     const contentType = extractAttachmentContentTypeFromName(attachment.name);
-    const src = message.resourceCache?.[attachment.previewUrl].sourceUrl ?? '';
+    const resourceCache = message.resourceCache?.[attachment.previewUrl];
+    const src = getResourceSourceUrl(resourceCache);
+
     return `\r\n<p><img alt="image" src="${src}" itemscope="${contentType}" id="${attachment.id}"></p>`;
   }
 
   return '';
 };
 
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+const getResourceSourceUrl = (result?: ResourceFetchResult): string => {
+  let src = 'blob://';
+  if (result && result.error === undefined) {
+    src = result.sourceUrl;
+  }
+  return src;
+};
+
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractAttachmentContentTypeFromName = (name?: string): string => {
   if (name === undefined) {

packages/chat-stateful-client/src/ResourceDownloadQueue.test.ts

@@ -7,7 +7,7 @@ import { CommunicationTokenCredential } from '@azure/communication-common';
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 import { ChatContext } from './ChatContext';
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-import { ResourceDownloadError, ResourceDownloadQueue } from './ResourceDownloadQueue';
+import { ResourceDownloadQueue } from './ResourceDownloadQueue';
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 import { messageTemplate } from './mocks/createMockChatThreadClient';
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
@@ -224,8 +224,7 @@ describe('ResourceDownloadQueue api functions', () => {
 
     const queue = new ResourceDownloadQueue(context, tokenCredential);
     const operation = jest.fn();
-    const e = new ResourceDownloadError(first);
-    operation.mockRejectedValueOnce(e);
+    operation.mockRejectedValueOnce(new Error('mock error'));
     queue.addMessage(first);
     queue.addMessage(second);
     queue.addMessage(third);
@@ -282,6 +281,7 @@ describe('ResourceDownloadQueue api functions', () => {
     const resourceCache = context.getState().threads[threadId].chatMessages[messageId].resourceCache;
     expect(resourceCache).toBeDefined();
     expect(resourceCache?.['previewUrl1'].error).toBeDefined();
+    expect(resourceCache?.['previewUrl1'].sourceUrl).toEqual('');
   });
   /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
   test('if operation fails for first item, error should be in the cache only for first item', async () => {
@@ -322,6 +322,7 @@ describe('ResourceDownloadQueue api functions', () => {
     const resourceCache = context.getState().threads[threadId].chatMessages[messageId].resourceCache;
     expect(resourceCache).toBeDefined();
     expect(resourceCache?.['previewUrl1'].error).toBeDefined();
+    expect(resourceCache?.['previewUrl1'].sourceUrl).toEqual('');
     expect(resourceCache?.['previewUrl2'].error).toBeUndefined();
     expect(resourceCache?.['previewUrl3'].error).toBeUndefined();
   });

packages/chat-stateful-client/src/ResourceDownloadQueue.ts

@@ -18,7 +18,6 @@ export class ResourceDownloadQueue {
   private _context: ChatContext;
   private isActive = false;
   private _credential: CommunicationTokenCredential;
-  private _errors: ResourceDownloadError[] = [];
 
   constructor(context: ChatContext, credential: CommunicationTokenCredential) {
     this._context = context;
@@ -41,10 +40,6 @@ export class ResourceDownloadQueue {
     return contains;
   }
 
-  public get errors(): ResourceDownloadError[] {
-    return this._errors;
-  }
-
   public addMessage(message: ChatMessageWithStatus): void {
     // make a copy of message and add to queue
     const copy = { ...message };
@@ -79,7 +74,7 @@ export class ResourceDownloadQueue {
     resourceUrl: string,
     operation: ImageRequest
   ): Promise<ChatMessageWithStatus> {
-    const response: ResourceFetchResult = { sourceUrl: URL.createObjectURL(new Blob()) };
+    const response: ResourceFetchResult = { sourceUrl: '' };
     try {
       const blobUrl = await this.downloadResource(operation, resourceUrl);
       response.sourceUrl = blobUrl;
@@ -102,7 +97,7 @@ export class ResourceDownloadQueue {
       }
       for (const attachment of attachments) {
         if (attachment.previewUrl && attachment.attachmentType === 'image') {
-          const response: ResourceFetchResult = { sourceUrl: URL.createObjectURL(new Blob()) };
+          const response: ResourceFetchResult = { sourceUrl: '' };
           try {
             const blobUrl = await this.downloadResource(operation, attachment.previewUrl);
             response.sourceUrl = blobUrl;
@@ -118,8 +113,7 @@ export class ResourceDownloadQueue {
   }
 
   private async downloadResource(operation: ImageRequest, url: string): Promise<string> {
-    let blobUrl = URL.createObjectURL(new Blob());
-    blobUrl = await operation(url, this._credential);
+    const blobUrl = await operation(url, this._credential);
     return blobUrl;
   }
 }
@@ -164,16 +158,3 @@ export const fetchImageSource = async (src: string, credential: CommunicationTok
 interface ImageRequest {
   (request: string, credential: CommunicationTokenCredential): Promise<string>;
 }
-
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-/**
- * @private
- */
-export class ResourceDownloadError extends Error {
-  public chatMessageWithStatus: ChatMessageWithStatus;
-
-  constructor(chatMessageWithStatus: ChatMessageWithStatus) {
-    super();
-    this.chatMessageWithStatus = chatMessageWithStatus;
-  }
-}