From 5b9b82012a55918702b5075b664ad26d350aac4a Mon Sep 17 00:00:00 2001
From: Teresa Hoang <125500434+teresaqhoang@users.noreply.github.com>
Date: Fri, 12 May 2023 18:38:17 -0700
Subject: [PATCH] Fixing Copilot Chat UI bugs (#981)

### Motivation and Context
<!-- Thank you for your contribution to the semantic-kernel 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.
-->
This PR contains CSS clean-up and fixes for a number of UI bugs.

Changes include:
- ChatWindow no longer overflows out of window view
- Scrollbars show up as necessary in ChatHistory and ChatList

![image](https://github.com/microsoft/semantic-kernel/assets/125500434/d87f4f7f-f01d-49c1-ace6-bcc11ed3984d)
- Check for valid .env file on start, error screen showed if variables
aren't populated.
-
---
 .../apps/copilot-chat-app/webapp/env.example  |   4 +-
 .../apps/copilot-chat-app/webapp/src/App.tsx  |  68 ++++++------
 .../copilot-chat-app/webapp/src/checkEnv.ts   |  14 +++
 .../src/components/chat/ChatHistory.tsx       |   3 +-
 .../webapp/src/components/chat/ChatInput.tsx  |  26 +++--
 .../webapp/src/components/chat/ChatRoom.tsx   |  23 ++--
 .../webapp/src/components/chat/ChatWindow.tsx |  94 ++++++----------
 .../components/chat/chat-list/ChatList.tsx    | 102 +++++++++---------
 .../webapp/src/components/views/ChatView.tsx  |   7 +-
 .../views/MissingEnvVariablesError.tsx        |  30 ++++++
 .../copilot-chat-app/webapp/src/index.tsx     |  35 ++++--
 11 files changed, 216 insertions(+), 190 deletions(-)
 create mode 100644 samples/apps/copilot-chat-app/webapp/src/checkEnv.ts
 create mode 100644 samples/apps/copilot-chat-app/webapp/src/components/views/MissingEnvVariablesError.tsx

diff --git a/samples/apps/copilot-chat-app/webapp/env.example b/samples/apps/copilot-chat-app/webapp/env.example
index 2795ae07b9bd..46044e088f97 100644
--- a/samples/apps/copilot-chat-app/webapp/env.example
+++ b/samples/apps/copilot-chat-app/webapp/env.example
@@ -1,3 +1,5 @@
 REACT_APP_BACKEND_URI=https://localhost:40443/
 REACT_APP_AAD_AUTHORITY=https://login.microsoftonline.com/common
-REACT_APP_AAD_CLIENT_ID=
\ No newline at end of file
+REACT_APP_AAD_CLIENT_ID=
+
+# If you add any new variables, make sure you update the variables list in the checkEnv.ts file as well.
\ No newline at end of file
diff --git a/samples/apps/copilot-chat-app/webapp/src/App.tsx b/samples/apps/copilot-chat-app/webapp/src/App.tsx
index 0f73fd00ff1f..2ebf65bec009 100644
--- a/samples/apps/copilot-chat-app/webapp/src/App.tsx
+++ b/samples/apps/copilot-chat-app/webapp/src/App.tsx
@@ -22,20 +22,18 @@ import { RootState } from './redux/app/store';
 import { removeAlert } from './redux/features/app/appSlice';
 import { CopilotChatTokens } from './styles';
 
-const useClasses = makeStyles({
+export const useClasses = makeStyles({
     container: {
+        ...shorthands.overflow('hidden'),
         display: 'flex',
         flexDirection: 'column',
         width: '100%',
         height: '100vh',
     },
-    content: {
-        Flex: 'auto',
-    },
     header: {
         backgroundColor: CopilotChatTokens.backgroundColor,
         width: '100%',
-        height: '5.5%',
+        height: '48px',
         color: '#FFF',
         display: 'flex',
         '& h1': {
@@ -119,37 +117,35 @@ const App: FC = () => {
                             />
                         </div>
                     </div>
-                    <div className={classes.content}>
-                        {alerts &&
-                            Object.keys(alerts).map((key) => {
-                                const alert = alerts[key];
-                                return (
-                                    <Alert
-                                        intent={alert.type}
-                                        action={{
-                                            icon: (
-                                                <Dismiss16Regular
-                                                    aria-label="dismiss message"
-                                                    onClick={() => onDismissAlert(key)}
-                                                    color="black"
-                                                />
-                                            ),
-                                        }}
-                                        key={key}
-                                    >
-                                        {alert.message}
-                                    </Alert>
-                                );
-                            })}
-                        {appState === AppState.ProbeForBackend && (
-                            <BackendProbe
-                                uri={process.env.REACT_APP_BACKEND_URI as string}
-                                onBackendFound={() => setAppState(AppState.LoadingChats)}
-                            />
-                        )}
-                        {appState === AppState.LoadingChats && <Spinner labelPosition="below" label="Loading Chats" />}
-                        {appState === AppState.Chat && <ChatView />}
-                    </div>
+                    {alerts &&
+                        Object.keys(alerts).map((key) => {
+                            const alert = alerts[key];
+                            return (
+                                <Alert
+                                    intent={alert.type}
+                                    action={{
+                                        icon: (
+                                            <Dismiss16Regular
+                                                aria-label="dismiss message"
+                                                onClick={() => onDismissAlert(key)}
+                                                color="black"
+                                            />
+                                        ),
+                                    }}
+                                    key={key}
+                                >
+                                    {alert.message}
+                                </Alert>
+                            );
+                        })}
+                    {appState === AppState.ProbeForBackend && (
+                        <BackendProbe
+                            uri={process.env.REACT_APP_BACKEND_URI as string}
+                            onBackendFound={() => setAppState(AppState.LoadingChats)}
+                        />
+                    )}
+                    {appState === AppState.LoadingChats && <Spinner labelPosition="below" label="Loading Chats" />}
+                    {appState === AppState.Chat && <ChatView />}
                 </div>
             </AuthenticatedTemplate>
         </div>
diff --git a/samples/apps/copilot-chat-app/webapp/src/checkEnv.ts b/samples/apps/copilot-chat-app/webapp/src/checkEnv.ts
new file mode 100644
index 000000000000..d6b36c23eeb0
--- /dev/null
+++ b/samples/apps/copilot-chat-app/webapp/src/checkEnv.ts
@@ -0,0 +1,14 @@
+export const getMissingEnvVariables = () => {
+    // Should be aligned with variables defined in env.example
+    const envVariables = ['REACT_APP_BACKEND_URI', 'REACT_APP_AAD_AUTHORITY', 'REACT_APP_AAD_CLIENT_ID'];
+
+    const missingVariables = [];
+
+    for (const variable of envVariables) {
+        if (!process.env[variable]) {
+            missingVariables.push(variable);
+        }
+    }
+
+    return missingVariables;
+};
diff --git a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatHistory.tsx b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatHistory.tsx
index f0d6928cc27a..426cb515b493 100644
--- a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatHistory.tsx
+++ b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatHistory.tsx
@@ -9,14 +9,13 @@ import { ChatStatus } from './ChatStatus';
 
 const useClasses = makeStyles({
     root: {
+        ...shorthands.gap(tokens.spacingVerticalM),
         display: 'flex',
         flexDirection: 'column',
-        ...shorthands.gap(tokens.spacingVerticalM),
         maxWidth: '900px',
         width: '100%',
         justifySelf: 'center',
     },
-    content: {},
     item: {
         display: 'flex',
         flexDirection: 'column',
diff --git a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx
index c7b5b6f9f3a8..e5fc363248a1 100644
--- a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx
+++ b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx
@@ -23,7 +23,6 @@ const useClasses = makeStyles({
         display: 'flex',
         flexDirection: 'column',
         ...shorthands.margin(0, '72px'),
-        alignContent: 'stretch',
     },
     typingIndicator: {
         height: '28px',
@@ -38,7 +37,7 @@ const useClasses = makeStyles({
         width: '100%',
     },
     textarea: {
-        height: '70px',
+        maxHeight: '80px',
     },
     controls: {
         display: 'flex',
@@ -52,7 +51,7 @@ const useClasses = makeStyles({
     functional: {
         display: 'flex',
         flexDirection: 'row',
-    }
+    },
 });
 
 interface ChatInputProps {
@@ -81,8 +80,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         if (recognizer) return;
         void (async () => {
             var response = await speechService.validSpeechKeyAsync();
-            if(response.isSuccess)
-            {
+            if (response.isSuccess) {
                 const newRecognizer = await speechService.getSpeechRecognizerAsyncWithValidKey(response);
                 setRecognizer(newRecognizer);
             }
@@ -115,7 +113,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                     account!.homeAccountId!,
                     selectedId,
                     documentFile,
-                    await AuthHelper.getSKaaSAccessToken(instance)
+                    await AuthHelper.getSKaaSAccessToken(instance),
                 );
                 dispatch(addAlert({ message: 'Document uploaded successfully', type: AlertType.Success }));
             } catch (e: any) {
@@ -191,16 +189,26 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                         type="file"
                         ref={documentFileRef}
                         style={{ display: 'none' }}
-                        accept='.txt,.pdf'
+                        accept=".txt,.pdf"
                         multiple={false}
                         onChange={() => importDocument()}
                     />
-                    <Button disabled={ documentImporting } appearance="transparent" icon={<AttachRegular />} onClick={() => selectDocument()} />
+                    <Button
+                        disabled={documentImporting}
+                        appearance="transparent"
+                        icon={<AttachRegular />}
+                        onClick={() => selectDocument()}
+                    />
                     {documentImporting && <Spinner size="tiny" />}
                 </div>
                 <div className={classes.essentials}>
                     {recognizer && (
-                        <Button appearance="transparent" disabled={isListening} icon={<MicRegular />} onClick={() => handleSpeech()} />
+                        <Button
+                            appearance="transparent"
+                            disabled={isListening}
+                            icon={<MicRegular />}
+                            onClick={() => handleSpeech()}
+                        />
                     )}
                     <Button appearance="transparent" icon={<SendRegular />} onClick={() => handleSubmit(value)} />
                 </div>
diff --git a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatRoom.tsx b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatRoom.tsx
index 2597ba862767..656c1db6f6d5 100644
--- a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatRoom.tsx
+++ b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatRoom.tsx
@@ -17,22 +17,23 @@ const log = debug(Constants.debug.root).extend('chat-room');
 
 const useClasses = makeStyles({
     root: {
-        height: '94.5%',
+        ...shorthands.overflow('hidden'),
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',
-        gridTemplateColumns: '1fr',
-        gridTemplateRows: '1fr auto',
-        gridTemplateAreas: "'history' 'input'",
+        height: '100%',
+    },
+    scroll: {
+        overflowY: 'auto',
     },
     history: {
-        ...shorthands.gridArea('history'),
         ...shorthands.padding(tokens.spacingVerticalM),
-        overflowY: 'auto',
-        display: 'grid',
+        marginLeft: '40px',
+        paddingRight: '40px',
+        display: 'flex',
+        justifyContent: 'center',
     },
     input: {
-        ...shorthands.gridArea('input'),
         ...shorthands.padding(tokens.spacingVerticalM),
     },
 });
@@ -113,8 +114,10 @@ export const ChatRoom: React.FC = () => {
 
     return (
         <div className={classes.root}>
-            <div ref={scrollViewTargetRef} className={classes.history}>
-                <ChatHistory audience={audience} messages={messages} onGetResponse={handleSubmit} />
+            <div ref={scrollViewTargetRef} className={classes.scroll}>
+                <div ref={scrollViewTargetRef} className={classes.history}>
+                    <ChatHistory audience={audience} messages={messages} onGetResponse={handleSubmit} />
+                </div>
                 <div>
                     <div ref={scrollTargetRef} />
                 </div>
diff --git a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatWindow.tsx b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatWindow.tsx
index bbe50cb0a2ab..066a7a4a7465 100644
--- a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatWindow.tsx
+++ b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatWindow.tsx
@@ -26,59 +26,34 @@ import { ShareBotMenu } from './ShareBotMenu';
 
 const useClasses = makeStyles({
     root: {
-        height: '100%',
-        display: 'grid',
-        gridTemplateColumns: '1fr',
-        gridTemplateRows: 'auto 1fr',
-        gridTemplateAreas: "'header' 'content'",
+        display: 'flex',
+        flexDirection: 'column',
         width: '-webkit-fill-available',
         backgroundColor: '#F5F5F5',
         boxShadow: 'rgb(0 0 0 / 25%) 0 0.2rem 0.4rem -0.075rem',
     },
     header: {
-        ...shorthands.gridArea('header'),
+        ...shorthands.borderBottom('1px', 'solid', 'rgb(0 0 0 / 10%)'),
+        ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalM),
         backgroundColor: tokens.colorNeutralBackground4,
         display: 'flex',
         flexDirection: 'row',
-        justifyContent: 'center',
-        ...shorthands.borderBottom('1px', 'solid', 'rgb(0 0 0 / 10%)'),
-    },
-    headerContent: {
-        ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalM),
-        display: 'grid',
-        gridTemplateColumns: '1fr auto',
-        gridTemplateRows: '1fr',
-        gridTemplateAreas: "'title controls'",
         boxSizing: 'border-box',
         width: '100%',
+        justifyContent: 'space-between',
     },
     title: {
-        ...shorthands.gridArea('title'),
         ...shorthands.gap(tokens.spacingHorizontalM),
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'row',
     },
     controls: {
-        ...shorthands.gridArea('controls'),
         ...shorthands.gap(tokens.spacingHorizontalM),
         alignItems: 'right',
         display: 'flex',
         flexDirection: 'row',
     },
-    content: {
-        ...shorthands.gridArea('content'),
-        overflowY: 'auto',
-    },
-    contentOuter: {
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'center',
-    },
-    contentInner: {
-        width: '100%',
-    },
 });
 
 export const ChatWindow: React.FC = () => {
@@ -125,42 +100,37 @@ export const ChatWindow: React.FC = () => {
     return (
         <div className={classes.root}>
             <div className={classes.header}>
-                <div className={classes.headerContent}>
-                    <div className={classes.title}>
-                        <Persona
-                            key={'SK Bot'}
-                            size="medium"
-                            avatar={{ image: { src: conversations[selectedId].botProfilePicture }}}
-                            presence={{ status: 'available' }}
+                <div className={classes.title}>
+                    <Persona
+                        key={'SK Bot'}
+                        size="medium"
+                        avatar={{ image: { src: conversations[selectedId].botProfilePicture } }}
+                        presence={{ status: 'available' }}
+                    />
+                    {isEditing ? (
+                        <Input value={title} onChange={onTitleChange} id={title} />
+                    ) : (
+                        <Label size="large" weight="semibold">
+                            {chatName}
+                        </Label>
+                    )}
+                    <Tooltip
+                        content={isEditing ? 'Save conversation name' : 'Edit conversation name'}
+                        relationship="label"
+                    >
+                        <Button
+                            icon={isEditing ? <Save24Regular /> : <EditRegular />}
+                            appearance="transparent"
+                            onClick={onEdit}
+                            disabled={title === undefined || !title}
                         />
-                        {isEditing ? (
-                            <Input value={title} onChange={onTitleChange} id={title} />
-                        ) : (
-                            <Label size="large" weight="semibold">
-                                {chatName}
-                            </Label>
-                        )}
-                        <Tooltip content={isEditing ? "Save conversation name" : "Edit conversation name"} relationship="label">
-                            <Button
-                                icon={isEditing ? <Save24Regular /> : <EditRegular />}
-                                appearance="transparent"
-                                onClick={onEdit}
-                                disabled={title === undefined || !title}
-                            />
-                        </Tooltip>
-                    </div>
-                    <div className={classes.controls}>
-                        <ShareBotMenu chatId={selectedId} chatTitle={title || ''} />
-                    </div>
+                    </Tooltip>
                 </div>
-            </div>
-            <div className={classes.content}>
-                <div className={classes.contentOuter}>
-                    <div className={classes.contentInner}>
-                        <ChatRoom />
-                    </div>
+                <div className={classes.controls}>
+                    <ShareBotMenu chatId={selectedId} chatTitle={title || ''} />
                 </div>
             </div>
+            <ChatRoom />
         </div>
     );
 };
diff --git a/samples/apps/copilot-chat-app/webapp/src/components/chat/chat-list/ChatList.tsx b/samples/apps/copilot-chat-app/webapp/src/components/chat/chat-list/ChatList.tsx
index d4209eea990c..070f298b818b 100644
--- a/samples/apps/copilot-chat-app/webapp/src/components/chat/chat-list/ChatList.tsx
+++ b/samples/apps/copilot-chat-app/webapp/src/components/chat/chat-list/ChatList.tsx
@@ -11,14 +11,21 @@ import { NewBotMenu } from './NewBotMenu';
 
 const useClasses = makeStyles({
     root: {
+        ...shorthands.overflow('hidden'),
+        display: 'flex',
         width: '25%',
-        minHeight: '100%',
-        overflowX: 'hidden',
-        overflowY: 'auto',
         scrollbarWidth: 'thin',
         backgroundColor: '#F0F0F0',
+        flexDirection: 'column',
+        '@media (max-width: 25%)': {
+            display: 'none',
+        },
+    },
+    list: {
+        overflowY: 'auto',
     },
     header: {
+        ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalXS),
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between',
@@ -26,13 +33,6 @@ const useClasses = makeStyles({
         marginLeft: '1em',
         alignItems: 'center',
         height: '4.8em',
-        '& controls': {
-            ...shorthands.gap('10px'),
-            display: 'flex',
-        },
-    },
-    label: {
-        marginLeft: '1em',
     },
 });
 
@@ -41,50 +41,44 @@ export const ChatList: FC = () => {
     const { conversations, selectedId } = useAppSelector((state: RootState) => state.conversations);
 
     return (
-        <>
-            <div className={classes.root}>
-                <div className={classes.header}>
-                    <Text weight="bold" size={500}>
-                        Conversations
-                    </Text>
-                    <NewBotMenu />
-                </div>
-                <Tree aria-label={'chat list'}>
-                    {Object.keys(conversations).map((id) => {
-                        const convo = conversations[id];
-                        const messages = convo.messages;
-                        const lastMessage = convo.messages.length - 1;
-                        return (
-                            <TreeItem
-                                key={id}
-                                leaf
-                                style={
-                                    id === selectedId
-                                        ? { background: tokens.colorNeutralBackground1 }
-                                        : undefined
-                                }
-                            >
-                                <ChatListItem
-                                    id={id}
-                                    header={convo.title}
-                                    timestamp={new Date(messages[lastMessage].timestamp).toLocaleTimeString([], {
-                                        hour: '2-digit',
-                                        minute: '2-digit',
-                                    })}
-                                    preview={
-                                        messages.length > 0
-                                            ? isPlan(messages[lastMessage].content)
-                                                ? 'Click to view proposed plan'
-                                                : (messages[lastMessage].content as string)
-                                            : 'Click to start the chat'
-                                    }
-                                    botProfilePicture={convo.botProfilePicture}
-                                />
-                            </TreeItem>
-                        );
-                    })}
-                </Tree>
+        <div className={classes.root}>
+            <div className={classes.header}>
+                <Text weight="bold" size={500}>
+                    Conversations
+                </Text>
+                <NewBotMenu />
             </div>
-        </>
+            <Tree aria-label={'chat list'} className={classes.list}>
+                {Object.keys(conversations).map((id) => {
+                    const convo = conversations[id];
+                    const messages = convo.messages;
+                    const lastMessage = convo.messages.length - 1;
+                    return (
+                        <TreeItem
+                            key={id}
+                            leaf
+                            style={id === selectedId ? { background: tokens.colorNeutralBackground1 } : undefined}
+                        >
+                            <ChatListItem
+                                id={id}
+                                header={convo.title}
+                                timestamp={new Date(messages[lastMessage].timestamp).toLocaleTimeString([], {
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                })}
+                                preview={
+                                    messages.length > 0
+                                        ? isPlan(messages[lastMessage].content)
+                                            ? 'Click to view proposed plan'
+                                            : (messages[lastMessage].content as string)
+                                        : 'Click to start the chat'
+                                }
+                                botProfilePicture={convo.botProfilePicture}
+                            />
+                        </TreeItem>
+                    );
+                })}
+            </Tree>
+        </div>
     );
 };
diff --git a/samples/apps/copilot-chat-app/webapp/src/components/views/ChatView.tsx b/samples/apps/copilot-chat-app/webapp/src/components/views/ChatView.tsx
index dbca02777329..4b090a84987f 100644
--- a/samples/apps/copilot-chat-app/webapp/src/components/views/ChatView.tsx
+++ b/samples/apps/copilot-chat-app/webapp/src/components/views/ChatView.tsx
@@ -1,18 +1,15 @@
-import { makeStyles } from '@fluentui/react-components';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 import { FC } from 'react';
 import { ChatWindow } from '../chat/ChatWindow';
 import { ChatList } from '../chat/chat-list/ChatList';
 
 const useClasses = makeStyles({
     container: {
+        ...shorthands.overflow('hidden'),
         display: 'flex',
         flexDirection: 'row',
         alignContent: 'start',
-        justifyContent: 'space-between',
-        width: '100%',
         height: '100%',
-        maxHeight: '100%',
-        position: 'fixed',
     },
 });
 
diff --git a/samples/apps/copilot-chat-app/webapp/src/components/views/MissingEnvVariablesError.tsx b/samples/apps/copilot-chat-app/webapp/src/components/views/MissingEnvVariablesError.tsx
new file mode 100644
index 000000000000..da518ccb6220
--- /dev/null
+++ b/samples/apps/copilot-chat-app/webapp/src/components/views/MissingEnvVariablesError.tsx
@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft. All rights reserved.
+
+import { Body1, Subtitle1, Title3 } from '@fluentui/react-components';
+import { FC } from 'react';
+import { useClasses } from '../../App';
+
+interface IData {
+    missingVariables: string[];
+}
+
+const MissingEnvVariablesError: FC<IData> = ({ missingVariables }) => {
+    const classes = useClasses();
+
+    return (
+        <div className={classes.container}>
+            <div className={classes.header}>
+                <Subtitle1 as="h1">Copilot Chat</Subtitle1>
+            </div>
+            <div style={{ padding: 80, gap: 20, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                <Title3>
+                    Please ensure your .env file is set up correctly with all environment variables defined in
+                    env.example then restart the app.
+                </Title3>
+                <Body1>You are missing the following variables: {missingVariables.join(', ')}</Body1>
+            </div>
+        </div>
+    );
+};
+
+export default MissingEnvVariablesError;
diff --git a/samples/apps/copilot-chat-app/webapp/src/index.tsx b/samples/apps/copilot-chat-app/webapp/src/index.tsx
index e1c5faa388aa..119376ff833f 100644
--- a/samples/apps/copilot-chat-app/webapp/src/index.tsx
+++ b/samples/apps/copilot-chat-app/webapp/src/index.tsx
@@ -1,39 +1,52 @@
-import { PublicClientApplication } from '@azure/msal-browser';
+import { IPublicClientApplication, PublicClientApplication } from '@azure/msal-browser';
 import { MsalProvider } from '@azure/msal-react';
 import { FluentProvider, webLightTheme } from '@fluentui/react-components';
 import ReactDOM from 'react-dom/client';
 import { Provider as ReduxProvider } from 'react-redux';
 import App from './App';
 import { Constants } from './Constants';
+import MissingEnvVariablesError from './components/views/MissingEnvVariablesError';
 import './index.css';
 import { AuthHelper } from './libs/auth/AuthHelper';
 import { store } from './redux/app/store';
 
 import React from 'react';
+import { getMissingEnvVariables } from './checkEnv';
 
 if (!localStorage.getItem('debug')) {
     localStorage.setItem('debug', `${Constants.debug.root}:*`);
 }
 
-const msalInstance = new PublicClientApplication(AuthHelper.msalConfig);
-
 let container: HTMLElement | null = null;
-document.addEventListener('DOMContentLoaded', () => {
+
+document.addEventListener('DOMContentLoaded', async () => {
     if (!container) {
         container = document.getElementById('root');
         if (!container) {
             throw new Error('Could not find root element');
         }
         const root = ReactDOM.createRoot(container);
+
+        const missingEnvVariables = getMissingEnvVariables();
+        const validEnvFile = missingEnvVariables.length === 0;
+
+        var msalInstance: IPublicClientApplication | null = null;
+        if (validEnvFile) {
+            msalInstance = new PublicClientApplication(AuthHelper.msalConfig);
+        }
+
         root.render(
             <React.StrictMode>
-                <ReduxProvider store={store}>
-                    <MsalProvider instance={msalInstance}>
-                        <FluentProvider className="app-container" theme={webLightTheme}>
-                            <App />
-                        </FluentProvider>
-                    </MsalProvider>
-                </ReduxProvider>
+                {!validEnvFile && <MissingEnvVariablesError missingVariables={missingEnvVariables} />}
+                {validEnvFile && (
+                    <ReduxProvider store={store}>
+                        <MsalProvider instance={msalInstance!}>
+                            <FluentProvider className="app-container" theme={webLightTheme}>
+                                <App />
+                            </FluentProvider>
+                        </MsalProvider>
+                    </ReduxProvider>
+                )}
             </React.StrictMode>,
         );
     }