Allow creating apps from AppFromTemplateDialog

Author: ajhai

llmstack/client/src/components/apps/AppFromTemplateDialog.jsx

@@ -8,26 +8,50 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
+import { useState } from "react";
+import { axios } from "../../data/axios";
+import { useNavigate } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import { appTemplateState } from "../../data/atoms";
+
+export function AppFromTemplateDialog({ open, setOpen, appTemplateSlug }) {
+  const [appName, setAppName] = useState("Untitled");
+  const appTemplate = useRecoilValue(
+    appTemplateState(
+      appTemplateSlug.startsWith("_blank_") ? "_blank_" : appTemplateSlug,
+    ),
+  );
+  const navigate = useNavigate();
 
-export function AppFromTemplateDialog({
-  open,
-  setOpen,
-  appName,
-  setAppName,
-  createApp,
-  appTemplate,
-}) {
   const handleClose = () => {
     setOpen(false);
   };
 
+  const createApp = () => {
+    const payload = {
+      ...(appTemplate.app || {}),
+      name: appName || appTemplate?.name || "Untitled",
+      app_type: appTemplate?.app?.type,
+      type_slug:
+        appTemplate?.app?.type_slug ||
+        appTemplateSlug.replaceAll("_blank_", ""),
+      template_slug: appTemplate?.slug,
+    };
+    axios()
+      .post("/api/apps", payload)
+      .then((response) => {
+        const appID = response.data.uuid;
+        navigate(`/apps/${appID}`);
+      });
+  };
+
   return (
     <Dialog open={open} onClose={handleClose}>
       <DialogContent>
         <Typography
           style={{ paddingTop: 5, fontSize: "20px", fontWeight: 500 }}
         >
-          {appTemplate?.name}
+          {appTemplate?.name || "Create a new App"}
         </Typography>
         <Typography style={{ paddingTop: 10, fontSize: "14px", color: "#555" }}>
           {appTemplate?.description}