AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-18 09:56:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: reorder class names for consistency and improved readability in various components

Browse Source
This commit is contained in:
twwu 2025-03-24 18:31:21 +08:00
parent 0702afe302
commit abbafd56ef
27 changed files with 114 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/base/segmented-control/index.tsx
View File

@ -41,7 +41,7 @@ export const SegmentedControl = <T extends string | number | symbol>({
)} )}
onClick={() => onChange(option.value)} onClick={() => onChange(option.value)}
> >
<span className='flex items-center justify-center w-5 h-5'> <span className='flex h-5 w-5 items-center justify-center'>
<Icon className={classNames( <Icon className={classNames(
'w-4 h-4 text-text-tertiary', 'w-4 h-4 text-text-tertiary',
isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary', isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
@ -54,8 +54,8 @@ export const SegmentedControl = <T extends string | number | symbol>({
{option.text} {option.text}
</span> </span>
{!isLast && !isSelected && !isNextSelected && ( {!isLast && !isSelected && !isNextSelected && (
<div className='absolute top-0 right-[-1px] h-full flex items-center'> <div className='absolute right-[-1px] top-0 flex h-full items-center'>
<Divider type='vertical' className='h-3.5 mx-0' /> <Divider type='vertical' className='mx-0 h-3.5' />
</div> </div>
)} )}
</button> </button>

8
web/app/components/workflow/nodes/_base/components/collapse/index.tsx
View File

@ -27,7 +27,7 @@ const Collapse = ({
return ( return (
<> <>
<div className='flex justify-between items-center'> <div className='flex items-center justify-between'>
<div <div
className='flex items-center' className='flex items-center'
onClick={() => { onClick={() => {
@ -37,13 +37,13 @@ const Collapse = ({
} }
}} }}
> >
<div className='shrink-0 w-4 h-4'> <div className='h-4 w-4 shrink-0'>
{ {
!disabled && ( !disabled && (
<RiArrowDropRightLine <RiArrowDropRightLine
className={cn( className={cn(
'w-4 h-4 text-text-tertiary', 'h-4 w-4 text-text-tertiary',
!collapsedMerged && 'transform rotate-90', !collapsedMerged && 'rotate-90',
)} )}
/> />
) )

4
web/app/components/workflow/nodes/_base/components/output-vars.tsx
View File

@ -46,9 +46,9 @@ export const VarItem: FC<VarItemProps> = ({
return ( return (
<div className='py-1'> <div className='py-1'>
<div className='flex justify-between'> <div className='flex justify-between'>
<div className='flex leading-[18px] items-center'> <div className='flex items-center leading-[18px]'>
<div className='code-sm-semibold text-text-secondary'>{name}</div> <div className='code-sm-semibold text-text-secondary'>{name}</div>
<div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div> <div className='system-xs-regular ml-2 text-text-tertiary'>{type}</div>
</div> </div>
</div> </div>
<div className='system-xs-regular mt-0.5 text-text-tertiary'> <div className='system-xs-regular mt-0.5 text-text-tertiary'>

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

@ -40,18 +40,18 @@ const Field: FC<Props> = ({
<div> <div>
<Tooltip popupContent={t('app.structOutput.moreFillTip')} disabled={depth !== MAX_DEPTH + 1}> <Tooltip popupContent={t('app.structOutput.moreFillTip')} disabled={depth !== MAX_DEPTH + 1}>
<div <div
className={cn('flex pr-2 items-center justify-between rounded-md', !readonly && 'hover:bg-state-base-hover', depth !== MAX_DEPTH + 1 && 'cursor-pointer')} className={cn('flex items-center justify-between rounded-md pr-2', !readonly && 'hover:bg-state-base-hover', depth !== MAX_DEPTH + 1 && 'cursor-pointer')}
onClick={() => !readonly && onSelect?.([...valueSelector, name])} onClick={() => !readonly && onSelect?.([...valueSelector, name])}
> >
<div className='grow flex items-stretch'> <div className='flex grow items-stretch'>
<TreeIndentLine depth={depth} /> <TreeIndentLine depth={depth} />
{depth === MAX_DEPTH + 1 ? ( {depth === MAX_DEPTH + 1 ? (
<RiMoreFill className='w-3 h-3 text-text-tertiary' /> <RiMoreFill className='h-3 w-3 text-text-tertiary' />
) : (<div className={cn('h-6 leading-6 grow w-0 truncate system-sm-medium text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)} ) : (<div className={cn('system-sm-medium h-6 w-0 grow truncate leading-6 text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
</div> </div>
{depth < MAX_DEPTH + 1 && ( {depth < MAX_DEPTH + 1 && (
<div className='ml-2 shrink-0 system-xs-regular text-text-tertiary'>{getFieldType(payload)}</div> <div className='system-xs-regular ml-2 shrink-0 text-text-tertiary'>{getFieldType(payload)}</div>
)} )}
</div> </div>
</Tooltip> </Tooltip>

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

@ -42,18 +42,18 @@ export const PickerPanelMain: FC<Props> = ({
return ( return (
<div className={cn(className)} ref={ref}> <div className={cn(className)} ref={ref}>
{/* Root info */} {/* Root info */}
<div className='px-2 py-1 flex justify-between items-center'> <div className='flex items-center justify-between px-2 py-1'>
<div className='flex'> <div className='flex'>
{root.nodeName && ( {root.nodeName && (
<> <>
<div className='max-w-[100px] truncate system-sm-medium text-text-tertiary'>{root.nodeName}</div> <div className='system-sm-medium max-w-[100px] truncate text-text-tertiary'>{root.nodeName}</div>
<div className='system-sm-medium text-text-tertiary'>.</div> <div className='system-sm-medium text-text-tertiary'>.</div>
</> </>
)} )}
<div className='system-sm-medium text-text-secondary'>{root.attrName}</div> <div className='system-sm-medium text-text-secondary'>{root.attrName}</div>
</div> </div>
{/* It must be object */} {/* It must be object */}
<div className='shrink-0 ml-2 system-xs-regular text-text-tertiary'>object</div> <div className='system-xs-regular ml-2 shrink-0 text-text-tertiary'>object</div>
</div> </div>
{fieldNames.map(name => ( {fieldNames.map(name => (
<Field <Field
@ -74,7 +74,7 @@ const PickerPanel: FC<Props> = ({
...props ...props
}) => { }) => {
return ( return (
<div className={cn('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]', className)}> <div className={cn('w-[296px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pb-0 shadow-lg backdrop-blur-[5px]', className)}>
<PickerPanelMain {...props} /> <PickerPanelMain {...props} />
</div> </div>
) )

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

@ -33,20 +33,20 @@ const Field: FC<Props> = ({
<div className={cn('flex pr-2')}> <div className={cn('flex pr-2')}>
<TreeIndentLine depth={depth} /> <TreeIndentLine depth={depth} />
<div className='grow'> <div className='grow'>
<div className='flex relative select-none'> <div className='relative flex select-none'>
{hasChildren && ( {hasChildren && (
<RiArrowDropDownLine <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')} className={cn('absolute left-[-18px] top-[50%] h-4 w-4 translate-y-[-50%] cursor-pointer bg-components-panel-bg text-text-tertiary', fold && 'rotate-[270deg] text-text-accent')}
onClick={toggleFold} onClick={toggleFold}
/> />
)} )}
<div className='h-6 truncate system-sm-medium text-text-secondary leading-6'>{name}</div> <div className='system-sm-medium h-6 truncate leading-6 text-text-secondary'>{name}</div>
<div className='ml-3 shrink-0 system-xs-regular text-text-tertiary leading-6'>{getFieldType(payload)}</div> <div className='system-xs-regular ml-3 shrink-0 leading-6 text-text-tertiary'>{getFieldType(payload)}</div>
{required && <div className='ml-3 text-text-warning system-2xs-medium-uppercase leading-6'>{t('app.structOutput.required')}</div>} {required && <div className='system-2xs-medium-uppercase ml-3 leading-6 text-text-warning'>{t('app.structOutput.required')}</div>}
</div> </div>
{payload.description && ( {payload.description && (
<div className='flex'> <div className='flex'>
<div className='w-0 grow system-xs-regular text-text-tertiary truncate'>{payload.description}</div> <div className='system-xs-regular w-0 grow truncate text-text-tertiary'>{payload.description}</div>
</div> </div>
)} )}
</div> </div>

8
web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
View File

@ -136,7 +136,7 @@ const Item: FC<ItemProps> = ({
className={cn( className={cn(
(isObj || isStructureOutput) ? ' pr-1' : 'pr-[18px]', (isObj || isStructureOutput) ? ' pr-1' : 'pr-[18px]',
isHovering && ((isObj || isStructureOutput) ? 'bg-primary-50' : 'bg-state-base-hover'), isHovering && ((isObj || isStructureOutput) ? 'bg-primary-50' : 'bg-state-base-hover'),
'relative w-full flex items-center h-6 pl-3 rounded-md cursor-pointer') 'relative flex h-6 w-full cursor-pointer items-center rounded-md pl-3')
} }
onClick={handleChosen} onClick={handleChosen}
onMouseDown={e => e.preventDefault()} onMouseDown={e => e.preventDefault()}
@ -155,10 +155,10 @@ const Item: FC<ItemProps> = ({
<div title={itemData.des} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable.replace('conversation.', '')}</div> <div title={itemData.des} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable.replace('conversation.', '')}</div>
)} )}
</div> </div>
<div className='ml-1 shrink-0 text-xs font-normal text-text-tertiary capitalize'>{itemData.type}</div> <div className='ml-1 shrink-0 text-xs font-normal capitalize text-text-tertiary'>{itemData.type}</div>
{ {
(isObj || isStructureOutput) && ( (isObj || isStructureOutput) && (
<ChevronRight className={cn('ml-0.5 w-3 h-3 text-text-quaternary', isHovering && 'text-text-tertiary')} /> <ChevronRight className={cn('ml-0.5 h-3 w-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
) )
} }
</div > </div >
@ -338,7 +338,7 @@ const VarReferenceVars: FC<Props> = ({
</div>)) </div>))
} }
</div> </div>
: <div className='pl-3 leading-[18px] text-xs font-medium text-gray-500 uppercase'>{t('workflow.common.noVar')}</div>} : <div className='pl-3 text-xs font-medium uppercase leading-[18px] text-gray-500'>{t('workflow.common.noVar')}</div>}
</> </>
) )
} }

12
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
View File

@ -76,8 +76,8 @@ const CodeEditor: FC<CodeEditorProps> = ({
return ( return (
<div className={classNames('flex flex-col h-full bg-components-input-bg-normal overflow-hidden', className)}> <div className={classNames('flex flex-col h-full bg-components-input-bg-normal overflow-hidden', className)}>
<div className='flex items-center justify-between pl-2 pt-1 pr-1'> <div className='flex items-center justify-between pl-2 pr-1 pt-1'>
<div className='py-0.5 text-text-secondary system-xs-semibold-uppercase'> <div className='system-xs-semibold-uppercase py-0.5 text-text-secondary'>
<span className='px-1 py-0.5'>JSON</span> <span className='px-1 py-0.5'>JSON</span>
</div> </div>
<div className='flex items-center gap-x-0.5'> <div className='flex items-center gap-x-0.5'>
@ -85,19 +85,19 @@ const CodeEditor: FC<CodeEditorProps> = ({
<Tooltip popupContent={t('common.operation.format')}> <Tooltip popupContent={t('common.operation.format')}>
<button <button
type='button' type='button'
className='flex items-center justify-center h-6 w-6' className='flex h-6 w-6 items-center justify-center'
onClick={formatJsonContent} onClick={formatJsonContent}
> >
<RiIndentIncrease className='w-4 h-4 text-text-tertiary' /> <RiIndentIncrease className='h-4 w-4 text-text-tertiary' />
</button> </button>
</Tooltip> </Tooltip>
)} )}
<Tooltip popupContent={t('common.operation.copy')}> <Tooltip popupContent={t('common.operation.copy')}>
<button <button
type='button' type='button'
className='flex items-center justify-center h-6 w-6' className='flex h-6 w-6 items-center justify-center'
onClick={() => copy(value)}> onClick={() => copy(value)}>
<RiClipboardLine className='w-4 h-4 text-text-tertiary' /> <RiClipboardLine className='h-4 w-4 text-text-tertiary' />
</button> </button>
</Tooltip> </Tooltip>
</div> </div>

4
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
View File

@ -16,8 +16,8 @@ const ErrorMessage: FC<ErrorMessageProps> = ({
'flex gap-x-1 mt-1 p-2 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg', 'flex gap-x-1 mt-1 p-2 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg',
className, className,
)}> )}>
<RiErrorWarningFill className='shrink-0 w-4 h-4 text-text-destructive' /> <RiErrorWarningFill className='h-4 w-4 shrink-0 text-text-destructive' />
<div className='grow text-text-primary system-xs-medium max-h-12 overflow-y-auto break-words'> <div className='system-xs-medium max-h-12 grow overflow-y-auto break-words text-text-primary'>
{message} {message}
</div> </div>
</div> </div>

2
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
View File

@ -20,7 +20,7 @@ const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
<Modal <Modal
isShow={isShow} isShow={isShow}
onClose={onClose} onClose={onClose}
className='max-w-[960px] h-[800px] p-0' className='h-[800px] max-w-[960px] p-0'
> >
<JsonSchemaConfig <JsonSchemaConfig
defaultSchema={defaultSchema} defaultSchema={defaultSchema}

12
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
View File

@ -78,7 +78,7 @@ const JsonImporter: FC<JsonImporterProps> = ({
<button <button
type='button' type='button'
className={cn( className={cn(
'flex shrink-0 px-1.5 py-1 rounded-md hover:bg-components-button-ghost-bg-hover text-text-tertiary system-xs-medium', 'system-xs-medium flex shrink-0 rounded-md px-1.5 py-1 text-text-tertiary hover:bg-components-button-ghost-bg-hover',
open && 'bg-components-button-ghost-bg-hover', open && 'bg-components-button-ghost-bg-hover',
)} )}
> >
@ -86,13 +86,13 @@ const JsonImporter: FC<JsonImporterProps> = ({
</button> </button>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[100]'> <PortalToFollowElemContent className='z-[100]'>
<div className='flex flex-col w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'> <div className='flex w-[400px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
{/* Title */} {/* Title */}
<div className='relative px-3 pt-3.5 pb-1'> <div className='relative px-3 pb-1 pt-3.5'>
<div className='flex items-center justify-center absolute right-2.5 bottom-0 w-8 h-8' onClick={onClose}> <div className='absolute bottom-0 right-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' /> <RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div> </div>
<div className='flex pl-1 pr-8 text-text-primary system-xl-semibold'> <div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
{t('workflow.nodes.llm.jsonSchema.import')} {t('workflow.nodes.llm.jsonSchema.import')}
</div> </div>
</div> </div>

20
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
View File

@ -141,14 +141,14 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
}, [currentTab, jsonSchema, json, onSave, onClose]) }, [currentTab, jsonSchema, json, onSave, onClose])
return ( return (
<div className='flex flex-col h-full'> <div className='flex h-full flex-col'>
{/* Header */} {/* Header */}
<div className='relative flex p-6 pr-14 pb-3'> <div className='relative flex p-6 pb-3 pr-14'>
<div className='text-text-primary title-2xl-semi-bold grow truncate'> <div className='title-2xl-semi-bold grow truncate text-text-primary'>
{t('workflow.nodes.llm.jsonSchema.title')} {t('workflow.nodes.llm.jsonSchema.title')}
</div> </div>
<div className='absolute right-5 top-5 w-8 h-8 flex justify-center items-center p-1.5' onClick={onClose}> <div className='absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5' onClick={onClose}>
<RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' /> <RiCloseLine className='h-[18px] w-[18px] text-text-tertiary' />
</div> </div>
</div> </div>
{/* Content */} {/* Content */}
@ -173,7 +173,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
/> />
</div> </div>
</div> </div>
<div className='flex flex-col gap-y-1 px-6 grow overflow-hidden'> <div className='flex grow flex-col gap-y-1 overflow-hidden px-6'>
{currentTab === SchemaView.VisualEditor && ( {currentTab === SchemaView.VisualEditor && (
<MittProvider> <MittProvider>
<VisualEditorContextProvider> <VisualEditorContextProvider>
@ -194,22 +194,22 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
{validationError && <ErrorMessage message={validationError} />} {validationError && <ErrorMessage message={validationError} />}
</div> </div>
{/* Footer */} {/* Footer */}
<div className='flex items-center p-6 pt-5 gap-x-2'> <div className='flex items-center gap-x-2 p-6 pt-5'>
<a <a
className='flex items-center gap-x-1 grow text-text-accent' className='flex grow items-center gap-x-1 text-text-accent'
href='https://json-schema.org/' // todo: replace with documentation link href='https://json-schema.org/' // todo: replace with documentation link
target='_blank' target='_blank'
rel='noopener noreferrer' rel='noopener noreferrer'
> >
<span className='system-xs-regular'>{t('workflow.nodes.llm.jsonSchema.doc')}</span> <span className='system-xs-regular'>{t('workflow.nodes.llm.jsonSchema.doc')}</span>
<RiExternalLinkLine className='w-3 h-3' /> <RiExternalLinkLine className='h-3 w-3' />
</a> </a>
<div className='flex items-center gap-x-3'> <div className='flex items-center gap-x-3'>
<div className='flex items-center gap-x-2'> <div className='flex items-center gap-x-2'>
<Button variant='secondary' onClick={handleResetDefaults}> <Button variant='secondary' onClick={handleResetDefaults}>
{t('workflow.nodes.llm.jsonSchema.resetDefaults')} {t('workflow.nodes.llm.jsonSchema.resetDefaults')}
</Button> </Button>
<Divider type='vertical' className='h-4 ml-1 mr-0' /> <Divider type='vertical' className='ml-1 mr-0 h-4' />
</div> </div>
<div className='flex items-center gap-x-2'> <div className='flex items-center gap-x-2'>
<Button variant='secondary' onClick={handleCancel}> <Button variant='secondary' onClick={handleCancel}>

16
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
View File

@ -55,16 +55,16 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
}, [schema, onApply]) }, [schema, onApply])
return ( return (
<div className='flex flex-col w-[480px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'> <div className='flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
<div className='flex items-center justify-center absolute top-2.5 right-2.5 w-8 h-8' onClick={onClose}> <div className='absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' /> <RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div> </div>
{/* Title */} {/* Title */}
<div className='flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1'> <div className='flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5'>
<div className='flex pl-1 pr-8 text-text-primary system-xl-semibold'> <div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
{t('workflow.nodes.llm.jsonSchema.generatedResult')} {t('workflow.nodes.llm.jsonSchema.generatedResult')}
</div> </div>
<div className='flex px-1 text-text-tertiary system-xs-regular'> <div className='system-xs-regular flex px-1 text-text-tertiary'>
{t('workflow.nodes.llm.jsonSchema.resultTip')} {t('workflow.nodes.llm.jsonSchema.resultTip')}
</div> </div>
</div> </div>
@ -83,12 +83,12 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
{/* Footer */} {/* Footer */}
<div className='flex items-center justify-between p-4 pt-2'> <div className='flex items-center justify-between p-4 pt-2'>
<Button variant='secondary' className='flex items-center gap-x-0.5' onClick={onBack}> <Button variant='secondary' className='flex items-center gap-x-0.5' onClick={onBack}>
<RiArrowLeftLine className='w-4 h-4' /> <RiArrowLeftLine className='h-4 w-4' />
<span>{t('workflow.nodes.llm.jsonSchema.back')}</span> <span>{t('workflow.nodes.llm.jsonSchema.back')}</span>
</Button> </Button>
<div className='flex items-center gap-x-2'> <div className='flex items-center gap-x-2'>
<Button variant='secondary' className='flex items-center gap-x-0.5' onClick={onRegenerate}> <Button variant='secondary' className='flex items-center gap-x-0.5' onClick={onRegenerate}>
<RiSparklingLine className='w-4 h-4' /> <RiSparklingLine className='h-4 w-4' />
<span>{t('workflow.nodes.llm.jsonSchema.regenerate')}</span> <span>{t('workflow.nodes.llm.jsonSchema.regenerate')}</span>
</Button> </Button>
<Button variant='primary' onClick={handleApply}> <Button variant='primary' onClick={handleApply}>

2
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
View File

@ -135,7 +135,7 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
<button <button
type='button' type='button'
className={cn( className={cn(
'w-6 h-6 flex items-center justify-center p-0.5 rounded-md hover:bg-state-accent-hover', 'flex h-6 w-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover',
open && 'bg-state-accent-active', open && 'bg-state-accent-active',
)} )}
> >

20
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
View File

@ -42,22 +42,22 @@ const PromptEditor: FC<PromptEditorProps> = ({
}, [onInstructionChange]) }, [onInstructionChange])
return ( return (
<div className='flex flex-col relative w-[480px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'> <div className='relative flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'>
<div className='flex items-center justify-center absolute top-2.5 right-2.5 w-8 h-8' onClick={onClose}> <div className='absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-text-tertiary'/> <RiCloseLine className='h-4 w-4 text-text-tertiary'/>
</div> </div>
{/* Title */} {/* Title */}
<div className='flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1'> <div className='flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5'>
<div className='flex pl-1 pr-8 text-text-primary system-xl-semibold'> <div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
{t('workflow.nodes.llm.jsonSchema.generateJsonSchema')} {t('workflow.nodes.llm.jsonSchema.generateJsonSchema')}
</div> </div>
<div className='flex px-1 text-text-tertiary system-xs-regular'> <div className='system-xs-regular flex px-1 text-text-tertiary'>
{t('workflow.nodes.llm.jsonSchema.generationTip')} {t('workflow.nodes.llm.jsonSchema.generationTip')}
</div> </div>
</div> </div>
{/* Content */} {/* Content */}
<div className='flex flex-col gap-y-1 px-4 py-2'> <div className='flex flex-col gap-y-1 px-4 py-2'>
<div className='flex items-center h-6 text-text-secondary system-sm-semibold-uppercase'> <div className='system-sm-semibold-uppercase flex h-6 items-center text-text-secondary'>
{t('common.modelProvider.model')} {t('common.modelProvider.model')}
</div> </div>
<ModelParameterModal <ModelParameterModal
@ -74,13 +74,13 @@ const PromptEditor: FC<PromptEditorProps> = ({
/> />
</div> </div>
<div className='flex flex-col gap-y-1 px-4 py-2'> <div className='flex flex-col gap-y-1 px-4 py-2'>
<div className='flex items-center h-6 text-text-secondary system-sm-semibold-uppercase'> <div className='system-sm-semibold-uppercase flex h-6 items-center text-text-secondary'>
<span>{t('workflow.nodes.llm.jsonSchema.instruction')}</span> <span>{t('workflow.nodes.llm.jsonSchema.instruction')}</span>
<Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.promptTooltip')} /> <Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.promptTooltip')} />
</div> </div>
<div className='flex items-center'> <div className='flex items-center'>
<Textarea <Textarea
className='h-[364px] px-2 py-1 resize-none' className='h-[364px] resize-none px-2 py-1'
value={instruction} value={instruction}
placeholder={t('workflow.nodes.llm.jsonSchema.promptPlaceholder')} placeholder={t('workflow.nodes.llm.jsonSchema.promptPlaceholder')}
onChange={handleInstructionChange} onChange={handleInstructionChange}
@ -97,7 +97,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
className='flex items-center gap-x-0.5' className='flex items-center gap-x-0.5'
onClick={onGenerate} onClick={onGenerate}
> >
<RiSparklingFill className='w-4 h-4' /> <RiSparklingFill className='h-4 w-4' />
<span>{t('workflow.nodes.llm.jsonSchema.generate')}</span> <span>{t('workflow.nodes.llm.jsonSchema.generate')}</span>
</Button> </Button>
</div> </div>

4
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
View File

@ -16,14 +16,14 @@ const AddField = () => {
}, [setIsAddingNewField, emit]) }, [setIsAddingNewField, emit])
return ( return (
<div className='pl-5 py-2'> <div className='py-2 pl-5'>
<Button <Button
size='small' size='small'
variant='secondary-accent' variant='secondary-accent'
className='flex items-center gap-x-[1px]' className='flex items-center gap-x-[1px]'
onClick={handleAddField} onClick={handleAddField}
> >
<RiAddCircleFill className='w-3.5 h-3.5'/> <RiAddCircleFill className='h-3.5 w-3.5'/>
<span className='px-[3px]'>{t('workflow.nodes.llm.jsonSchema.addField')}</span> <span className='px-[3px]'>{t('workflow.nodes.llm.jsonSchema.addField')}</span>
</Button> </Button>
</div> </div>

8
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
View File

@ -19,15 +19,15 @@ const Card: FC<CardProps> = ({
return ( return (
<div className='flex flex-col py-0.5'> <div className='flex flex-col py-0.5'>
<div className='flex items-center gap-x-1 p-0.5 pl-1'> <div className='flex items-center gap-x-1 p-0.5 pl-1'>
<div className='px-1 py-0.5 text-text-primary system-sm-semibold truncate'> <div className='system-sm-semibold truncate px-1 py-0.5 text-text-primary'>
{name} {name}
</div> </div>
<div className='px-1 py-0.5 text-text-tertiary system-xs-medium'> <div className='system-xs-medium px-1 py-0.5 text-text-tertiary'>
{type} {type}
</div> </div>
{ {
required && ( required && (
<div className='px-1 py-0.5 text-text-warning system-2xs-medium-uppercase'> <div className='system-2xs-medium-uppercase px-1 py-0.5 text-text-warning'>
{t('workflow.nodes.llm.jsonSchema.required')} {t('workflow.nodes.llm.jsonSchema.required')}
</div> </div>
) )
@ -35,7 +35,7 @@ const Card: FC<CardProps> = ({
</div> </div>
{description && ( {description && (
<div className='px-2 pb-1 text-text-tertiary system-xs-regular truncate'> <div className='system-xs-regular truncate px-2 pb-1 text-text-tertiary'>
{description} {description}
</div> </div>
)} )}

12
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
View File

@ -24,29 +24,29 @@ const Actions: FC<ActionsProps> = ({
<Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.addChildField')}> <Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.addChildField')}>
<button <button
type='button' type='button'
className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled' className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled'
onClick={onAddChildField} onClick={onAddChildField}
disabled={disableAddBtn} disabled={disableAddBtn}
> >
<RiAddCircleLine className='w-4 h-4'/> <RiAddCircleLine className='h-4 w-4'/>
</button> </button>
</Tooltip> </Tooltip>
<Tooltip popupContent={t('common.operation.edit')}> <Tooltip popupContent={t('common.operation.edit')}>
<button <button
type='button' type='button'
className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'
onClick={onEdit} onClick={onEdit}
> >
<RiEditLine className='w-4 h-4' /> <RiEditLine className='h-4 w-4' />
</button> </button>
</Tooltip> </Tooltip>
<Tooltip popupContent={t('common.operation.remove')}> <Tooltip popupContent={t('common.operation.remove')}>
<button <button
type='button' type='button'
className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive' className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
onClick={onDelete} onClick={onDelete}
> >
<RiDeleteBinLine className='w-4 h-4' /> <RiDeleteBinLine className='h-4 w-4' />
</button> </button>
</Tooltip> </Tooltip>
</div> </div>

2
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
View File

@ -13,7 +13,7 @@ type AdvancedActionsProps = {
const Key = (props: { keyName: string }) => { const Key = (props: { keyName: string }) => {
const { keyName } = props const { keyName } = props
return ( return (
<kbd className='flex items-center justify-center min-w-4 h-4 px-px rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface system-kbd'> <kbd className='system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-white px-px text-text-primary-on-surface'>
{keyName} {keyName}
</kbd> </kbd>
) )

16
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx
View File

@ -36,17 +36,17 @@ const AdvancedOptions: FC<AdvancedOptionsProps> = ({
return ( return (
<div className='border-t border-divider-subtle'> <div className='border-t border-divider-subtle'>
{showAdvancedOptions ? ( {showAdvancedOptions ? (
<div className='flex flex-col px-2 py-1.5 gap-y-1'> <div className='flex flex-col gap-y-1 px-2 py-1.5'>
<div className='flex items-center gap-x-2 w-full'> <div className='flex w-full items-center gap-x-2'>
<span className='text-text-tertiary system-2xs-medium-uppercase'> <span className='system-2xs-medium-uppercase text-text-tertiary'>
{t('workflow.nodes.llm.jsonSchema.stringValidations')} {t('workflow.nodes.llm.jsonSchema.stringValidations')}
</span> </span>
<div className='grow'> <div className='grow'>
<Divider type='horizontal' className='h-px my-0 bg-line-divider-bg' /> <Divider type='horizontal' className='my-0 h-px bg-line-divider-bg' />
</div> </div>
</div> </div>
<div className='flex flex-col'> <div className='flex flex-col'>
<div className='flex items-center h-6 text-text-secondary system-xs-medium'> <div className='system-xs-medium flex h-6 items-center text-text-secondary'>
Enum Enum
</div> </div>
<Textarea <Textarea
@ -62,11 +62,11 @@ const AdvancedOptions: FC<AdvancedOptionsProps> = ({
) : ( ) : (
<button <button
type='button' type='button'
className='flex items-center pl-1.5 pt-2 pr-2 pb-1 gap-x-0.5' className='flex items-center gap-x-0.5 pb-1 pl-1.5 pr-2 pt-2'
onClick={handleToggleAdvancedOptions} onClick={handleToggleAdvancedOptions}
> >
<RiArrowDownDoubleLine className='w-3 h-3 text-text-tertiary' /> <RiArrowDownDoubleLine className='h-3 w-3 text-text-tertiary' />
<span className='text-text-tertiary system-xs-regular'> <span className='system-xs-regular text-text-tertiary'>
{t('workflow.nodes.llm.jsonSchema.showAdvancedOptions')} {t('workflow.nodes.llm.jsonSchema.showAdvancedOptions')}
</span> </span>
</button> </button>

4
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
View File

@ -15,8 +15,8 @@ const RequiredSwitch: FC<RequiredSwitchProps> = ({
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div className='flex items-center gap-x-1 px-1.5 py-1 rounded-[5px] border border-divider-subtle bg-background-default-lighter'> <div className='flex items-center gap-x-1 rounded-[5px] border border-divider-subtle bg-background-default-lighter px-1.5 py-1'>
<span className='text-text-secondary system-2xs-medium-uppercase'>{t('workflow.nodes.llm.jsonSchema.required')}</span> <span className='system-2xs-medium-uppercase text-text-secondary'>{t('workflow.nodes.llm.jsonSchema.required')}</span>
<Switch size='xs' defaultValue={defaultValue} onChange={toggleRequired} /> <Switch size='xs' defaultValue={defaultValue} onChange={toggleRequired} />
</div> </div>
) )

14
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
View File

@ -36,27 +36,27 @@ const TypeSelector: FC<TypeSelectorProps> = ({
> >
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}> <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className={cn( <div className={cn(
'flex items-center p-0.5 pl-1 rounded-[5px] hover:bg-state-base-hover', 'flex items-center rounded-[5px] p-0.5 pl-1 hover:bg-state-base-hover',
open && 'bg-state-base-hover', open && 'bg-state-base-hover',
)}> )}>
<span className='text-text-tertiary system-xs-medium'>{currentValue}</span> <span className='system-xs-medium text-text-tertiary'>{currentValue}</span>
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary' /> <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
</div> </div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className={popupClassName}> <PortalToFollowElemContent className={popupClassName}>
<div className='w-40 p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'> <div className='w-40 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg shadow-shadow-shadow-5'>
{items.map((item) => { {items.map((item) => {
const isSelected = item.value === currentValue const isSelected = item.value === currentValue
return (<div return (<div
key={item.value} key={item.value}
className={'flex items-center gap-x-1 px-2 py-1 rounded-lg hover:bg-state-base-hover'} className={'flex items-center gap-x-1 rounded-lg px-2 py-1 hover:bg-state-base-hover'}
onClick={() => { onClick={() => {
onSelect(item) onSelect(item)
setOpen(false) setOpen(false)
}} }}
> >
<span className='px-1 text-text-secondary system-sm-medium'>{item.text}</span> <span className='system-sm-medium px-1 text-text-secondary'>{item.text}</span>
{isSelected && <RiCheckLine className='w-4 h-4 text-text-accent' />} {isSelected && <RiCheckLine className='h-4 w-4 text-text-accent' />}
</div> </div>
) )
})} })}

2
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
View File

@ -13,7 +13,7 @@ const VisualEditor: FC<VisualEditorProps> = (props) => {
useSchemaNodeOperations(props) useSchemaNodeOperations(props)
return ( return (
<div className='h-full rounded-xl p-1 pl-2 bg-background-section-burn overflow-auto'> <div className='h-full overflow-auto rounded-xl bg-background-section-burn p-1 pl-2'>
<SchemaNode <SchemaNode
name='structured_output' name='structured_output'
schema={schema} schema={schema}

4
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
View File

@ -97,8 +97,8 @@ const SchemaNode: FC<SchemaNodeProps> = ({
> >
{ {
isExpanded isExpanded
? <RiArrowDropDownLine className='w-4 h-4' /> ? <RiArrowDropDownLine className='h-4 w-4' />
: <RiArrowDropRightLine className='w-4 h-4' /> : <RiArrowDropRightLine className='h-4 w-4' />
} }
</button> </button>
</div> </div>

8
web/app/components/workflow/nodes/llm/components/structure-output.tsx
View File

@ -35,9 +35,9 @@ const StructureOutput: FC<Props> = ({
return ( return (
<div className={cn(className)}> <div className={cn(className)}>
<div className='flex justify-between'> <div className='flex justify-between'>
<div className='flex leading-[18px] items-center'> <div className='flex items-center leading-[18px]'>
<div className='code-sm-semibold text-text-secondary'>structured_output</div> <div className='code-sm-semibold text-text-secondary'>structured_output</div>
<div className='ml-2 system-xs-regular text-text-tertiary'>object</div> <div className='system-xs-regular ml-2 text-text-tertiary'>object</div>
</div> </div>
<Button <Button
size='small' size='small'
@ -45,7 +45,7 @@ const StructureOutput: FC<Props> = ({
className='flex' className='flex'
onClick={showConfigModal} onClick={showConfigModal}
> >
<RiEditLine className='size-3.5 mr-1' /> <RiEditLine className='mr-1 size-3.5' />
<div className='system-xs-medium text-components-button-secondary-text'>{t('app.structOutput.configure')}</div> <div className='system-xs-medium text-components-button-secondary-text'>{t('app.structOutput.configure')}</div>
</Button> </Button>
</div> </div>
@ -53,7 +53,7 @@ const StructureOutput: FC<Props> = ({
<ShowPanel <ShowPanel
payload={value} payload={value}
/>) : ( />) : (
<div className='mt-1.5 flex items-center h-10 justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary'>{t('app.structOutput.notConfiguredTip')}</div> <div className='system-xs-regular mt-1.5 flex h-10 items-center justify-center rounded-[10px] bg-background-section text-text-tertiary'>{t('app.structOutput.notConfiguredTip')}</div>
)} )}
{showConfig && ( {showConfig && (

6
web/app/components/workflow/nodes/llm/panel.tsx
View File

@ -293,9 +293,9 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
<div className='mr-4 flex items-center'> <div className='mr-4 flex items-center'>
{!isModelSupportStructuredOutput && ( {!isModelSupportStructuredOutput && (
<Tooltip noDecoration popupContent={ <Tooltip noDecoration popupContent={
<div className='w-[232px] px-4 py-3.5 rounded-xl bg-components-tooltip-bg border-[0.5px] border-components-panel-border shadow-lg backdrop-blur-[5px]'> <div className='w-[232px] rounded-xl border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-4 py-3.5 shadow-lg backdrop-blur-[5px]'>
<div className='title-xs-semi-bold text-text-primary'>{t('app.structOutput.modelNotSupported')}</div> <div className='title-xs-semi-bold text-text-primary'>{t('app.structOutput.modelNotSupported')}</div>
<div className='mt-1 body-xs-regular text-text-secondary'>{t('app.structOutput.modelNotSupportedTip')}</div> <div className='body-xs-regular mt-1 text-text-secondary'>{t('app.structOutput.modelNotSupportedTip')}</div>
</div> </div>
}> }>
<div> <div>
@ -303,7 +303,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
</div> </div>
</Tooltip> </Tooltip>
)} )}
<div className='mr-0.5 system-xs-medium-uppercase text-text-tertiary'>{t('app.structOutput.structured')}</div> <div className='system-xs-medium-uppercase mr-0.5 text-text-tertiary'>{t('app.structOutput.structured')}</div>
<Tooltip popupContent={ <Tooltip popupContent={
<div className='max-w-[150px]'>{t('app.structOutput.structuredTip')}</div> <div className='max-w-[150px]'>{t('app.structOutput.structuredTip')}</div>
}> }>

4
web/app/dev-preview/page.tsx
View File

@ -60,7 +60,7 @@ export default function Page() {
additionalProperties: false, additionalProperties: false,
}) })
return <div className='flex flex-col p-20 h-full w-full overflow-hidden'> return <div className='flex h-full w-full flex-col overflow-hidden p-20'>
<button onClick={() => setShow(true)} className='shrink-0'>Open Json Schema Config</button> <button onClick={() => setShow(true)} className='shrink-0'>Open Json Schema Config</button>
{show && ( {show && (
<JsonSchemaConfigModal <JsonSchemaConfigModal
@ -72,7 +72,7 @@ export default function Page() {
onClose={() => setShow(false)} onClose={() => setShow(false)}
/> />
)} )}
<pre className='bg-gray-50 p-4 rounded-lg overflow-auto grow'> <pre className='grow overflow-auto rounded-lg bg-gray-50 p-4'>
{JSON.stringify(schema, null, 2)} {JSON.stringify(schema, null, 2)}
</pre> </pre>
</div> </div>