Add process-flow template

api/prompt/_shared.ts

@@ -39,7 +39,7 @@ export async function handleRateLimit(
     redis: kv,
     limiter: isPro
       ? Ratelimit.slidingWindow(3, "1m")
-      : Ratelimit.fixedWindow(3, "30d"),
+      : Ratelimit.fixedWindow(2, "30d"),
   });
 
   const rateLimitKey = isPro ? `pro_${customerId}` : `unauth_${ip}`;

app/scripts/screenshot-templates.mjs

@@ -37,7 +37,9 @@ async function main() {
 
   await screenshotTemplates(filteredTemplates);
   await createThumbnails(filteredTemplates);
-  await createTemplatesIndex(templates); // Always create index with all templates
+  console.log(
+    "Don't forget to add the new templates to `shared/src/templates.ts` file."
+  );
 }
 
 /**
@@ -75,8 +77,8 @@ async function takeScreenshot(browser, template) {
     console.error("Error loading template", error);
   }
 
-  // wait a few seconds
-  await page.waitForTimeout(3000);
+  // wait 3 seconds
+  await new Promise((resolve) => setTimeout(resolve, 3000));
 
   // get the full page link
   const screenshotLink = await page.evaluate(() => {
@@ -137,21 +139,4 @@ async function createThumbnails(templates) {
   }
 }
 
-async function createTemplatesIndex(templates) {
-  console.log("Creating templates index...");
-  const indexPath = path.join(__dirname, "../../shared/templates.ts");
-  const indexContent = `export const templates = ${JSON.stringify(
-    templates,
-    null,
-    2
-  )} as const;`;
-
-  try {
-    await writeFile(indexPath, indexContent, "utf8");
-    console.log("✅ Created templates index file");
-  } catch (error) {
-    console.error("Error creating templates index file:", error);
-  }
-}
-
 main().catch(console.error);

app/src/components/Graph.tsx

@@ -358,6 +358,8 @@ function getGraphUpdater({
       // Because the graph has no positions yet
       if (layout.name === "fcose") {
         if (isFirstRender.current) {
+          // @ts-ignore
+          layout.animate = false;
           // @ts-ignore
           layout.randomize = true;
           // @ts-ignore

app/src/components/LoadTemplateDialog.tsx

@@ -48,6 +48,8 @@ export function LoadTemplateDialog() {
     });
   }, [template, replaceContent, reset]);
 
+  console.log(templates);
+
   return (
     <Dialog.Root
       open={open}

app/src/lib/templates/process-flow-template.ts

@@ -0,0 +1,90 @@
+import { FFTheme } from "../FFTheme";
+
+export const content = `
+Start Process
+  Step 1: Initial Assessment
+    Decision Point
+      Yes: Proceed to Step 2
+        Step 2: Detailed Analysis
+          Review Documentation [href="https://docs.example.com"]
+          Conduct Analysis
+            Generate Report
+              Share Results [href="https://results.example.com"]
+      No: Request More Information
+        Contact Client [href="mailto:[email protected]"]
+          (Initial Assessment)
+  Step 3: Final Decision
+    Approve: Complete Process
+    Reject: Provide Feedback
+      (Start Process)
+`;
+
+export const theme: FFTheme = {
+  layoutName: "dagre",
+  direction: "DOWN",
+  spacingFactor: 1.1,
+
+  background: "#fbfbfb",
+  fontFamily: "Inter",
+
+  shape: "roundrectangle",
+  nodeBackground: "#e6e6e6",
+  nodeForeground: "#333333",
+  padding: 15,
+  borderWidth: 0,
+  borderColor: "#cccccc",
+  textMaxWidth: 150,
+  lineHeight: 1.3,
+  textMarginY: 0,
+  useFixedHeight: false,
+  fixedHeight: 60,
+
+  curveStyle: "bezier",
+  edgeWidth: 2,
+  edgeColor: "#888888",
+  sourceArrowShape: "none",
+  targetArrowShape: "triangle",
+  sourceDistanceFromNode: 0,
+  targetDistanceFromNode: 5,
+  arrowScale: 1,
+  edgeTextSize: 0.9,
+  rotateEdgeLabel: false,
+};
+
+export const cytoscapeStyle = `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
+
+:childless {
+  font-weight: bold;
+}
+
+/** Start */
+:childless[in_degree < 1][out_degree > 0] {
+  background-color: #50c878;
+  border-color: #3da75d;
+}
+
+/** Decision Point */
+:childless[out_degree > 1] {
+  shape: diamond;
+  background-color: #ffa500;
+  height: $width;
+  text-margin-y: 2;
+  border-color: #cc8400;
+}
+
+/** Terminal */
+:childless[out_degree < 1][in_degree > 0] {
+  background-color: #ff6347;
+  color: white;
+  border-color: #e74c3c;
+}
+
+/** Links */
+:childless[href] {
+  background-color: #4a90e2;
+  color: white;
+  text-decoration: underline;
+  cursor: pointer;
+  border-color: #3a7ac5;
+}
+`;

shared/src/templates.ts

@@ -1,14 +1,15 @@
 export const templates = [
   "code-flow",
+  "process-flow",
+  "flowchart",
   "decision-flow",
+  "pert-light",
   "default",
-  "flowchart",
+  "org-chart",
   "knowledge-graph",
-  "mindmap-dark",
   "mindmap",
+  "mindmap-dark",
   "network-diagram-dark",
   "network-diagram-icons",
-  "org-chart",
-  "pert-light",
   "playful-mindmap",
 ] as const;