diff --git a/app/w/[id]/page.tsx b/app/w/[id]/page.tsx index d9bcf868ba..3ffb4e2a4a 100644 --- a/app/w/[id]/page.tsx +++ b/app/w/[id]/page.tsx @@ -1,3 +1,3 @@ -import WorkFlow from './workflows' +import WorkFlow from './workflow' export default WorkFlow diff --git a/app/w/[id]/workflow.tsx b/app/w/[id]/workflow.tsx new file mode 100644 index 0000000000..e3ffbda484 --- /dev/null +++ b/app/w/[id]/workflow.tsx @@ -0,0 +1,16 @@ +export default function Workflow() { + return ( + //
+ //
+ // {/* Canvas content will go here */} + //
+ //
+ <> + ) +} diff --git a/app/w/[id]/workflows.tsx b/app/w/[id]/workflows.tsx deleted file mode 100644 index f4fc6ce8eb..0000000000 --- a/app/w/[id]/workflows.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Workflows() { - return ( -
- <> -
- ) -} diff --git a/app/w/components/block.tsx b/app/w/components/block.tsx new file mode 100644 index 0000000000..55f8aebcd9 --- /dev/null +++ b/app/w/components/block.tsx @@ -0,0 +1,38 @@ +import Image from 'next/image' + +export interface BlockProps { + title: string + description: string + imagePath: string + type: 'agent' | 'api' | 'conditional' + bgColor: string +} + +export function Block({ + title, + description, + imagePath, + type, + bgColor, +}: BlockProps) { + return ( +
+
+ {`${title} +
+
+

{title}

+

{description}

+
+
+ ) +} diff --git a/app/w/components/desktop-toolbar.tsx b/app/w/components/desktop-toolbar.tsx index 84262dde78..3e0d4ab76a 100644 --- a/app/w/components/desktop-toolbar.tsx +++ b/app/w/components/desktop-toolbar.tsx @@ -2,6 +2,37 @@ import { useState } from 'react' import { ToolbarTabs } from './toolbar-tabs' +import { Block } from './block' + +const BLOCK_COLORS = { + agent: '#7F2FFF', + api: '#2F55FF', + conditional: '#FF972F', +} as const + +const BASIC_BLOCKS = [ + { + type: 'agent', + title: 'Agent', + description: 'Use any LLM', + imagePath: '/blocks/agent.svg', + bgColor: BLOCK_COLORS.agent, + }, + { + type: 'api', + title: 'API', + description: 'Connect to any API', + imagePath: '/blocks/api.svg', + bgColor: BLOCK_COLORS.api, + }, + { + type: 'conditional', + title: 'Conditional', + description: 'Create branching logic', + imagePath: '/blocks/conditional.svg', + bgColor: BLOCK_COLORS.conditional, + }, +] as const export function DesktopToolbar() { const [activeTab, setActiveTab] = useState<'basic' | 'advanced'>('basic') @@ -12,9 +43,10 @@ export function DesktopToolbar() {
{activeTab === 'basic' ? ( -
- {/* Basic tab content */} - Basic Content Here +
+ {BASIC_BLOCKS.map((block) => ( + + ))}
) : (
diff --git a/public/blocks/agent.svg b/public/blocks/agent.svg new file mode 100644 index 0000000000..61e1ab9755 --- /dev/null +++ b/public/blocks/agent.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/blocks/api.svg b/public/blocks/api.svg new file mode 100644 index 0000000000..40f45ddf47 --- /dev/null +++ b/public/blocks/api.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/blocks/conditional.svg b/public/blocks/conditional.svg new file mode 100644 index 0000000000..73cefe10fd --- /dev/null +++ b/public/blocks/conditional.svg @@ -0,0 +1,3 @@ + + +