feat: picker panel main ui

web/app/components/app/configuration/config/index.tsx

@@ -17,7 +17,7 @@ import type { AppType } from '@/types/app'
 import { ModelModeType } from '@/types/app'
 
 import mockStructData from '@/app/components/workflow/nodes/llm/mock-struct-data'
-import ObjectChildrenTreePanel from '@/app/components/workflow/nodes/_base/components/variable/object-children-tree-panel'
+import ObjectChildrenTreePanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel'
 
 const Config: FC = () => {
   const {
@@ -62,7 +62,13 @@ const Config: FC = () => {
       <div
         className="grow h-0 relative px-6 pb-[50px] overflow-y-auto"
       >
-        <ObjectChildrenTreePanel payload={mockStructData} onSelect={() => { }} />
+        <div className='mb-2'>
+          <ObjectChildrenTreePanel
+            root={{ nodeName: 'LLM', attrName: 'structured_output' }}
+            payload={mockStructData}
+            onSelect={() => { }}
+          />
+        </div>
         {/* Template */}
         <ConfigPrompt
           mode={mode as AppType}

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/field.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { Type } from '../../../../llm/types'
+import { getFieldType } from '../../../../llm/utils'
+import type { Field as FieldType } from '../../../../llm/types'
+import cn from '@/utils/classnames'
+import TreeIndentLine from './tree-indent-line'
+
+type Props = { name: string, payload: FieldType, depth?: number }
+
+const Field: FC<Props> = ({
+  name,
+  payload,
+  depth = 0,
+}) => {
+  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>
+        </div>
+        <div className='system-xs-regular text-text-tertiary'>{getFieldType(payload)}</div>
+      </div>
+      {payload.type === Type.object && payload.properties && (
+        <div>
+          {Object.keys(payload.properties).map(name => (
+            <Field
+              key={name}
+              name={name}
+              payload={payload.properties?.[name] as FieldType}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+export default React.memo(Field)

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/index.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Field as FieldType, StructuredOutput } from '../../../../llm/types'
+import Field from './field'
+
+type Props = {
+  root: { nodeName: string, attrName: string }
+  payload: StructuredOutput
+  onSelect: (field: FieldType) => void
+}
+
+const ObjectChildrenTreePanel: FC<Props> = ({
+  root,
+  payload,
+}) => {
+  const schema = payload.schema
+  const fieldNames = Object.keys(schema.properties)
+  return (
+    <div className='w-[296px] p-1 pb-0 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
+      {/* Root info */}
+      <div className='px-2 py-1 flex justify-between items-center'>
+        <div className='flex'>
+          <div className='max-w-[100px] truncate system-sm-medium text-text-tertiary'>{root.nodeName}</div>
+          <div className='system-sm-medium text-text-tertiary'>.</div>
+          <div className='system-sm-medium text-text-secondary'>{root.attrName}</div>
+        </div>
+        {/* It must be object */}
+        <div className='shrink-0 ml-2 system-xs-regular text-text-tertiary'>object</div>
+      </div>
+      {fieldNames.map(name => (
+        <Field
+          key={name}
+          name={name}
+          payload={schema.properties[name]}
+        />
+      ))}
+    </div>
+  )
+}
+export default React.memo(ObjectChildrenTreePanel)

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx

@@ -0,0 +1,21 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  depth?: number
+}
+
+const TreeIndentLine: FC<Props> = ({
+  depth = 0,
+}) => {
+  const depthArray = Array.from({ length: depth + 1 }, (_, 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>
+  )
+}
+export default React.memo(TreeIndentLine)

web/app/components/workflow/nodes/_base/components/variable/object-children-tree-panel.tsx

@@ -1,69 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import type { Field as FieldType, StructuredOutput } from '../../../llm/types'
-import { Type } from '../../../llm/types'
-import { getFieldType } from '../../../llm/utils'
-import cn from '@/utils/classnames'
-
-type Props = {
-  payload: StructuredOutput
-  onSelect: (field: FieldType) => void
-}
-
-// TODO: depth can be depth 10. item 12
-const indentClassName: Record<number, string> = {
-  0: 'pl-[10px]',
-  1: 'pl-[22px]',
-  2: 'pl-[30px]',
-  3: 'pl-[40px]',
-  4: 'pl-[50px]',
-}
-
-const Field: FC<{ name: string, payload: FieldType, depth?: number }> = ({
-  name,
-  payload,
-  depth = 0,
-}) => {
-  return (
-    <div>
-      <div className={cn('flex items-center h-6 justify-between', indentClassName[depth])}>
-        {/* indent line */}
-        <div className={cn('mr-3 h-6 w-px bg-divider-regular')}></div>
-        <div>{name}</div>
-        <div>{getFieldType(payload)}</div>
-      </div>
-      {payload.type === Type.object && payload.properties && (
-        <div>
-          {Object.keys(payload.properties).map(name => (
-            <Field
-              key={name}
-              name={name}
-              payload={payload.properties?.[name] as FieldType}
-              depth={depth + 1}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-const ObjectChildrenTreePanel: FC<Props> = ({
-  payload,
-}) => {
-  const schema = payload.schema
-  const fieldNames = Object.keys(schema.properties)
-  return (
-    <div className='w-[296px] p-1 pb-0 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
-      {fieldNames.map(name => (
-        <Field
-          key={name}
-          name={name}
-          payload={schema.properties[name]}
-        />
-      ))}
-    </div>
-  )
-}
-export default React.memo(ObjectChildrenTreePanel)