🚀 Adding new app state to handle user info

.gitignore

@@ -483,4 +483,7 @@ webapp/node_modules/
 webapp/public/.well-known*
 
 # Auto-generated solution file from Visual Studio
-webapi/CopilotChatWebApi.sln
+webapi/CopilotChatWebApi.sln
+
+# Tesseract OCR language data files
+*.traineddata

webapp/src/App.tsx

@@ -7,16 +7,12 @@ import * as React from 'react';
 import { FC, useEffect } from 'react';
 import { UserSettingsMenu } from './components/header/UserSettingsMenu';
 import { PluginGallery } from './components/open-api-plugins/PluginGallery';
-import BackendProbe from './components/views/BackendProbe';
-import { ChatView } from './components/views/ChatView';
-import Loading from './components/views/Loading';
-import { Login } from './components/views/Login';
+import { BackendProbe, ChatView, Error, Loading, Login } from './components/views';
 import { useChat } from './libs/hooks';
-import { AlertType } from './libs/models/AlertType';
 import { useAppDispatch, useAppSelector } from './redux/app/hooks';
 import { RootState } from './redux/app/store';
 import { FeatureKeys } from './redux/features/app/AppState';
-import { addAlert, setActiveUserInfo, setServiceOptions } from './redux/features/app/appSlice';
+import { setActiveUserInfo, setServiceOptions } from './redux/features/app/appSlice';
 import { semanticKernelDarkTheme, semanticKernelLightTheme } from './styles';
 
 export const useClasses = makeStyles({
@@ -51,6 +47,7 @@ export const useClasses = makeStyles({
 
 enum AppState {
  ProbeForBackend,
+ SettingUserInfo,
  LoadingChats,
  Chat,
  SigningOut,
@@ -65,26 +62,33 @@ const App: FC = () => {
  const { instance, inProgress } = useMsal();
  const { activeUserInfo, features } = useAppSelector((state: RootState) => state.app);
  const isAuthenticated = useIsAuthenticated();
+ const defaultUserInfoStatusText = 'Hang tight while we fetch your information...';
+ const [userInfoStatusText, setUserInfoStatusText] = React.useState<string>(defaultUserInfoStatusText);
 
  const chat = useChat();
 
  useEffect(() => {
  if (isAuthenticated) {
- let isActiveUserInfoSet = activeUserInfo !== undefined;
- if (!isActiveUserInfoSet) {
- const account = instance.getActiveAccount();
- if (!account) {
- dispatch(addAlert({ type: AlertType.Error, message: 'Unable to get active logged in account.' }));
+ if (appState === AppState.SettingUserInfo) {
+ if (activeUserInfo === undefined) {
+ const account = instance.getActiveAccount();
+ if (!account) {
+ setUserInfoStatusText(
+ 'Oops, something went wrong. Please try signing out and signing back in.',
+ );
+ } else {
+ dispatch(
+ setActiveUserInfo({
+ id: account.homeAccountId,
+ email: account.username, // username in an AccountInfo object is the email address
+ username: account.name ?? account.username,
+ }),
+ );
+ setAppState(AppState.LoadingChats);
+ }
  } else {
- dispatch(
- setActiveUserInfo({
- id: account.homeAccountId,
- email: account.username, // username in an AccountInfo object is the email address
- username: account.name ?? account.username,
- }),
- );
+ setAppState(AppState.LoadingChats);
  }
- isActiveUserInfoSet = true;
  }
 
  if (appState === AppState.LoadingChats) {
@@ -143,10 +147,16 @@ const App: FC = () => {
  <BackendProbe
  uri={process.env.REACT_APP_BACKEND_URI as string}
  onBackendFound={() => {
- setAppState(AppState.LoadingChats);
+ setAppState(AppState.SettingUserInfo);
  }}
  />
  )}
+ {appState === AppState.SettingUserInfo &&
+ (userInfoStatusText === defaultUserInfoStatusText ? (
+ <Loading text={userInfoStatusText} />
+ ) : (
+ <Error text={userInfoStatusText} />
+ ))}
  {appState === AppState.LoadingChats && <Loading text="Loading Chats..." />}
  {appState === AppState.Chat && <ChatView />}
  </div>

webapp/src/components/views/BackendProbe.tsx

@@ -2,13 +2,15 @@
 
 import { Body1, Spinner, Title3 } from '@fluentui/react-components';
 import { FC, useEffect } from 'react';
+import { useSharedClasses } from '../../styles';
 
 interface IData {
  uri: string;
  onBackendFound: () => void;
 }
 
-const BackendProbe: FC<IData> = ({ uri, onBackendFound }) => {
+export const BackendProbe: FC<IData> = ({ uri, onBackendFound }) => {
+ const classes = useSharedClasses();
  useEffect(() => {
  const timer = setInterval(() => {
  const requestUrl = new URL('healthz', uri);
@@ -31,7 +33,7 @@ const BackendProbe: FC<IData> = ({ uri, onBackendFound }) => {
  });
 
  return (
- <div style={{ padding: 80, gap: 20, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+ <div className={classes.informativeView}>
  <Title3>Looking for your backend</Title3>
  <Spinner />
  <Body1>
@@ -45,5 +47,3 @@ const BackendProbe: FC<IData> = ({ uri, onBackendFound }) => {
  </div>
  );
 };
-
-export default BackendProbe;

webapp/src/components/views/Error.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft. All rights reserved.
+
+import { Subtitle2 } from '@fluentui/react-components';
+import { ErrorCircleRegular } from '@fluentui/react-icons';
+import { FC } from 'react';
+import { useSharedClasses } from '../../styles';
+
+interface IErrorProps {
+ text: string;
+}
+
+export const Error: FC<IErrorProps> = ({ text }) => {
+ const classes = useSharedClasses();
+ return (
+ <div className={classes.informativeView}>
+ <ErrorCircleRegular fontSize={36} color="red" />
+ <Subtitle2>{text}</Subtitle2>
+ </div>
+ );
+};

webapp/src/components/views/Loading.tsx

@@ -2,17 +2,17 @@
 
 import { Spinner } from '@fluentui/react-components';
 import { FC } from 'react';
+import { useSharedClasses } from '../../styles';
 
 interface ILoadingProps {
  text: string;
 }
 
-const Loading: FC<ILoadingProps> = ({ text }) => {
+export const Loading: FC<ILoadingProps> = ({ text }) => {
+ const classes = useSharedClasses();
  return (
- <div style={{ padding: 80, alignItems: 'center' }}>
+ <div className={classes.informativeView}>
  <Spinner labelPosition="below" label={text} />
  </div>
  );
 };
-
-export default Loading;

webapp/src/components/views/index.ts

@@ -0,0 +1,6 @@
+export * from './BackendProbe';
+export * from './ChatView';
+export * from './Error';
+export * from './Loading';
+export * from './Login';
+export * from './MissingEnvVariablesError';

webapp/src/styles.tsx

@@ -74,6 +74,17 @@ export const SharedStyles: Record<string, GriffelStyle> = {
  },
 };
 
+export const useSharedClasses = makeStyles({
+ informativeView: {
+ display: 'flex',
+ flexDirection: 'column',
+ ...shorthands.padding('80px'),
+ alignItems: 'center',
+ ...shorthands.gap(tokens.spacingVerticalXL),
+ marginTop: tokens.spacingVerticalXXXL,
+ },
+});
+
 export const useDialogClasses = makeStyles({
  root: {
  height: '515px',