From 28c07881a6a8493974c3586bb2552dc1f7e93359 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Thu, 9 Jan 2025 10:50:04 -0800 Subject: [PATCH] Cleaned up repo --- app/w/[id]/workflow.tsx | 2 +- app/w/components/{ => block}/block.tsx | 27 ++- app/w/components/block/blocks.ts | 37 ++++ ...rkflow-control-bar.tsx => control-bar.tsx} | 6 +- app/w/components/desktop-toolbar.tsx | 57 ------- app/w/components/search.tsx | 33 ---- app/w/components/sidebar.tsx | 61 +++++++ .../components/{ => toolbar}/toolbar-tabs.tsx | 0 app/w/components/toolbar/toolbar.tsx | 26 +++ app/w/components/user.tsx | 64 ------- app/w/layout.tsx | 159 ++---------------- 11 files changed, 151 insertions(+), 321 deletions(-) rename app/w/components/{ => block}/block.tsx (69%) create mode 100644 app/w/components/block/blocks.ts rename app/w/components/{workflow-control-bar.tsx => control-bar.tsx} (93%) delete mode 100644 app/w/components/desktop-toolbar.tsx delete mode 100644 app/w/components/search.tsx create mode 100644 app/w/components/sidebar.tsx rename app/w/components/{ => toolbar}/toolbar-tabs.tsx (100%) create mode 100644 app/w/components/toolbar/toolbar.tsx delete mode 100644 app/w/components/user.tsx diff --git a/app/w/[id]/workflow.tsx b/app/w/[id]/workflow.tsx index 44467d3248..4551089b83 100644 --- a/app/w/[id]/workflow.tsx +++ b/app/w/[id]/workflow.tsx @@ -1,7 +1,7 @@ 'use client' import { useState, useCallback, useEffect } from 'react' -import { BlockProps } from '../components/block' +import { BlockProps } from '../components/block/block' const ZOOM_SPEED = 0.005 const MIN_ZOOM = 0.5 diff --git a/app/w/components/block.tsx b/app/w/components/block/block.tsx similarity index 69% rename from app/w/components/block.tsx rename to app/w/components/block/block.tsx index de6e49e28b..b692d8dc26 100644 --- a/app/w/components/block.tsx +++ b/app/w/components/block/block.tsx @@ -1,21 +1,14 @@ -import { AgentIcon, ApiIcon, ConditionalIcon } from '@/components/icons' +import type { BlockConfig } from './blocks' -export interface BlockProps { - title: string - description: string - type: 'agent' | 'api' | 'conditional' - bgColor: string -} - -const BLOCK_ICONS = { - agent: AgentIcon, - api: ApiIcon, - conditional: ConditionalIcon, -} as const - -export function Block({ title, description, type, bgColor }: BlockProps) { - const Icon = BLOCK_ICONS[type] +export type BlockProps = BlockConfig +export function Block({ + title, + description, + type, + bgColor, + icon: Icon, +}: BlockProps) { const handleDragStart = (e: React.DragEvent) => { e.dataTransfer.setData( 'application/json', @@ -32,7 +25,7 @@ export function Block({ title, description, type, bgColor }: BlockProps) {
{/* Left Section - Workflow Info */} @@ -24,7 +24,7 @@ export function WorkflowControlBar() { @@ -37,7 +37,7 @@ export function WorkflowControlBar() { diff --git a/app/w/components/desktop-toolbar.tsx b/app/w/components/desktop-toolbar.tsx deleted file mode 100644 index e5af75b224..0000000000 --- a/app/w/components/desktop-toolbar.tsx +++ /dev/null @@ -1,57 +0,0 @@ -'use client' - -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', - bgColor: BLOCK_COLORS.agent, - }, - { - type: 'api', - title: 'API', - description: 'Connect to any API', - bgColor: BLOCK_COLORS.api, - }, - { - type: 'conditional', - title: 'Conditional', - description: 'Create branching logic', - bgColor: BLOCK_COLORS.conditional, - }, -] as const - -export function DesktopToolbar() { - const [activeTab, setActiveTab] = useState<'basic' | 'advanced'>('basic') - - return ( -
- - -
- {activeTab === 'basic' ? ( -
- {BASIC_BLOCKS.map((block) => ( - - ))} -
- ) : ( -
- {/* Advanced tab content */} - Advanced Content Here -
- )} -
-
- ) -} diff --git a/app/w/components/search.tsx b/app/w/components/search.tsx deleted file mode 100644 index 8326723300..0000000000 --- a/app/w/components/search.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client' - -import { useTransition } from 'react' -import { useRouter } from 'next/navigation' -import { Input } from '@/components/ui/input' -import { Spinner } from '@/components/icons' -import { Search } from 'lucide-react' - -export function SearchInput() { - const router = useRouter() - const [isPending, startTransition] = useTransition() - - function searchAction(formData: FormData) { - let value = formData.get('q') as string - let params = new URLSearchParams({ q: value }) - startTransition(() => { - router.replace(`/?${params.toString()}`) - }) - } - - return ( -
- - - {isPending && } - - ) -} diff --git a/app/w/components/sidebar.tsx b/app/w/components/sidebar.tsx new file mode 100644 index 0000000000..afe5688e3e --- /dev/null +++ b/app/w/components/sidebar.tsx @@ -0,0 +1,61 @@ +import Link from 'next/link' +import { NavItem } from './nav-item' +import { + Home, + ShoppingCart, + Package, + Users2, + LineChart, + Settings, + PanelLeft, + Package2, + Plus, +} from 'lucide-react' +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from '@/components/ui/tooltip' +import { AgentIcon } from '@/components/icons' + +export function Sidebar() { + return ( + + ) +} diff --git a/app/w/components/toolbar-tabs.tsx b/app/w/components/toolbar/toolbar-tabs.tsx similarity index 100% rename from app/w/components/toolbar-tabs.tsx rename to app/w/components/toolbar/toolbar-tabs.tsx diff --git a/app/w/components/toolbar/toolbar.tsx b/app/w/components/toolbar/toolbar.tsx new file mode 100644 index 0000000000..41756861ba --- /dev/null +++ b/app/w/components/toolbar/toolbar.tsx @@ -0,0 +1,26 @@ +'use client' + +import { useState } from 'react' +import { ToolbarTabs } from './toolbar-tabs' +import { Block } from '../block/block' +import { BLOCKS } from '../block/blocks' + +export function Toolbar() { + const [activeTab, setActiveTab] = useState<'basic' | 'advanced'>('basic') + + return ( +
+ + +
+
+ {BLOCKS.filter((block) => block.category === activeTab).map( + (block) => ( + + ) + )} +
+
+
+ ) +} diff --git a/app/w/components/user.tsx b/app/w/components/user.tsx deleted file mode 100644 index e9ac21e817..0000000000 --- a/app/w/components/user.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { Button } from '@/components/ui/button' -// import { auth, signOut } from '@/lib/auth' -import Image from 'next/image' -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from '@/components/ui/dropdown-menu' -import Link from 'next/link' - -export async function User() { - // let session = await auth() - // let user = session?.user - - return ( - - - - - - My Account - - Settings - Support - - {/* {user ? ( - -
{ - 'use server' - await signOut() - }} - > - -
- - ) : ( - - Sign In - - )} */} - - Sign In - - - - ) -} diff --git a/app/w/layout.tsx b/app/w/layout.tsx index 76ca30b3e2..9800b89222 100644 --- a/app/w/layout.tsx +++ b/app/w/layout.tsx @@ -1,33 +1,7 @@ import Providers from './providers' -import Link from 'next/link' -import { NavItem } from './components/nav-item' -import { - Home, - ShoppingCart, - Package, - Users2, - LineChart, - Settings, - PanelLeft, - Package2, - Plus, -} from 'lucide-react' -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from '@/components/ui/tooltip' -import { Button } from '@/components/ui/button' -import { - Sheet, - SheetContent, - SheetTrigger, - SheetTitle, -} from '@/components/ui/sheet' -import Image from 'next/image' -import { DesktopToolbar } from './components/desktop-toolbar' -import { WorkflowControlBar } from './components/workflow-control-bar' -import { AgentIcon } from '@/components/icons' +import { Toolbar } from './components/toolbar/toolbar' +import { ControlBar } from './components/control-bar' +import { Sidebar } from './components/sidebar' export default function WorkspaceLayout({ children, @@ -36,125 +10,18 @@ export default function WorkspaceLayout({ }) { return ( -
-
- - +
+
-
-
- -
-
- {children} -
-
-
+ +
+ {children} +
+
) } - -function DesktopNav() { - return ( - - ) -} - -function MobileNav() { - return ( - - - - - - Navigation Menu - - - - ) -}