Welcome Modal

2026-06-30 16:40:05 +08:00 · 2023-01-14 00:43:41 -06:00
parent 0f49fbf23c
commit ce9b665b4d
3 changed files with 55 additions and 7 deletions
@@ -0,0 +1,52 @@
+import {
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { useSession } from "next-auth/react";
+import { useState } from "react";
+
+export function WelcomeModal() {
+  const backgroundColor = useColorModeValue("white", "gray.700");
+  const { data: session } = useSession();
+
+  const [showModal, setShowModal] = useState(true);
+
+  if (!session) {
+    return <></>;
+  }
+  if (session && session.user)
+    return (
+      <>
+        <Modal isOpen={showModal} onClose={() => setShowModal(false)} isCentered>
+          <ModalOverlay backdropFilter="auto" backdropBlur="2px" />
+          <ModalContent>
+            <ModalHeader>Welcome, {session.user.name}!</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              <Box>
+                <Text>
+                  Open Assistant is an open-source AI assistant that uses and trains advanced language models to
+                  understand and respond to humans.
+                </Text>
+                <Text>Help train</Text>
+              </Box>
+            </ModalBody>
+            <ModalFooter>
+              <Button colorScheme="blue" onClick={() => setShowModal(false)}>
+                Got it!
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </>
+    );
+}
@@ -1,2 +1,3 @@
 export { LeaderboardTable } from "./LeaderboardTable";
 export { TaskOption } from "./TaskOption";
+export { WelcomeModal } from "./WelcomeModal";
@@ -1,16 +1,10 @@
 import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
-import { useSession } from "next-auth/react";
-import { LeaderboardTable, TaskOption } from "src/components/Dashboard";
+import { LeaderboardTable, TaskOption, WelcomeModal } from "src/components/Dashboard";
 import { getDashboardLayout } from "src/components/Layout";
 import { TaskCategory } from "src/components/Tasks/TaskTypes";

 const Dashboard = () => {
-  const { data: session } = useSession();
-
-  // TODO(#670): Do something more meaningful when the user is new.
-  console.log(session?.user?.isNew);
-
  return (
    <>
      <Head>
@@ -18,6 +12,7 @@ const Dashboard = () => {
        <meta name="description" content="Chat with Open Assistant and provide feedback." />
      </Head>
      <Flex direction="column" gap="10">
+        <WelcomeModal />
        <TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
        <LeaderboardTable />
      </Flex>