feat(workflow-block): new block, edge

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/dropdown/dropdown.tsx

@@ -18,25 +18,59 @@ import { useTagSelection } from '@/hooks/use-tag-selection'
 
 const logger = createLogger('LongInput')
 
+/**
+ * Default number of rows for the textarea
+ */
+const DEFAULT_ROWS = 5
+
+/**
+ * Height of each row in pixels
+ */
+const ROW_HEIGHT_PX = 24
+
+/**
+ * Minimum height constraint for the textarea in pixels
+ */
+const MIN_HEIGHT_PX = 80
+
+/**
+ * Props for the LongInput component
+ */
 interface LongInputProps {
+  /** Placeholder text to display when empty */
   placeholder?: string
+  /** Unique identifier for the block */
   blockId: string
+  /** Unique identifier for the sub-block */
   subBlockId: string
+  /** Whether a connection is being dragged */
   isConnecting: boolean
+  /** Configuration object for the sub-block */
   config: SubBlockConfig
+  /** Number of rows to display */
   rows?: number
+  /** Whether component is in preview mode */
   isPreview?: boolean
+  /** Value to display in preview mode */
   previewValue?: string | null
+  /** Controlled value from parent */
   value?: string
+  /** Callback when value changes */
   onChange?: (value: string) => void
+  /** Whether the input is disabled */
   disabled?: boolean
 }
 
-// Constants
-const DEFAULT_ROWS = 5
-const ROW_HEIGHT_PX = 24
-const MIN_HEIGHT_PX = 80
-
+/**
+ * Multi-line text input component with AI generation support and variable reference handling
+ *
+ * @remarks
+ * - Supports AI-powered content generation via Wand functionality
+ * - Handles drag-and-drop for connections and variable references
+ * - Provides environment variable and tag autocomplete
+ * - Resizable with custom drag handle
+ * - Integrates with ReactFlow for zoom control
+ */
 export function LongInput({
   placeholder,
   blockId,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/long-input/long-input.tsx

@@ -19,23 +19,52 @@ import { useWebhookManagement } from '@/hooks/use-webhook-management'
 
 const logger = createLogger('ShortInput')
 
+/**
+ * Props for the ShortInput component
+ */
 interface ShortInputProps {
+  /** Placeholder text to display when empty */
   placeholder?: string
+  /** Whether to mask the input as a password field */
   password?: boolean
+  /** Unique identifier for the block */
   blockId: string
+  /** Unique identifier for the sub-block */
   subBlockId: string
+  /** Whether a connection is being dragged */
   isConnecting: boolean
+  /** Configuration object for the sub-block */
   config: SubBlockConfig
+  /** Controlled value from parent */
   value?: string
+  /** Callback when value changes */
   onChange?: (value: string) => void
+  /** Whether component is in preview mode */
   isPreview?: boolean
+  /** Value to display in preview mode */
   previewValue?: string | null
+  /** Whether the input is disabled */
   disabled?: boolean
+  /** Whether the input is read-only */
   readOnly?: boolean
+  /** Whether to show a copy button */
   showCopyButton?: boolean
+  /** Whether to use webhook URL as value */
   useWebhookUrl?: boolean
 }
 
+/**
+ * Single-line text input component with advanced features
+ *
+ * @remarks
+ * - Supports AI-powered content generation via Wand functionality
+ * - Auto-detects API key fields and provides environment variable suggestions
+ * - Handles drag-and-drop for connections and variable references
+ * - Provides environment variable and tag autocomplete
+ * - Password masking with reveal on focus
+ * - Copy to clipboard functionality
+ * - Integrates with ReactFlow for zoom control
+ */
 export function ShortInput({
   blockId,
   subBlockId,
@@ -59,13 +88,12 @@ export function ShortInput({
   const [showTags, setShowTags] = useState(false)
   const [copied, setCopied] = useState(false)
 
-  const webhookManagement = useWebhookUrl
-    ? useWebhookManagement({
-        blockId,
-        triggerId: undefined,
-        isPreview,
-      })
-    : null
+  // Always call the hook - hooks must be called unconditionally
+  const webhookManagement = useWebhookManagement({
+    blockId,
+    triggerId: undefined,
+    isPreview,
+  })
 
   // Wand functionality - always call the hook unconditionally
   const wandHook = useWand({
@@ -141,7 +169,7 @@ export function ShortInput({
     }
   }, [localContent, wandHook.isStreaming, isPreview, disabled, setStoreValue])
 
-  // Check if this input is API key related
+  // Check if this input is API key related - memoized to prevent recalculation
   const isApiKeyField = useMemo(() => {
     const normalizedId = config?.id?.replace(/\s+/g, '').toLowerCase() || ''
     const normalizedTitle = config?.title?.replace(/\s+/g, '').toLowerCase() || ''
@@ -400,14 +428,14 @@ export function ShortInput({
   /**
    * Handles copying the value to the clipboard.
    */
-  const handleCopy = () => {
+  const handleCopy = useCallback(() => {
     const textToCopy = useWebhookUrl ? webhookManagement?.webhookUrl : value?.toString()
     if (textToCopy) {
       navigator.clipboard.writeText(textToCopy)
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     }
-  }
+  }, [useWebhookUrl, webhookManagement?.webhookUrl, value])
 
   // Handle key combinations
   const handleKeyDown = useCallback(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/short-input/short-input.tsx

@@ -1,10 +1,25 @@
+/**
+ * Props for the Text component
+ */
 interface TextProps {
+  /** Unique identifier for the block */
   blockId: string
+  /** Unique identifier for the sub-block */
   subBlockId: string
+  /** Text or HTML content to display */
   content: string
+  /** Additional CSS classes to apply */
   className?: string
 }
 
+/**
+ * Text display component with HTML rendering support
+ *
+ * @remarks
+ * - Automatically detects and renders HTML content safely
+ * - Applies prose styling for HTML content (links, code, lists, etc.)
+ * - Falls back to plain text rendering for non-HTML content
+ */
 export function Text({ blockId, subBlockId, content, className }: TextProps) {
   const containsHtml = /<[^>]+>/.test(content)