feat: integrate dynamic options fetching in VarReferencePicker and related components

web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx

@@ -17,7 +17,8 @@ import VarReferencePopup from './var-reference-popup'
 import { getNodeInfoById, isConversationVar, isENV, isSystemVar, varTypeToStructType } from './utils'
 import ConstantField from './constant-field'
 import cn from '@/utils/classnames'
-import type { Node, NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
+import type { Node, NodeOutPutVar, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
+import type { CredentialFormSchemaSelect } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { type CredentialFormSchema, type FormOption, FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
@@ -41,6 +42,8 @@ import Tooltip from '@/app/components/base/tooltip'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
 import VarFullPathPanel from './var-full-path-panel'
 import { noop } from 'lodash-es'
+import { useFetchDynamicOptions } from '@/service/use-plugins'
+import type { Tool } from '@/app/components/tools/types'
 
 const TRIGGER_DEFAULT_WIDTH = 227
 
@@ -69,7 +72,8 @@ type Props = {
   minWidth?: number
   popupFor?: 'assigned' | 'toAssigned'
   zIndex?: number
-  isLoading?: boolean
+  currentTool?: Tool
+  currentProvider?: ToolWithProvider
 }
 
 const DEFAULT_VALUE_SELECTOR: Props['value'] = []
@@ -99,6 +103,8 @@ const VarReferencePicker: FC<Props> = ({
   minWidth,
   popupFor,
   zIndex,
+  currentTool,
+  currentProvider,
 }) => {
   const { t } = useTranslation()
   const store = useStoreApi()
@@ -321,33 +327,24 @@ const VarReferencePicker: FC<Props> = ({
 
   const [dynamicOptions, setDynamicOptions] = useState<FormOption[] | null>(null)
   const [isLoading, setIsLoading] = useState(false)
-  const handleOpenDynamicSelect = useCallback((open: boolean) => {
-    if (schema?.type !== FormTypeEnum.dynamicSelect || !open || isLoading)
-      return
-    if (dynamicOptions)
+  const { mutateAsync: fetchDynamicOptions } = useFetchDynamicOptions(
+    currentProvider?.plugin_id || '', currentProvider?.name || '', currentTool?.name || '', (schema as CredentialFormSchemaSelect).variable,
+  )
+  const handleFetchDynamicOptions = async () => {
+    if (schema?.type !== FormTypeEnum.dynamicSelect || !currentTool || !currentProvider)
       return
-
     setIsLoading(true)
-    // load options
-    setTimeout(() => {
+    try {
+      const data = await fetchDynamicOptions()
+      setDynamicOptions(data?.data?.options || [])
+    }
+ finally {
       setIsLoading(false)
-      setDynamicOptions([{
-        label: {
-          en_US: 'Option 1',
-          zh_Hans: '选项1',
-        },
-        value: 'option1',
-        show_on: [],
-      }, {
-        label: {
-          en_US: 'Option 2',
-          zh_Hans: '选项2',
-        },
-        value: 'option2',
-        show_on: [],
-      }])
-    }, 1000)
-  }, [isLoading])
+    }
+  }
+  useEffect(() => {
+    handleFetchDynamicOptions()
+  }, [currentTool, currentProvider, schema])
 
   const schemaWithDynamicSelect = useMemo(() => {
     if (schema?.type !== FormTypeEnum.dynamicSelect)
@@ -414,7 +411,6 @@ const VarReferencePicker: FC<Props> = ({
                       onChange={onChange as ((value: string | number, varKindType: VarKindType, varInfo?: Var) => void)}
                       schema={schemaWithDynamicSelect as CredentialFormSchema}
                       readonly={readonly}
-                      onOpenChange={handleOpenDynamicSelect}
                       isLoading={isLoading}
                     />
                   )

web/app/components/workflow/nodes/tool/components/input-var-list.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import type { ToolVarInputs } from '../types'
 import { VarType as VarKindType } from '../types'
 import cn from '@/utils/classnames'
-import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import type { ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -17,6 +17,7 @@ import { VarType } from '@/app/components/workflow/types'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
 import { noop } from 'lodash-es'
+import type { Tool } from '@/app/components/tools/types'
 
 type Props = {
   readOnly: boolean
@@ -27,6 +28,8 @@ type Props = {
   onOpen?: (index: number) => void
   isSupportConstantValue?: boolean
   filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
+  currentTool?: Tool
+  currentProvider?: ToolWithProvider
 }
 
 const InputVarList: FC<Props> = ({
@@ -38,6 +41,8 @@ const InputVarList: FC<Props> = ({
   onOpen = noop,
   isSupportConstantValue,
   filterVar,
+  currentTool,
+  currentProvider,
 }) => {
   const language = useLanguage()
   const { t } = useTranslation()
@@ -207,6 +212,8 @@ const InputVarList: FC<Props> = ({
                   filterVar={isNumber ? filterVar : undefined}
                   availableVars={isSelect ? availableVars : undefined}
                   schema={schema}
+                  currentTool={currentTool}
+                  currentProvider={currentProvider}
                 />
               )}
               {isFile && (

web/app/components/workflow/nodes/tool/panel.tsx

@@ -42,6 +42,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     isLoading,
     outputSchema,
     hasObjectOutput,
+    currTool,
   } = useConfig(id, data)
 
   if (isLoading) {
@@ -80,6 +81,8 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
                 filterVar={filterVar}
                 isSupportConstantValue
                 onOpen={handleOnVarOpen}
+                currentProvider={currCollection}
+                currentTool={currTool}
               />
             </Field>
           )}

web/service/use-plugins.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from 'react'
 import type {
+  FormOption,
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { fetchModelProviderModelList } from '@/service/common'
@@ -571,3 +572,16 @@ export const usePluginInfo = (providerName?: string) => {
     enabled: !!providerName,
   })
 }
+
+export const useFetchDynamicOptions = (plugin_id: string, provider: string, action: string, parameter: string) => {
+  return useMutation({
+    mutationFn: () => get<{ data: { options: FormOption[] } }>('/workspaces/current/plugin/parameters/dynamic-options', {
+      params: {
+        plugin_id,
+        provider,
+        action,
+        parameter,
+      },
+    }),
+  })
+}