chore: stringify output

web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx

@@ -7,12 +7,13 @@ import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import './style.css'
 
 type Props = {
-  value: string
+  value?: string | object
-  onChange: (value: string) => void
+  onChange?: (value: string) => void
   title: JSX.Element
   language: CodeLanguage
   headerRight?: JSX.Element
   readOnly?: boolean
+  isJSONStringifyBeauty?: boolean
 }
 
 const languageMap = {
@@ -22,12 +23,13 @@ const languageMap = {
 }
 
 const CodeEditor: FC<Props> = ({
-  value,
+  value = '',
-  onChange,
+  onChange = () => { },
   title,
   headerRight,
   language,
   readOnly,
+  isJSONStringifyBeauty,
 }) => {
   const [isFocus, setIsFocus] = React.useState(false)
 
@@ -64,11 +66,22 @@ const CodeEditor: FC<Props> = ({
     })
   }
 
+  const outPutValue = (() => {
+    if (!isJSONStringifyBeauty)
+      return value as string
+    try {
+      return JSON.stringify(value as object, null, 2)
+    }
+    catch (e) {
+      return value as string
+    }
+  })()
+
   return (
     <div>
       <Base
         title={title}
-        value={value}
+        value={outPutValue}
         headerRight={headerRight}
         isFocus={isFocus}
         minHeight={200}
@@ -79,7 +92,7 @@ const CodeEditor: FC<Props> = ({
           // language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
           language={languageMap[language] || 'javascript'}
           theme={isFocus ? 'focus-theme' : 'blur-theme'}
-          value={value}
+          value={outPutValue}
           onChange={handleEditorChange}
           // https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
           options={{

web/app/components/workflow/run/result-panel.tsx

@@ -48,16 +48,16 @@ const ResultPanel: FC<ResultPanelProps> = ({
           readOnly
           title={<div>INPUT</div>}
           language={CodeLanguage.json}
-          value={JSON.stringify(inputs)}
+          value={inputs}
-          onChange={() => {}}
+          isJSONStringifyBeauty
         />
         {process_data && (
           <CodeEditor
             readOnly
             title={<div>PROCESS DATA</div>}
             language={CodeLanguage.json}
-            value={JSON.stringify(process_data)}
+            value={process_data}
-            onChange={() => {}}
+            isJSONStringifyBeauty
           />
         )}
         {(outputs || status === 'running') && (
@@ -65,13 +65,13 @@ const ResultPanel: FC<ResultPanelProps> = ({
             readOnly
             title={<div>OUTPUT</div>}
             language={CodeLanguage.json}
-            value={JSON.stringify(outputs)}
+            value={outputs}
-            onChange={() => {}}
+            isJSONStringifyBeauty
           />
         )}
       </div>
       <div className='px-4 py-2'>
-        <div className='h-[0.5px] bg-black opacity-5'/>
+        <div className='h-[0.5px] bg-black opacity-5' />
       </div>
       <div className='px-4 py-2'>
         <MetaData