setting up stacks screen

ui/app/api/triggers/types.ts

@@ -0,0 +1,54 @@
+export interface Trigger {
+  type: string;
+  example_output: any;
+}
+
+export interface CronTrigger extends Trigger {
+  type: 'time';
+  schedule: string;
+}
+
+export interface WebhookTrigger extends Trigger {
+  type: 'webhook';
+  endpoint: string;
+}
+
+export interface EmailTrigger extends Trigger {
+  type: 'email';
+  subject: string;
+  from: string;
+  to: string;
+  body: string;
+}
+
+export interface TextTrigger extends Trigger {
+  type: 'text';
+  text: string;
+  from: string;
+  to: string;
+}
+
+export interface SlackTrigger extends Trigger {
+  type: 'slack';
+  channel: string;
+  text: string;
+  user: string;
+}
+
+export interface DiscordTrigger extends Trigger {
+  type: 'discord';
+  channel: string;
+  text: string;
+  user: string;
+}
+
+export interface TelegramTrigger extends Trigger {
+  type: 'telegram';
+  chat_id: string;
+  text: string;
+}
+
+export interface CustomTrigger extends Trigger {
+  type: 'custom';
+  name: string;
+}

ui/app/build/[slug]/page.tsx

@@ -1,30 +1,75 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import tw from 'tailwind-styled-components';
 
+import Action from '../../components/build/stack/Action';
 import type { Stack } from './types';
 
 const Workflow: React.FC = ({ params }: { params: { slug: string } }) => {
   const [stackInfo, setStackInfo] = useState<Stack | null>(null);
   const stackSlug = params.slug ?? null;
-  console.log('stackSlug', stackSlug);
 
   useEffect(() => {
-    // import(`../../stacks/v2/${stackSlug}.json`)
-    //   .then((module) => {
-    //     setStackInfo(module.default);
-    //   })
-    //   .catch((err) => {
-    //     console.error('Failed to load the stack info', err);
-    //   });
-    // console.log('stackInfo', stackInfo);
+    if (!stackSlug) return;
+
+    const fetchStackInfo = async () => {
+      try {
+        const url = `/stacks/v2/${stackSlug}.json`;
+        const response = await fetch(url);
+        if (!response.ok) throw new Error('Network response was not ok');
+        const data: Stack = await response.json();
+        setStackInfo(data);
+      } catch (error) {
+        console.error('Failed to fetch stack info:', error);
+      }
+    };
+
+    void fetchStackInfo();
   }, [stackSlug]);
 
+  if (!stackInfo) return <div>Loading...</div>;
+
   return (
-    <div>
-      <h1>Workflow</h1>
-    </div>
+    <Container>
+      <StackTitle>{stackInfo?.name}</StackTitle>
+      <p>{stackInfo?.description}</p>
+      <Trigger>Trigger: {stackInfo?.trigger.type}</Trigger>
+      <ActionsContainer>
+        {stackInfo?.stack.map((actionInfo, index) => (
+          <Action key={index} actionInfo={actionInfo} index={index} />
+        ))}
+      </ActionsContainer>
+    </Container>
   );
 };
 
 export default Workflow;
+
+const Container = tw.div`
+  flex
+  flex-col
+  items-center
+  w-full
+  h-screen
+`;
+
+const Trigger = tw.p`
+  text-lg
+  font-bold
+  mb-4
+`;
+
+const ActionsContainer = tw.div`
+  w-3/5
+  flex
+  flex-col
+  justify-center
+  items-center
+`;
+
+const StackTitle = tw.h1`
+  text-3xl
+  font-bold
+  mb-4
+`;

ui/app/build/[slug]/types.ts

@@ -2,13 +2,15 @@ export interface StackItem {
   type: string;
   description: string;
   variables?: string[];
+  instructions?: string;
 }
 
 export interface Stack {
   created: number;
   updated: number;
   name: string;
   description: string;
+  example_input: any;
   trigger: {
     type: string;
   };

ui/app/components/build/stack/Action.tsx

@@ -0,0 +1,33 @@
+import tw from 'tailwind-styled-components';
+
+import type { StackItem } from '../../../build/[slug]/types';
+
+interface ActionProps {
+  actionInfo: StackItem;
+  index: number;
+}
+
+const Action: React.FC<ActionProps> = ({ actionInfo, index }) => {
+  return (
+    <ActionContainer>
+      <p>{actionInfo.type}</p>
+      <p>{actionInfo.description}</p>
+    </ActionContainer>
+  );
+};
+
+export default Action;
+
+const ActionContainer = tw.div`
+    w-1/2
+    p-4
+    border
+    border-gray-300
+    bg-gray-50
+    rounded
+    mb-4
+    flex
+    flex-col
+    items-center
+    justify-center
+`;

ui/app/components/stacks/v2/summarize-commits.json

@@ -3,18 +3,21 @@
   "updated": 1484938100,
   "name": "Github Commits",
   "description": "This recipe summarizes the commits from a Github user in the last month",
+  "example_input": "",
   "trigger": {
     "type": "click"
   },
   "stack": [
     {
       "type": "code",
-      "description": "Log the Github commits from {github_name} from the last month",
+      "instructions": "Log the Github commits from {github_name} from the last month",
+      "description": "Logs the commits from the last month",
       "variables": ["github_name"]
     },
     {
       "type": "llm",
-      "description": "These are the commits from {github_name} in the last month. Please summarize the activity of the user."
+      "instructions": "These are the commits from {github_name} in the last month. Please summarize the activity of the user.",
+      "description": "Summarizes the collected commits."
     }
   ],
   "variables": {

ui/public/stacks/triggers/types.ts

@@ -0,0 +1,54 @@
+export interface Trigger {
+  type: string;
+  example_output: any;
+}
+
+export interface CronTrigger extends Trigger {
+  type: 'time';
+  schedule: string;
+}
+
+export interface WebhookTrigger extends Trigger {
+  type: 'webhook';
+  endpoint: string;
+}
+
+export interface EmailTrigger extends Trigger {
+  type: 'email';
+  subject: string;
+  from: string;
+  to: string;
+  body: string;
+}
+
+export interface TextTrigger extends Trigger {
+  type: 'text';
+  text: string;
+  from: string;
+  to: string;
+}
+
+export interface SlackTrigger extends Trigger {
+  type: 'slack';
+  channel: string;
+  text: string;
+  user: string;
+}
+
+export interface DiscordTrigger extends Trigger {
+  type: 'discord';
+  channel: string;
+  text: string;
+  user: string;
+}
+
+export interface TelegramTrigger extends Trigger {
+  type: 'telegram';
+  chat_id: string;
+  text: string;
+}
+
+export interface CustomTrigger extends Trigger {
+  type: 'custom';
+  name: string;
+}

ui/public/stacks/v2/summarize-commits.json

@@ -0,0 +1,26 @@
+{
+  "created": 1484938100,
+  "updated": 1484938100,
+  "name": "Github Commits",
+  "description": "This recipe summarizes the commits from a Github user in the last month",
+  "example_input": "",
+  "trigger": {
+    "type": "click"
+  },
+  "stack": [
+    {
+      "type": "code",
+      "instructions": "Log the Github commits from {github_name} from the last month",
+      "description": "Logs the commits from the last month",
+      "variables": ["github_name"]
+    },
+    {
+      "type": "llm",
+      "instructions": "These are the commits from {github_name} in the last month. Please summarize the activity of the user.",
+      "description": "Summarizes the collected commits."
+    }
+  ],
+  "variables": {
+    "github_name": "SilenNaihin"
+  }
+}