From 6913f6408368d96d2de7fb6b80f59f6bb9abd7f0 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 10 Mar 2025 16:03:16 +0800
Subject: [PATCH] feat: show panel struct

---
 .../object-child-tree-panel/picker/field.tsx  |  2 +-
 .../object-child-tree-panel/show/field.tsx    | 44 +++++++++++--------
 .../tree-indent-line.tsx                      |  2 -
 .../workflow/nodes/llm/mock-struct-data.ts    |  5 ++-
 web/i18n/en-US/app.ts                         |  1 +
 web/i18n/zh-Hans/app.ts                       |  1 +
 6 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
index 633b8447c4..17fdf29b64 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -27,7 +27,7 @@ const Field: FC<Props> = ({
       <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-stretch'>
-            <TreeIndentLine depth={depth} isMoreFill={depth === MAX_DEPTH + 1} />
+            <TreeIndentLine depth={depth} />
             {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>)}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index e43084e0a9..0114b44271 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
@@ -7,8 +7,8 @@ import type { Field as FieldType } from '../../../../../llm/types'
 import cn from '@/utils/classnames'
 import TreeIndentLine from '../tree-indent-line'
 import { useTranslation } from 'react-i18next'
-
-const MAX_DEPTH = 10
+import { useBoolean } from 'ahooks'
+import { RiArrowDropDownLine } from '@remixicon/react'
 
 type Props = { name: string, payload: FieldType, depth?: number }
 
@@ -18,31 +18,37 @@ const Field: FC<Props> = ({
   depth = 1,
 }) => {
   const { t } = useTranslation()
-  if (depth > MAX_DEPTH + 1)
-    return null
+  const hasChildren = payload.type === Type.object && payload.properties
+  const [fold, {
+    toggle: toggleFold,
+  }] = useBoolean(false)
   return (
     <div>
-      <div>
-        <div className={cn('flex pr-2')}>
-          <TreeIndentLine depth={depth} />
-          <div>
-            <div className='flex'>
-              <div className='h-6 truncate system-sm-medium text-text-secondary leading-6'>{name}</div>
-              <div className='ml-3 shrink-0 system-xs-regular text-text-tertiary leading-6'>{getFieldType(payload)}</div>
-              <div className='ml-3 text-text-warning system-2xs-medium-uppercase leading-6'>Required</div>
-            </div>
-            {payload.description && (
-              <div className='system-xs-regular text-text-tertiary truncate'>{payload.description}</div>
+      <div className={cn('flex pr-2')}>
+        <TreeIndentLine depth={depth} />
+        <div className='grow'>
+          <div className='flex relative select-none'>
+            {hasChildren && (
+              <RiArrowDropDownLine
+                className={cn('absolute top-[50%] translate-y-[-50%] left-[-18px] bg-components-panel-bg w-4 h-4 text-text-tertiary cursor-pointer', fold && 'rotate-[270deg] text-text-accent')}
+                onClick={toggleFold}
+              />
             )}
+            <div className='h-6 truncate system-sm-medium text-text-secondary leading-6'>{name}</div>
+            <div className='ml-3 shrink-0 system-xs-regular text-text-tertiary leading-6'>{getFieldType(payload)}</div>
+            <div className='ml-3 text-text-warning system-2xs-medium-uppercase leading-6'>{t('app.structOutput.required')}</div>
           </div>
-
+          {payload.description && (
+            <div className='flex'>
+              <div className='w-0 grow system-xs-regular text-text-tertiary truncate'>{payload.description}</div>
+            </div>
+          )}
         </div>
-
       </div>
 
-      {payload.type === Type.object && payload.properties && (
+      {hasChildren && !fold && (
         <div>
-          {Object.keys(payload.properties).map(name => (
+          {Object.keys(payload.properties!).map(name => (
             <Field
               key={name}
               name={name}
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 7c6a23f79c..2f9fc1ca2c 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
@@ -5,12 +5,10 @@ import cn from '@/utils/classnames'
 
 type Props = {
   depth?: number
-  isMoreFill?: boolean
 }
 
 const TreeIndentLine: FC<Props> = ({
   depth = 1,
-  isMoreFill = false,
 }) => {
   const depthArray = Array.from({ length: depth }, (_, index) => index)
   return (
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 d5476ff768..a269443e26 100644
--- a/web/app/components/workflow/nodes/llm/mock-struct-data.ts
+++ b/web/app/components/workflow/nodes/llm/mock-struct-data.ts
@@ -6,14 +6,14 @@ const data: StructuredOutput = {
     properties: {
       string_field: {
         type: Type.string,
-        description: '可为空',
+        description: '这是一个字符串类型的字段',
       },
       obj_field: {
         type: Type.object,
         properties: {
           string_field_1: {
             type: Type.string,
-            description: '描述可为空',
+            description: 'this is a string type field',
           },
           number_field_2: {
             type: Type.number,
@@ -62,6 +62,7 @@ const data: StructuredOutput = {
                                                 properties: {
                                                   sub_item_12: {
                                                     type: Type.object,
+                                                    description: 'This is a object type field.This is a object type field.This is a object type field.',
                                                   },
                                                 },
                                               },
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index 3598a32279..87e282c6a3 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -182,6 +182,7 @@ const translation = {
   showMyCreatedAppsOnly: 'Created by me',
   structOutput: {
     moreFillTip: 'Showing max 10 levels of nesting',
+    required: 'Required',
   },
 }
 
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index 8ddc4d8b1a..747fccc432 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -183,6 +183,7 @@ const translation = {
   showMyCreatedAppsOnly: '我创建的',
   structOutput: {
     moreFillTip: '最多显示 10 级嵌套',
+    required: '必填',
   },
 }