Completed subblock state for all except table and code

app/w/components/workflow-block/sub-block/components/dropdown.tsx

@@ -5,6 +5,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { useSubBlockValue } from '../hooks/use-sub-block-value'
 
 interface DropdownProps {
   options: string[]
@@ -19,8 +20,13 @@ export function Dropdown({
   blockId,
   subBlockId,
 }: DropdownProps) {
+  const [value, setValue] = useSubBlockValue(blockId, subBlockId)
+
   return (
-    <Select defaultValue={defaultValue ?? options[0]}>
+    <Select
+      defaultValue={defaultValue ?? options[0]}
+      onValueChange={(value) => setValue(value)}
+    >
       <SelectTrigger>
         <SelectValue placeholder="Select an option" />
       </SelectTrigger>

app/w/components/workflow-block/sub-block/components/long-input.tsx

@@ -1,5 +1,5 @@
 import { Textarea } from '@/components/ui/textarea'
-import { useState } from 'react'
+import { useSubBlockValue } from '../hooks/use-sub-block-value'
 
 interface LongInputProps {
   placeholder?: string
@@ -12,14 +12,14 @@ export function LongInput({
   blockId,
   subBlockId,
 }: LongInputProps) {
-  const [value, setValue] = useState('')
+  const [value, setValue] = useSubBlockValue(blockId, subBlockId)
 
   return (
     <Textarea
       className="w-full resize-none placeholder:text-muted-foreground/50"
       rows={3}
       placeholder={placeholder ?? ''}
-      value={value}
+      value={value?.toString() ?? ''}
       onChange={(e) => setValue(e.target.value)}
     />
   )

app/w/components/workflow-block/sub-block/components/short-input.tsx

@@ -1,5 +1,6 @@
 import { Input } from '@/components/ui/input'
 import { useState } from 'react'
+import { useSubBlockValue } from '../hooks/use-sub-block-value'
 
 interface ShortInputProps {
   placeholder?: string
@@ -15,14 +16,14 @@ export function ShortInput({
   password,
 }: ShortInputProps) {
   const [isFocused, setIsFocused] = useState(false)
-  const [value, setValue] = useState('')
+  const [value, setValue] = useSubBlockValue(blockId, subBlockId)
 
   return (
     <Input
       className="w-full placeholder:text-muted-foreground/50"
       placeholder={placeholder ?? ''}
       type={password && !isFocused ? 'password' : 'text'}
-      value={value}
+      value={value?.toString() ?? ''}
       onChange={(e) => setValue(e.target.value)}
       onFocus={() => setIsFocused(true)}
       onBlur={() => setIsFocused(false)}

app/w/components/workflow-block/sub-block/components/slider-input.tsx

@@ -1,5 +1,5 @@
 import { Slider } from '@/components/ui/slider'
-import { useState } from 'react'
+import { useSubBlockValue } from '../hooks/use-sub-block-value'
 
 interface SliderInputProps {
   min?: number
@@ -16,33 +16,34 @@ export function SliderInput({
   blockId,
   subBlockId,
 }: SliderInputProps) {
-  const [sliderValue, setSliderValue] = useState(defaultValue)
+  const [value, setValue] = useSubBlockValue(blockId, subBlockId)
+  const sliderValue = value ?? defaultValue
 
   return (
     <div className="relative pt-2 pb-6">
       <Slider
-        defaultValue={[defaultValue]}
+        value={[Number(sliderValue)]}
         min={min}
         max={max}
         step={0.1}
-        onValueChange={(value) => setSliderValue(value[0])}
+        onValueChange={(value) => setValue(value[0])}
         className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4 [&_[class*=SliderTrack]]:h-1"
       />
       <div
         className="absolute text-sm text-muted-foreground"
         style={{
           left: `clamp(0%, ${
-            ((sliderValue - min) / (max - min)) * 100
+            ((Number(sliderValue) - min) / (max - min)) * 100
           }%, 100%)`,
           transform: `translateX(-${(() => {
-            const percentage = ((sliderValue - min) / (max - min)) * 100
+            const percentage = ((Number(sliderValue) - min) / (max - min)) * 100
             const bias = -25 * Math.sin((percentage * Math.PI) / 50)
             return percentage === 0 ? 0 : percentage === 100 ? 100 : 50 + bias
           })()}%)`,
           top: '24px',
         }}
       >
-        {sliderValue.toFixed(1)}
+        {Number(sliderValue).toFixed(1)}
       </div>
     </div>
   )

app/w/components/workflow-block/sub-block/sub-block.tsx

@@ -23,7 +23,7 @@ export function SubBlock({ blockId, config }: SubBlockProps) {
         return (
           <ShortInput
             blockId={blockId}
-            subBlockId={config.id || ''}
+            subBlockId={config.id}
             placeholder={config.placeholder}
             password={config.password}
           />
@@ -32,7 +32,7 @@ export function SubBlock({ blockId, config }: SubBlockProps) {
         return (
           <LongInput
             blockId={blockId}
-            subBlockId={config.id || ''}
+            subBlockId={config.id}
             placeholder={config.placeholder}
           />
         )
@@ -41,7 +41,7 @@ export function SubBlock({ blockId, config }: SubBlockProps) {
           <div onMouseDown={handleMouseDown}>
             <Dropdown
               blockId={blockId}
-              subBlockId={config.id || ''}
+              subBlockId={config.id}
               options={config.options ?? []}
             />
           </div>
@@ -50,7 +50,7 @@ export function SubBlock({ blockId, config }: SubBlockProps) {
         return (
           <SliderInput
             blockId={blockId}
-            subBlockId={config.id || ''}
+            subBlockId={config.id}
             min={config.min}
             max={config.max}
             defaultValue={

blocks/configs/agent.ts

@@ -23,24 +23,28 @@ export const AgentBlock: BlockConfig = {
     },
     subBlocks: [
       {
+        id: 'systemPrompt',
         title: 'System Prompt',
         type: 'long-input',
         layout: 'full',
         placeholder: 'Enter prompt'
       },
       {
+        id: 'context',
         title: 'Context',
         type: 'short-input',
         layout: 'full',
         placeholder: 'Enter text',
       },
       {
+        id: 'model',
         title: 'Model',
         type: 'dropdown',
         layout: 'half',
         options: ['GPT-4o', 'Gemini 2.0', 'Claude 3.5 Sonnet', 'DeepSeek V3', 'Grok 2'],
       },
       {
+        id: 'temperature',
         title: 'Temperature',
         type: 'slider',
         layout: 'half',
@@ -48,6 +52,7 @@ export const AgentBlock: BlockConfig = {
         max: 2,
       },
       {
+        id: 'apiKey',
         title: "API Key",
         type: "short-input",
         layout: "full",

blocks/configs/api.ts

@@ -14,24 +14,28 @@ export const ApiBlock: BlockConfig = {
     outputType: 'json',
     subBlocks: [
       {
+        id: 'url',
         title: 'URL',
         type: 'short-input',
         layout: 'full',
         placeholder: 'Enter URL',
       },
       {
+        id: 'method',
         title: 'Method',
         type: 'dropdown',
         layout: 'half',
         options: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
       },
       {
+        id: 'headers',
         title: 'Headers',
         type: 'table',
         layout: 'full',
         columns: ['Key', 'Value'],
       },
       {
+        id: 'body',
         title: 'Body',
         type: 'code',
         layout: 'full',

blocks/configs/conditional.ts

@@ -14,6 +14,7 @@ export const ConditionalBlock: BlockConfig = {
     outputType: 'boolean',
     subBlocks: [
       {
+        id: 'conditionType',
         title: 'Condition Type',
         type: 'dropdown',
         layout: 'full',
@@ -26,6 +27,7 @@ export const ConditionalBlock: BlockConfig = {
         ],
       },
       {
+        id: 'value',
         title: 'Value',
         type: 'short-input',
         layout: 'full',

blocks/types/block.ts

@@ -10,7 +10,7 @@ export type SubBlockType = 'short-input' | 'long-input' | 'dropdown' | 'slider'
 export type SubBlockLayout = 'full' | 'half'
 
 export interface SubBlockConfig {
-  id?: string
+  id: string
   title: string
   type: SubBlockType
   layout?: SubBlockLayout