From e321f883b0f0637b1d3f50e6ad8a2e30c5573807 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Mon, 9 Feb 2026 20:32:30 -0800
Subject: [PATCH] improvement(preview): added trigger mode context for deploy
 preview (#3177)

* improvement(preview): added trigger mode context for deploy preview

* use existing helper

* enhance disabled mode for subblocks

* update

* update all subblocks to allow scrolling in read only mode

* updated short and long input to match others, reverted triggerutils change
---
 .../document-tag-entry/document-tag-entry.tsx        |  5 ++++-
 .../sub-block/components/eval-input/eval-input.tsx   |  5 ++++-
 .../components/input-mapping/input-mapping.tsx       |  5 ++++-
 .../knowledge-tag-filters/knowledge-tag-filters.tsx  |  5 ++++-
 .../sub-block/components/long-input/long-input.tsx   |  5 +++--
 .../components/messages-input/messages-input.tsx     |  5 ++++-
 .../sub-block/components/short-input/short-input.tsx |  5 +++--
 .../sub-block/components/starter/input-format.tsx    | 10 ++++++++--
 .../components/variables-input/variables-input.tsx   | 10 ++++++++--
 .../components/preview-editor/preview-editor.tsx     | 12 ++++++++++--
 10 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index b21c6f9d4..7a6fa78fe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -324,7 +324,10 @@ export function DocumentTagEntry({
           ref={(el) => {
             if (el) overlayRefs.current[cellKey] = el
           }}
-          className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
+          className={cn(
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            !isReadOnly && 'pointer-events-none'
+          )}
         >
           <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
             {formatDisplayText(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index 997088bc6..f4bc3f68f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -226,7 +226,10 @@ export function EvalInput({
                         ref={(el) => {
                           if (el) descriptionOverlayRefs.current[metric.id] = el
                         }}
-                        className='pointer-events-none absolute inset-0 overflow-auto bg-transparent px-[8px] py-[8px] font-medium font-sans text-[#eeeeee] text-sm'
+                        className={cn(
+                          'absolute inset-0 overflow-auto bg-transparent px-[8px] py-[8px] font-medium font-sans text-[#eeeeee] text-sm',
+                          !(isPreview || disabled) && 'pointer-events-none'
+                        )}
                       >
                         <div className='whitespace-pre-wrap'>
                           {formatDisplayText(metric.description || '', {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
index 69189c762..ac78d2913 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
@@ -273,7 +273,10 @@ function InputMappingField({
                 ref={(el) => {
                   if (el) overlayRefs.current.set(fieldId, el)
                 }}
-                className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
+                className={cn(
+                  'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                  !disabled && 'pointer-events-none'
+                )}
                 style={{ overflowX: 'auto' }}
               >
                 <div
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index d297252ab..3ea3baa16 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -312,7 +312,10 @@ export function KnowledgeTagFilters({
           ref={(el) => {
             if (el) overlayRefs.current[cellKey] = el
           }}
-          className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
+          className={cn(
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            !isReadOnly && 'pointer-events-none'
+          )}
         >
           <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
             {formatDisplayText(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index ed7dcc23c..b83d278d6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -353,8 +353,9 @@ export function LongInput({
               <div
                 ref={overlayRef}
                 className={cn(
-                  'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm',
-                  (isPreview || disabled) && 'opacity-50'
+                  'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm',
+                  (isPreview || disabled) && 'opacity-50',
+                  !(isPreview || disabled) && 'pointer-events-none'
                 )}
                 style={{
                   fontFamily: 'inherit',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 30b3fa2e9..b5cd52600 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -719,7 +719,10 @@ export function MessagesInput({
                     ref={(el) => {
                       overlayRefs.current[fieldId] = el
                     }}
-                    className='pointer-events-none absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+                    className={cn(
+                      'absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                      !(isPreview || disabled) && 'pointer-events-none'
+                    )}
                   >
                     {formatDisplayText(message.content, {
                       accessiblePrefixes,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index 606f120a7..e2d2dd191 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -372,8 +372,9 @@ export const ShortInput = memo(function ShortInput({
                 <div
                   ref={overlayRef}
                   className={cn(
-                    'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] pr-3 font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                    (isPreview || disabled) && 'opacity-50'
+                    'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] pr-3 font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                    (isPreview || disabled) && 'opacity-50',
+                    !(isPreview || disabled) && 'pointer-events-none'
                   )}
                 >
                   <div className='min-w-fit whitespace-pre'>{formattedText}</div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index f12ceb3e2..3853cc58f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -269,7 +269,10 @@ export function FieldFormat({
           ref={(el) => {
             if (el) nameOverlayRefs.current[field.id] = el
           }}
-          className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
+          className={cn(
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            !isReadOnly && 'pointer-events-none'
+          )}
           style={{ scrollbarWidth: 'none' }}
         >
           <div
@@ -514,7 +517,10 @@ export function FieldFormat({
           ref={(el) => {
             if (el) overlayRefs.current[field.id] = el
           }}
-          className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
+          className={cn(
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            !isReadOnly && 'pointer-events-none'
+          )}
           style={{ scrollbarWidth: 'none' }}
         >
           <div
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 4d7cb2058..c3ab7a8cd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -452,7 +452,10 @@ export function VariablesInput({
                             ref={(el) => {
                               if (el) overlayRefs.current[assignment.id] = el
                             }}
-                            className='pointer-events-none absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm'
+                            className={cn(
+                              'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm',
+                              !isReadOnly && 'pointer-events-none'
+                            )}
                             style={{ scrollbarWidth: 'none' }}
                           >
                             <div className='w-full whitespace-pre-wrap break-words'>
@@ -514,7 +517,10 @@ export function VariablesInput({
                             ref={(el) => {
                               if (el) overlayRefs.current[assignment.id] = el
                             }}
-                            className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
+                            className={cn(
+                              'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                              !isReadOnly && 'pointer-events-none'
+                            )}
                             style={{ scrollbarWidth: 'none' }}
                           >
                             <div
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index bfc86ec20..936e8f114 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -43,7 +43,7 @@ import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/p
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { getBlock } from '@/blocks'
-import type { BlockConfig, BlockIcon, SubBlockConfig } from '@/blocks/types'
+import type { BlockConfig, BlockIcon, SubBlockConfig, SubBlockType } from '@/blocks/types'
 import { normalizeName } from '@/executor/constants'
 import { navigatePath } from '@/executor/variables/resolvers/reference'
 import { useWorkflowState } from '@/hooks/queries/workflows'
@@ -1140,9 +1140,17 @@ function PreviewEditorContent({
     (block.advancedMode ?? false) ||
     hasAdvancedValues(blockConfig.subBlocks, rawValues, canonicalIndex)
 
+  const isPureTriggerBlock = blockConfig.triggers?.enabled && blockConfig.category === 'triggers'
+  const effectiveTrigger = block.triggerMode === true
+
   const visibleSubBlocks = blockConfig.subBlocks.filter((subBlock) => {
     if (subBlock.hidden || subBlock.hideFromPreview) return false
-    if (subBlock.mode === 'trigger' && blockConfig.category !== 'triggers') return false
+
+    if (subBlock.type === ('trigger-config' as SubBlockType)) {
+      return effectiveTrigger || isPureTriggerBlock
+    }
+    if (subBlock.mode === 'trigger' && !effectiveTrigger) return false
+    if (effectiveTrigger && subBlock.mode !== 'trigger') return false
     if (!isSubBlockFeatureEnabled(subBlock)) return false
     if (
       !isSubBlockVisibleForMode(