feat: handle switching the active account

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

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { ErrorBar, FluentThemeProvider, MessageThread, SendBox } from '@azure/communication-react';
 import { Person, PersonCardInteraction, Spinner } from '@microsoft/mgt-react';
-import { FluentTheme } from '@fluentui/react';
+import { FluentTheme, MessageBarType } from '@fluentui/react';
 import { FluentProvider, makeStyles, shorthands, teamsLightTheme } from '@fluentui/react-components';
 import { useGraphChatClient } from '../../statefulClient/useGraphChatClient';
 import ChatHeader from '../ChatHeader/ChatHeader';
+import ChatMessageBar from '../ChatMessageBar/ChatMessageBar';
 import { registerAppIcons } from '../styles/registerIcons';
 import { ManageChatMembers } from '../ManageChatMembers/ManageChatMembers';
+import { StatefulGraphChatClient } from 'src/statefulClient/StatefulGraphChatClient';
 
 registerAppIcons();
 
@@ -34,24 +36,35 @@ const useStyles = makeStyles({
   },
   fullHeight: {
     height: '100%'
+  },
+  spinner: {
+    justifyContent: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%'
   }
 });
 
 export const Chat = ({ chatId }: IMgtChatProps) => {
   const styles = useStyles();
-  const chatClient = useGraphChatClient(chatId);
+  const chatClient: StatefulGraphChatClient = useGraphChatClient(chatId);
   const [chatState, setChatState] = useState(chatClient.getState());
   useEffect(() => {
     chatClient.onStateChange(setChatState);
     return () => {
       chatClient.offStateChange(setChatState);
     };
   }, [chatClient]);
+
+  const isLoading = ['creating server connections', 'subscribing to notifications', 'loading messages'].includes(
+    chatState.status
+  );
+
   return (
     <FluentThemeProvider fluentTheme={FluentTheme}>
       <FluentProvider theme={teamsLightTheme} className={styles.fullHeight}>
         <div className={styles.chat}>
-          {chatState.userId && chatState.messages.length > 0 ? (
+          {chatState.userId && chatId && chatState.messages.length > 0 ? (
             <>
               <ChatHeader
                 chat={chatState.chat}
@@ -96,8 +109,24 @@ export const Chat = ({ chatId }: IMgtChatProps) => {
             </>
           ) : (
             <>
-              {chatState.status}
-              <Spinner />
+              {isLoading && (
+                <div className={styles.spinner}>
+                  <Spinner /> <br />
+                  {chatState.status}
+                </div>
+              )}
+              {chatState.status === 'initial' && (
+                <ChatMessageBar messageBarType={MessageBarType.info} message={'Select a chat to display messages.'} />
+              )}
+              {chatState.status === 'no messages' && (
+                <ChatMessageBar
+                  messageBarType={MessageBarType.error}
+                  message={`No messages were found for the id ${chatId}.`}
+                />
+              )}
+              {chatState.status === 'no chat id' && (
+                <ChatMessageBar messageBarType={MessageBarType.error} message={'A valid chat id is required.'} />
+              )}
             </>
           )}
         </div>

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { MessageBar, MessageBarType } from '@fluentui/react';
+
+interface ChatMessageBarProps {
+  messageBarType: MessageBarType;
+  message: string;
+}
+
+const ChatMessageBar = ({ messageBarType, message }: ChatMessageBarProps) => {
+  return <MessageBar messageBarType={messageBarType}> {message}</MessageBar>;
+};
+
+export default ChatMessageBar;

packages/mgt-chat/src/components/styles/registerIcons.tsx

@@ -5,6 +5,7 @@ import { buttonIconStyles } from './common.styles';
 
 const registerAppIcons = () => {
   const icons = Object.assign(DEFAULT_COMPONENT_ICONS, {
+    // TODO: Register the info and errorbadge icons
     'add-friend': (
       <svg
         xmlns="http://www.w3.org/2000/svg"

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

@@ -223,12 +223,25 @@ export class GraphNotificationClient {
     }
   }
 
+  public async closeSignalRConnection() {
+    if (this.connection && this.connection?.state === signalR.HubConnectionState.Connected) {
+      await this.connection?.stop();
+    }
+  }
+
+  public async reConnectSignalR() {
+    if (!this.connection) await this.createSignalConnection();
+    if (this.connection?.state === signalR.HubConnectionState.Disconnected) {
+      await this.connection?.start();
+    }
+  }
+
   private async subscribeToResource(
     resourcePath: string,
     eventEmitter: ThreadEventEmitter,
     changeTypes: ChangeTypes[] = ['created', 'updated', 'deleted']
   ) {
-    if (!this.connection) throw new Error('SignalR connection not initialized');
+    if (!this.connection) throw new Error('subscribeToResource: SignalR connection is not initialized');
 
     const token = await this.getToken();