AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-16 15:05:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: picker panel main ui

Browse Source
This commit is contained in:
Joel 2025-03-10 11:28:40 +08:00
parent 6bf8253952
commit d6b66aeed8
5 changed files with 111 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/app/configuration/config/index.tsx
View File

@ -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}

41
web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/field.tsx Normal file
View File

@ -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)

41
web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/index.tsx Normal file
View File

@ -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)

21
web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx Normal file
View File

@ -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)

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

@ -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)