🚀 Adding new app state to handle user info (microsoft#145)

### Motivation and Context

<!-- Thank you for your contribution to the copilot-chat repo!
Please help reviewers and future users, providing the following
information:
  1. Why is this change required?
  2. What problem does it solve?
  3. What scenario does it contribute to?
  4. If it fixes an open issue, please link to the issue here.
-->

Added new app state for setting user info, refactored app views, and
added shared styles for informative views.

This is a fix for a bug where the webapp would get stuck on the Loading
Chats page. Something with SSO caused this.

### Description

<!-- Describe your changes, the overall approach, the underlying design.
These notes will help understanding how your code works. Thanks! -->
- The App component now transitions to a SettingUserInfo state after
successfully discovering the backend, and then to the LoadingChats state
after successfully setting the active user info.
- The user info status text in the App component has been updated to
display a default message while fetching user information, and an error
component has been added to display an error message at view level.
- A new useSharedClasses hook has been added to provide a set of shared
styles for informative views.
- The BackendProbe component has also been updated to use the shared
informativeView class.
- Added tesseract data files to gitignore

### Contribution Checklist

<!-- Before submitting this PR, please make sure: -->

- [x] The code builds clean without any errors or warnings
- [x] The PR follows the [Contribution
Guidelines](https://github.com/microsoft/copilot-chat/blob/main/CONTRIBUTING.md)
and the [pre-submission formatting
script](https://github.com/microsoft/copilot-chat/blob/main/CONTRIBUTING.md#development-scripts)
raises no violations
~~- [ ] All unit tests pass, and I have added new tests where possible~~
- [x] I didn't break anyone 😄

.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,8 @@ export const useClasses = makeStyles({
 
 enum AppState {
     ProbeForBackend,
+    SettingUserInfo,
+    ErrorLoadingUserInfo,
     LoadingChats,
     Chat,
     SigningOut,
@@ -70,21 +68,24 @@ const App: FC = () => {
 
     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) {
+                        setAppState(AppState.ErrorLoadingUserInfo);
+                    } 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 +144,16 @@ const App: FC = () => {
                         <BackendProbe
                             uri={process.env.REACT_APP_BACKEND_URI as string}
                             onBackendFound={() => {
-                                setAppState(AppState.LoadingChats);
+                                setAppState(AppState.SettingUserInfo);
                             }}
                         />
                     )}
+                    {appState === AppState.SettingUserInfo && (
+                        <Loading text={'Hang tight while we fetch your information...'} />
+                    )}
+                    {appState === AppState.ErrorLoadingUserInfo && (
+                        <Error text={'Oops, something went wrong. Please try signing out and signing back in.'} />
+                    )}
                     {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',