feat: render adaptive cards

package.json

@@ -162,5 +162,8 @@
   "resolutions": {
     "responselike": "2.0.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@types/markdown-it": "^13.0.2"
+  }
 }

packages/mgt-chat/package.json

@@ -63,8 +63,11 @@
     "@microsoft/microsoft-graph-types": "^2.0.0",
     "@microsoft/microsoft-graph-types-beta": "^0.16.0-preview",
     "@microsoft/signalr": "^7.0.4",
+    "adaptivecards": "^3.0.1",
     "immer": "^9.0.6",
+    "markdown-it": "^13.0.2",
     "opencrypto": "1.5.5",
+    "swiper": "^10.3.1",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },

packages/mgt-chat/src/components/Chat/Chat.tsx

@@ -5,10 +5,10 @@ import { Person, PersonCardInteraction, Spinner } from '@microsoft/mgt-react';
 import React, { useEffect, useState } from 'react';
 import { StatefulGraphChatClient } from '../../statefulClient/StatefulGraphChatClient';
 import { useGraphChatClient } from '../../statefulClient/useGraphChatClient';
-import { onRenderMessage } from '../../utils/chat';
 import ChatHeader from '../ChatHeader/ChatHeader';
 import ChatMessageBar from '../ChatMessageBar/ChatMessageBar';
 import { ManageChatMembers } from '../ManageChatMembers/ManageChatMembers';
+import { onRenderMessage } from '../../utils/onRenderMessage';
 import { renderMGTMention } from '../../utils/mentions';
 import { registerAppIcons } from '../styles/registerIcons';
 

packages/mgt-chat/src/components/UnsupportedContent/UnsupportedContent.tsx

@@ -15,6 +15,7 @@ const useStyles = makeStyles({
     boxShadow: '0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12)',
     textDecorationLine: 'none',
     color: '#424242',
+    alignItems: 'center',
     ...shorthands.margin('18px', '0px', '8px', '0px'),
     ...shorthands.borderRadius('6px'),
     ...shorthands.padding('16px'),

packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts

@@ -14,7 +14,7 @@ import {
   SendBoxProps,
   SystemMessage
 } from '@azure/communication-react';
-import { IDynamicPerson, getUserWithPhoto } from '@microsoft/mgt-components';
+import { getUserWithPhoto } from '@microsoft/mgt-components';
 import {
   ActiveAccountChanged,
   IGraph,
@@ -24,6 +24,7 @@ import {
   log,
   warn
 } from '@microsoft/mgt-element';
+import { IDynamicPerson } from '@microsoft/mgt-react';
 import { GraphError } from '@microsoft/microsoft-graph-client';
 import {
   AadUserConversationMember,
@@ -174,6 +175,7 @@ type MessageEventType =
  * Extended Message type with additional properties.
  */
 export type GraphChatMessage = Message & {
+  attachments?: ChatMessageAttachment[];
   hasUnsupportedContent: boolean;
   rawChatUrl: string;
 };
@@ -626,7 +628,7 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
         // TODO: move this default case to a console.warn before release and emit an empty message
         // it's here to help us catch messages we have't handled yet
         default:
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-call
           warn(`Unknown system message type ${eventDetail['@odata.type']}
 
 detail: ${JSON.stringify(eventDetail)}`);
@@ -882,6 +884,7 @@ detail: ${JSON.stringify(eventDetail)}`);
       // TODO handle the case where there were a lot of missed messages and we ned to get the next page of messages.
       // This is not a common case, but we should handle it.
     }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     log('checked for missed messages');
   };
 
@@ -917,7 +920,6 @@ detail: ${JSON.stringify(eventDetail)}`);
    *
    * @private
    * @param {(GraphChatMessage)} [message]
-   * @return {*}
    * @memberof StatefulGraphChatClient
    */
   private updateMessages(message?: GraphChatMessage) {
@@ -1067,10 +1069,22 @@ detail: ${JSON.stringify(eventDetail)}`);
     return content;
   }
 
+  /**
+   * Checks through a list of attachments if they are supported. It checks
+   * the content if it has unsupported text formats when there are no attachments.
+   * @param content to be rendered.
+   * @param attachments in the chat.
+   * @returns {boolean}
+   */
   private hasUnsupportedContent(content: string, attachments: ChatMessageAttachment[]): boolean {
     const unsupportedContentTypes = [
       'application/vnd.microsoft.card.codesnippet',
       'application/vnd.microsoft.card.fluid',
+      'application/vnd.microsoft.card.list',
+      'application/vnd.microsoft.card.hero',
+      'application/vnd.microsoft.card.o365connector',
+      'application/vnd.microsoft.card.receipt',
+      'application/vnd.microsoft.card.thumbnail',
       'reference'
     ];
     const isUnsupported: boolean[] = [];
@@ -1096,10 +1110,10 @@ detail: ${JSON.stringify(eventDetail)}`);
     content: string
   ): GraphChatMessage {
     const senderId = graphMessage.from?.user?.id || undefined;
+    const attachments = graphMessage?.attachments ?? [];
     const chatId = graphMessage?.chatId ?? '';
     const id = graphMessage?.id ?? '';
     const chatUrl = `https://teams.microsoft.com/l/message/${chatId}/${id}?context={"contextType":"chat"}`;
-    const attachments = graphMessage?.attachments ?? [];
 
     let messageData: GraphChatMessage = {
       messageId,
@@ -1113,6 +1127,7 @@ detail: ${JSON.stringify(eventDetail)}`);
       mine: senderId === currentUser,
       status: 'seen',
       attached: 'top',
+      attachments,
       hasUnsupportedContent: this.hasUnsupportedContent(content, attachments),
       rawChatUrl: chatUrl
     };

packages/mgt-chat/src/utils/onRenderMessage.tsx

@@ -0,0 +1,153 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { MessageProps, MessageRenderer } from '@azure/communication-react';
+import * as AdaptiveCards from 'adaptivecards';
+import MarkdownIt from 'markdown-it';
+import React, { useEffect, useRef } from 'react';
+import { isGraphChatMessage, isActionOpenUrl, isChatMessage } from './types';
+import {
+  IAdaptiveCard,
+  ISubmitAction,
+  IOpenUrlAction,
+  IShowCardAction,
+  IExecuteAction
+} from 'adaptivecards/lib/schema';
+import { ChatMessageAttachment } from '@microsoft/microsoft-graph-types';
+import produce from 'immer';
+import { renderToString } from 'react-dom/server';
+import UnsupportedContent from '../components/UnsupportedContent/UnsupportedContent';
+
+type IAction = ISubmitAction | IOpenUrlAction | IShowCardAction | IExecuteAction;
+
+/**
+ * Props for an adaptive card message.s
+ */
+interface MGTAdaptiveCardProps {
+  attachments: ChatMessageAttachment[];
+  defaultOnRender?: (props: MessageProps) => JSX.Element;
+  messageProps: MessageProps;
+}
+
+/**
+ * Render an adaptive card from the attachments
+ */
+const MGTAdaptiveCard = (msg: MGTAdaptiveCardProps) => {
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  const attachments = msg.attachments;
+  const adaptiveCardAttachment = getAdaptiveCardAttachment(attachments);
+  useEffect(() => {
+    if (adaptiveCardAttachment) {
+      const cardHtmlElement = getHtmlElementFromAttachment(adaptiveCardAttachment);
+      cardRef?.current?.appendChild(cardHtmlElement!);
+    }
+  }, [cardRef, adaptiveCardAttachment]);
+  const defaultOnRender = msg?.defaultOnRender;
+  const messageProps = msg.messageProps;
+  const defaultRender = defaultOnRender ? defaultOnRender(messageProps) : <></>;
+  return adaptiveCardAttachment ? <div ref={cardRef}></div> : defaultRender;
+};
+
+/**
+ * Renders the preferred content depending on whether it is supported.
+ *
+ * @param messageProps final message values from the state.
+ * @param defaultOnRender default component to render content.
+ * @returns
+ */
+const onRenderMessage = (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => {
+  const message = messageProps?.message;
+  if (isGraphChatMessage(message)) {
+    const attachments = message?.attachments ?? [];
+
+    if (message?.hasUnsupportedContent) {
+      const unsupportedContentComponent = <UnsupportedContent targetUrl={message.rawChatUrl} />;
+      messageProps = produce(messageProps, (draft: MessageProps) => {
+        if (isChatMessage(draft.message)) {
+          draft.message.content = renderToString(unsupportedContentComponent);
+        }
+      });
+    } else if (attachments.length) {
+      return (
+        <MGTAdaptiveCard attachments={attachments} defaultOnRender={defaultOnRender} messageProps={messageProps} />
+      );
+    }
+  }
+  return defaultOnRender ? defaultOnRender(messageProps) : <></>;
+};
+
+/**
+ * Filters out the adaptive card attachments.
+ * @param attachments
+ * @returns
+ */
+const getAdaptiveCardAttachment = (attachments: ChatMessageAttachment[]): ChatMessageAttachment | undefined => {
+  for (const att of attachments) {
+    const contentType = att?.contentType ?? '';
+    if (contentType === 'application/vnd.microsoft.card.adaptive') {
+      return att;
+    }
+  }
+  return;
+};
+
+/**
+ * Process the attachment object and return an HTMLElement or nothing.
+ * @param attachment
+ * @returns
+ */
+const getHtmlElementFromAttachment = (attachment: ChatMessageAttachment | undefined): HTMLElement | undefined => {
+  /* eslint-disable
+    @typescript-eslint/no-unsafe-assignment,
+    @typescript-eslint/no-unsafe-member-access,
+    @typescript-eslint/no-unsafe-call, react-hooks/rules-of-hooks */
+  const adaptiveCard = new AdaptiveCards.AdaptiveCard();
+  const adaptiveCardContentString: string = attachment?.content ?? '';
+  const adaptiveCardContent = JSON.parse(adaptiveCardContentString) as IAdaptiveCard;
+
+  // Check if the actions property has OpenUrl actions only
+  const actions = adaptiveCardContent?.actions?.filter(ac => ac.type === 'Action.OpenUrl');
+  if (actions) {
+    // Update actions to only Action.OpenUrl actions.
+    adaptiveCardContent.actions = actions;
+  }
+
+  // Check if the body has actionSet actions and filter for OpenUrl only
+  const actionSetArray = adaptiveCardContent?.body?.filter(ac => Object.values(ac).includes('ActionSet'));
+  if (actionSetArray) {
+    const finalInnerActions = [];
+    for (const actionSet of actionSetArray) {
+      const innerActions = actionSet?.actions as IAction[];
+      const valid = innerActions?.filter(ac => ac?.type === 'Action.OpenUrl');
+      if (valid) finalInnerActions.push(...valid);
+    }
+
+    for (const b of adaptiveCardContent?.body ?? []) {
+      if (Object.values(b).includes('ActionSet')) {
+        b.actions = finalInnerActions;
+      }
+    }
+  }
+
+  // markdown support
+  AdaptiveCards.AdaptiveCard.onProcessMarkdown = (text: string, result: AdaptiveCards.IMarkdownProcessingResult) => {
+    const md = new MarkdownIt();
+    result.outputHtml = md.render(text);
+    result.didProcess = true;
+  };
+
+  adaptiveCard.parse(adaptiveCardContent);
+  adaptiveCard.onExecuteAction = (action: AdaptiveCards.Action) => {
+    if (isActionOpenUrl(action)) {
+      const url: string = action?.url ?? '';
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  };
+  return adaptiveCard.render();
+};
+
+export { onRenderMessage };

packages/mgt-chat/src/utils/types.ts

@@ -7,11 +7,12 @@
 
 import { ChatMessage, Message } from '@azure/communication-react';
 import { GraphChatMessage } from 'src/statefulClient/StatefulGraphChatClient';
+import { Action, OpenUrlAction } from 'adaptivecards';
 
 /**
  * A typeguard to get the ChatMessage type
  * @param msg of Message
- * @returns ChatMessage
+ * @returns {ChatMessage}
  */
 export const isChatMessage = (msg: Message): msg is ChatMessage => {
   return 'content' in msg;
@@ -20,8 +21,17 @@ export const isChatMessage = (msg: Message): msg is ChatMessage => {
 /**
  * A typeguard to get the GraphChatMessage type
  * @param msg of Message
- * @returns GraphChatMessage
+ * @returns {GraphChatMessage}
  */
 export const isGraphChatMessage = (msg: Message): msg is GraphChatMessage => {
-  return 'content' in msg && 'hasUnsupportedContent' in msg && 'rawChatUrl' in msg;
+  return 'content' in msg && 'hasUnsupportedContent' in msg && 'rawChatUrl' in msg && 'attachments' in msg;
+};
+
+/**
+ * A typeguard to get the OpenUrlAction type
+ * @param o of OpenUrlAction
+ * @returns {OpenUrlAction}
+ */
+export const isActionOpenUrl = (o: Action): o is OpenUrlAction => {
+  return 'url' in o;
 };