feat: pane struct

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

@@ -16,6 +16,9 @@ import type { ModelConfig, PromptVariable } from '@/models/debug'
 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'
+
 const Config: FC = () => {
   const {
     mode,
@@ -59,6 +62,7 @@ const Config: FC = () => {
       <div
         className="grow h-0 relative px-6 pb-[50px] overflow-y-auto"
       >
+        <ObjectChildrenTreePanel payload={mockStructData} onSelect={() => { }} />
         {/* Template */}
         <ConfigPrompt
           mode={mode as AppType}

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

@@ -0,0 +1,69 @@
+'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>
+      {fieldNames.map(name => (
+        <Field
+          key={name}
+          name={name}
+          payload={schema.properties[name]}
+        />
+      ))}
+    </div>
+  )
+}
+export default React.memo(ObjectChildrenTreePanel)

web/app/components/workflow/nodes/llm/types.ts

@@ -25,6 +25,15 @@ export enum Type {
   array = 'array',
 }
 
+export enum ArrayType {
+  string = 'array[string]',
+  number = 'array[number]',
+  boolean = 'array[boolean]',
+  object = 'array[object]',
+}
+
+export type TypeWithArray = Type | ArrayType
+
 type ArrayItemType = Exclude<Type, Type.array>
 
 export type Field = {

web/app/components/workflow/nodes/llm/utils.ts

@@ -1,5 +1,14 @@
-import type { LLMNodeType } from './types'
+import { ArrayType, Type } from './types'
+import type { Field, LLMNodeType } from './types'
 
 export const checkNodeValid = (payload: LLMNodeType) => {
   return true
 }
+
+export const getFieldType = (field: Field) => {
+  const { type, items } = field
+  if (type !== Type.array || !items)
+    return type
+
+  return ArrayType[items.type]
+}