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