mirror of
https://github.com/langgenius/dify.git
synced 2026-07-23 20:18:40 +08:00
274 lines
10 KiB
TypeScript
274 lines
10 KiB
TypeScript
import type { FC } from 'react'
|
|
import type { FormInputItem, HumanInputNodeType } from './types'
|
|
import type { NodePanelProps, Var } from '@/app/components/workflow/types'
|
|
import { Button } from '@langgenius/dify-ui/button'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import { toast } from '@langgenius/dify-ui/toast'
|
|
import {
|
|
RiAddLine,
|
|
RiClipboardLine,
|
|
RiCollapseDiagonalLine,
|
|
RiExpandDiagonalLine,
|
|
RiEyeLine,
|
|
} from '@remixicon/react'
|
|
import { useBoolean } from 'ahooks'
|
|
import copy from 'copy-to-clipboard'
|
|
import * as React from 'react'
|
|
import { useCallback } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import ActionButton from '@/app/components/base/action-button'
|
|
import Divider from '@/app/components/base/divider'
|
|
import { Infotip } from '@/app/components/base/infotip'
|
|
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
|
|
import Split from '@/app/components/workflow/nodes/_base/components/split'
|
|
import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
|
|
import { useStore } from '@/app/components/workflow/store'
|
|
import { VarType } from '@/app/components/workflow/types'
|
|
import DeliveryMethod from './components/delivery-method'
|
|
import FormContent from './components/form-content'
|
|
import FormContentPreview from './components/form-content-preview'
|
|
import TimeoutInput from './components/timeout'
|
|
import UserActionItem from './components/user-action'
|
|
import useConfig from './hooks/use-config'
|
|
import { UserActionButtonType } from './types'
|
|
|
|
const i18nPrefix = 'nodes.humanInput'
|
|
|
|
const getOutputVarType = (input: FormInputItem): VarType => {
|
|
if (input.type === 'file') return VarType.file
|
|
|
|
if (input.type === 'file-list') return VarType.arrayFile
|
|
|
|
return VarType.string
|
|
}
|
|
|
|
const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({ id, data }) => {
|
|
const { t } = useTranslation()
|
|
const {
|
|
readOnly,
|
|
inputs,
|
|
handleDeliveryMethodChange,
|
|
handleUserActionAdd,
|
|
handleUserActionChange,
|
|
handleUserActionDelete,
|
|
handleTimeoutChange,
|
|
handleFormContentChange,
|
|
handleFormInputsChange,
|
|
handleFormInputItemRename,
|
|
handleFormInputItemRemove,
|
|
editorKey,
|
|
structuredOutputCollapsed,
|
|
setStructuredOutputCollapsed,
|
|
} = useConfig(id, data)
|
|
|
|
const { availableVars, availableNodesWithParent } = useAvailableVarList(id, {
|
|
onlyLeafNodeVar: false,
|
|
filterVar: (varPayload: Var) => {
|
|
return [VarType.string, VarType.number, VarType.secret, VarType.arrayString].includes(
|
|
varPayload.type,
|
|
)
|
|
},
|
|
})
|
|
|
|
const [isExpandFormContent, { toggle: toggleExpandFormContent }] = useBoolean(false)
|
|
const nodePanelWidth = useStore((state) => state.nodePanelWidth)
|
|
|
|
const [isPreview, { toggle: togglePreview, setFalse: hidePreview }] = useBoolean(false)
|
|
|
|
const onAddUseAction = useCallback(() => {
|
|
const index = inputs.user_actions.length + 1
|
|
handleUserActionAdd({
|
|
id: `action_${index}`,
|
|
title: `Button Text ${index}`,
|
|
button_style: UserActionButtonType.Default,
|
|
})
|
|
}, [handleUserActionAdd, inputs.user_actions.length])
|
|
|
|
return (
|
|
<div className="py-2">
|
|
{/* delivery methods */}
|
|
<DeliveryMethod
|
|
nodeId={id}
|
|
value={inputs.delivery_methods || []}
|
|
formContent={inputs.form_content}
|
|
formInputs={inputs.inputs}
|
|
nodesOutputVars={availableVars}
|
|
availableNodes={availableNodesWithParent}
|
|
onChange={handleDeliveryMethodChange}
|
|
readonly={readOnly}
|
|
/>
|
|
<div className="px-4 py-2">
|
|
<Divider className="my-0! h-px! bg-divider-subtle!" />
|
|
</div>
|
|
{/* form content */}
|
|
<div
|
|
className={cn(
|
|
'px-4 py-2',
|
|
isExpandFormContent &&
|
|
'fixed top-[244px] right-[4px] bottom-[8px] z-10 flex flex-col rounded-b-2xl bg-components-panel-bg',
|
|
)}
|
|
style={{
|
|
width: isExpandFormContent ? nodePanelWidth : '100%',
|
|
}}
|
|
>
|
|
<div className="mb-1 flex shrink-0 items-center justify-between">
|
|
<div className="flex h-6 items-center gap-0.5">
|
|
<div className="system-sm-semibold-uppercase text-text-secondary">
|
|
{t(($) => $[`${i18nPrefix}.formContent.title`], { ns: 'workflow' })}
|
|
</div>
|
|
<Infotip
|
|
aria-label={t(($) => $[`${i18nPrefix}.formContent.tooltip`], { ns: 'workflow' })}
|
|
>
|
|
{t(($) => $[`${i18nPrefix}.formContent.tooltip`], { ns: 'workflow' })}
|
|
</Infotip>
|
|
</div>
|
|
{!readOnly && (
|
|
<div className="flex items-center">
|
|
<Button
|
|
variant="ghost"
|
|
size="small"
|
|
className={cn(
|
|
'flex items-center space-x-1 px-2',
|
|
isPreview && 'bg-state-accent-active text-text-accent',
|
|
)}
|
|
onClick={togglePreview}
|
|
>
|
|
<RiEyeLine className="size-3.5" />
|
|
<div className="system-xs-medium">
|
|
{t(($) => $[`${i18nPrefix}.formContent.preview`], { ns: 'workflow' })}
|
|
</div>
|
|
</Button>
|
|
<div className="mx-2 h-3 w-px bg-divider-regular"></div>
|
|
<div className="flex items-center space-x-1">
|
|
<button
|
|
type="button"
|
|
aria-label={t(($) => $['operation.copy'], { ns: 'common' })}
|
|
className="flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-components-button-ghost-bg-hover"
|
|
onClick={() => {
|
|
copy(inputs.form_content)
|
|
toast.success(t(($) => $['actionMsg.copySuccessfully'], { ns: 'common' }))
|
|
}}
|
|
>
|
|
<RiClipboardLine className="size-4 text-text-secondary" aria-hidden />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label={t(($) => $[isExpandFormContent ? 'chat.collapse' : 'chat.expand'], {
|
|
ns: 'share',
|
|
})}
|
|
className={cn(
|
|
'flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-text-secondary hover:bg-components-button-ghost-bg-hover',
|
|
isExpandFormContent && 'bg-state-accent-active text-text-accent',
|
|
)}
|
|
onClick={toggleExpandFormContent}
|
|
>
|
|
{isExpandFormContent ? (
|
|
<RiCollapseDiagonalLine className="size-4" aria-hidden />
|
|
) : (
|
|
<RiExpandDiagonalLine className="size-4" aria-hidden />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<FormContent
|
|
editorKey={editorKey}
|
|
nodeId={id}
|
|
value={inputs.form_content}
|
|
onChange={handleFormContentChange}
|
|
formInputs={inputs.inputs}
|
|
onFormInputsChange={handleFormInputsChange}
|
|
onFormInputItemRename={handleFormInputItemRename}
|
|
onFormInputItemRemove={handleFormInputItemRemove}
|
|
isExpand={isExpandFormContent}
|
|
availableVars={availableVars}
|
|
availableNodes={availableNodesWithParent}
|
|
readonly={readOnly}
|
|
/>
|
|
</div>
|
|
{/* user actions */}
|
|
<div className="px-4 py-2">
|
|
<div className="mb-1 flex items-center justify-between">
|
|
<div className="flex items-center gap-0.5">
|
|
<div className="system-sm-semibold-uppercase text-text-secondary">
|
|
{t(($) => $[`${i18nPrefix}.userActions.title`], { ns: 'workflow' })}
|
|
</div>
|
|
<Infotip
|
|
aria-label={t(($) => $[`${i18nPrefix}.userActions.tooltip`], { ns: 'workflow' })}
|
|
>
|
|
{t(($) => $[`${i18nPrefix}.userActions.tooltip`], { ns: 'workflow' })}
|
|
</Infotip>
|
|
</div>
|
|
{!readOnly && (
|
|
<div className="flex items-center px-1">
|
|
<ActionButton onClick={onAddUseAction}>
|
|
<RiAddLine className="size-4" />
|
|
</ActionButton>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{!inputs.user_actions.length && (
|
|
<div className="flex items-center justify-center rounded-[10px] bg-background-section p-3 system-xs-regular text-text-tertiary">
|
|
{t(($) => $[`${i18nPrefix}.userActions.emptyTip`], { ns: 'workflow' })}
|
|
</div>
|
|
)}
|
|
{inputs.user_actions.length > 0 && (
|
|
<div className="space-y-2">
|
|
{inputs.user_actions.map((action, index) => (
|
|
<UserActionItem
|
|
key={index}
|
|
data={action}
|
|
onChange={(data) => handleUserActionChange(index, data)}
|
|
onDelete={handleUserActionDelete}
|
|
readonly={readOnly}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="px-4 py-2">
|
|
<Divider className="my-0! h-px! bg-divider-subtle!" />
|
|
</div>
|
|
{/* timeout */}
|
|
<div className="flex items-center justify-between px-4 py-2">
|
|
<div className="system-sm-semibold-uppercase text-text-secondary">
|
|
{t(($) => $[`${i18nPrefix}.timeout.title`], { ns: 'workflow' })}
|
|
</div>
|
|
<TimeoutInput
|
|
timeout={inputs.timeout}
|
|
unit={inputs.timeout_unit}
|
|
onChange={handleTimeoutChange}
|
|
readonly={readOnly}
|
|
/>
|
|
</div>
|
|
{/* output vars */}
|
|
<Split />
|
|
<OutputVars collapsed={structuredOutputCollapsed} onCollapse={setStructuredOutputCollapsed}>
|
|
{inputs.inputs.map((input) => (
|
|
<VarItem
|
|
key={input.output_variable_name}
|
|
name={input.output_variable_name}
|
|
type={getOutputVarType(input)}
|
|
description="Form input value"
|
|
/>
|
|
))}
|
|
<VarItem name="__action_id" type="string" description="Action ID user triggered" />
|
|
<VarItem name="__action_value" type="string" description="Selected action value" />
|
|
<VarItem name="__rendered_content" type="string" description="Rendered content" />
|
|
</OutputVars>
|
|
|
|
{isPreview && (
|
|
<FormContentPreview
|
|
content={inputs.form_content}
|
|
formInputs={inputs.inputs}
|
|
userActions={inputs.user_actions}
|
|
onClose={hidePreview}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Panel)
|