From 1b0dd1653dc0cddc49a050082255f8293f210f1c Mon Sep 17 00:00:00 2001 From: Silen Naihin Date: Sat, 17 Feb 2024 12:56:00 -0500 Subject: [PATCH] setting up stacks screen --- ui/app/api/triggers/types.ts | 54 +++++++++++++ ui/app/build/[slug]/page.tsx | 69 ++++++++++++++--- ui/app/build/[slug]/types.ts | 2 + ui/app/components/build/stack/Action.tsx | 33 ++++++++ .../stacks/v2/summarize-commits.json | 7 +- ui/public/stacks/triggers/types.ts | 54 +++++++++++++ ui/public/stacks/utils/MailchimpSubscribe.tsx | 75 ------------------- ui/public/stacks/v2/summarize-commits.json | 26 +++++++ 8 files changed, 231 insertions(+), 89 deletions(-) create mode 100644 ui/app/api/triggers/types.ts create mode 100644 ui/app/components/build/stack/Action.tsx create mode 100644 ui/public/stacks/triggers/types.ts delete mode 100644 ui/public/stacks/utils/MailchimpSubscribe.tsx create mode 100644 ui/public/stacks/v2/summarize-commits.json diff --git a/ui/app/api/triggers/types.ts b/ui/app/api/triggers/types.ts new file mode 100644 index 00000000..1d9e2269 --- /dev/null +++ b/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; +} diff --git a/ui/app/build/[slug]/page.tsx b/ui/app/build/[slug]/page.tsx index abe808df..cf2e69c3 100644 --- a/ui/app/build/[slug]/page.tsx +++ b/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(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
Loading...
; + return ( -
-

Workflow

-
+ + {stackInfo?.name} +

{stackInfo?.description}

+ Trigger: {stackInfo?.trigger.type} + + {stackInfo?.stack.map((actionInfo, index) => ( + + ))} + + ); }; 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 +`; diff --git a/ui/app/build/[slug]/types.ts b/ui/app/build/[slug]/types.ts index d176b701..2f5eea91 100644 --- a/ui/app/build/[slug]/types.ts +++ b/ui/app/build/[slug]/types.ts @@ -2,6 +2,7 @@ export interface StackItem { type: string; description: string; variables?: string[]; + instructions?: string; } export interface Stack { @@ -9,6 +10,7 @@ export interface Stack { updated: number; name: string; description: string; + example_input: any; trigger: { type: string; }; diff --git a/ui/app/components/build/stack/Action.tsx b/ui/app/components/build/stack/Action.tsx new file mode 100644 index 00000000..7eebef73 --- /dev/null +++ b/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 = ({ actionInfo, index }) => { + return ( + +

{actionInfo.type}

+

{actionInfo.description}

+ + ); +}; + +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 +`; diff --git a/ui/app/components/stacks/v2/summarize-commits.json b/ui/app/components/stacks/v2/summarize-commits.json index e225f16f..1034ed3c 100644 --- a/ui/app/components/stacks/v2/summarize-commits.json +++ b/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": { diff --git a/ui/public/stacks/triggers/types.ts b/ui/public/stacks/triggers/types.ts new file mode 100644 index 00000000..1d9e2269 --- /dev/null +++ b/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; +} diff --git a/ui/public/stacks/utils/MailchimpSubscribe.tsx b/ui/public/stacks/utils/MailchimpSubscribe.tsx deleted file mode 100644 index dc2a8a16..00000000 --- a/ui/public/stacks/utils/MailchimpSubscribe.tsx +++ /dev/null @@ -1,75 +0,0 @@ -'use client'; - -import { useFormState, useFormStatus } from 'react-dom'; -import { IoSend } from 'react-icons/io5'; -import tw from 'tailwind-styled-components'; - -import { Form } from '../v1/creation/input-with-button'; -import { subscribeEmail } from './actions'; - -const glowingShadowStyle = { - boxShadow: `0 0 10px rgba(0, 0, 0, 0.1), - 0 0 20px rgba(0, 0, 0, 0.05)`, -}; - -const MailchimpSubscribe = () => { - const [outputState, functionAction] = useFormState(subscribeEmail, { - status: '', - }); - const { pending } = useFormStatus(); - - return ( - <> - {outputState.status === 'success' ? ( -
- Thanks for subscribing! Join our{' '} - - Discord - -
- ) : ( - <> -
-
- - -
-
- {outputState.status === 'error' &&
error.title
} - - )} - - ); -}; - -export default MailchimpSubscribe; - -const Input = tw.input` - w-full rounded-full border - py-2 pl-4 pr-10 transition - duration-300 ease-in-out - text-lg - focus:outline-none -`; - -const Button = tw.button` - focus:shadow-outline absolute - right-0 top-0 h-full cursor-pointer - rounded-r-full px-4 font-bold - text-black focus:outline-none -`; diff --git a/ui/public/stacks/v2/summarize-commits.json b/ui/public/stacks/v2/summarize-commits.json new file mode 100644 index 00000000..1034ed3c --- /dev/null +++ b/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" + } +}