[Chat] Inline Image UI and storybook doc for inline image

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

@@ -2583,6 +2583,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<string>;
     onUpdateMessage?: UpdateMessageCallback;
     onCancelMessageEdit?: CancelEditCallback;
     onDeleteMessage?: (messageId: string) => Promise<void>;

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

@@ -1146,6 +1146,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<string>;
     onUpdateMessage?: UpdateMessageCallback;
     onCancelMessageEdit?: CancelEditCallback;
     onDeleteMessage?: (messageId: string) => Promise<void>;

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

@@ -83,6 +83,18 @@ 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.
+   * @beta
+   */
+  attachmentsMap?: Record<string, string>;
 };
 
 /**
@@ -139,6 +151,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,18 @@ type ChatMessageComponentAsMessageBubbleProps = {
    * @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.
+   * @beta
+   */
+  attachmentsMap?: Record<string, string>;
 };
 
 const generateDefaultTimestamp = (
@@ -210,7 +224,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/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 { 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,44 @@ 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 expectedImgSrc = 'someImgSrcUrl';
+    const sampleMessage: ChatMessage = {
+      messageType: 'chat',
+      senderId: 'user3',
+      content:
+        '<p>Test</p><p><img alt="image" src="" 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<string> => {
+      return attachment.previewUrl ?? '';
+    };
+    const component = mount(
+      <MessageThread userId="user1" messages={[sampleMessage]} onFetchAttachments={onFetchAttachment} />
+    );
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      component.update();
+
+      expect(component.find('img').prop('src')).toEqual(expectedImgSrc);
+    });
+  });
+});

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

@@ -634,6 +634,13 @@ export type MessageThreadProps = {
    * @beta
    */
   onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+  /* @conditional-compile-remove(teams-inline-images) */
+  /**
+   * Optional callback to retrieve the inline image in a message.
+   * @param attachment - FileMetadata object we want to render
+   * @beta
+   */
+  onFetchAttachments?: (attachment: FileMetadata) => Promise<string>;
   /**
    * Optional callback to edit a message.
    *
@@ -795,7 +802,9 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
     onDeleteMessage,
     onSendMessage,
     /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString
+    onDisplayDateTimeString,
+    /* @conditional-compile-remove(teams-inline-images) */
+    onFetchAttachments
   } = props;
   const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
 
@@ -818,6 +827,20 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
   // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
   const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = useState<number | undefined>(undefined);
 
+  /* @conditional-compile-remove(teams-inline-images) */
+  const [inlineAttachments, setInlineAttachments] = useState<Record<string, string>>({});
+  /* @conditional-compile-remove(teams-inline-images) */
+  const onFetchInlineAttachment = useCallback(
+    async (attachment: FileMetadata): Promise<void> => {
+      if (!onFetchAttachments || attachment.id in inlineAttachments) {
+        return;
+      }
+      const url = await onFetchAttachments(attachment);
+      setInlineAttachments((prev) => ({ ...prev, [attachment.id]: url }));
+    },
+    [inlineAttachments, onFetchAttachments]
+  );
+
   const isAllChatMessagesLoadedRef = useRef(false);
   // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
   // onLoadPreviousChatMessages is updated when a new adapter is set
@@ -1079,6 +1102,10 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
             onActionButtonClick={onActionButtonClickMemo}
             /* @conditional-compile-remove(date-time-customization) */
             onDisplayDateTimeString={onDisplayDateTimeString}
+            /* @conditional-compile-remove(teams-inline-images) */
+            onFetchAttachments={onFetchInlineAttachment}
+            /* @conditional-compile-remove(teams-inline-images) */
+            attachmentsMap={inlineAttachments}
           />
         );
       }
@@ -1095,7 +1122,11 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
       showMessageStatus,
       onActionButtonClickMemo,
       /* @conditional-compile-remove(date-time-customization) */
-      onDisplayDateTimeString
+      onDisplayDateTimeString,
+      /* @conditional-compile-remove(teams-inline-images) */
+      onFetchInlineAttachment,
+      /* @conditional-compile-remove(teams-inline-images) */
+      inlineAttachments
     ]
   );