feat: render cta for unsupported content

packages/mgt-chat/package.json

@@ -50,7 +50,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,12 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import { ErrorBar, FluentThemeProvider, MessageThread, SendBox } from '@azure/communication-react';
+import { renderToString } from 'react-dom/server';
+import {
+  ErrorBar,
+  FluentThemeProvider,
+  MessageThread,
+  SendBox,
+  MessageProps,
+  MessageRenderer,
+  Message,
+  ChatMessage
+} from '@azure/communication-react';
 import { Person, PersonCardInteraction, Spinner } from '@microsoft/mgt-react';
 import { FluentTheme } from '@fluentui/react';
 import { FluentProvider, makeStyles, shorthands, teamsLightTheme } from '@fluentui/react-components';
 import { useGraphChatClient } from '../../statefulClient/useGraphChatClient';
 import ChatHeader from '../ChatHeader/ChatHeader';
 import { registerAppIcons } from '../styles/registerIcons';
 import { ManageChatMembers } from '../ManageChatMembers/ManageChatMembers';
+import UnsupportedContent from '../UnsupportedContent/UnsupportedContent';
+import { produce } from 'immer';
 
 registerAppIcons();
 
@@ -37,6 +49,19 @@ const useStyles = makeStyles({
   }
 });
 
+/**
+ * A typeguard to get the ChatMessage type
+ * @param msg of Message
+ * @returns ChatMessage
+ */
+const isChatMessage = (msg: Message): msg is ChatMessage => 'content' in msg;
+
+/**
+ * Regex to detect unsupported content tags in content html.
+ */
+const unsupportedContentRegex = /<\/[atchmen]+>/;
+// TODO: ^ update the values to capture as unsupported.
+
 export const Chat = ({ chatId }: IMgtChatProps) => {
   const styles = useStyles();
   const chatClient = useGraphChatClient(chatId);
@@ -47,6 +72,25 @@ export const Chat = ({ chatId }: IMgtChatProps) => {
       chatClient.offStateChange(setChatState);
     };
   }, [chatClient]);
+
+  const onRenderMessage = (messageProps: MessageProps, defaultOnRender?: MessageRenderer): JSX.Element => {
+    if (isChatMessage(messageProps?.message)) {
+      const content = messageProps.message?.content;
+
+      // Test that the content is supported.
+      if (content && unsupportedContentRegex.test(content)) {
+        messageProps = produce(messageProps, (draft: MessageProps) => {
+          // update the content string to the component
+          if (isChatMessage(draft.message)) {
+            draft.message.content = renderToString(<UnsupportedContent />);
+          }
+        });
+      }
+    }
+
+    return defaultOnRender ? defaultOnRender(messageProps) : <></>;
+  };
+
   return (
     <FluentThemeProvider fluentTheme={FluentTheme}>
       <FluentProvider theme={teamsLightTheme} className={styles.fullHeight}>
@@ -87,6 +131,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,52 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * 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 { registerAppIcons } from '../styles/registerIcons';
+import { ArrowSquareUpRight24Regular } from '@fluentui/react-icons';
+registerAppIcons();
+
+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'
+  }
+});
+
+const UnsupportedContent = () => {
+  const styles = useStyles();
+  return (
+    // TODO: update this URL to the correct value.
+    <a className={styles.container} href="https://teams.microsoft.com">
+      <ArrowSquareUpRight24Regular />
+      <p className={styles.cta}>Go back to the main window to see this content.</p>
+    </a>
+  );
+};
+
+export default UnsupportedContent;

yarn.lock

@@ -3516,7 +3516,7 @@
     "@fluentui/styles" "^0.66.4"
     classnames "^2.2.6"
 
-"@fluentui/react-icons@^2.0.196", "@fluentui/react-icons@^2.0.200":
+"@fluentui/react-icons@^2.0.196":
   version "2.0.200"
   resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-2.0.200.tgz#d9aa5e57f1e9b0a9d9f06f368cc73b32922d6a2f"
   integrity sha512-u9hcNIUlxYxCdCD6doNPVzAfxUmfbKd68lIf300O10LZ+Sk5QPI9iFV7uBvAmUqELukWqTmzJ4USMsTeTEUCkw==
@@ -3532,6 +3532,14 @@
     "@griffel/react" "^1.0.0"
     tslib "^2.1.0"
 
+"@fluentui/react-icons@^2.0.210":
+  version "2.0.210"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-2.0.210.tgz#f3b7d6f3d004ae3f0d69bf07623dc337b19c0922"
+  integrity sha512-TPWLYnDYnKWpMclrHDSM/YGRfPfpRJQP3bSPwiOAv9jufT9jsGLJeXplNXjEnptPsSWQwlORk+lPTMWLm3FE5A==
+  dependencies:
+    "@griffel/react" "^1.0.0"
+    tslib "^2.1.0"
+
 "@fluentui/react-icons@~1.1.145":
   version "1.1.145"
   resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-1.1.145.tgz#6a0c81a1aa2632c633b8df5f4d27cc97c398ac82"