diff --git a/app/w/components/workflow-block/components/connection-block/connection-block.tsx b/app/w/components/workflow-block/components/connection-block/connection-block.tsx new file mode 100644 index 0000000000..85b517d365 --- /dev/null +++ b/app/w/components/workflow-block/components/connection-block/connection-block.tsx @@ -0,0 +1,33 @@ +import { useBlockConnections } from '@/app/w/hooks/use-block-connections' +import { Card } from '@/components/ui/card' + +interface ConnectionBlockProps { + blockId: string +} + +export function ConnectionBlock({ blockId }: ConnectionBlockProps) { + const { incomingConnections, hasIncomingConnections } = + useBlockConnections(blockId) + + if (!hasIncomingConnections) return null + + return ( +
+ {incomingConnections.map((connection) => ( + +
+ + {connection.name.replace(' ', '').toLowerCase()} + + + .{connection.outputType} + +
+
+ ))} +
+ ) +} diff --git a/app/w/components/workflow-block/workflow-block.tsx b/app/w/components/workflow-block/workflow-block.tsx index 75a3a4e9d0..f053ef6878 100644 --- a/app/w/components/workflow-block/workflow-block.tsx +++ b/app/w/components/workflow-block/workflow-block.tsx @@ -4,6 +4,7 @@ import { SubBlock } from './components/sub-block/sub-block' import { Handle, Position } from 'reactflow' import { cn } from '@/lib/utils' import { ActionBar } from './components/action-bar/action-bar' +import { ConnectionBlock } from './components/connection-block/connection-block' interface WorkflowBlockProps { id: string @@ -52,6 +53,7 @@ export function WorkflowBlock({ return ( {selected && } + ({ + edges: state.edges, + blocks: state.blocks + }), + shallow + ) + + const incomingConnections = edges + .filter(edge => edge.target === blockId) + .map(edge => { + const sourceBlock = blocks[edge.source] + return { + id: sourceBlock.id, + type: sourceBlock.type, + outputType: sourceBlock.outputType, + name: sourceBlock.name, + } + }) + + return { + incomingConnections, + hasIncomingConnections: incomingConnections.length > 0 + } +} \ No newline at end of file