AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-18 04:25:54 +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)}
>
<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(
'w-4 h-4 text-text-tertiary',
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}
</span>
{!isLast && !isSelected && !isNextSelected && (
<div className='absolute top-0 right-[-1px] h-full flex items-center'>
<Divider type='vertical' className='h-3.5 mx-0' />
<div className='absolute right-[-1px] top-0 flex h-full items-center'>
<Divider type='vertical' className='mx-0 h-3.5' />
</div>
)}
</button>

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

@ -27,7 +27,7 @@ const Collapse = ({
return (
<>
<div className='flex justify-between items-center'>
<div className='flex items-center justify-between'>
<div
className='flex items-center'
onClick={() => {
@ -37,13 +37,13 @@ const Collapse = ({
}
}}
>
<div className='shrink-0 w-4 h-4'>
<div className='h-4 w-4 shrink-0'>
{
!disabled && (
<RiArrowDropRightLine
className={cn(
'w-4 h-4 text-text-tertiary',
!collapsedMerged && 'transform rotate-90',
'h-4 w-4 text-text-tertiary',
!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 (
<div className='py-1'>
<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='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 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>
<Tooltip popupContent={t('app.structOutput.moreFillTip')} disabled={depth !== MAX_DEPTH + 1}>
<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])}
>
<div className='grow flex items-stretch'>
<div className='flex grow items-stretch'>
<TreeIndentLine depth={depth} />
{depth === MAX_DEPTH + 1 ? (
<RiMoreFill className='w-3 h-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>)}
<RiMoreFill className='h-3 w-3 text-text-tertiary' />
) : (<div className={cn('system-sm-medium h-6 w-0 grow truncate leading-6 text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
</div>
{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>
</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 (
<div className={cn(className)} ref={ref}>
{/* 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'>
{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-secondary'>{root.attrName}</div>
</div>
{/* 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>
{fieldNames.map(name => (
<Field
@ -74,7 +74,7 @@ const PickerPanel: FC<Props> = ({
...props
}) => {
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} />
</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')}>
<TreeIndentLine depth={depth} />
<div className='grow'>
<div className='flex relative select-none'>
<div className='relative flex 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')}
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}
/>
)}
<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>
{required && <div className='ml-3 text-text-warning system-2xs-medium-uppercase leading-6'>{t('app.structOutput.required')}</div>}
<div className='system-sm-medium h-6 truncate leading-6 text-text-secondary'>{name}</div>
<div className='system-xs-regular ml-3 shrink-0 leading-6 text-text-tertiary'>{getFieldType(payload)}</div>
{required && <div className='system-2xs-medium-uppercase ml-3 leading-6 text-text-warning'>{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 className='system-xs-regular w-0 grow truncate text-text-tertiary'>{payload.description}</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(
(isObj || isStructureOutput) ? ' pr-1' : 'pr-[18px]',
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}
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>
<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) && (
<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 >
@ -338,7 +338,7 @@ const VarReferenceVars: FC<Props> = ({
</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 (
<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='py-0.5 text-text-secondary system-xs-semibold-uppercase'>
<div className='flex items-center justify-between pl-2 pr-1 pt-1'>
<div className='system-xs-semibold-uppercase py-0.5 text-text-secondary'>
<span className='px-1 py-0.5'>JSON</span>
</div>
<div className='flex items-center gap-x-0.5'>
@ -85,19 +85,19 @@ const CodeEditor: FC<CodeEditorProps> = ({
<Tooltip popupContent={t('common.operation.format')}>
<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}
>
<RiIndentIncrease className='w-4 h-4 text-text-tertiary' />
<RiIndentIncrease className='h-4 w-4 text-text-tertiary' />
</button>
</Tooltip>
)}
<Tooltip popupContent={t('common.operation.copy')}>
<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)}>
<RiClipboardLine className='w-4 h-4 text-text-tertiary' />
<RiClipboardLine className='h-4 w-4 text-text-tertiary' />
</button>
</Tooltip>
</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',
className,
)}>
<RiErrorWarningFill className='shrink-0 w-4 h-4 text-text-destructive' />
<div className='grow text-text-primary system-xs-medium max-h-12 overflow-y-auto break-words'>
<RiErrorWarningFill className='h-4 w-4 shrink-0 text-text-destructive' />
<div className='system-xs-medium max-h-12 grow overflow-y-auto break-words text-text-primary'>
{message}
</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
isShow={isShow}
onClose={onClose}
className='max-w-[960px] h-[800px] p-0'
className='h-[800px] max-w-[960px] p-0'
>
<JsonSchemaConfig
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
type='button'
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',
)}
>
@ -86,13 +86,13 @@ const JsonImporter: FC<JsonImporterProps> = ({
</button>
</PortalToFollowElemTrigger>
<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 */}
<div className='relative px-3 pt-3.5 pb-1'>
<div className='flex items-center justify-center absolute right-2.5 bottom-0 w-8 h-8' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='relative px-3 pb-1 pt-3.5'>
<div className='absolute bottom-0 right-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</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')}
</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])
return (
<div className='flex flex-col h-full'>
<div className='flex h-full flex-col'>
{/* Header */}
<div className='relative flex p-6 pr-14 pb-3'>
<div className='text-text-primary title-2xl-semi-bold grow truncate'>
<div className='relative flex p-6 pb-3 pr-14'>
<div className='title-2xl-semi-bold grow truncate text-text-primary'>
{t('workflow.nodes.llm.jsonSchema.title')}
</div>
<div className='absolute right-5 top-5 w-8 h-8 flex justify-center items-center p-1.5' onClick={onClose}>
<RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
<div className='absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5' onClick={onClose}>
<RiCloseLine className='h-[18px] w-[18px] text-text-tertiary' />
</div>
</div>
{/* Content */}
@ -173,7 +173,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
/>
</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 && (
<MittProvider>
<VisualEditorContextProvider>
@ -194,22 +194,22 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
{validationError && <ErrorMessage message={validationError} />}
</div>
{/* 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
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
target='_blank'
rel='noopener noreferrer'
>
<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>
<div className='flex items-center gap-x-3'>
<div className='flex items-center gap-x-2'>
<Button variant='secondary' onClick={handleResetDefaults}>
{t('workflow.nodes.llm.jsonSchema.resetDefaults')}
</Button>
<Divider type='vertical' className='h-4 ml-1 mr-0' />
<Divider type='vertical' className='ml-1 mr-0 h-4' />
</div>
<div className='flex items-center gap-x-2'>
<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])
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 items-center justify-center absolute top-2.5 right-2.5 w-8 h-8' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<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='absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
{/* Title */}
<div className='flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1'>
<div className='flex pl-1 pr-8 text-text-primary system-xl-semibold'>
<div className='flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5'>
<div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
{t('workflow.nodes.llm.jsonSchema.generatedResult')}
</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')}
</div>
</div>
@ -83,12 +83,12 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
{/* Footer */}
<div className='flex items-center justify-between p-4 pt-2'>
<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>
</Button>
<div className='flex items-center gap-x-2'>
<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>
</Button>
<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
type='button'
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',
)}
>

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])
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='flex items-center justify-center absolute top-2.5 right-2.5 w-8 h-8' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-text-tertiary'/>
<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='absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center' onClick={onClose}>
<RiCloseLine className='h-4 w-4 text-text-tertiary'/>
</div>
{/* Title */}
<div className='flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1'>
<div className='flex pl-1 pr-8 text-text-primary system-xl-semibold'>
<div className='flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5'>
<div className='system-xl-semibold flex pl-1 pr-8 text-text-primary'>
{t('workflow.nodes.llm.jsonSchema.generateJsonSchema')}
</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')}
</div>
</div>
{/* Content */}
<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')}
</div>
<ModelParameterModal
@ -74,13 +74,13 @@ const PromptEditor: FC<PromptEditorProps> = ({
/>
</div>
<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>
<Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.promptTooltip')} />
</div>
<div className='flex items-center'>
<Textarea
className='h-[364px] px-2 py-1 resize-none'
className='h-[364px] resize-none px-2 py-1'
value={instruction}
placeholder={t('workflow.nodes.llm.jsonSchema.promptPlaceholder')}
onChange={handleInstructionChange}
@ -97,7 +97,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
className='flex items-center gap-x-0.5'
onClick={onGenerate}
>
<RiSparklingFill className='w-4 h-4' />
<RiSparklingFill className='h-4 w-4' />
<span>{t('workflow.nodes.llm.jsonSchema.generate')}</span>
</Button>
</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])
return (
<div className='pl-5 py-2'>
<div className='py-2 pl-5'>
<Button
size='small'
variant='secondary-accent'
className='flex items-center gap-x-[1px]'
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>
</Button>
</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 (
<div className='flex flex-col py-0.5'>
<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}
</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}
</div>
{
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')}
</div>
)
@ -35,7 +35,7 @@ const Card: FC<CardProps> = ({
</div>
{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}
</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')}>
<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}
disabled={disableAddBtn}
>
<RiAddCircleLine className='w-4 h-4'/>
<RiAddCircleLine className='h-4 w-4'/>
</button>
</Tooltip>
<Tooltip popupContent={t('common.operation.edit')}>
<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}
>
<RiEditLine className='w-4 h-4' />
<RiEditLine className='h-4 w-4' />
</button>
</Tooltip>
<Tooltip popupContent={t('common.operation.remove')}>
<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}
>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</button>
</Tooltip>
</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 { keyName } = props
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}
</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 (
<div className='border-t border-divider-subtle'>
{showAdvancedOptions ? (
<div className='flex flex-col px-2 py-1.5 gap-y-1'>
<div className='flex items-center gap-x-2 w-full'>
<span className='text-text-tertiary system-2xs-medium-uppercase'>
<div className='flex flex-col gap-y-1 px-2 py-1.5'>
<div className='flex w-full items-center gap-x-2'>
<span className='system-2xs-medium-uppercase text-text-tertiary'>
{t('workflow.nodes.llm.jsonSchema.stringValidations')}
</span>
<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 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
</div>
<Textarea
@ -62,11 +62,11 @@ const AdvancedOptions: FC<AdvancedOptionsProps> = ({
) : (
<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}
>
<RiArrowDownDoubleLine className='w-3 h-3 text-text-tertiary' />
<span className='text-text-tertiary system-xs-regular'>
<RiArrowDownDoubleLine className='h-3 w-3 text-text-tertiary' />
<span className='system-xs-regular text-text-tertiary'>
{t('workflow.nodes.llm.jsonSchema.showAdvancedOptions')}
</span>
</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()
return (
<div className='flex items-center gap-x-1 px-1.5 py-1 rounded-[5px] border border-divider-subtle bg-background-default-lighter'>
<span className='text-text-secondary system-2xs-medium-uppercase'>{t('workflow.nodes.llm.jsonSchema.required')}</span>
<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='system-2xs-medium-uppercase text-text-secondary'>{t('workflow.nodes.llm.jsonSchema.required')}</span>
<Switch size='xs' defaultValue={defaultValue} onChange={toggleRequired} />
</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)}>
<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',
)}>
<span className='text-text-tertiary system-xs-medium'>{currentValue}</span>
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
<span className='system-xs-medium text-text-tertiary'>{currentValue}</span>
<RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
</div>
</PortalToFollowElemTrigger>
<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) => {
const isSelected = item.value === currentValue
return (<div
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={() => {
onSelect(item)
setOpen(false)
}}
>
<span className='px-1 text-text-secondary system-sm-medium'>{item.text}</span>
{isSelected && <RiCheckLine className='w-4 h-4 text-text-accent' />}
<span className='system-sm-medium px-1 text-text-secondary'>{item.text}</span>
{isSelected && <RiCheckLine className='h-4 w-4 text-text-accent' />}
</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)
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
name='structured_output'
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
? <RiArrowDropDownLine className='w-4 h-4' />
: <RiArrowDropRightLine className='w-4 h-4' />
? <RiArrowDropDownLine className='h-4 w-4' />
: <RiArrowDropRightLine className='h-4 w-4' />
}
</button>
</div>

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

@ -35,9 +35,9 @@ const StructureOutput: FC<Props> = ({
return (
<div className={cn(className)}>
<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='ml-2 system-xs-regular text-text-tertiary'>object</div>
<div className='system-xs-regular ml-2 text-text-tertiary'>object</div>
</div>
<Button
size='small'
@ -45,7 +45,7 @@ const StructureOutput: FC<Props> = ({
className='flex'
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>
</Button>
</div>
@ -53,7 +53,7 @@ const StructureOutput: FC<Props> = ({
<ShowPanel
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 && (

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'>
{!isModelSupportStructuredOutput && (
<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='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>
@ -303,7 +303,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
</div>
</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={
<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,
})
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>
{show && (
<JsonSchemaConfigModal
@ -72,7 +72,7 @@ export default function Page() {
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)}
</pre>
</div>