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

node control

This commit is contained in:
StyleZhang 2024-03-08 17:01:43 +08:00
parent 04ad1eef79
commit e307947dd8
4 changed files with 97 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/workflow/block-selector/tools/index.tsx
View File

@ -19,7 +19,8 @@ const Tools = ({
isCustom,
onSelect,
}: ToolsProps) => {
const toolsets = useStore(state => state.toolsets).filter(toolset => toolset.type === (isCustom ? 'api' : 'builtin'))
const totalToolsets = useStore(state => state.toolsets)
const toolsets = totalToolsets.filter(toolset => toolset.type === (isCustom ? 'api' : 'builtin'))
const setToolsets = useStore(state => state.setToolsets)
const toolsMap = useStore(state => state.toolsMap)
const setToolsMap = useStore(state => state.setToolsMap)

91
web/app/components/workflow/nodes/_base/components/node-control.tsx
View File

@ -1,52 +1,77 @@
import type { FC } from 'react'
import { memo } from 'react'
import { useWorkflow } from '../../../hooks'
import {
DotsHorizontal,
Loading02,
} from '@/app/components/base/icons/src/vender/line/general'
memo,
useCallback,
useState,
} from 'react'
import { useWorkflow } from '../../../hooks'
import type { Node } from '../../../types'
import { canRunBySingle } from '../../../utils'
import PanelOperator from './panel-operator'
import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
import {
Play,
Stop,
} from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
type NodeControlProps = {
isRunning?: boolean
nodeId: string
}
type NodeControlProps = Pick<Node, 'id' | 'data'>
const NodeControl: FC<NodeControlProps> = ({
isRunning,
nodeId,
id,
data,
}) => {
const [open, setOpen] = useState(false)
const { handleNodeDataUpdate } = useWorkflow()
const handleOpenChange = useCallback((newOpen: boolean) => {
setOpen(newOpen)
}, [])
return (
<div className='flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
{
isRunning && (
<div className='flex items-center px-1 h-5 rounded-md bg-primary-50 text-xs font-medium text-primary-600'>
<Loading02 className='mr-1 w-3 h-3 animate-spin' />
RUNNING
</div>
)
}
<div
className={`
hidden group-hover:flex pb-1 absolute right-0 -top-7 h-7
${data.selected && '!flex'}
${open && '!flex'}
`}
>
<div
className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5'
onClick={() => {
handleNodeDataUpdate({
id: nodeId,
data: { _isSingleRun: !isRunning },
})
}}
className='flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'
onClick={e => e.stopPropagation()}
>
{
isRunning
? <Stop className='w-3 h-3' />
: <Play className='w-3 h-3' />
data._isSingleRun && (
<div className='flex items-center mr-1 px-1 h-5 rounded-md bg-primary-50 text-xs font-medium text-primary-600'>
<Loading02 className='mr-1 w-3 h-3 animate-spin' />
RUNNING
</div>
)
}
</div>
<div className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5'>
<DotsHorizontal className='w-3 h-3' />
{
canRunBySingle(data.type) && (
<div
className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5'
onClick={() => {
handleNodeDataUpdate({
id,
data: { _isSingleRun: !data._isSingleRun },
})
}}
>
{
data._isSingleRun
? <Stop className='w-3 h-3' />
: <Play className='w-3 h-3' />
}
</div>
)
}
<PanelOperator
id={id}
data={data}
offset={0}
onOpenChange={handleOpenChange}
triggerClassName='!w-5 !h-5'
/>
</div>
</div>
)

44
web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
View File

@ -9,6 +9,7 @@ import produce from 'immer'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import { useEdges } from 'reactflow'
import type { OffsetOptions } from '@floating-ui/react'
import ChangeBlock from './change-block'
import { useStore } from '@/app/components/workflow/store'
import {
@ -33,10 +34,19 @@ import {
type PanelOperatorProps = {
id: string
data: Node['data']
triggerClassName?: string
offset?: OffsetOptions
onOpenChange?: (open: boolean) => void
}
const PanelOperator = ({
id,
data,
triggerClassName,
offset = {
mainAxis: 4,
crossAxis: 53,
},
onOpenChange,
}: PanelOperatorProps) => {
const { t } = useTranslation()
const { locale } = useContext(I18n)
@ -86,22 +96,27 @@ const PanelOperator = ({
return tool?.description[language] || ''
}, [data, nodesExtraData, toolsMap, language])
const handleOpenChange = useCallback((newOpen: boolean) => {
setOpen(newOpen)
if (onOpenChange)
onOpenChange(newOpen)
}, [onOpenChange])
return (
<PortalToFollowElem
placement='bottom-end'
offset={{
mainAxis: 4,
crossAxis: 53,
}}
offset={offset}
open={open}
onOpenChange={setOpen}
onOpenChange={handleOpenChange}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<PortalToFollowElemTrigger onClick={() => handleOpenChange(!open)}>
<div
className={`
flex items-center justify-center w-6 h-6 rounded-md cursor-pointer
hover:bg-black/5
${open && 'bg-black/5'}
${triggerClassName}
`}
>
<DotsHorizontal className='w-4 h-4 text-gray-700' />
@ -110,10 +125,14 @@ const PanelOperator = ({
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[240px] border-[0.5px] border-gray-200 rounded-2xl shadow-xl bg-white'>
<div className='p-1'>
<ChangeBlock
nodeId={id}
sourceHandle={edge?.sourceHandle || 'source'}
/>
{
data.type !== BlockEnum.Start && (
<ChangeBlock
nodeId={id}
sourceHandle={edge?.sourceHandle || 'source'}
/>
)
}
<div className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'>
{t('workflow.panel.helpLink')}
</div>
@ -124,7 +143,10 @@ const PanelOperator = ({
<div className='h-[1px] bg-gray-100'></div>
<div className='p-1'>
<div
className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
className={`
flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer
hover:bg-rose-50 hover:text-red-500
`}
onClick={() => handleNodeDelete(id)}
>
{t('common.operation.delete')}

16
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -8,7 +8,6 @@ import {
} from 'react'
import type { NodeProps } from '../../types'
import { BlockEnum } from '../../types'
import { canRunBySingle } from '../../utils'
import {
NodeSourceHandle,
NodeTargetHandle,
@ -59,17 +58,10 @@ const BaseNode: FC<BaseNodeProps> = ({
/>
)
}
{
canRunBySingle(data.type)
&& (
<div className='hidden group-hover:flex pb-1 absolute right-0 -top-7 h-7'>
<NodeControl
nodeId={id}
isRunning={data._isSingleRun}
/>
</div>
)
}
<NodeControl
id={id}
data={data}
/>
<div className='flex items-center px-3 pt-3 pb-2'>
<BlockIcon
className='shrink-0 mr-2'