From 03ec3513f3bae6be9679ad5ce20ed8529d682c87 Mon Sep 17 00:00:00 2001
From: weiwenyan-dev <154779315+weiwenyan-dev@users.noreply.github.com>
Date: Thu, 6 Feb 2025 13:00:04 +0800
Subject: [PATCH] Fix bug large data no render (#12683)

Co-authored-by: ex_wenyan.wei <ex_wenyan.wei@tcl.com>
---
 .../components/workflow/run/output-panel.tsx  | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/web/app/components/workflow/run/output-panel.tsx b/web/app/components/workflow/run/output-panel.tsx
index a1667d9b456525..ee508572c50d18 100644
--- a/web/app/components/workflow/run/output-panel.tsx
+++ b/web/app/components/workflow/run/output-panel.tsx
@@ -23,7 +23,14 @@ const OutputPanel: FC<OutputPanelProps> = ({
   height,
 }) => {
   const isTextOutput = useMemo(() => {
-    return outputs && Object.keys(outputs).length === 1 && typeof outputs[Object.keys(outputs)[0]] === 'string'
+    if (!outputs || typeof outputs !== 'object')
+      return false
+    const keys = Object.keys(outputs)
+    const value = outputs[keys[0]]
+    return keys.length === 1 && (
+      typeof value === 'string'
+      || (Array.isArray(value) && value.every(item => typeof item === 'string'))
+    )
   }, [outputs])
 
   const fileList = useMemo(() => {
@@ -65,7 +72,13 @@ const OutputPanel: FC<OutputPanelProps> = ({
       )}
       {isTextOutput && (
         <div className='px-4 py-2'>
-          <Markdown content={outputs[Object.keys(outputs)[0]] || ''} />
+          <Markdown
+            content={
+              Array.isArray(outputs[Object.keys(outputs)[0]])
+                ? outputs[Object.keys(outputs)[0]].join('\n')
+                : (outputs[Object.keys(outputs)[0]] || '')
+            }
+          />
         </div>
       )}
       {fileList.length > 0 && (
@@ -78,14 +91,14 @@ const OutputPanel: FC<OutputPanelProps> = ({
           />
         </div>
       )}
-      {outputs && Object.keys(outputs).length > 1 && height! > 0 && (
+      {!isTextOutput && outputs && Object.keys(outputs).length > 0 && height! > 0 && (
         <div className='flex flex-col gap-2'>
           <CodeEditor
             showFileList
             readOnly
-            title={<div></div>}
+            title={<div tabIndex={0}>Output</div>}
             language={CodeLanguage.json}
-            value={outputs}
+            value={JSON.stringify(outputs, null, 2)}
             isJSONStringifyBeauty
             height={height ? (height - 16) / 2 : undefined}
           />