diff --git a/app/w/components/block.tsx b/app/w/components/block.tsx
index dc4198102e..de6e49e28b 100644
--- a/app/w/components/block.tsx
+++ b/app/w/components/block.tsx
@@ -1,29 +1,28 @@
-import Image from 'next/image'
+import { AgentIcon, ApiIcon, ConditionalIcon } from '@/components/icons'
export interface BlockProps {
title: string
description: string
- imagePath: string
type: 'agent' | 'api' | 'conditional'
bgColor: string
}
-export function Block({
- title,
- description,
- imagePath,
- type,
- bgColor,
-}: BlockProps) {
+const BLOCK_ICONS = {
+ agent: AgentIcon,
+ api: ApiIcon,
+ conditional: ConditionalIcon,
+} as const
+
+export function Block({ title, description, type, bgColor }: BlockProps) {
+ const Icon = BLOCK_ICONS[type]
+
const handleDragStart = (e: React.DragEvent) => {
- // Pass block data as JSON string
e.dataTransfer.setData(
'application/json',
JSON.stringify({
type,
title,
description,
- imagePath,
bgColor,
})
)
@@ -39,12 +38,10 @@ export function Block({
className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg"
style={{ backgroundColor: bgColor }}
>
-
diff --git a/app/w/components/desktop-toolbar.tsx b/app/w/components/desktop-toolbar.tsx
index 3e0d4ab76a..e5af75b224 100644
--- a/app/w/components/desktop-toolbar.tsx
+++ b/app/w/components/desktop-toolbar.tsx
@@ -15,21 +15,18 @@ 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
diff --git a/app/w/layout.tsx b/app/w/layout.tsx
index 1fc42fe796..76ca30b3e2 100644
--- a/app/w/layout.tsx
+++ b/app/w/layout.tsx
@@ -27,6 +27,7 @@ import {
import Image from 'next/image'
import { DesktopToolbar } from './components/desktop-toolbar'
import { WorkflowControlBar } from './components/workflow-control-bar'
+import { AgentIcon } from '@/components/icons'
export default function WorkspaceLayout({
children,
@@ -64,13 +65,7 @@ function DesktopNav() {
href="#"
className="group flex h-8 w-8 items-center justify-center rounded-lg bg-[#7F2FFF]"
>
-
+
Sim Studio
diff --git a/components/icons.tsx b/components/icons.tsx
index 59c28f3fd6..07bd7ae114 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -87,40 +87,78 @@ export function Spinner() {
)
}
-export function Logo() {
+export function AgentIcon(props: React.SVGProps
) {
return (
)
}
-export function VercelLogo(props: React.SVGProps) {
+export function ApiIcon(props: React.SVGProps) {
return (
+ )
+}
+
+export function ConditionalIcon(props: React.SVGProps) {
+ return (
+
)
}
diff --git a/public/logo.svg b/public/logo.svg
deleted file mode 100644
index 6bc3f5067d..0000000000
--- a/public/logo.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-