From 8fb24bf1ca50de2d0e59ab074be8a4481a8d7abd Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 10 Mar 2025 13:55:18 +0800
Subject: [PATCH] feat: show more than 10 deepth

---
 .../object-child-tree-panel/field.tsx         | 32 +++++++---
 .../tree-indent-line.tsx                      |  9 ++-
 .../workflow/nodes/llm/mock-struct-data.ts    | 58 +++++++++++++++++++
 web/i18n/en-US/app.ts                         |  3 +
 web/i18n/zh-Hans/app.ts                       |  3 +
 5 files changed, 94 insertions(+), 11 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/field.tsx
index dd891f3bef..48c25ffe1e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/field.tsx
@@ -6,24 +6,40 @@ import { getFieldType } from '../../../../llm/utils'
 import type { Field as FieldType } from '../../../../llm/types'
 import cn from '@/utils/classnames'
 import TreeIndentLine from './tree-indent-line'
+import { RiMoreFill } from '@remixicon/react'
+import Tooltip from '@/app/components/base/tooltip'
+import { useTranslation } from 'react-i18next'
+
+const MAX_DEPTH = 10
 
 type Props = { name: string, payload: FieldType, depth?: number }
 
 const Field: FC<Props> = ({
   name,
   payload,
-  depth = 0,
+  depth = 1,
 }) => {
+  const { t } = useTranslation()
+  if (depth > MAX_DEPTH + 1)
+    return null
   return (
     <div>
-      <div className={cn('flex pr-2 items-center justify-between rounded-md hover:bg-state-base-hover cursor-pointer')}>
-        <div className='flex items-center h-6'>
-          <TreeIndentLine depth={depth} />
-          <div className='system-sm-medium text-text-secondary'>{name}</div>
+      <Tooltip popupContent={t('app.structOutput.moreFillTip')} disabled={depth !== MAX_DEPTH + 1}>
+        <div className={cn('flex pr-2 items-center justify-between rounded-md hover:bg-state-base-hover', depth !== MAX_DEPTH + 1 && 'cursor-pointer')}>
+          <div className='grow flex items-center'>
+            <TreeIndentLine depth={depth} isMoreFill={depth === MAX_DEPTH + 1} />
+            {depth === MAX_DEPTH + 1 ? (
+              <RiMoreFill className='w-3 h-3 text-text-tertiary' />
+            ) : (<div className='h-6 leading-6 grow w-0 truncate system-sm-medium text-text-secondary'>{name}</div>)}
+
+          </div>
+          {depth < MAX_DEPTH + 1 && (
+            <div className='ml-2 shrink-0 system-xs-regular text-text-tertiary'>{getFieldType(payload)}</div>
+          )}
         </div>
-        <div className='system-xs-regular text-text-tertiary'>{getFieldType(payload)}</div>
-      </div>
-      {payload.type === Type.object && payload.properties && (
+      </Tooltip>
+
+      {depth <= MAX_DEPTH && payload.type === Type.object && payload.properties && (
         <div>
           {Object.keys(payload.properties).map(name => (
             <Field
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
index cd5d3b3eca..f919114c47 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
@@ -1,19 +1,22 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import cn from '@/utils/classnames'
 
 type Props = {
   depth?: number
+  isMoreFill?: boolean
 }
 
 const TreeIndentLine: FC<Props> = ({
-  depth = 0,
+  depth = 1,
+  isMoreFill = false,
 }) => {
-  const depthArray = Array.from({ length: depth + 1 }, (_, index) => index)
+  const depthArray = Array.from({ length: depth }, (_, index) => index)
   return (
     <div className='ml-2.5 mr-2.5 flex space-x-[12px]'>
       {depthArray.map(d => (
-        <div key={d} className='h-6 w-px bg-divider-regular'></div>
+        <div key={d} className={cn('w-px bg-divider-regular', isMoreFill ? 'h-3' : 'h-6')}></div>
       ))}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/llm/mock-struct-data.ts b/web/app/components/workflow/nodes/llm/mock-struct-data.ts
index f9c4f2e4cc..d5476ff768 100644
--- a/web/app/components/workflow/nodes/llm/mock-struct-data.ts
+++ b/web/app/components/workflow/nodes/llm/mock-struct-data.ts
@@ -29,6 +29,64 @@ const data: StructuredOutput = {
             type: Type.boolean,
             description: '描述可为空',
           },
+          sub_item_d_2: {
+            type: Type.object,
+            properties: {
+              sub_item_3: {
+                type: Type.object,
+                // generate more than sub item 10 levels
+                properties: {
+                  sub_item_4: {
+                    type: Type.object,
+                    properties: {
+                      sub_item_5: {
+                        type: Type.object,
+                        properties: {
+                          sub_item_6: {
+                            type: Type.object,
+                            properties: {
+                              sub_item_7: {
+                                type: Type.object,
+                                properties: {
+                                  sub_item_8: {
+                                    type: Type.object,
+                                    properties: {
+                                      sub_item_9: {
+                                        type: Type.object,
+                                        properties: {
+                                          sub_item_10: {
+                                            type: Type.object,
+                                            properties: {
+                                              sub_item_11: {
+                                                type: Type.object,
+                                                properties: {
+                                                  sub_item_12: {
+                                                    type: Type.object,
+                                                  },
+                                                },
+                                              },
+                                            },
+                                          },
+                                        },
+                                      },
+                                    },
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          number_field_3: {
+            type: Type.number,
+            description: '描述可为空',
+          },
         },
         required: [
           'string_field_1',
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index 27279130b1..3598a32279 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -180,6 +180,9 @@ const translation = {
     noParams: 'No parameters needed',
   },
   showMyCreatedAppsOnly: 'Created by me',
+  structOutput: {
+    moreFillTip: 'Showing max 10 levels of nesting',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index ba44d4db31..8ddc4d8b1a 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -181,6 +181,9 @@ const translation = {
   },
   openInExplore: '在“探索”中打开',
   showMyCreatedAppsOnly: '我创建的',
+  structOutput: {
+    moreFillTip: '最多显示 10 级嵌套',
+  },
 }
 
 export default translation