feat: implement ChatList

.gitignore

@@ -54,4 +54,7 @@ workbench.html
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -23,7 +23,7 @@
     "build:react-contoso": "lerna run build --scope react-contoso",
     "bundle": "cd ./packages/mgt && npm run bundle",
     "clean": "lerna run --parallel --stream --scope '@microsoft/*' clean",
-    "lint:eslint": "eslint -c .eslintrc.js --quiet 'packages/*/src/**/*.ts'",
+    "lint:eslint": "eslint -c .eslintrc.js --quiet packages/*/src/**/*.ts",
     "lint:eslint:loud": "eslint -c .eslintrc.js 'packages/*/src/**/*.ts'",
     "lint:styles": "stylelint './packages/mgt-components/**/*.{css,scss}'",
     "lint:fix": "npm run lint:styles -- --fix",
@@ -46,7 +46,7 @@
     "watch:react-library-deps": "lerna run build:watch --parallel --stream --scope @microsoft/mgt-react --include-dependencies",
     "watch:react-library": "lerna run build:watch --scope @microsoft/mgt-react",
     "watch:react-contoso": "lerna run start --scope react-contoso",
-    "watch:react": "npm-run-all --parallel watch:react-library watch:react-library-deps watch:react-contoso",
+    "watch:react": "NODE_OPTIONS=--max_old_space_size=8192 npm-run-all --parallel watch:react-library watch:react-library-deps watch:react-contoso",
     "prettier:base": "prettier --parser typescript",
     "prettier:check": "npm run prettier:base -- --check \"packages/**/*.{ts,tsx}\"",
     "prettier:write": "npm run prettier:base -- --write \"packages/**/*.{ts,tsx}\"",

packages/mgt-chat/package.json

@@ -38,6 +38,7 @@
   "author": "Microsoft",
   "license": "MIT",
   "devDependencies": {
+    "@types/html-to-text": "^9.0.4",
     "@types/react": "^17.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
@@ -64,6 +65,7 @@
     "@microsoft/microsoft-graph-types": "^2.0.0",
     "@microsoft/microsoft-graph-types-beta": "^0.16.0-preview",
     "@microsoft/signalr": "^7.0.4",
+    "html-to-text": "^9.0.5",
     "immer": "^9.0.6",
     "opencrypto": "1.5.5",
     "uuid": "^9.0.0",

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

@@ -1,6 +1,12 @@
 import { FluentThemeProvider, MessageThread, SendBox, MessageThreadStyles } from '@azure/communication-react';
 import { FluentTheme } from '@fluentui/react';
 import { FluentProvider, makeStyles, shorthands, webLightTheme } from '@fluentui/react-components';
+import { v4 as uuid } from 'uuid';
+import { StatefulGraphChatClient } from '../../statefulClient/StatefulGraphChatClient';
+import { useGraphChatClient } from '../../statefulClient/useGraphChatClient';
+import { onRenderMessage } from '../../utils/chat';
+import { renderMGTMention } from '../../utils/mentions';
+import { registerAppIcons } from '../styles/registerIcons';
 import { Spinner } from '@microsoft/mgt-react';
 import { enableMapSet } from 'immer';
 import React, { useEffect, useState } from 'react';
@@ -12,12 +18,7 @@ import { LoadingMessagesErrorIcon } from '../Error/LoadingMessageErrorIcon';
 import { OpenTeamsLinkError } from '../Error/OpenTeams';
 import { RequireValidChatId } from '../Error/RequireAValidChatId';
 import { TypeANewMessage } from '../Error/TypeANewMessage';
-import { registerAppIcons } from '../styles/registerIcons';
 import { BotInfoClient } from '../../statefulClient/BotInfoClient';
-import { StatefulGraphChatClient } from '../../statefulClient/StatefulGraphChatClient';
-import { useGraphChatClient } from '../../statefulClient/useGraphChatClient';
-import { onRenderMessage } from '../../utils/chat';
-import { renderMGTMention } from '../../utils/mentions';
 
 registerAppIcons();
 
@@ -79,7 +80,7 @@ const useStyles = makeStyles({
  */
 const messageThreadStyles: MessageThreadStyles = {
   chatContainer: {
-    '& .ui-box': {
+    '& .uiBox': {
       zIndex: 'unset',
       '& div[data-ui-status]': {
         display: 'inline-flex',
@@ -89,7 +90,7 @@ const messageThreadStyles: MessageThreadStyles = {
     }
   },
   chatMessageContainer: {
-    '& p>.mgt-person-mention,msft-mention': {
+    '& p>.mgtPersonMention,msftMention': {
       display: 'inline-block',
       ...shorthands.marginInline('0px')
     },
@@ -99,7 +100,7 @@ const messageThreadStyles: MessageThreadStyles = {
     }
   },
   myChatMessageContainer: {
-    '& p>.mgt-person-mention,msft-mention': {
+    '& p>.mgtPersonMention,msftMention': {
       display: 'inline-block',
       ...shorthands.marginInline('0px')
     },
@@ -110,24 +111,46 @@ const messageThreadStyles: MessageThreadStyles = {
   }
 };
 
+/**
+ * Provides a stable sessionId for the lifetime of the browser tab.
+ * @returns a string that is either read from session storage or generated and placed in session storage
+ */
+const useSessionId = (): string => {
+  const [sessionId] = useState<string>(() => uuid());
+  return sessionId;
+};
+
 export const Chat = ({ chatId }: IMgtChatProps) => {
   useEffect(() => {
     enableMapSet();
   }, []);
   const styles = useStyles();
-  const chatClient: StatefulGraphChatClient = useGraphChatClient(chatId);
+  const chatClient: StatefulGraphChatClient = useGraphChatClient();
   const [botInfoClient] = useState(() => new BotInfoClient());
-  const [chatState, setChatState] = useState(() => chatClient.getState());
+  const [chatState, setChatState] = useState(chatClient.getState());
+  const sessionId = useSessionId();
+
   useEffect(() => {
     chatClient.onStateChange(setChatState);
     return () => {
       chatClient.offStateChange(setChatState);
     };
   }, [chatClient]);
 
-  const isLoading = ['creating server connections', 'subscribing to notifications', 'loading messages'].includes(
-    chatState.status
-  );
+  // when chatId or sessionId changes this effect subscribes or unsubscribes
+  // the component to/from web socket based notifications for the given chatId
+  useEffect(() => {
+    // we must have both a chatId & sessionId to subscribe.
+    if (chatId && sessionId) chatClient.subscribeToChat(chatId, sessionId);
+    else chatClient.setStatus('no chat id');
+  }, [chatId, sessionId, chatClient]);
+
+  const isLoading = [
+    'initial',
+    'creating server connections',
+    'subscribing to notifications',
+    'loading messages'
+  ].includes(chatState.status);
 
   const disabled = !chatId || !!chatState.activeErrorMessages.length;
   const placeholderText = disabled ? 'You cannot send a message' : 'Type a message...';
@@ -191,7 +214,7 @@ export const Chat = ({ chatId }: IMgtChatProps) => {
                   <Error message="No chat id has been provided." subheading={RequireValidChatId}></Error>
                 )}
                 {chatState.status === 'error' && (
-                  <Error message="We're sorry—we've run into an issue.." subheading={OpenTeamsLinkError}></Error>
+                  <Error message="We're sorry—we've run into an issue." subheading={OpenTeamsLinkError}></Error>
                 )}
                 <div className={styles.chatInput}>
                   <SendBox disabled={disabled} onSendMessage={chatState.onSendMessage} strings={{ placeholderText }} />