kanshan/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-02-12 22:14:59 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

human input node style complete

Browse Source
This commit is contained in:
JzoNg 2025-07-25 10:45:56 +08:00
parent 1099ab5d91
commit 1ab02c6e9a
2 changed files with 64 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/app/components/workflow/nodes/human-input/default.ts
View File

@ -1,6 +1,6 @@
import type { NodeDefault } from '../../types'
import type { HumanInputNodeType } from './types'
import { DeliveryMethodType } from './types'
import { DeliveryMethodType, UserActionButtonType } from './types'
import { ALL_CHAT_AVAILABLE_BLOCKS } from '@/app/components/workflow/blocks'
const nodeDefault: NodeDefault<HumanInputNodeType> = {
@ -15,7 +15,28 @@ const nodeDefault: NodeDefault<HumanInputNodeType> = {
enabled: false,
},
],
userActions: [],
userActions: [
{
name: 'approve',
text: 'Post to X',
type: UserActionButtonType.Primary,
},
{
name: 'regenerate',
text: 'regenerate',
type: UserActionButtonType.Default,
},
{
name: 'thinking',
text: 'think more',
type: UserActionButtonType.Accent,
},
{
name: 'cancel',
text: 'cancel',
type: UserActionButtonType.Ghost,
},
],
},
getAvailablePrevNodes(isChatMode: boolean) {
const nodes = isChatMode

63
web/app/components/workflow/nodes/human-input/node.tsx
View File

@ -4,36 +4,55 @@ import {
RiMailSendFill,
RiRobot2Fill,
} from '@remixicon/react'
import { NodeSourceHandle } from '../_base/components/node-handle'
import type { HumanInputNodeType } from './types'
import type { NodeProps } from '@/app/components/workflow/types'
import { DeliveryMethodType } from './types'
const Node: FC<NodeProps<HumanInputNodeType>> = ({
data,
}) => {
const deliveryMethods = data.deliveryMethod || []
const Node: FC<NodeProps<HumanInputNodeType>> = (props) => {
const { data } = props
const deliveryMethods = data.deliveryMethod
const userActions = data.userActions
return (
<div className='space-y-0.5 py-1'>
<div className='system-2xs-medium-uppercase px-2.5 py-0.5 text-text-tertiary'>delivery method</div>
<div className='space-y-0.5 px-2.5'>
{deliveryMethods.map(method => (
<div key={method.type} className='flex items-center gap-1 rounded-[6px] bg-workflow-block-parma-bg p-1'>
{method.type === DeliveryMethodType.WebApp && (
<div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5'>
<RiRobot2Fill className='h-3.5 w-3.5 text-text-primary-on-surface' />
<>
{deliveryMethods.length > 0 && (
<div className='space-y-0.5 py-1'>
<div className='system-2xs-medium-uppercase px-2.5 py-0.5 text-text-tertiary'>delivery method</div>
<div className='space-y-0.5 px-2.5'>
{deliveryMethods.map(method => (
<div key={method.type} className='flex items-center gap-1 rounded-[6px] bg-workflow-block-parma-bg p-1'>
{method.type === DeliveryMethodType.WebApp && (
<div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5'>
<RiRobot2Fill className='h-3.5 w-3.5 text-text-primary-on-surface' />
</div>
)}
{method.type === DeliveryMethodType.Email && (
<div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-blue-solid p-0.5'>
<RiMailSendFill className='h-3.5 w-3.5 text-text-primary-on-surface' />
</div>
)}
<span className='system-xs-regular capitalize text-text-secondary'>{method.type}</span>
</div>
)}
{method.type === DeliveryMethodType.Email && (
<div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-blue-solid p-0.5'>
<RiMailSendFill className='h-3.5 w-3.5 text-text-primary-on-surface' />
</div>
)}
<span className='system-xs-regular capitalize text-text-secondary'>{method.type}</span>
))}
</div>
))}
</div>
</div>
</div>
)}
{userActions.length > 0 && (
<div className='space-y-0.5 py-1'>
{userActions.map(userAction => (
<div key={userAction.name} className='relative flex flex-row-reverse items-center px-4 py-1'>
<span className='system-xs-semibold-uppercase truncate text-text-secondary'>{userAction.name}</span>
<NodeSourceHandle
{...props}
handleId={userAction.name}
handleClassName='!top-1/2 !-right-[9px] !-translate-y-1/2'
/>
</div>
))}
</div>
)}
</>
)
}