1  import { useState, useEffect } from "react";
 2  import { Grid, styled, Box, Button } from "@mui/material";
 3  import { ArrowBack } from "@mui/icons-material";
 4  import useAuth from "app/hooks/useAuth";
 5  import ProjectNew from "./components/ProjectNew";
 6  import TemplateGallery from "./components/TemplateGallery";
 7  import Breadcrumb from "app/components/Breadcrumb";
 8  import api from "app/utils/api";
 9  
10  const Container = styled("div")(({ theme }) => ({
11    margin: 10,
12    [theme.breakpoints.down("sm")]: { margin: 16 },
13    "& .breadcrumb": { marginBottom: 30, [theme.breakpoints.down("sm")]: { marginBottom: 16 } }
14  }));
15  
16  const ContentBox = styled("div")(({ theme }) => ({
17    margin: "30px",
18    [theme.breakpoints.down("sm")]: { margin: "16px" }
19  }));
20  
21  export default function ProjectNewView() {
22    const [projects, setProjects] = useState([]);
23    const [info, setInfo] = useState({ "version": "", "embeddings": [], "llms": [], "loaders": [], "vectorstores": ["chroma"] });
24    const [selectedTemplate, setSelectedTemplate] = useState(undefined); // undefined = gallery, null = scratch, object = template
25    const auth = useAuth();
26  
27    const fetchProjects = () => {
28      return api.get("/projects", auth.user.token)
29        .then((d) => setProjects(d.projects))
30        .catch(() => {});
31    };
32  
33    const fetchInfo = () => {
34      return api.get("/info", auth.user.token)
35        .then((d) => setInfo(d))
36        .catch(() => {});
37    };
38  
39    useEffect(() => {
40      document.title = (process.env.REACT_APP_RESTAI_NAME || "RESTai") + ' - New Project';
41      fetchProjects();
42      fetchInfo();
43    }, []);
44  
45    const showGallery = selectedTemplate === undefined;
46  
47    const breadcrumb = showGallery
48      ? [{ name: "Projects", path: "/projects" }, { name: "New Project", path: "/projects/new" }]
49      : [
50          { name: "Projects", path: "/projects" },
51          { name: "New Project", path: "/projects/new" },
52          { name: selectedTemplate ? selectedTemplate.name : "From Scratch" },
53        ];
54  
55    return (
56      <Container>
57        <Box className="breadcrumb">
58          <Breadcrumb routeSegments={breadcrumb} />
59        </Box>
60  
61        <ContentBox>
62          {showGallery ? (
63            <TemplateGallery onSelect={(t) => setSelectedTemplate(t === null ? null : t)} />
64          ) : (
65            <>
66              <Button
67                startIcon={<ArrowBack />}
68                onClick={() => setSelectedTemplate(undefined)}
69                sx={{ mb: 2 }}
70              >
71                Back to Templates
72              </Button>
73              <Grid container spacing={3}>
74                <Grid item lg={12} md={8} sm={12} xs={12}>
75                  <ProjectNew projects={projects} info={info} template={selectedTemplate} />
76                </Grid>
77              </Grid>
78            </>
79          )}
80        </ContentBox>
81      </Container>
82    );
83  }