feat: render cta for unsupported content

packages/mgt-chat/package.json

@@ -51,7 +51,7 @@
     "@fluentui/react": "~8.106.1",
     "@fluentui/react-northstar": "^0.66.4",
     "@fluentui/react-components": "^9.19.1",
-    "@fluentui/react-icons": "^2.0.200",
+    "@fluentui/react-icons": "^2.0.210",
     "@microsoft/mgt-element": "*",
     "@microsoft/mgt-components": "*",
     "@microsoft/mgt-msal2-provider": "*",

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

@@ -1,14 +1,25 @@
-import React, { useEffect, useState } from 'react';
-import { ErrorBar, FluentThemeProvider, MessageThread, SendBox } from '@azure/communication-react';
-import { Person, PersonCardInteraction, Spinner } from '@microsoft/mgt-react';
+import {
+  ErrorBar,
+  FluentThemeProvider,
+  MessageProps,
+  MessageRenderer,
+  MessageThread,
+  SendBox
+} from '@azure/communication-react';
 import { FluentTheme, MessageBarType } from '@fluentui/react';
 import { FluentProvider, makeStyles, shorthands, teamsLightTheme } from '@fluentui/react-components';
+import { Person, PersonCardInteraction, Spinner } from '@microsoft/mgt-react';
+import React, { useEffect, useState } from 'react';
+import { renderToString } from 'react-dom/server';
 import { useGraphChatClient } from '../../statefulClient/useGraphChatClient';
+import { isChatMessage, isGraphChatMessage } from '../../utils/types';
 import ChatHeader from '../ChatHeader/ChatHeader';
-import ChatMessageBar from '../ChatMessageBar/ChatMessageBar';
-import { registerAppIcons } from '../styles/registerIcons';
 import { ManageChatMembers } from '../ManageChatMembers/ManageChatMembers';
+import UnsupportedContent from '../UnsupportedContent/UnsupportedContent';
+import { registerAppIcons } from '../styles/registerIcons';
 import { StatefulGraphChatClient } from 'src/statefulClient/StatefulGraphChatClient';
+import ChatMessageBar from '../ChatMessageBar/ChatMessageBar';
+import produce from 'immer';
 
 registerAppIcons();
 
@@ -56,6 +67,19 @@ export const Chat = ({ chatId }: IMgtChatProps) => {
     };
   }, [chatClient]);
 
+  const onRenderMessage = (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => {
+    const message = messageProps?.message;
+    if (isGraphChatMessage(message) && message?.hasUnsupportedContent) {
+      const unsupportedContentComponent = <UnsupportedContent targetUrl={message.rawChatUrl} />;
+      messageProps = produce(messageProps, (draft: MessageProps) => {
+        if (isChatMessage(draft.message)) {
+          draft.message.content = renderToString(unsupportedContentComponent);
+        }
+      });
+    }
+
+    return defaultOnRender ? defaultOnRender(messageProps) : <></>;
+  };
   const isLoading = ['creating server connections', 'subscribing to notifications', 'loading messages'].includes(
     chatState.status
   );
@@ -100,6 +124,7 @@ export const Chat = ({ chatId }: IMgtChatProps) => {
                       <Person userId={userId} avatarSize="small" personCardInteraction={PersonCardInteraction.click} />
                     );
                   }}
+                  onRenderMessage={onRenderMessage}
                 />
               </div>
               <div className={styles.chatInput}>

packages/mgt-chat/src/components/ManageChatMembers/ListChatMembers.tsx

@@ -12,7 +12,7 @@ import { List, ListItem } from '@fluentui/react-northstar';
 import { Person, PersonViewType } from '@microsoft/mgt-react';
 import { AadUserConversationMember } from '@microsoft/microsoft-graph-types';
 import { styles } from './manage-chat-members.styles';
-import { Dismiss24Regular, bundleIcon } from '@fluentui/react-icons';
+import { Dismiss24Regular, Dismiss24Filled, bundleIcon } from '@fluentui/react-icons';
 
 interface ListChatMembersProps {
   currentUserId: string;
@@ -21,7 +21,7 @@ interface ListChatMembersProps {
   closeParentPopover: () => void;
 }
 
-const RemovePerson = bundleIcon(Dismiss24Regular, () => null);
+const RemovePerson = bundleIcon(Dismiss24Filled, Dismiss24Regular);
 
 const ListChatMembers = ({ members, currentUserId, removeChatMember, closeParentPopover }: ListChatMembersProps) => {
   const [removeDialogOpen, setRemoveDialogOpen] = useState(false);

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

@@ -0,0 +1,54 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+import { makeStyles, shorthands } from '@fluentui/react-components';
+import React from 'react';
+import { ArrowSquareUpRight24Regular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  container: {
+    backgroundColor: '#ebebeb',
+    display: 'flex',
+    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('4px 0 0 0'),
+    ...shorthands.borderRadius('6px'),
+    ...shorthands.padding('16px'),
+    ...shorthands.gap('6px'),
+    ':hover': {
+      backgroundColor: '#fafafa'
+    },
+    ':visited': {
+      color: '#424242'
+    }
+  },
+  cta: {
+    fontFamily: 'Segoe UI',
+    fontSize: '12px',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '16px',
+    textDecorationLine: 'none'
+  }
+});
+
+interface UnsupportedContentProps {
+  targetUrl: string;
+}
+
+const UnsupportedContent = (props: UnsupportedContentProps) => {
+  const styles = useStyles();
+  return (
+    // TODO: update this URL to the correct value.
+    <a className={styles.container} target="blank" href={props.targetUrl}>
+      <ArrowSquareUpRight24Regular />
+      <p className={styles.cta}>View this message in Microsoft Teams.</p>
+    </a>
+  );
+};
+
+export default UnsupportedContent;

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

@@ -6,45 +6,47 @@
  */
 
 import {
-  MessageThreadProps,
-  SendBoxProps,
   ChatMessage as AcsChatMessage,
-  ErrorBarProps,
-  SystemMessage,
   ContentSystemMessage,
-  Message
+  ErrorBarProps,
+  Message,
+  MessageThreadProps,
+  SendBoxProps,
+  SystemMessage
 } from '@azure/communication-react';
+import { IDynamicPerson, getUserWithPhoto } from '@microsoft/mgt-components';
+import { ActiveAccountChanged, IGraph, LoginChangedEvent, ProviderState, Providers } from '@microsoft/mgt-element';
 import {
   AadUserConversationMember,
   Chat,
   ChatMessage,
+  ChatMessageAttachment,
   ChatRenamedEventMessageDetail,
   MembersAddedEventMessageDetail,
   MembersDeletedEventMessageDetail
 } from '@microsoft/microsoft-graph-types';
-import { ActiveAccountChanged, IGraph, LoginChangedEvent, Providers, ProviderState } from '@microsoft/mgt-element';
 import { produce } from 'immer';
+import { isChatMessage } from '../utils/types';
 import { v4 as uuid } from 'uuid';
+import { currentUserId } from '../utils/currentUser';
+import { graph } from '../utils/graph';
+import { GraphNotificationClient } from './GraphNotificationClient';
+import { ThreadEventEmitter } from './ThreadEventEmitter';
 import {
+  MessageCollection,
+  addChatMembers,
   deleteChatMessage,
   loadChat,
+  loadChatImage,
   loadChatThread,
   loadMoreChatMessages,
-  MessageCollection,
+  removeChatMember,
   sendChatMessage,
   updateChatMessage,
-  removeChatMember,
-  addChatMembers,
-  loadChatImage,
   updateChatTopic
 } from './graph.chat';
-import { getUserWithPhoto } from '@microsoft/mgt-components';
-import { GraphNotificationClient } from './GraphNotificationClient';
-import { ThreadEventEmitter } from './ThreadEventEmitter';
-import { IDynamicPerson } from '@microsoft/mgt-react';
 import { updateMessageContentWithImage } from './updateMessageContentWithImage';
-import { graph } from '../utils/graph';
-import { currentUserId, getCurrentUser, currentUserName } from '../utils/currentUser';
+import { currentUserName } from '../utils/currentUser';
 import { GraphError } from '@microsoft/microsoft-graph-client';
 
 // 1x1 grey pixel
@@ -144,15 +146,22 @@ type MessageEventType =
   | '#microsoft.graph.membersDeletedEventMessageDetail'
   | '#microsoft.graph.chatRenamedEventMessageDetail';
 
+/**
+ * Extended Message type with additional properties.
+ */
+export type GraphChatMessage = Message & {
+  hasUnsupportedContent: boolean;
+  rawChatUrl: string;
+};
 /**
  * Holder type account for async conversion of messages.
  * Some messages need to be written to the UI immediately and recieve an async update.
  * Some messages do not have a current value and will be added after the future value is resolved.
  * Some messages do not have a future value and will be added immediately.
  */
 type MessageConversion = {
-  currentValue?: Message;
-  futureValue?: Promise<Message>;
+  currentValue?: GraphChatMessage;
+  futureValue?: Promise<GraphChatMessage>;
 };
 
 /**
@@ -449,7 +458,7 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
     this.notifyStateChange((draft: GraphChatClient) => {
       draft.participants = this._chat?.members || [];
       draft.participantCount = draft.participants.length;
-      const initialMessages: Message[] = [];
+      const initialMessages: GraphChatMessage[] = [];
       draft.messages = draft.messages.concat(
         messageConversions
           .map(m => m.currentValue)
@@ -489,7 +498,7 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
       case 'message':
         return this.graphChatMessageToAcsChatMessage(message, this.userId);
       case 'unknownFutureValue':
-        return { futureValue: this.buildSystemContentMessage(message) };
+        return { futureValue: this.buildSystemContentMessage(message) } as MessageConversion;
       default:
         throw new Error(`Unknown message type ${message.messageType?.toString() || 'undefined'}`);
     }
@@ -552,9 +561,10 @@ class StatefulGraphChatClient implements StatefulClient<GraphChatClient> {
         // it's here to help us catch messages we have't handled yet
         default:
           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, no-console
-          console.warn(`Unknown system message type ${eventDetail['@odata.type']}
-
-detail: ${JSON.stringify(eventDetail)}`);
+          console.warn(
+            // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+            `Unknown system message type ${eventDetail['@odata.type']} detail: ${JSON.stringify(eventDetail)}`
+          );
       }
     }
 
@@ -761,7 +771,7 @@ detail: ${JSON.stringify(eventDetail)}`);
       .map(m => this.convertChatMessage(m));
 
     // update the state with the current values
-    const currentValueMessages: Message[] = [];
+    const currentValueMessages: GraphChatMessage[] = [];
     messageConversions
       .map(m => m.currentValue)
       // need to use a reduce here to filter out undefined values in a way that TypeScript understands
@@ -819,11 +829,11 @@ detail: ${JSON.stringify(eventDetail)}`);
    * Update the state with given message either replacing an existing message matching on the id or adding to the list
    *
    * @private
-   * @param {(Message)} [message]
+   * @param {(GraphChatMessage)} [message]
    * @return {*}
    * @memberof StatefulGraphChatClient
    */
-  private updateMessages(message?: Message) {
+  private updateMessages(message?: GraphChatMessage) {
     if (!message) return;
     this.notifyStateChange((draft: GraphChatClient) => {
       const index = draft.messages.findIndex(m => m.messageId === message.messageId);
@@ -906,23 +916,23 @@ detail: ${JSON.stringify(eventDetail)}`);
       index++;
       match = this.graphImageMatch(messageResult);
     }
-    let placeholderMessage = this.buildAcsMessage(
-      graphMessage,
-      currentUser,
-      messageId,
-      messageResult
-    ) as AcsChatMessage;
+    let placeholderMessage = this.buildAcsMessage(graphMessage, currentUser, messageId, messageResult);
     conversion.currentValue = placeholderMessage;
     // local function to update the message with data from each of the resolved image requests
     const updateMessage = async () => {
       await Promise.all(Object.values(futureImages));
       for (const [imageIndex, futureImage] of Object.entries(futureImages)) {
         const image = await futureImage;
-        if (image) {
+        if (image && isChatMessage(placeholderMessage)) {
           placeholderMessage = {
             ...placeholderMessage,
             ...{
-              content: updateMessageContentWithImage(placeholderMessage.content || '', imageIndex, messageId, image)
+              content: updateMessageContentWithImage(
+                placeholderMessage?.content as string,
+                imageIndex,
+                messageId,
+                image
+              )
             }
           };
         }
@@ -954,9 +964,39 @@ detail: ${JSON.stringify(eventDetail)}`);
     return result;
   }
 
-  private buildAcsMessage(graphMessage: ChatMessage, currentUser: string, messageId: string, content: string): Message {
+  private hasUnsupportedContent(content: string, attachments: ChatMessageAttachment[]): boolean {
+    const unsupportedContentTypes = [
+      'application/vnd.microsoft.card.codesnippet',
+      'application/vnd.microsoft.card.fluid',
+      'reference'
+    ];
+    const isUnsupported: boolean[] = [];
+
+    if (attachments.length) {
+      for (const attachment of attachments) {
+        const contentType = attachment?.contentType ?? '';
+        isUnsupported.push(unsupportedContentTypes.includes(contentType));
+      }
+    } else {
+      const unsupportedContentRegex = /<\/?[atchmenbl]+>/gim;
+      const contentUnsupported = Boolean(content) && unsupportedContentRegex.test(content);
+      isUnsupported.push(contentUnsupported);
+    }
+    return isUnsupported.every(e => e === true);
+  }
+
+  private buildAcsMessage(
+    graphMessage: ChatMessage,
+    currentUser: string,
+    messageId: string,
+    content: string
+  ): GraphChatMessage {
     const senderId = graphMessage.from?.user?.id || undefined;
-    let messageData: Message = {
+    const chatId = graphMessage?.chatId ?? '';
+    const chatUrl = `https://teams.microsoft.com/_#/conversations/${chatId}?ctx=chat`;
+    // check content is supported
+    const attachments = graphMessage?.attachments ?? [];
+    let messageData: GraphChatMessage = {
       messageId,
       contentType: graphMessage.body?.contentType ?? 'text',
       messageType: 'chat',
@@ -967,7 +1007,9 @@ detail: ${JSON.stringify(eventDetail)}`);
       senderId,
       mine: senderId === currentUser,
       status: 'seen',
-      attached: 'top'
+      attached: 'top',
+      hasUnsupportedContent: this.hasUnsupportedContent(content, attachments),
+      rawChatUrl: chatUrl
     };
     if (graphMessage?.policyViolation) {
       messageData = Object.assign(messageData, {

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

@@ -0,0 +1,27 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { ChatMessage, Message } from '@azure/communication-react';
+import { GraphChatMessage } from 'src/statefulClient/StatefulGraphChatClient';
+
+/**
+ * A typeguard to get the ChatMessage type
+ * @param msg of Message
+ * @returns ChatMessage
+ */
+export const isChatMessage = (msg: Message): msg is ChatMessage => {
+  return 'content' in msg;
+};
+
+/**
+ * A typeguard to get the GraphChatMessage type
+ * @param msg of Message
+ * @returns GraphChatMessage
+ */
+export const isGraphChatMessage = (msg: Message): msg is GraphChatMessage => {
+  return 'content' in msg && 'hasUnsupportedContent' in msg && 'rawChatUrl' in msg;
+};