feat: render adaptive cards

package.json

@@ -73,6 +73,7 @@
     "@babel/preset-typescript": "^7.23.0",
     "@custom-elements-manifest/analyzer": "^0.8.3",
     "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@fluentui-contrib/react-chat": "^0.1.7",
     "@microsoft/eslint-config-msgraph": "^2.0.0",
     "@octokit/rest": "^18.5.3",
     "@open-wc/testing": "^3.2.0",

packages/mgt-chat/package.json

@@ -38,7 +38,9 @@
   "author": "Microsoft",
   "license": "MIT",
   "devDependencies": {
+    "@types/markdown-it": "^13.0.2",
     "@types/react": "^17.0.0",
+    "adaptivecards-designer": "^2.4.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-scripts": "5.0.1",
@@ -63,8 +65,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,11 +5,11 @@ 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 { onRenderMessage } from '../../utils/onRenderMessage';
 import { renderMGTMention } from '../../utils/mentions';
 import { registerAppIcons } from '../styles/registerIcons';
-import { ChatHeader } from '../ChatHeader/ChatHeader';
 
 registerAppIcons();
 
@@ -23,7 +23,11 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     height: '100%',
     ...shorthands.overflow('auto'),
-    paddingBlockEnd: '12px'
+    paddingBlockEnd: '12px',
+
+    '& p': {
+      ...shorthands.margin('unset')
+    }
   },
   chatMessages: {
     height: 'auto',
@@ -69,6 +73,37 @@ const messageThreadStyles: MessageThreadStyles = {
   chatContainer: {
     '& .ui-box': {
       zIndex: 'unset'
+    },
+    '& .fui-ChatMessage': {
+      marginLeft: 'unset',
+      width: '100%'
+    },
+    '& .fui-ChatMessage__author': {
+      fontWeight: 'var(--fontWeightSemibold)',
+      color: 'var(--colorNeutralForeground1)',
+      ...shorthands.margin('0px', '0px', 'var(--spacingVerticalXL)', '0px')
+    },
+    '& .fui-ChatMessage__timestamp,.fui-ChatMessage__details': {
+      fontWeight: 'var(--fontWeightRegular)',
+      color: 'var(--colorNeutralForeground3)',
+      ...shorthands.margin('0px', '0px', 'var(--spacingVerticalXL)', '0px')
+    },
+    '& .fui-ChatMyMessage': {
+      gridTemplateColumns: 'auto auto',
+      columnGap: 'unset'
+    },
+    '& .fui-ChatMyMessage__body': {
+      background: '#c7e0f4' // No token found for this color, yet.
+    },
+    '& .fui-ChatMyMessage__author': {
+      fontWeight: 'var(--fontWeightSemibold)',
+      color: 'var(--colorNeutralForeground1)',
+      ...shorthands.margin('0px', '0px', 'var(--spacingVerticalXL)', '0px')
+    },
+    '& span.fui-ChatMyMessage__timestamp,.fui-ChatMyMessage__details': {
+      fontWeight: 'var(--fontWeightRegular)',
+      color: 'var(--colorNeutralForeground3)',
+      ...shorthands.margin('0px', '0px', 'var(--spacingVerticalXL)', '0px')
     }
   },
   chatMessageContainer: {

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

@@ -0,0 +1,80 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import React from 'react';
+import { MessageProps, MessageRenderer } from '@azure/communication-react';
+import { getRelativeDisplayDate } from '@microsoft/mgt-components';
+import { messageContainer } from '../../utils/messageContainer';
+import { isChatMessage } from '../../utils/types';
+
+interface MgtMessageContainerProps {
+  messageProps: MessageProps;
+  defaultOnRender?: MessageRenderer;
+}
+
+const MgtMessageContainer = ({ messageProps, defaultOnRender }: MgtMessageContainerProps) => {
+  // TODO: find out how to render emojis
+  // <p>This is <emoji id=\"cool\" alt=\"😎\" title=\"Cool\"></emoji></p>
+  if (isChatMessage(messageProps.message)) {
+    const author = messageProps.message?.senderDisplayName ?? '';
+    const timestamp = getRelativeDisplayDate(new Date(messageProps.message.createdOn));
+    const details = messageProps.message?.status ?? '';
+    const body: string = messageProps.message?.content ?? '';
+    const contentType = messageProps.message.contentType;
+    const Container = messageContainer(messageProps.message);
+
+    console.log(messageProps);
+    switch (contentType) {
+      case 'text':
+        return (
+          <Container author={author} timestamp={timestamp}>
+            {body}
+          </Container>
+        );
+      case 'html':
+      case 'richtext/html': {
+        const bodyContent = processEmojiContent(body);
+        const html = { __html: bodyContent };
+        return (
+          <Container author={author} timestamp={timestamp}>
+            <div dangerouslySetInnerHTML={html}></div>
+          </Container>
+        );
+      }
+      default:
+        return defaultOnRender ? defaultOnRender(messageProps) : <></>;
+    }
+  }
+  return defaultOnRender ? defaultOnRender(messageProps) : <></>;
+};
+
+/**
+ * Regex to detect and extract emoji alt text
+ *
+ * Pattern breakdown:
+ * (<emoji[^>]+): Captures the opening emoji tag, including any attributes.
+ * alt=["'](\w*[^"']*)["']: Matches and captures the "alt" attribute value within single or double quotes. The value can contain word characters but not quotes.
+ * (.*[^>]): Captures any remaining text within the opening emoji tag, excluding the closing tag.
+ * </emoji>: Matches the closing emoji tag.
+ */
+const emojiRegex = /(<emoji[^>]+)alt=["'](\w*[^"']*)["'](.*[^>])<\/emoji>/;
+
+const emojiMatch = (messageContent: string): RegExpMatchArray | null => {
+  return messageContent.match(emojiRegex);
+};
+
+const processEmojiContent = (messageContent: string): string => {
+  let result = messageContent;
+  let match = emojiMatch(result);
+  while (match) {
+    result = result.replace(emojiRegex, '$2');
+    match = emojiMatch(result);
+  }
+  return result;
+};
+
+export default MgtMessageContainer;

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

@@ -0,0 +1,152 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { MessageProps } from '@azure/communication-react';
+import { Action, AdaptiveCard, IMarkdownProcessingResult } from 'adaptivecards';
+import MarkdownIt from 'markdown-it';
+import React, { useEffect, useRef } from 'react';
+import { isChatMessage, isActionOpenUrl } from '../../utils/types';
+import { ChatMessageAttachment } from '@microsoft/microsoft-graph-types';
+import { FluentIcon } from '@fluentui/react-icons/lib/utils/createFluentIcon';
+import { Eye12Filled, Eye12Regular, Send16Filled, Send16Regular, bundleIcon } from '@fluentui/react-icons';
+import {
+  IAdaptiveCard,
+  ISubmitAction,
+  IOpenUrlAction,
+  IShowCardAction,
+  IExecuteAction
+} from 'adaptivecards/lib/schema';
+import { messageContainer } from '../../utils/messageContainer';
+import { getRelativeDisplayDate } from '@microsoft/mgt-components';
+
+type IAction = ISubmitAction | IOpenUrlAction | IShowCardAction | IExecuteAction;
+
+/**
+ * Props for an adaptive card message.s
+ */
+interface MgtAdaptiveCardProps {
+  attachments: ChatMessageAttachment[];
+  defaultOnRender?: (props: MessageProps) => JSX.Element;
+  messageProps: MessageProps;
+}
+
+/**
+ * TODO: find the correct icons, if needed.
+ * Message status icons.
+ */
+const detailsIcons: Record<string, FluentIcon> = {
+  seen: bundleIcon(Eye12Filled, Eye12Regular),
+  delivered: bundleIcon(Eye12Filled, Eye12Regular),
+  sending: bundleIcon(Send16Filled, Send16Regular),
+  failed: bundleIcon(Eye12Filled, Eye12Regular),
+  '': bundleIcon(Eye12Filled, Eye12Regular)
+};
+
+/**
+ * Render an adaptive card from the attachments
+ */
+const MgtAdaptiveCard = (msg: MgtAdaptiveCardProps) => {
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  const attachments = msg.attachments;
+  const adaptiveCardAttachments = getAdaptiveCardAttachments(attachments);
+  useEffect(() => {
+    if (adaptiveCardAttachments.length) {
+      const cardElement = cardRef?.current;
+      // Remove all children before appending the attachment elements
+      while (cardElement?.firstChild) cardElement.removeChild(cardElement?.lastChild as Node);
+      for (const attachment of adaptiveCardAttachments) {
+        const cardHtmlElement = getHtmlElementFromAttachment(attachment);
+        cardElement?.appendChild(cardHtmlElement!);
+      }
+    }
+  }, [cardRef, adaptiveCardAttachments]);
+  const defaultOnRender = msg?.defaultOnRender;
+  const messageProps = msg.messageProps;
+  const defaultRender = defaultOnRender ? defaultOnRender(messageProps) : <></>;
+  const Container = messageContainer(msg.messageProps.message);
+  const author = isChatMessage(msg.messageProps.message) ? msg.messageProps.message?.senderDisplayName : '';
+  const timestamp = getRelativeDisplayDate(new Date(msg.messageProps.message.createdOn));
+  const details = isChatMessage(msg.messageProps.message) ? msg.messageProps.message?.status : '';
+  const DetailsIcon: FluentIcon = detailsIcons[details as string];
+
+  return adaptiveCardAttachments.length ? (
+    <Container author={author} timestamp={timestamp} details={<DetailsIcon />}>
+      <div ref={cardRef}></div>
+    </Container>
+  ) : (
+    defaultRender
+  );
+};
+
+/**
+ * Filters out the adaptive card attachments.
+ * @param attachments
+ * @returns
+ */
+const getAdaptiveCardAttachments = (attachments: ChatMessageAttachment[]): ChatMessageAttachment[] => {
+  const cardAttachments: ChatMessageAttachment[] = [];
+  for (const att of attachments) {
+    const contentType = att?.contentType ?? '';
+    if (contentType === 'application/vnd.microsoft.card.adaptive') {
+      cardAttachments.push(att);
+    }
+  }
+  return cardAttachments;
+};
+
+/**
+ * Process the attachment object and return an HTMLElement or nothing.
+ * @param attachment
+ * @returns
+ */
+const getHtmlElementFromAttachment = (attachment: ChatMessageAttachment | undefined): HTMLElement | undefined => {
+  const adaptiveCard = new 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
+  AdaptiveCard.onProcessMarkdown = (text: string, result: IMarkdownProcessingResult) => {
+    const md = new MarkdownIt();
+    result.outputHtml = md.render(text);
+    result.didProcess = true;
+  };
+
+  adaptiveCard.parse(adaptiveCardContent);
+  adaptiveCard.onExecuteAction = (action: Action) => {
+    if (isActionOpenUrl(action)) {
+      const url: string = action?.url ?? '';
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  };
+  return adaptiveCard.render();
+};
+
+export default MgtAdaptiveCard;

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

@@ -15,7 +15,8 @@ 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',
-    ...shorthands.margin('18px', '0px', '8px', '0px'),
+    alignItems: 'center',
+    ...shorthands.margin('0px', '0px', '2px', '0px'),
     ...shorthands.borderRadius('6px'),
     ...shorthands.padding('16px'),
     ...shorthands.gap('6px'),