opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: var picker ui

This commit is contained in:
Joel 2024-03-28 18:23:05 +08:00
parent b8818c90b0
commit c1bf4c6405
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
View File

@ -2,6 +2,10 @@ import type { FC } from 'react'
import { useSelectOrDelete } from '../../hooks'
import { DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND } from './index'
import type { Node } from '@/app/components/workflow/types'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import { VarBlockIcon } from '@/app/components/workflow/block-icon'
import { BlockEnum } from '@/app/components/workflow/types'
import { Line3 } from '@/app/components/base/icons/src/public/common'
type WorkflowVariableBlockComponentProps = {
nodeKey: string
@ -16,21 +20,33 @@ const WorkflowVariableBlockComponent: FC<WorkflowVariableBlockComponentProps> =
}) => {
const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND)
const node = getWorkflowNode(variables[0])
const outputVarNode = node.data
const variablesLength = variables.length
const lastVariable = variables[variablesLength - 1]
return (
<div
className={`
inline-flex items-center pl-1 pr-0.5 h-6 bg-white border-[0.5px] border-black/5 rounded-[5px]
hover:border hover:border-primary-300 hover:bg-primary-25
${isSelected && '!border !border-primary-500 !bg-primary-50'}
mr-[2px] relative group/wrap flex items-center h-[20px] pl-0.5 pr-[3px] rounded-[5px] border
${isSelected ? ' border-[#84ADFF] bg-[#F5F8FF]' : ' border-black/5 bg-white'}
`}
ref={ref}
>
<div>{node.data.title}</div>
/
<div>{lastVariable}</div>
<div className='flex items-center'>
<div className='p-[1px]'>
<VarBlockIcon
className='!text-gray-500'
type={outputVarNode?.type || BlockEnum.Start}
/>
</div>
<div className='shrink-0 mx-0.5 text-xs font-medium text-gray-500 truncate' title={outputVarNode?.title} style={{
}}>{outputVarNode?.title}</div>
<Line3 className='mr-0.5 text-gray-300'></Line3>
</div>
<div className='flex items-center text-primary-600'>
<Variable02 className='w-3.5 h-3.5' />
<div className='shrink-0 ml-0.5 text-xs font-medium truncate' title={lastVariable}>{lastVariable}</div>
</div>
</div>
)
}