mirror of https://github.com/langgenius/dify.git
feat: move start output var to vars
This commit is contained in:
Joel
parent
47f2fe591d
commit
28206cac72
|
|
@ -5,7 +5,7 @@ import cn from 'classnames'
|
|||
import { useBoolean } from 'ahooks'
|
||||
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import TooltipPlus from '@/app/components/base/tooltip-plus'
|
||||
import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
type Props = {
|
||||
title: string
|
||||
tooltip?: string
|
||||
|
|
@ -26,10 +26,11 @@ const Filed: FC<Props> = ({
|
|||
const [fold, {
|
||||
toggle: toggleFold,
|
||||
}] = useBoolean(true)
|
||||
const FoldHandler = fold ? ChevronRight : ChevronDown
|
||||
return (
|
||||
<div className={cn(inline && 'flex justify-between items-center')}>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className={cn(inline && 'flex justify-between items-center', supportFold && 'cursor-pointer')}>
|
||||
<div
|
||||
onClick={() => supportFold && toggleFold()}
|
||||
className='flex justify-between items-center'>
|
||||
<div className='flex items-center h-6'>
|
||||
<div className='text-[13px] font-medium text-gray-700 uppercase'>{title}</div>
|
||||
{tooltip && (
|
||||
|
|
@ -45,7 +46,7 @@ const Filed: FC<Props> = ({
|
|||
<div className='flex'>
|
||||
{operations && <div>{operations}</div>}
|
||||
{supportFold && (
|
||||
<FoldHandler className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={toggleFold} />
|
||||
<ChevronRight className='w-3.5 h-3.5 text-gray-500 cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,17 @@ import ConfigVarModal from '@/app/components/app/configuration/config-var/config
|
|||
type Props = {
|
||||
readonly: boolean
|
||||
payload: InputVar
|
||||
onChange: (item: InputVar, moreInfo?: MoreInfo) => void
|
||||
onRemove: () => void
|
||||
onChange?: (item: InputVar, moreInfo?: MoreInfo) => void
|
||||
onRemove?: () => void
|
||||
rightContent?: JSX.Element
|
||||
}
|
||||
|
||||
const VarItem: FC<Props> = ({
|
||||
readonly,
|
||||
payload,
|
||||
onChange,
|
||||
onRemove,
|
||||
onChange = () => { },
|
||||
onRemove = () => { },
|
||||
rightContent,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
|
|
@ -41,29 +43,33 @@ const VarItem: FC<Props> = ({
|
|||
<div className='flex items-center space-x-1 grow w-0'>
|
||||
<Variable02 className='w-3.5 h-3.5 text-primary-500' />
|
||||
<div className='shrink-0 truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
|
||||
<div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
|
||||
<div className='grow w-0 truncate text-[13px] font-medium text-gray-500'>{payload.label}</div>
|
||||
{payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
|
||||
<div className='grow w-0 truncate text-[13px] font-medium text-gray-500'>{payload.label}</div>
|
||||
</>)}
|
||||
</div>
|
||||
<div className='shrink-0 ml-2 flex items-center'>
|
||||
{(!isHovering || readonly)
|
||||
? (
|
||||
<>
|
||||
{payload.required && (
|
||||
<div className='mr-2 text-xs font-normal text-gray-500'>{t('workflow.nodes.start.required')}</div>
|
||||
)}
|
||||
<InputVarTypeIcon type={payload.type} className='w-3.5 h-3.5 text-gray-500' />
|
||||
</>
|
||||
)
|
||||
: (!readonly && (
|
||||
<>
|
||||
<div onClick={showEditVarModal} className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
|
||||
<Edit03 className='w-4 h-4 text-gray-500' />
|
||||
</div>
|
||||
<div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
|
||||
<Trash03 className='w-4 h-4 text-gray-500' />
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
{rightContent || (<>
|
||||
{(!isHovering || readonly)
|
||||
? (
|
||||
<>
|
||||
{payload.required && (
|
||||
<div className='mr-2 text-xs font-normal text-gray-500'>{t('workflow.nodes.start.required')}</div>
|
||||
)}
|
||||
<InputVarTypeIcon type={payload.type} className='w-3.5 h-3.5 text-gray-500' />
|
||||
</>
|
||||
)
|
||||
: (!readonly && (
|
||||
<>
|
||||
<div onClick={showEditVarModal} className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
|
||||
<Edit03 className='w-4 h-4 text-gray-500' />
|
||||
</div>
|
||||
<div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
|
||||
<Trash03 className='w-4 h-4 text-gray-500' />
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</>)}
|
||||
|
||||
</div>
|
||||
{
|
||||
isShowEditVarModal && (
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import React from 'react'
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
|
||||
import VarList from './components/var-list'
|
||||
import VarItem from './components/var-item'
|
||||
import useConfig from './use-config'
|
||||
import type { StartNodeType } from './types'
|
||||
import Split from '@/app/components/workflow/nodes/_base/components/split'
|
||||
import Field from '@/app/components/workflow/nodes/_base/components/field'
|
||||
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
|
||||
import AddButton from '@/app/components/base/button/add-button'
|
||||
import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
|
||||
import type { InputVar, NodePanelProps } from '@/app/components/workflow/types'
|
||||
|
|
@ -40,57 +40,52 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
|
|||
|
||||
return (
|
||||
<div className='mt-2'>
|
||||
<div className='px-4 pb-4 space-y-4'>
|
||||
<div className='px-4 pb-2 space-y-4'>
|
||||
<Field
|
||||
title={t(`${i18nPrefix}.inputField`)}
|
||||
operations={
|
||||
!readOnly ? <AddButton onClick={showAddVarModal} /> : undefined
|
||||
}
|
||||
>
|
||||
<VarList
|
||||
readonly={readOnly}
|
||||
list={inputs.variables || []}
|
||||
onChange={handleVarListChange}
|
||||
/>
|
||||
<>
|
||||
<VarList
|
||||
readonly={readOnly}
|
||||
list={inputs.variables || []}
|
||||
onChange={handleVarListChange}
|
||||
/>
|
||||
|
||||
{
|
||||
isChatMode && (
|
||||
<div className='mt-1 space-y-1'>
|
||||
<Split className='my-2' />
|
||||
<VarItem
|
||||
readonly
|
||||
payload={{
|
||||
variable: 'sys.query',
|
||||
} as any}
|
||||
rightContent={
|
||||
<div className='text-xs font-normal text-gray-500'>
|
||||
String
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<VarItem
|
||||
readonly
|
||||
payload={{
|
||||
variable: 'sys.files',
|
||||
} as any}
|
||||
rightContent={
|
||||
<div className='text-xs font-normal text-gray-500'>
|
||||
Array[File]
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
</Field>
|
||||
</div>
|
||||
{isChatMode && <Split />}
|
||||
{isChatMode && (
|
||||
<div className='px-4 pt-4 pb-2'>
|
||||
<OutputVars title={t(`${i18nPrefix}.builtInVar`)!}>
|
||||
<>
|
||||
<VarItem
|
||||
name='sys.query'
|
||||
type='string'
|
||||
description={t(`${i18nPrefix}.outputVars.query`)}
|
||||
/>
|
||||
{/* Now not support sys.memories */}
|
||||
{/* <VarItem
|
||||
name='sys.memories'
|
||||
type='array[Object]'
|
||||
description={t(`${i18nPrefix}.outputVars.memories.des`)}
|
||||
subItems={[
|
||||
{
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
description: t(`${i18nPrefix}.outputVars.memories.type`),
|
||||
},
|
||||
{
|
||||
name: 'content',
|
||||
type: 'string',
|
||||
description: t(`${i18nPrefix}.outputVars.memories.content`),
|
||||
},
|
||||
]}
|
||||
/> */}
|
||||
<VarItem
|
||||
name='sys.files'
|
||||
type='Array[File]'
|
||||
description={t(`${i18nPrefix}.outputVars.files`)}
|
||||
/>
|
||||
</>
|
||||
</OutputVars>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isShowAddVarModal && (
|
||||
<ConfigVarModal
|
||||
|
|
|
|||
Loading…
Reference in New Issue