improvement(workflow-block): support manual workflow ID via advanced mode (#4573)

* improvement(workflow-block): support manual workflow ID via advanced mode

* fix(input-mapping): resolve workflowId via canonical hook for advanced mode

* fix(input-mapping): fall back to manualWorkflowId in preview context

* refactor(input-mapping): resolve workflowId via useDependsOnGate canonical pattern

Author: waleedlatif1

apps/sim/app/chat/components/message/components/markdown-renderer.tsx

@@ -115,7 +115,7 @@ const COMPONENTS = {
   ),
 
   blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-    <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 font-sans text-[var(--text-primary)] italic [&>p]:my-2 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0'>
+    <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 font-sans text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
       {children}
     </blockquote>
   ),

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx

@@ -263,7 +263,7 @@ function CalloutBlock({ type, children }: { type: string; children?: React.React
   const config = CALLOUT_CONFIG[type]
   if (!config) {
     return (
-      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p]:my-2 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0'>
+      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
         {children}
       </blockquote>
     )
@@ -605,7 +605,7 @@ const STATIC_MARKDOWN_COMPONENTS = {
       return <CalloutBlock type={calloutType}>{children}</CalloutBlock>
     }
     return (
-      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p]:my-2 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0'>
+      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
         {children}
       </blockquote>
     )

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx

@@ -224,7 +224,7 @@ const MARKDOWN_COMPONENTS = {
   },
   blockquote({ children }: { children?: React.ReactNode }) {
     return (
-      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p]:my-2 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0'>
+      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
         {children}
       </blockquote>
     )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

@@ -430,7 +430,7 @@ const NOTE_COMPONENTS = {
     <em className='break-words text-[var(--text-tertiary)]'>{children}</em>
   ),
   blockquote: ({ children }: { children?: React.ReactNode }) => (
-    <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p]:my-2 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0'>
+    <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
       {children}
     </blockquote>
   ),

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

@@ -6,10 +6,11 @@ import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
+import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
-import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
+import type { SubBlockConfig } from '@/blocks/types'
 import { useWorkflowState } from '@/hooks/queries/workflows'
 
 /**
@@ -35,7 +36,7 @@ interface InputMappingFieldProps {
  */
 interface InputMappingProps {
   blockId: string
-  subBlockId: string
+  subBlock: SubBlockConfig
   isPreview?: boolean
   previewValue?: Record<string, unknown>
   disabled?: boolean
@@ -50,17 +51,20 @@ interface InputMappingProps {
  */
 export function InputMapping({
   blockId,
-  subBlockId,
+  subBlock,
   isPreview = false,
   previewValue,
   disabled = false,
   previewContextValues,
 }: InputMappingProps) {
+  const subBlockId = subBlock.id
   const [mapping, setMapping] = useSubBlockValue(blockId, subBlockId)
-  const [storeWorkflowId] = useSubBlockValue(blockId, 'workflowId')
-  const selectedWorkflowId = previewContextValues
-    ? resolvePreviewContextValue(previewContextValues.workflowId)
-    : storeWorkflowId
+  const { dependencyValues } = useDependsOnGate(blockId, subBlock, {
+    disabled,
+    isPreview,
+    previewContextValues,
+  })
+  const selectedWorkflowId = dependencyValues.workflowId
 
   const inputController = useSubBlockInput({
     blockId,

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

@@ -1040,7 +1040,7 @@ function SubBlockComponent({
         return (
           <InputMapping
             blockId={blockId}
-            subBlockId={config.id}
+            subBlock={config}
             isPreview={isPreview}
             previewValue={previewValue as any}
             disabled={isDisabled}

apps/sim/blocks/blocks/workflow.ts

@@ -14,9 +14,20 @@ export const WorkflowBlock: BlockConfig = {
       id: 'workflowId',
       title: 'Select Workflow',
       type: 'workflow-selector',
+      canonicalParamId: 'workflowId',
       selectorKey: 'sim.workflows',
       placeholder: 'Search workflows...',
       required: true,
+      mode: 'basic',
+    },
+    {
+      id: 'manualWorkflowId',
+      title: 'Workflow ID',
+      type: 'short-input',
+      canonicalParamId: 'workflowId',
+      placeholder: 'Enter workflow ID',
+      required: true,
+      mode: 'advanced',
     },
     {
       id: 'input',

apps/sim/blocks/blocks/workflow_input.ts

@@ -19,9 +19,20 @@ export const WorkflowInputBlock: BlockConfig = {
       id: 'workflowId',
       title: 'Select Workflow',
       type: 'workflow-selector',
+      canonicalParamId: 'workflowId',
       selectorKey: 'sim.workflows',
       placeholder: 'Search workflows...',
       required: true,
+      mode: 'basic',
+    },
+    {
+      id: 'manualWorkflowId',
+      title: 'Workflow ID',
+      type: 'short-input',
+      canonicalParamId: 'workflowId',
+      placeholder: 'Enter workflow ID',
+      required: true,
+      mode: 'advanced',
     },
     {
       id: 'inputMapping',