From 901d260192545d5f1ac2d11dfb7283cd26f21b11 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 12 Nov 2025 14:04:08 -0800
Subject: [PATCH] fix(files): changed file input value sample from string ->
 object

---
 .../components/starter/input-format.tsx       | 41 +++++++++++++++++++
 .../components/emcn/components/code/code.tsx  |  4 ++
 2 files changed, 45 insertions(+)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/starter/input-format.tsx
index 3c9fe885542..ad1e3671c54 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -310,6 +310,47 @@ export function FieldFormat({
       )
     }
 
+    if (field.type === 'files') {
+      const lineCount = fieldValue.split('\n').length
+      const gutterWidth = calculateGutterWidth(lineCount)
+
+      const renderLineNumbers = () => {
+        return Array.from({ length: lineCount }, (_, i) => (
+          <div
+            key={i}
+            className='font-medium font-mono text-[var(--text-muted)] text-xs'
+            style={{ height: `${21}px`, lineHeight: `${21}px` }}
+          >
+            {i + 1}
+          </div>
+        ))
+      }
+
+      return (
+        <Code.Container className='min-h-[120px]'>
+          <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
+          <Code.Content paddingLeft={`${gutterWidth}px`}>
+            <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
+              {
+                '[\n  {\n    "data": "data:application/pdf;base64,...",\n    "type": "file",\n    "name": "document.pdf",\n    "mime": "application/pdf"\n  }\n]'
+              }
+            </Code.Placeholder>
+            <Editor
+              value={fieldValue}
+              onValueChange={(newValue) => {
+                if (!isReadOnly) {
+                  updateField(field.id, 'value', newValue)
+                }
+              }}
+              highlight={(code) => highlight(code, languages.json, 'json')}
+              disabled={isReadOnly}
+              {...getCodeEditorProps({ disabled: isReadOnly })}
+            />
+          </Code.Content>
+        </Code.Container>
+      )
+    }
+
     return (
       <>
         <Input
diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx
index 0c265848fa9..70a0af68ed6 100644
--- a/apps/sim/components/emcn/components/code/code.tsx
+++ b/apps/sim/components/emcn/components/code/code.tsx
@@ -80,6 +80,10 @@ function Container({
         'group relative min-h-[100px] rounded-[4px] border border-[var(--border-strong)]',
         'bg-[#1F1F1F] font-medium font-mono text-sm transition-colors',
         'dark:border-[var(--border-strong)]',
+        // Overflow handling for long content
+        'overflow-x-auto',
+        // Vertical resize handle
+        'resize-y overflow-y-auto',
         // Streaming state
         isStreaming && 'streaming-effect',
         className