dify

dify/web/app/components/workflow/nodes/start/components/var-item.tsx

@@ -0,0 +1,110 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useRef } from 'react'
+import { useBoolean, useHover } from 'ahooks'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
+import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
+import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
+import Badge from '@/app/components/base/badge'
+import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
+import { noop } from 'lodash-es'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  readonly: boolean
+  payload: InputVar
+  onChange?: (item: InputVar, moreInfo?: MoreInfo) => boolean
+  onRemove?: () => void
+  rightContent?: React.JSX.Element
+  varKeys?: string[]
+  showLegacyBadge?: boolean,
+  canDrag?: boolean,
+}
+
+const VarItem: FC<Props> = ({
+  className,
+  readonly,
+  payload,
+  onChange = () => true,
+  onRemove = noop,
+  rightContent,
+  varKeys = [],
+  showLegacyBadge = false,
+  canDrag,
+}) => {
+  const { t } = useTranslation()
+
+  const ref = useRef(null)
+  const isHovering = useHover(ref)
+  const [isShowEditVarModal, {
+    setTrue: showEditVarModal,
+    setFalse: hideEditVarModal,
+  }] = useBoolean(false)
+
+  const handlePayloadChange = useCallback((payload: InputVar, moreInfo?: MoreInfo) => {
+    const isValid = onChange(payload, moreInfo)
+    if(!isValid)
+      return
+    hideEditVarModal()
+  }, [onChange, hideEditVarModal])
+  return (
+    <div ref={ref} className={cn('flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md', className)}>
+      <div className='flex w-0 grow items-center space-x-1'>
+        <Variable02 className={cn('h-3.5 w-3.5 text-text-accent', canDrag && 'group-hover:opacity-0')} />
+        <div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary'>{payload.variable}</div>
+        {payload.label && (<><div className='shrink-0 text-xs font-medium text-text-quaternary'>·</div>
+          <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-text-tertiary'>{payload.label as string}</div>
+        </>)}
+        {showLegacyBadge && (
+          <Badge
+            text='LEGACY'
+            className='shrink-0 border-text-accent-secondary text-text-accent-secondary'
+          />
+        )}
+      </div>
+      <div className='ml-2 flex shrink-0 items-center'>
+        {rightContent || (<>
+          {(!isHovering || readonly)
+            ? (
+              <>
+                {payload.required && (
+                  <div className='mr-2 text-xs font-normal text-text-tertiary'>{t('workflow.nodes.start.required')}</div>
+                )}
+                <InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-text-tertiary' />
+              </>
+            )
+            : (!readonly && (
+              <>
+                <div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-state-base-hover'>
+                  <Edit03 className='h-4 w-4 text-text-tertiary' />
+                </div>
+                <div onClick={onRemove} className='group cursor-pointer rounded-md p-1 hover:bg-state-destructive-hover'>
+                  <RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' />
+                </div>
+              </>
+            ))}
+        </>)}
+
+      </div>
+      {
+        isShowEditVarModal && (
+          <ConfigVarModal
+            isShow
+            supportFile
+            payload={payload}
+            onClose={hideEditVarModal}
+            onConfirm={handlePayloadChange}
+            varKeys={varKeys}
+          />
+        )
+      }
+    </div>
+  )
+}
+export default React.memo(VarItem)

dify/web/app/components/workflow/nodes/start/components/var-list.tsx

@@ -0,0 +1,120 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useMemo } from 'react'
+import { produce } from 'immer'
+import { useTranslation } from 'react-i18next'
+import VarItem from './var-item'
+import { ChangeType, type InputVar, type MoreInfo } from '@/app/components/workflow/types'
+import { ReactSortable } from 'react-sortablejs'
+import { RiDraggable } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { hasDuplicateStr } from '@/utils/var'
+import Toast from '@/app/components/base/toast'
+
+type Props = {
+  readonly: boolean
+  list: InputVar[]
+  onChange: (list: InputVar[], moreInfo?: { index: number; payload: MoreInfo }) => void
+}
+
+const VarList: FC<Props> = ({
+  readonly,
+  list,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const handleVarChange = useCallback((index: number) => {
+    return (payload: InputVar, moreInfo?: MoreInfo) => {
+      const newList = produce(list, (draft) => {
+        draft[index] = payload
+      })
+      let errorMsgKey = ''
+      let typeName = ''
+      if (hasDuplicateStr(newList.map(item => item.variable))) {
+        errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+        typeName = 'appDebug.variableConfig.varName'
+      }
+      else if (hasDuplicateStr(newList.map(item => item.label as string))) {
+        errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+        typeName = 'appDebug.variableConfig.labelName'
+      }
+
+      if (errorMsgKey) {
+        Toast.notify({
+          type: 'error',
+          message: t(errorMsgKey, { key: t(typeName) }),
+        })
+        return false
+      }
+      onChange(newList, moreInfo ? { index, payload: moreInfo } : undefined)
+      return true
+    }
+  }, [list, onChange])
+
+  const handleVarRemove = useCallback((index: number) => {
+    return () => {
+      const newList = produce(list, (draft) => {
+        draft.splice(index, 1)
+      })
+      onChange(newList, {
+        index,
+        payload: {
+          type: ChangeType.remove,
+          payload: {
+            beforeKey: list[index].variable,
+          },
+        },
+      })
+    }
+  }, [list, onChange])
+
+  const listWithIds = useMemo(() => list.map((item) => {
+    return {
+      id: item.variable,
+      variable: { ...item },
+    }
+  }), [list])
+
+  const varCount = list.length
+
+  if (list.length === 0) {
+    return (
+      <div className='flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs font-normal leading-[18px] text-text-tertiary'>
+        {t('workflow.nodes.start.noVarTip')}
+      </div>
+    )
+  }
+
+  const canDrag = !readonly && varCount > 1
+
+  return (
+    <ReactSortable
+      className='space-y-1'
+      list={listWithIds}
+      setList={(list) => { onChange(list.map(item => item.variable)) }}
+      handle='.handle'
+      ghostClass='opacity-50'
+      animation={150}
+    >
+      {listWithIds.map((itemWithId, index) => (
+        <div key={itemWithId.id} className='group relative'>
+          <VarItem
+            className={cn(canDrag && 'handle')}
+            readonly={readonly}
+            payload={itemWithId.variable}
+            onChange={handleVarChange(index)}
+            onRemove={handleVarRemove(index)}
+            varKeys={list.map(item => item.variable)}
+            canDrag={canDrag}
+          />
+          {canDrag && <RiDraggable className={cn(
+            'handle absolute left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+            'group-hover:block',
+          )} />}
+        </div>
+      ))}
+    </ReactSortable>
+  )
+}
+export default React.memo(VarList)

dify/web/app/components/workflow/nodes/start/default.ts

@@ -0,0 +1,27 @@
+import type { NodeDefault } from '../../types'
+import type { StartNodeType } from './types'
+import { genNodeMetaData } from '@/app/components/workflow/utils'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+const metaData = genNodeMetaData({
+  sort: 0.1,
+  type: BlockEnum.Start,
+  isStart: true,
+  isRequired: false,
+  isSingleton: true,
+  isTypeFixed: false, // support node type change for start node(user input)
+  helpLinkUri: 'user-input',
+})
+const nodeDefault: NodeDefault<StartNodeType> = {
+  metaData,
+  defaultValue: {
+    variables: [],
+  },
+  checkValid() {
+    return {
+      isValid: true,
+    }
+  },
+}
+
+export default nodeDefault

dify/web/app/components/workflow/nodes/start/node.tsx

@@ -0,0 +1,40 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import InputVarTypeIcon from '../_base/components/input-var-type-icon'
+import type { StartNodeType } from './types'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import type { NodeProps } from '@/app/components/workflow/types'
+const i18nPrefix = 'workflow.nodes.start'
+
+const Node: FC<NodeProps<StartNodeType>> = ({
+  data,
+}) => {
+  const { t } = useTranslation()
+  const { variables } = data
+
+  if (!variables.length)
+    return null
+
+  return (
+    <div className='mb-1 px-3 py-1'>
+      <div className='space-y-0.5'>
+        {variables.map(variable => (
+          <div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-workflow-block-parma-bg px-1'>
+            <div className='flex w-0 grow items-center space-x-1'>
+              <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />
+              <span className='system-xs-regular w-0 grow truncate text-text-secondary'>{variable.variable}</span>
+            </div>
+
+            <div className='ml-1 flex items-center space-x-1'>
+              {variable.required && <span className='system-2xs-regular-uppercase text-text-tertiary'>{t(`${i18nPrefix}.required`)}</span>}
+              <InputVarTypeIcon type={variable.type} className='h-3 w-3 text-text-tertiary' />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Node)

dify/web/app/components/workflow/nodes/start/panel.tsx

@@ -0,0 +1,112 @@
+import type { FC } from 'react'
+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 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'
+
+const i18nPrefix = 'workflow.nodes.start'
+
+const Panel: FC<NodePanelProps<StartNodeType>> = ({
+  id,
+  data,
+}) => {
+  const { t } = useTranslation()
+  const {
+    readOnly,
+    isChatMode,
+    inputs,
+    isShowAddVarModal,
+    showAddVarModal,
+    handleAddVariable,
+    hideAddVarModal,
+    handleVarListChange,
+    isShowRemoveVarConfirm,
+    hideRemoveVarConfirm,
+    onRemoveVarConfirm,
+  } = useConfig(id, data)
+
+  const handleAddVarConfirm = (payload: InputVar) => {
+    const isValid = handleAddVariable(payload)
+    if (!isValid) return
+    hideAddVarModal()
+  }
+
+  return (
+    <div className='mt-2'>
+      <div className='space-y-4 px-4 pb-2'>
+        <Field
+          title={t(`${i18nPrefix}.inputField`)}
+          operations={
+            !readOnly ? <AddButton onClick={showAddVarModal} /> : undefined
+          }
+        >
+          <>
+            <VarList
+              readonly={readOnly}
+              list={inputs.variables || []}
+              onChange={handleVarListChange}
+            />
+
+            <div className='mt-1 space-y-1'>
+              <Split className='my-2' />
+              {
+                isChatMode && (
+                  <VarItem
+                    readonly
+                    payload={{
+                      variable: 'userinput.query',
+                    } as any}
+                    rightContent={
+                      <div className='text-xs font-normal text-text-tertiary'>
+                        String
+                      </div>
+                    }
+                  />)
+              }
+
+              <VarItem
+                readonly
+                showLegacyBadge={!isChatMode}
+                payload={{
+                  variable: 'userinput.files',
+                } as any}
+                rightContent={
+                  <div className='text-xs font-normal text-text-tertiary'>
+                    Array[File]
+                  </div>
+                }
+              />
+            </div>
+          </>
+        </Field>
+      </div>
+
+      {isShowAddVarModal && (
+        <ConfigVarModal
+          isCreate
+          supportFile
+          isShow={isShowAddVarModal}
+          onClose={hideAddVarModal}
+          onConfirm={handleAddVarConfirm}
+          varKeys={inputs.variables.map(v => v.variable)}
+        />
+      )}
+
+      <RemoveEffectVarConfirm
+        isShow={isShowRemoveVarConfirm}
+        onCancel={hideRemoveVarConfirm}
+        onConfirm={onRemoveVarConfirm}
+      />
+    </div>
+  )
+}
+
+export default React.memo(Panel)

dify/web/app/components/workflow/nodes/start/types.ts

@@ -0,0 +1,5 @@
+import type { CommonNodeType, InputVar } from '@/app/components/workflow/types'
+
+export type StartNodeType = CommonNodeType & {
+  variables: InputVar[]
+}

dify/web/app/components/workflow/nodes/start/use-config.ts

@@ -0,0 +1,124 @@
+import { useCallback, useState } from 'react'
+import { produce } from 'immer'
+import { useBoolean } from 'ahooks'
+import type { StartNodeType } from './types'
+import { ChangeType } from '@/app/components/workflow/types'
+import type { InputVar, MoreInfo, ValueSelector } from '@/app/components/workflow/types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import {
+  useIsChatMode,
+  useNodesReadOnly,
+  useWorkflow,
+} from '@/app/components/workflow/hooks'
+import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
+import { hasDuplicateStr } from '@/utils/var'
+import Toast from '@/app/components/base/toast'
+import { useTranslation } from 'react-i18next'
+
+const useConfig = (id: string, payload: StartNodeType) => {
+  const { t } = useTranslation()
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
+  const { handleOutVarRenameChange, isVarUsedInNodes, removeUsedVarInNodes } = useWorkflow()
+  const isChatMode = useIsChatMode()
+
+  const { inputs, setInputs } = useNodeCrud<StartNodeType>(id, payload)
+
+  const {
+    deleteNodeInspectorVars,
+    renameInspectVarName,
+    nodesWithInspectVars,
+    deleteInspectVar,
+  } = useInspectVarsCrud()
+
+  const [isShowAddVarModal, {
+    setTrue: showAddVarModal,
+    setFalse: hideAddVarModal,
+  }] = useBoolean(false)
+
+  const [isShowRemoveVarConfirm, {
+    setTrue: showRemoveVarConfirm,
+    setFalse: hideRemoveVarConfirm,
+  }] = useBoolean(false)
+  const [removedVar, setRemovedVar] = useState<ValueSelector>([])
+  const [removedIndex, setRemoveIndex] = useState(0)
+  const handleVarListChange = useCallback((newList: InputVar[], moreInfo?: { index: number; payload: MoreInfo }) => {
+    if (moreInfo?.payload?.type === ChangeType.remove) {
+      const varId = nodesWithInspectVars.find(node => node.nodeId === id)?.vars.find((varItem) => {
+        return varItem.name === moreInfo?.payload?.payload?.beforeKey
+      })?.id
+      if(varId)
+        deleteInspectVar(id, varId)
+
+      if (isVarUsedInNodes([id, moreInfo?.payload?.payload?.beforeKey || ''])) {
+        showRemoveVarConfirm()
+        setRemovedVar([id, moreInfo?.payload?.payload?.beforeKey || ''])
+        setRemoveIndex(moreInfo?.index as number)
+        return
+      }
+    }
+
+    const newInputs = produce(inputs, (draft: any) => {
+      draft.variables = newList
+    })
+    setInputs(newInputs)
+    if (moreInfo?.payload?.type === ChangeType.changeVarName) {
+      const changedVar = newList[moreInfo.index]
+      handleOutVarRenameChange(id, [id, inputs.variables[moreInfo.index].variable], [id, changedVar.variable])
+      renameInspectVarName(id, inputs.variables[moreInfo.index].variable, changedVar.variable)
+    }
+    else if(moreInfo?.payload?.type !== ChangeType.remove) { // edit var type
+      deleteNodeInspectorVars(id)
+    }
+  }, [deleteInspectVar, deleteNodeInspectorVars, handleOutVarRenameChange, id, inputs, isVarUsedInNodes, nodesWithInspectVars, renameInspectVarName, setInputs, showRemoveVarConfirm])
+
+  const removeVarInNode = useCallback(() => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.variables.splice(removedIndex, 1)
+    })
+    setInputs(newInputs)
+    removeUsedVarInNodes(removedVar)
+    hideRemoveVarConfirm()
+  }, [hideRemoveVarConfirm, inputs, removeUsedVarInNodes, removedIndex, removedVar, setInputs])
+
+  const handleAddVariable = useCallback((payload: InputVar) => {
+    const newInputs = produce(inputs, (draft: StartNodeType) => {
+      draft.variables.push(payload)
+    })
+    const newList = newInputs.variables
+    let errorMsgKey = ''
+    let typeName = ''
+    if(hasDuplicateStr(newList.map(item => item.variable))) {
+      errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+      typeName = 'appDebug.variableConfig.varName'
+    }
+    else if(hasDuplicateStr(newList.map(item => item.label as string))) {
+      errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+      typeName = 'appDebug.variableConfig.labelName'
+    }
+
+    if (errorMsgKey) {
+      Toast.notify({
+        type: 'error',
+        message: t(errorMsgKey, { key: t(typeName) }),
+      })
+      return false
+    }
+    setInputs(newInputs)
+    return true
+  }, [inputs, setInputs])
+  return {
+    readOnly,
+    isChatMode,
+    inputs,
+    isShowAddVarModal,
+    showAddVarModal,
+    hideAddVarModal,
+    handleVarListChange,
+    handleAddVariable,
+    isShowRemoveVarConfirm,
+    hideRemoveVarConfirm,
+    onRemoveVarConfirm: removeVarInNode,
+  }
+}
+
+export default useConfig

dify/web/app/components/workflow/nodes/start/use-single-run-form-params.ts

@@ -0,0 +1,87 @@
+import type { RefObject } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
+import type { ValueSelector } from '@/app/components/workflow/types'
+import { type InputVar, InputVarType, type Variable } from '@/app/components/workflow/types'
+import type { StartNodeType } from './types'
+import { useIsChatMode } from '../../hooks'
+
+type Params = {
+  id: string,
+  payload: StartNodeType,
+  runInputData: Record<string, any>
+  runInputDataRef: RefObject<Record<string, any>>
+  getInputVars: (textList: string[]) => InputVar[]
+  setRunInputData: (data: Record<string, any>) => void
+  toVarInputs: (variables: Variable[]) => InputVar[]
+}
+const useSingleRunFormParams = ({
+  id,
+  payload,
+  runInputData,
+  setRunInputData,
+}: Params) => {
+  const { t } = useTranslation()
+  const isChatMode = useIsChatMode()
+
+  const forms = (() => {
+    const forms: FormProps[] = []
+    const inputs: InputVar[] = payload.variables.map((item) => {
+      return {
+        ...item,
+        getVarValueFromDependent: true,
+      }
+    })
+
+    if (isChatMode) {
+      inputs.push({
+        label: 'sys.query',
+        variable: '#sys.query#',
+        type: InputVarType.textInput,
+        required: true,
+      })
+    }
+
+    inputs.push({
+      label: 'sys.files',
+      variable: '#sys.files#',
+      type: InputVarType.multiFiles,
+      required: false,
+    })
+
+    forms.push(
+      {
+        label: t('workflow.nodes.llm.singleRun.variable')!,
+        inputs,
+        values: runInputData,
+        onChange: setRunInputData,
+      },
+    )
+
+    return forms
+  })()
+
+  const getDependentVars = () => {
+    const inputVars = payload.variables.map((item) => {
+      return [id, item.variable]
+    })
+    const vars: ValueSelector[] = [...inputVars, ['sys', 'files']]
+
+    if (isChatMode)
+      vars.push(['sys', 'query'])
+
+    return vars
+  }
+
+  const getDependentVar = (variable: string) => {
+    return [id, variable]
+  }
+
+  return {
+    forms,
+    getDependentVars,
+    getDependentVar,
+  }
+}
+
+export default useSingleRunFormParams

dify/web/app/components/workflow/nodes/start/utils.ts

@@ -0,0 +1,5 @@
+import type { StartNodeType } from './types'
+
+export const checkNodeValid = (_payload: StartNodeType) => {
+  return true
+}