move Chat component logic to separate file (microsoft#1000)

### Motivation and Context

<!-- Thank you for your contribution to the chat-copilot 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.
-->

1. Why is this change required?
   - This change is required to improve the modularity and readability.

2. What problem does it solve?
- This change reduces the complexity of the app.tsx file by isolating
the `<Chat />` component into its own file.

3. What scenario does it contribute to?

- This contributes to scenarios where developers need to work on or
debug the `<Chat/>` component independently of the main app logic. It
also makes it easier for new developers to understand the structure of
the application.

4. If it fixes an open issue, please link to the issue here.

   - Not applicable/This PR does not address a specific open issue.

### Description

<!-- Describe your changes, the overall approach, the underlying design.
These notes will help understanding how your code works. Thanks! -->

In this PR, I have created a new file named `Chat.tsx` and moved the
relevant JSX and TypeScript code from app.tsx into this new component
file. The main goals were to enhance modularity and readability. Here
are some specifics:

- File Creation: A new file Chat.tsx was created.
- Code Migration: Logic specific to `<Chat />` was moved from app.tsx to
the new file.
- Testing: Ensured that the application behaves as expected after the
component migration. No functionality has been altered, only
restructured.
- Imports/Exports: Updated import statements in app.tsx to reflect the
change.

### 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/chat-copilot/blob/main/CONTRIBUTING.md)
and the [pre-submission formatting
script](https://github.com/microsoft/chat-copilot/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 😄

webapp/src/App.tsx

@@ -5,9 +5,8 @@ import { FluentProvider, Subtitle1, makeStyles, shorthands, tokens } from '@flue
 
 import * as React from 'react';
 import { useEffect } from 'react';
-import { UserSettingsMenu } from './components/header/UserSettingsMenu';
-import { PluginGallery } from './components/open-api-plugins/PluginGallery';
-import { BackendProbe, ChatView, Error, Loading, Login } from './components/views';
+import Chat from './components/chat/Chat';
+import { Loading, Login } from './components/views';
 import { AuthHelper } from './libs/auth/AuthHelper';
 import { useChat, useFile } from './libs/hooks';
 import { AlertType } from './libs/models/AlertType';
@@ -47,7 +46,7 @@ export const useClasses = makeStyles({
     },
 });
 
-enum AppState {
+export enum AppState {
     ProbeForBackend,
     SettingUserInfo,
     ErrorLoadingChats,
@@ -157,55 +156,4 @@ const App = () => {
     );
 };
 
-const Chat = ({
-    classes,
-    appState,
-    setAppState,
-}: {
-    classes: ReturnType<typeof useClasses>;
-    appState: AppState;
-    setAppState: (state: AppState) => void;
-}) => {
-    const onBackendFound = React.useCallback(() => {
-        setAppState(
-            AuthHelper.isAuthAAD()
-                ? // if AAD is enabled, we need to set the active account before loading chats
-                  AppState.SettingUserInfo
-                : // otherwise, we can load chats immediately
-                  AppState.LoadingChats,
-        );
-    }, [setAppState]);
-    return (
-        <div className={classes.container}>
-            <div className={classes.header}>
-                <Subtitle1 as="h1">Chat Copilot</Subtitle1>
-                {appState > AppState.SettingUserInfo && (
-                    <div className={classes.cornerItems}>
-                        <div className={classes.cornerItems}>
-                            <PluginGallery />
-                            <UserSettingsMenu
-                                setLoadingState={() => {
-                                    setAppState(AppState.SigningOut);
-                                }}
-                            />
-                        </div>
-                    </div>
-                )}
-            </div>
-            {appState === AppState.ProbeForBackend && <BackendProbe onBackendFound={onBackendFound} />}
-            {appState === AppState.SettingUserInfo && (
-                <Loading text={'Hang tight while we fetch your information...'} />
-            )}
-            {appState === AppState.ErrorLoadingUserInfo && (
-                <Error text={'Unable to load user info. Please try signing out and signing back in.'} />
-            )}
-            {appState === AppState.ErrorLoadingChats && (
-                <Error text={'Unable to load chats. Please try refreshing the page.'} />
-            )}
-            {appState === AppState.LoadingChats && <Loading text="Loading chats..." />}
-            {appState === AppState.Chat && <ChatView />}
-        </div>
-    );
-};
-
 export default App;

webapp/src/components/chat/Chat.tsx

@@ -0,0 +1,59 @@
+import { Subtitle1 } from '@fluentui/react-components';
+import React from 'react';
+import { AuthHelper } from '../..//libs/auth/AuthHelper';
+import { AppState, useClasses } from '../../App';
+import { UserSettingsMenu } from '../header/UserSettingsMenu';
+import { PluginGallery } from '../open-api-plugins/PluginGallery';
+import { BackendProbe, ChatView, Error, Loading } from '../views';
+
+const Chat = ({
+    classes,
+    appState,
+    setAppState,
+}: {
+    classes: ReturnType<typeof useClasses>;
+    appState: AppState;
+    setAppState: (state: AppState) => void;
+}) => {
+    const onBackendFound = React.useCallback(() => {
+        setAppState(
+            AuthHelper.isAuthAAD()
+                ? // if AAD is enabled, we need to set the active account before loading chats
+                  AppState.SettingUserInfo
+                : // otherwise, we can load chats immediately
+                  AppState.LoadingChats,
+        );
+    }, [setAppState]);
+    return (
+        <div className={classes.container}>
+            <div className={classes.header}>
+                <Subtitle1 as="h1">Chat Copilot</Subtitle1>
+                {appState > AppState.SettingUserInfo && (
+                    <div className={classes.cornerItems}>
+                        <div className={classes.cornerItems}>
+                            <PluginGallery />
+                            <UserSettingsMenu
+                                setLoadingState={() => {
+                                    setAppState(AppState.SigningOut);
+                                }}
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+            {appState === AppState.ProbeForBackend && <BackendProbe onBackendFound={onBackendFound} />}
+            {appState === AppState.SettingUserInfo && (
+                <Loading text={'Hang tight while we fetch your information...'} />
+            )}
+            {appState === AppState.ErrorLoadingUserInfo && (
+                <Error text={'Unable to load user info. Please try signing out and signing back in.'} />
+            )}
+            {appState === AppState.ErrorLoadingChats && (
+                <Error text={'Unable to load chats. Please try refreshing the page.'} />
+            )}
+            {appState === AppState.LoadingChats && <Loading text="Loading chats..." />}
+            {appState === AppState.Chat && <ChatView />}
+        </div>
+    );
+};
+export default Chat;