Merge branch 'chat-ui-revamp' into 'main'

.firebaserc

@@ -1,15 +1,15 @@
 {
   "projects": {
-    "default": "kai-ai-f63c8"
+    "default": "kai-ai-b8ac9"
   },
   "targets": {
-    "kai-ai-f63c8": {
+    "kai-ai-b8ac9": {
       "hosting": {
         "next": [
-          "kai-ai-f63c8"
+          "kai-ai-b8ac9"
         ]
       }
     }
   },
   "etags": {}
-}
+}

firestore.rules

@@ -1,9 +1,8 @@
 rules_version = '2';
 service cloud.firestore {
   match /databases/{database}/documents {
-    match /{document=**} {
-      allow read, write: if
-          request.time < timestamp.date(2023, 6, 16);
+    match /chatSessions/{id} {
+      allow read, write: if request.auth != null && resource.data.user.id == request.auth.uid;
     }
   }
 }

frontend/constants/bots.js

@@ -1,3 +1,23 @@
+const ACTION_TYPES = {
+  SUMMARIZE_CONTENT: {
+    actionType: 'Summarize Content',
+    description: 'Summarize key concepts and ideas for a given topic.',
+  },
+  GENERATE_QUIZ: {
+    actionType: 'Generate Quiz',
+    description: 'Create quiz on a given topic to test students understanding.',
+  },
+  ACTIVITY_RECOMMENDATIONS: {
+    actionType: 'Activity Recommendations',
+    description: 'Offer engaging activities based on the current subject.',
+  },
+  INTERACTIVE_TECHNIQUES: {
+    actionType: 'Interactive Techniques',
+    description:
+      'Suggest ideas for making lessons more interactive and engaging.',
+  },
+};
+
 const BOT_TYPE = {
   MISSION: 'mission',
   TEACH_ME: 'teach_me',
@@ -6,6 +26,12 @@ const BOT_TYPE = {
   HACKATHON: 'hackathon',
 };
 
+const DEFAULT_PROMPTS = [
+  'Strategies to encourage student participation.',
+  'Design an engaging class activity.',
+  'Recommend resources for effective teaching.',
+];
+
 const MESSAGE_ROLE = {
   SYSTEM: 'system',
   HUMAN: 'human',
@@ -22,4 +48,4 @@ const MESSAGE_TYPES = {
   QUICK_REPLY: 'quick_reply',
 };
 
-export { BOT_TYPE, MESSAGE_ROLE, MESSAGE_TYPES };
+export { ACTION_TYPES, BOT_TYPE, DEFAULT_PROMPTS, MESSAGE_ROLE, MESSAGE_TYPES };

frontend/constants/routes.js

@@ -9,6 +9,7 @@ const ROUTES = {
   REDIRECT: '/redirect',
   CHAT: '/chat',
   HISTORY: '/history',
+  DISCOVERY: '/discovery',
 };
 
 export default ROUTES;

frontend/layouts/AuthLayout/AuthLayout.jsx

@@ -55,11 +55,11 @@ const AuthLayout = (props) => {
   const renderArtifacts = () => {
     return (
       <>
-        <Box {...styles.reXProps}>
+        <Box {...styles.marvelProps}>
           <Image
-            {...styles.reXImageProps}
+            {...styles.marvelImageProps}
             src={ImageURLs.MarvelAuthImg}
-            alt="rexImage"
+            alt="Marvel Image"
           />
         </Box>
         <Box {...styles.greenBlobProps}>

frontend/layouts/AuthLayout/styles.js

@@ -17,7 +17,7 @@ const styles = {
     priority: true,
     style: { zIndex: 0 },
   },
-  reXImageProps: {
+  marvelImageProps: {
     layout: 'fill',
     objectFit: 'cover',
     priority: true,
@@ -97,7 +97,7 @@ const styles = {
       },
     }),
   },
-  reXProps: {
+  marvelProps: {
     sx: (theme) => ({
       position: 'absolute',
       zIndex: 2,

frontend/layouts/MainAppLayout/ MainAppLayout.jsx

@@ -8,7 +8,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import AppDisabled from '@/components/AppDisabled';
 import Loader from '@/components/Loader';
 
-import SideMenu from './SideMenu';
+import NavBar from './NavBar';
 import styles from './styles';
 
 import { setLoading } from '@/redux/slices/authSlice';
@@ -52,7 +52,7 @@ const MainAppLayout = (props) => {
   const renderApp = () => {
     return (
       <>
-        <SideMenu />
+        <NavBar />
         <Grid {...styles.contentGridProps(extraContentProps, isToolPage)}>
           {children}
         </Grid>

frontend/layouts/MainAppLayout/NavBar/Navbar.jsx

@@ -0,0 +1,171 @@
+import { Avatar, Button, Grid, Typography } from '@mui/material';
+import { signOut } from 'firebase/auth';
+import { useRouter } from 'next/router';
+
+import { useSelector } from 'react-redux';
+
+import ChatIcon from '@/assets/svg/ChatIcon.svg';
+// import DiscoveryIcon from '@/assets/svg/DiscoveryIcon.svg';
+import HomeIcon from '@/assets/svg/HomeMenuIcon.svg';
+import LogoutIcon from '@/assets/svg/LogoutIcon.svg';
+
+import ROUTES from '@/constants/routes';
+
+import styles from './styles';
+
+import { auth } from '@/redux/store';
+import { chatRegex, discoveryRegex, homeRegex } from '@/regex/routes';
+
+// TODO: Once Discovery Feature is ready, uncomment Discovery Page from below array.
+const PAGES = [
+  {
+    name: 'Home',
+    link: ROUTES.HOME,
+    icon: <HomeIcon />,
+    id: 'home',
+  },
+  /* {
+    name: 'Discovery',
+    link: ROUTES.DISCOVERY,
+    icon: <DiscoveryIcon />,
+    id: 'discovery',
+  }, */
+  {
+    name: 'Chat',
+    link: ROUTES.CHAT,
+    icon: <ChatIcon />,
+    id: 'chat',
+  },
+];
+
+/**
+ * NavBar component renders the main navigation bar for the application.
+ * It includes the application logo, a navigation menu with dynamic active states,
+ * and a user profile section with the ability to sign out.
+ *
+ * @component
+ * @returns {JSX.Element} The navigation bar component.
+ */
+const NavBar = () => {
+  const router = useRouter();
+
+  const user = useSelector((state) => state.user.data);
+
+  /**
+   * Signs out the currently signed-in user from Firebase Authentication
+   * and redirects them to the sign-in page.
+   *
+   * @returns {void}
+   */
+  const handleSignOutUser = () => {
+    signOut(auth);
+  };
+
+  /**
+   * Renders the logo of the application in the navbar.
+   * Clicking on the logo redirects the user to the home page.
+   *
+   * @returns {JSX.Element} The JSX element representing the logo section.
+   */
+  const renderLogo = () => {
+    return (
+      <Grid {...styles.logoGridProps}>
+        <Grid onClick={() => router.push(ROUTES.HOME)} {...styles.logoImage}>
+          {/* TODO: Put Marvel AI logo here */}
+          <Typography {...styles.logoText}>Marvel AI</Typography>
+        </Grid>
+        <Typography {...styles.title}>AI Teaching Assistant</Typography>
+      </Grid>
+    );
+  };
+
+  /**
+   * Renders the profile section of the navbar, which includes the user's profile
+   * photo, name, and a logout button.
+   *
+   * @returns {JSX.Element} The profile section of the navbar.
+   */
+  const renderProfile = () => {
+    return (
+      <Grid {...styles.profile}>
+        <Grid {...styles.userContainer}>
+          <Avatar src={user?.profilePhotoUrl} {...styles.userProfile}>
+            {user?.fullName[0]}
+          </Avatar>
+          <Typography {...styles.userName}>{user?.fullName}</Typography>
+        </Grid>
+        <Button startIcon={<LogoutIcon />} onClick={handleSignOutUser} />
+      </Grid>
+    );
+  };
+
+  /**
+   * Renders the navigation menu with dynamically set active states based on the current route.
+   *
+   * This function generates a grid-based navigation menu where each item reflects the current route's
+   * state. It highlights the active menu item and provides functionality to navigate to different routes
+   * when an item is clicked.
+   *
+   * @returns {JSX.Element} The navigation menu component with active states and clickable items.
+   */
+  const renderNavMenu = () => {
+    const { pathname } = router;
+
+    /**
+     * Determines if a given menu item should be highlighted as active.
+     *
+     * @param {string} id - The identifier of the menu item to check.
+     * @returns {boolean} True if the menu item should be highlighted as active, otherwise false.
+     */
+    const setActive = (id) => {
+      const isNotHomePage = [
+        chatRegex.test(pathname) || discoveryRegex.test(pathname),
+      ].includes(true);
+
+      if (id === 'home')
+        return isNotHomePage ? false : homeRegex.test(pathname);
+
+      // TODO: Once Discovery Feature is ready, uncomment below statement.
+      // if (id === 'discovery') return discoveryRegex.test(pathname);
+
+      if (id === 'chat') return chatRegex.test(pathname);
+
+      return false;
+    };
+
+    /**
+     * Navigates to a specified route.
+     *
+     * @param {string} link - The route to navigate to.
+     * @returns {void}
+     */
+    const handleRoute = (link) => {
+      router.push(link);
+    };
+
+    return (
+      <Grid {...styles.navMenu}>
+        {PAGES.map((page) => (
+          <Grid
+            key={page.id}
+            onClick={() => handleRoute(page.link, page.id)}
+            {...styles.navMenuItem(setActive(page.id))}
+          >
+            <Grid {...styles.navMenuIcon}>{page.icon}</Grid>
+            <Typography {...styles.navMenuText}>{page.name}</Typography>
+          </Grid>
+        ))}
+      </Grid>
+    );
+  };
+
+  return (
+    <Grid {...styles.mainGrid}>
+      {renderLogo()}
+      {renderNavMenu()}
+      {renderProfile()}
+    </Grid>
+  );
+};
+
+export default NavBar;

frontend/layouts/MainAppLayout/NavBar/index.js

@@ -0,0 +1 @@
+export { default } from './Navbar';