您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

use-config.ts 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import { useCallback, useEffect, useState } from 'react'
  2. import produce from 'immer'
  3. import useVarList from '../_base/hooks/use-var-list'
  4. import useOutputVarList from '../_base/hooks/use-output-var-list'
  5. import { BlockEnum, VarType } from '../../types'
  6. import type { Var, Variable } from '../../types'
  7. import { useStore } from '../../store'
  8. import type { CodeNodeType, OutputVar } from './types'
  9. import { CodeLanguage } from './types'
  10. import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
  11. import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
  12. import {
  13. fetchNodeDefault,
  14. fetchPipelineNodeDefault,
  15. } from '@/service/workflow'
  16. import {
  17. useNodesReadOnly,
  18. } from '@/app/components/workflow/hooks'
  19. const useConfig = (id: string, payload: CodeNodeType) => {
  20. const { nodesReadOnly: readOnly } = useNodesReadOnly()
  21. const appId = useStore(s => s.appId)
  22. const pipelineId = useStore(s => s.pipelineId)
  23. const [allLanguageDefault, setAllLanguageDefault] = useState<Record<CodeLanguage, CodeNodeType> | null>(null)
  24. useEffect(() => {
  25. if (appId) {
  26. (async () => {
  27. const { config: javaScriptConfig } = await fetchNodeDefault(appId, BlockEnum.Code, { code_language: CodeLanguage.javascript }) as any
  28. const { config: pythonConfig } = await fetchNodeDefault(appId, BlockEnum.Code, { code_language: CodeLanguage.python3 }) as any
  29. setAllLanguageDefault({
  30. [CodeLanguage.javascript]: javaScriptConfig as CodeNodeType,
  31. [CodeLanguage.python3]: pythonConfig as CodeNodeType,
  32. } as any)
  33. })()
  34. }
  35. }, [appId])
  36. useEffect(() => {
  37. if (pipelineId) {
  38. (async () => {
  39. const { config: javaScriptConfig } = await fetchPipelineNodeDefault(pipelineId, BlockEnum.Code, { code_language: CodeLanguage.javascript }) as any
  40. const { config: pythonConfig } = await fetchPipelineNodeDefault(pipelineId, BlockEnum.Code, { code_language: CodeLanguage.python3 }) as any
  41. setAllLanguageDefault({
  42. [CodeLanguage.javascript]: javaScriptConfig as CodeNodeType,
  43. [CodeLanguage.python3]: pythonConfig as CodeNodeType,
  44. } as any)
  45. })()
  46. }
  47. }, [pipelineId])
  48. const defaultConfig = useStore(s => s.nodesDefaultConfigs)?.[payload.type]
  49. const { inputs, setInputs } = useNodeCrud<CodeNodeType>(id, payload)
  50. const { handleVarListChange, handleAddVariable } = useVarList<CodeNodeType>({
  51. inputs,
  52. setInputs,
  53. })
  54. const [outputKeyOrders, setOutputKeyOrders] = useState<string[]>([])
  55. const syncOutputKeyOrders = useCallback((outputs: OutputVar) => {
  56. setOutputKeyOrders(Object.keys(outputs))
  57. }, [])
  58. useEffect(() => {
  59. if (inputs.code) {
  60. if (inputs.outputs && Object.keys(inputs.outputs).length > 0)
  61. syncOutputKeyOrders(inputs.outputs)
  62. return
  63. }
  64. const isReady = defaultConfig && Object.keys(defaultConfig).length > 0
  65. if (isReady) {
  66. setInputs({
  67. ...inputs,
  68. ...defaultConfig,
  69. })
  70. syncOutputKeyOrders(defaultConfig.outputs)
  71. }
  72. // eslint-disable-next-line react-hooks/exhaustive-deps
  73. }, [defaultConfig])
  74. const handleCodeChange = useCallback((code: string) => {
  75. const newInputs = produce(inputs, (draft) => {
  76. draft.code = code
  77. })
  78. setInputs(newInputs)
  79. }, [inputs, setInputs])
  80. const handleCodeLanguageChange = useCallback((codeLanguage: CodeLanguage) => {
  81. const currDefaultConfig = allLanguageDefault?.[codeLanguage]
  82. const newInputs = produce(inputs, (draft) => {
  83. draft.code_language = codeLanguage
  84. if (!currDefaultConfig)
  85. return
  86. draft.code = currDefaultConfig.code
  87. draft.variables = currDefaultConfig.variables
  88. draft.outputs = currDefaultConfig.outputs
  89. })
  90. setInputs(newInputs)
  91. }, [allLanguageDefault, inputs, setInputs])
  92. const {
  93. handleVarsChange,
  94. handleAddVariable: handleAddOutputVariable,
  95. handleRemoveVariable,
  96. isShowRemoveVarConfirm,
  97. hideRemoveVarConfirm,
  98. onRemoveVarConfirm,
  99. } = useOutputVarList<CodeNodeType>({
  100. id,
  101. inputs,
  102. setInputs,
  103. outputKeyOrders,
  104. onOutputKeyOrdersChange: setOutputKeyOrders,
  105. })
  106. const filterVar = useCallback((varPayload: Var) => {
  107. return [VarType.string, VarType.number, VarType.secret, VarType.object, VarType.array, VarType.arrayNumber, VarType.arrayString, VarType.arrayObject, VarType.file, VarType.arrayFile].includes(varPayload.type)
  108. }, [])
  109. // single run
  110. const {
  111. isShowSingleRun,
  112. hideSingleRun,
  113. toVarInputs,
  114. runningStatus,
  115. isCompleted,
  116. handleRun,
  117. handleStop,
  118. runInputData,
  119. setRunInputData,
  120. runResult,
  121. } = useOneStepRun<CodeNodeType>({
  122. id,
  123. data: inputs,
  124. defaultRunInputData: {},
  125. })
  126. const varInputs = toVarInputs(inputs.variables)
  127. const inputVarValues = (() => {
  128. const vars: Record<string, any> = {}
  129. Object.keys(runInputData)
  130. .forEach((key) => {
  131. vars[key] = runInputData[key]
  132. })
  133. return vars
  134. })()
  135. const setInputVarValues = useCallback((newPayload: Record<string, any>) => {
  136. setRunInputData(newPayload)
  137. }, [setRunInputData])
  138. const handleCodeAndVarsChange = useCallback((code: string, inputVariables: Variable[], outputVariables: OutputVar) => {
  139. const newInputs = produce(inputs, (draft) => {
  140. draft.code = code
  141. draft.variables = inputVariables
  142. draft.outputs = outputVariables
  143. })
  144. setInputs(newInputs)
  145. syncOutputKeyOrders(outputVariables)
  146. }, [inputs, setInputs, syncOutputKeyOrders])
  147. return {
  148. readOnly,
  149. inputs,
  150. outputKeyOrders,
  151. handleVarListChange,
  152. handleAddVariable,
  153. handleRemoveVariable,
  154. handleCodeChange,
  155. handleCodeLanguageChange,
  156. handleVarsChange,
  157. filterVar,
  158. handleAddOutputVariable,
  159. isShowRemoveVarConfirm,
  160. hideRemoveVarConfirm,
  161. onRemoveVarConfirm,
  162. // single run
  163. isShowSingleRun,
  164. hideSingleRun,
  165. runningStatus,
  166. isCompleted,
  167. handleRun,
  168. handleStop,
  169. varInputs,
  170. inputVarValues,
  171. setInputVarValues,
  172. runResult,
  173. handleCodeAndVarsChange,
  174. }
  175. }
  176. export default useConfig