[Chat] Inline Image UI and storybook doc for inline image (#2894)

Author: jimchou-dev

change-beta/@azure-communication-react-19179123-7df2-4a6b-8c88-d3afe59575e4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement inline image attachment for chat UI component",
+  "packageName": "@azure/communication-react",
+  "email": "77021369+jimchou-dev@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-19179123-7df2-4a6b-8c88-d3afe59575e4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement inline image attachment for chat UI component",
+  "packageName": "@azure/communication-react",
+  "email": "77021369+jimchou-dev@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -132,6 +132,12 @@ export type AreParamEqual<A extends (props: any) => JSX.Element | undefined, B e
 // @public
 export type AreTypeEqual<A, B> = A extends B ? (B extends A ? true : false) : false;
 
+// @beta (undocumented)
+export interface AttachmentDownloadResult {
+    // (undocumented)
+    blobUrl: string;
+}
+
 // @public
 export type AvatarPersonaData = {
     text?: string;
@@ -2583,6 +2589,7 @@ export type MessageThreadProps = {
     onLoadPreviousChatMessages?: (messagesToLoad: number) => Promise<boolean>;
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
     onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult>;
     onUpdateMessage?: UpdateMessageCallback;
     onCancelMessageEdit?: CancelEditCallback;
     onDeleteMessage?: (messageId: string) => Promise<void>;

packages/communication-react/src/index.ts

@@ -258,7 +258,8 @@ export type {
   SendBoxErrorBarError,
   FileDownloadHandler,
   FileDownloadError,
-  FileMetadata
+  FileMetadata,
+  AttachmentDownloadResult
 } from '../../react-components/src';
 /* @conditional-compile-remove(teams-inline-images) */
 export type { FileMetadataAttachmentType } from '../../react-components/src';

packages/react-components/review/beta/react-components.api.md

@@ -64,6 +64,12 @@ export type AnnouncerProps = {
     ariaLive: 'off' | 'polite' | 'assertive' | undefined;
 };
 
+// @beta (undocumented)
+export interface AttachmentDownloadResult {
+    // (undocumented)
+    blobUrl: string;
+}
+
 // @public
 export interface BaseCustomStyles {
     root?: IStyle;
@@ -1146,6 +1152,7 @@ export type MessageThreadProps = {
     onLoadPreviousChatMessages?: (messagesToLoad: number) => Promise<boolean>;
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
     onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult>;
     onUpdateMessage?: UpdateMessageCallback;
     onCancelMessageEdit?: CancelEditCallback;
     onDeleteMessage?: (messageId: string) => Promise<void>;

packages/react-components/src/components/ChatMessage/ChatMessageComponent.tsx

@@ -83,6 +83,17 @@ type ChatMessageComponentProps = {
    * @beta
    */
   onDisplayDateTimeString?: (messageDate: Date) => string;
+  /* @conditional-compile-remove(teams-inline-images) */
+  /**
+   * Optional function to fetch attachments.
+   * @beta
+   */
+  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
+  /* @conditional-compile-remove(teams-inline-images) */
+  /**
+   * Optional map of attachment ids to blob urls.
+   */
+  attachmentsMap?: Record<string, string>;
 };
 
 /**
@@ -139,6 +150,10 @@ export const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Elem
         /* @conditional-compile-remove(date-time-customization) */
         onDisplayDateTimeString={props.onDisplayDateTimeString}
         strings={props.strings}
+        /* @conditional-compile-remove(teams-inline-images) */
+        onFetchAttachments={props.onFetchAttachments}
+        /* @conditional-compile-remove(teams-inline-images) */
+        attachmentsMap={props.attachmentsMap}
       />
     );
   }

packages/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx

@@ -15,9 +15,11 @@ import { useIdentifiers } from '../../identifiers/IdentifierProvider';
 import { useTheme } from '../../theming';
 import { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';
 import { ChatMessageContent } from './ChatMessageContent';
+import { ChatMessage } from '../../types/ChatMessage';
+/* @conditional-compile-remove(teams-inline-images) */
+import { FileMetadata } from '../FileDownloadCards';
 /* @conditional-compile-remove(data-loss-prevention) */
 import { BlockedMessageContent } from './ChatMessageContent';
-import { ChatMessage } from '../../types/ChatMessage';
 /* @conditional-compile-remove(data-loss-prevention) */
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
@@ -66,6 +68,16 @@ type ChatMessageComponentAsMessageBubbleProps = {
    * @beta
    */
   onDisplayDateTimeString?: (messageDate: Date) => string;
+  /* @conditional-compile-remove(teams-inline-images) */
+  /**
+   * Optional function to fetch attachments.
+   */
+  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
+  /* @conditional-compile-remove(teams-inline-images) */
+  /**
+   * Optional map of attachment ids to blob urls.
+   */
+  attachmentsMap?: Record<string, string>;
 };
 
 const generateDefaultTimestamp = (
@@ -210,7 +222,14 @@ const MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Ele
     }
     return (
       <div tabIndex={0}>
-        <ChatMessageContent message={message} strings={strings} />
+        <ChatMessageContent
+          message={message}
+          strings={strings}
+          /* @conditional-compile-remove(teams-inline-images) */
+          onFetchAttachment={props.onFetchAttachments}
+          /* @conditional-compile-remove(teams-inline-images) */
+          attachmentsMap={props.attachmentsMap}
+        />
         {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}
       </div>
     );

packages/react-components/src/components/ChatMessage/ChatMessageContent.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { _formatString } from '@internal/acs-ui-common';
-import { Parser } from 'html-to-react';
+import { Parser, ProcessNodeDefinitions, ProcessingInstructions } from 'html-to-react';
 import Linkify from 'react-linkify';
 import { ChatMessage } from '../../types/ChatMessage';
 /* @conditional-compile-remove(data-loss-prevention) */
@@ -13,10 +13,16 @@ import { Link } from '@fluentui/react';
 /* @conditional-compile-remove(data-loss-prevention) */
 import { FontIcon, Stack } from '@fluentui/react';
 import { MessageThreadStrings } from '../MessageThread';
+/* @conditional-compile-remove(teams-inline-images) */
+import { FileMetadata } from '../FileDownloadCards';
 
 type ChatMessageContentProps = {
   message: ChatMessage;
   strings: MessageThreadStrings;
+  /* @conditional-compile-remove(teams-inline-images) */
+  attachmentsMap?: Record<string, string>;
+  /* @conditional-compile-remove(teams-inline-images) */
+  onFetchAttachment?: (attachment: FileMetadata) => Promise<void>;
 };
 
 /* @conditional-compile-remove(data-loss-prevention) */
@@ -32,6 +38,9 @@ type MessageContentWithLiveAriaProps = {
   content: JSX.Element;
 };
 
+const processNodeDefinitions: ProcessNodeDefinitions = new ProcessNodeDefinitions(React);
+const isValidNode = (): boolean => true;
+
 /** @private */
 export const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {
   switch (props.message.contentType) {
@@ -57,14 +66,13 @@ const MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX
 };
 
 const MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {
-  const htmlToReactParser = new Parser();
   const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
   return (
     <MessageContentWithLiveAria
       message={props.message}
       liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}
       ariaLabel={messageContentAriaText(props)}
-      content={htmlToReactParser.parse(props.message.content)}
+      content={processHtmlToReact(props)}
     />
   );
 };
@@ -152,3 +160,63 @@ const messageContentAriaText = (props: ChatMessageContentProps): string | undefi
         })
     : undefined;
 };
+
+type NodeProcessInstruction = {
+  shouldProcessNode: unknown;
+  processNode: unknown;
+};
+
+const processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {
+  const htmlToReactParser = new Parser();
+
+  /* @conditional-compile-remove(teams-inline-images) */
+  const processInlineImage: NodeProcessInstruction = {
+    // Custom <img> processing
+    shouldProcessNode: (node): boolean => {
+      // Process img node with id in attachments list
+      return (
+        node.name &&
+        node.name === 'img' &&
+        node.attribs &&
+        node.attribs.id &&
+        props.message.attachedFilesMetadata?.find((f) => f.id === node.attribs.id)
+      );
+    },
+    processNode: (node, children, index): HTMLElement => {
+      // logic to check id in map/list
+      const fileMetadata = props.message.attachedFilesMetadata?.find((f) => f.id === node.attribs.id);
+      // if in cache, early return
+      if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
+        node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };
+        return processNodeDefinitions.processDefaultNode(node, children, index);
+      }
+      // not yet in cache
+      if (fileMetadata && props.onFetchAttachment && props.attachmentsMap) {
+        props.onFetchAttachment(fileMetadata);
+        if (node.attribs.id in props.attachmentsMap) {
+          node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };
+        }
+      }
+      return processNodeDefinitions.processDefaultNode(node, children, index);
+    }
+  };
+
+  const addProcessingStep = (): NodeProcessInstruction[] => {
+    const steps: NodeProcessInstruction[] = [];
+    /* @conditional-compile-remove(teams-inline-images) */
+    steps.push(processInlineImage);
+    return steps;
+  };
+
+  const processingInstructions: ProcessingInstructions = [
+    ...addProcessingStep(),
+    {
+      shouldProcessNode: (): boolean => {
+        return true;
+      },
+      processNode: processNodeDefinitions.processDefaultNode
+    }
+  ];
+
+  return htmlToReactParser.parseWithInstructions(props.message.content, isValidNode, processingInstructions);
+};

packages/react-components/src/components/FileDownloadCards.tsx

@@ -56,6 +56,14 @@ export interface FileMetadata {
   previewUrl?: string;
 }
 
+/* @conditional-compile-remove(teams-inline-images) */
+/**
+ * @beta
+ */
+export interface AttachmentDownloadResult {
+  blobUrl: string;
+}
+
 /**
  * Strings of _FileDownloadCards that can be overridden.
  *

packages/react-components/src/components/MessageThread.test.tsx

@@ -6,7 +6,13 @@ import { MessageThread } from './MessageThread';
 import { ChatMessage } from '../types';
 /* @conditional-compile-remove(data-loss-prevention) */
 import { BlockedMessage } from '../types';
+/* @conditional-compile-remove(teams-inline-images) */
+import { AttachmentDownloadResult, FileMetadata } from './FileDownloadCards';
+/* @conditional-compile-remove(teams-inline-images) */
+import { act } from 'react-dom/test-utils';
 import Enzyme from 'enzyme';
+/* @conditional-compile-remove(teams-inline-images) */
+import { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { mountWithLocalization, createTestLocale } from './utils/testUtils';
 /* @conditional-compile-remove(date-time-customization) @conditional-compile-remove(data-loss-prevention) */
@@ -146,3 +152,47 @@ describe('Message blocked should display default blocked text correctly', () =>
     expect(component.text()).toContain(testLocale.strings.messageThread.blockedWarningText);
   });
 });
+
+/* @conditional-compile-remove(teams-inline-images) */
+describe('Message should display inline image correctly', () => {
+  test('Message richtext/html img src should be correct', async () => {
+    const expectedBeforeImgSrc = 'urlBeforeSrcReplacement';
+    const expectedImgSrc = 'someImgSrcUrl';
+    const sampleMessage: ChatMessage = {
+      messageType: 'chat',
+      senderId: 'user3',
+      content: `<p>Test</p><p><img alt="image" src="${expectedBeforeImgSrc}" itemscope="png" width="166.5625" height="250" id="SomeImageId1" style="vertical-align:bottom"></p><p>&nbsp;</p>`,
+      senderDisplayName: 'Miguel Garcia',
+      messageId: Math.random().toString(),
+      createdOn: new Date('2019-04-13T00:00:00.000+08:09'),
+      mine: false,
+      attached: false,
+      contentType: 'html',
+      attachedFilesMetadata: [
+        {
+          id: 'SomeImageId1',
+          name: 'SomeImageId1',
+          attachmentType: 'teamsInlineImage',
+          extension: 'png',
+          url: 'images/inlineImageExample1.png',
+          previewUrl: expectedImgSrc
+        }
+      ]
+    };
+    const onFetchAttachment = async (attachment: FileMetadata): Promise<AttachmentDownloadResult> => {
+      return {
+        blobUrl: attachment.previewUrl ?? ''
+      };
+    };
+    const component = mount(
+      <MessageThread userId="user1" messages={[sampleMessage]} onFetchAttachments={onFetchAttachment} />
+    );
+    await act(async () => {
+      expect(component.find('img').prop('src')).toEqual(expectedBeforeImgSrc);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      component.update();
+
+      expect(component.find('img').prop('src')).toEqual(expectedImgSrc);
+    });
+  });
+});