improve: code upgrade (#4231)

web/app/components/workflow/nodes/code/use-config.ts

@@ -5,7 +5,7 @@ import useOutputVarList from '../_base/hooks/use-output-var-list'
 import { BlockEnum, VarType } from '../../types'
 import type { Var } from '../../types'
 import { useStore } from '../../store'
-import type { CodeNodeType, OutputVar } from './types'
+import type { CodeDependency, CodeNodeType, OutputVar } from './types'
 import { CodeLanguage } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
@@ -21,15 +21,19 @@ const useConfig = (id: string, payload: CodeNodeType) => {
   const appId = useAppStore.getState().appDetail?.id
 
   const [allLanguageDefault, setAllLanguageDefault] = useState<Record<CodeLanguage, CodeNodeType> | null>(null)
+  const [allLanguageDependencies, setAllLanguageDependencies] = useState<Record<CodeLanguage, CodeDependency[]> | null>(null)
   useEffect(() => {
     if (appId) {
       (async () => {
         const { config: javaScriptConfig } = await fetchNodeDefault(appId, BlockEnum.Code, { code_language: CodeLanguage.javascript }) as any
-        const { config: pythonConfig } = await fetchNodeDefault(appId, BlockEnum.Code, { code_language: CodeLanguage.python3 }) as any
+        const { config: pythonConfig, available_dependencies: pythonDependencies } = await fetchNodeDefault(appId, BlockEnum.Code, { code_language: CodeLanguage.python3 }) as any
         setAllLanguageDefault({
           [CodeLanguage.javascript]: javaScriptConfig as CodeNodeType,
           [CodeLanguage.python3]: pythonConfig as CodeNodeType,
         } as any)
+        setAllLanguageDependencies({
+          [CodeLanguage.python3]: pythonDependencies as CodeDependency[],
+        } as any)
       })()
     }
   }, [appId])
@@ -41,6 +45,62 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     setInputs,
   })
 
+  const handleAddDependency = useCallback((dependency: CodeDependency) => {
+    const newInputs = produce(inputs, (draft) => {
+      if (!draft.dependencies)
+        draft.dependencies = []
+      draft.dependencies.push(dependency)
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleRemoveDependency = useCallback((index: number) => {
+    const newInputs = produce(inputs, (draft) => {
+      if (!draft.dependencies)
+        draft.dependencies = []
+      draft.dependencies.splice(index, 1)
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleChangeDependency = useCallback((index: number, dependency: CodeDependency) => {
+    const newInputs = produce(inputs, (draft) => {
+      if (!draft.dependencies)
+        draft.dependencies = []
+      draft.dependencies[index] = dependency
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const [allowDependencies, setAllowDependencies] = useState<boolean>(false)
+  useEffect(() => {
+    if (!inputs.code_language)
+      return
+    if (!allLanguageDependencies)
+      return
+
+    const newAllowDependencies = !!allLanguageDependencies[inputs.code_language]
+    setAllowDependencies(newAllowDependencies)
+  }, [allLanguageDependencies, inputs.code_language])
+
+  const [availableDependencies, setAvailableDependencies] = useState<CodeDependency[]>([])
+  useEffect(() => {
+    if (!inputs.code_language)
+      return
+    if (!allLanguageDependencies)
+      return
+
+    const newAvailableDependencies = produce(allLanguageDependencies[inputs.code_language], (draft) => {
+      const currentLanguage = inputs.code_language
+      if (!currentLanguage || !draft || !inputs.dependencies)
+        return []
+      return draft.filter((dependency) => {
+        return !inputs.dependencies?.find(d => d.name === dependency.name)
+      })
+    })
+    setAvailableDependencies(newAvailableDependencies || [])
+  }, [allLanguageDependencies, inputs.code_language, inputs.dependencies])
+
   const [outputKeyOrders, setOutputKeyOrders] = useState<string[]>([])
   const syncOutputKeyOrders = useCallback((outputs: OutputVar) => {
     setOutputKeyOrders(Object.keys(outputs))
@@ -163,6 +223,11 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     inputVarValues,
     setInputVarValues,
     runResult,
+    availableDependencies,
+    allowDependencies,
+    handleAddDependency,
+    handleRemoveDependency,
+    handleChangeDependency,
   }
 }