Fix/agentflow multiOptions rendering (#5964)

* added support fo multi options

* add support for store amad embeddings api

* Changed naming of all apiClients to be consistent

* Add correct index to ArrayInput

* Log error when parsing multiOptions value fails

Add error logging for failed parsing of multiOptions value.

* Fix error handling

Author: j-sanaa

packages/agentflow/src/atoms/ArrayInput.tsx

@@ -1,4 +1,4 @@
-import { type ComponentType, useCallback, useMemo } from 'react'
+import { type ComponentType, useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { Box, Button, Chip, IconButton } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
@@ -34,6 +34,17 @@ export function ArrayInput({
         [data.inputValues, inputParam.name]
     )
 
+    // Stable keys for array items — avoids using index as React key
+    const idCounterRef = useRef(0)
+    const itemKeysRef = useRef<string[]>([])
+
+    // Grow keys array when new items appear (e.g. on mount or external data changes)
+    useEffect(() => {
+        while (itemKeysRef.current.length < arrayItems.length) {
+            itemKeysRef.current.push(`item-${idCounterRef.current++}`)
+        }
+    }, [arrayItems.length])
+
     // Use pre-computed itemParameters
     // Falls back to raw field definitions for nested arrays without show/hide conditions.
     const itemParameters = useMemo<InputParam[][]>(
@@ -94,6 +105,7 @@ export function ArrayInput({
     const handleDeleteItem = useCallback(
         (indexToDelete: number) => {
             const updatedArrayItems = arrayItems.filter((_, i) => i !== indexToDelete)
+            itemKeysRef.current.splice(indexToDelete, 1)
 
             // Notify parent of change (parent will update props, causing re-render)
             onDataChange?.({ inputParam, newValue: updatedArrayItems })
@@ -125,7 +137,7 @@ export function ArrayInput({
 
                 return (
                     <Box
-                        key={index}
+                        key={itemKeysRef.current[index]}
                         sx={{
                             p: 2,
                             mt: 2,

packages/agentflow/src/atoms/NodeInputHandler.tsx

@@ -2,6 +2,7 @@ import { ComponentType, useCallback, useEffect, useRef, useState } from 'react'
 import { Handle, Position, useUpdateNodeInternals } from 'reactflow'
 
 import { Box, FormControlLabel, IconButton, MenuItem, Select, Switch, TextField, Tooltip, TooltipProps, Typography } from '@mui/material'
+import Autocomplete from '@mui/material/Autocomplete'
 import { styled, useTheme } from '@mui/material/styles'
 import { tooltipClasses } from '@mui/material/Tooltip'
 import { IconArrowsMaximize, IconVariable } from '@tabler/icons-react'
@@ -136,6 +137,47 @@ export function NodeInputHandler({
                     </Select>
                 )
 
+            case 'multiOptions': {
+                // Stored as JSON-serialized array of names, e.g. '["option1","option2"]'
+                const staticOptions = (inputParam.options ?? []).map((opt) => (typeof opt === 'string' ? { label: opt, name: opt } : opt))
+
+                let selectedNames: string[] = []
+                if (typeof value === 'string' && value.startsWith('[')) {
+                    try {
+                        const parsed = JSON.parse(value)
+                        if (Array.isArray(parsed) && parsed.every((item) => typeof item === 'string')) {
+                            selectedNames = parsed
+                        }
+                    } catch (e) {
+                        console.error('Failed to parse multiOptions value:', value, e)
+                        selectedNames = []
+                    }
+                } else if (Array.isArray(value)) {
+                    selectedNames = value.filter((item): item is string => typeof item === 'string')
+                }
+
+                const selectedOptions = staticOptions.filter((o) => selectedNames.includes(o.name))
+
+                return (
+                    <Autocomplete<{ label: string; name: string }, true>
+                        multiple
+                        filterSelectedOptions
+                        size='small'
+                        disabled={disabled}
+                        options={staticOptions}
+                        value={selectedOptions}
+                        getOptionLabel={(o) => o.label}
+                        isOptionEqualToValue={(o, v) => o.name === v.name}
+                        onChange={(_e, selection) => {
+                            const names = selection.map((s) => s.name)
+                            handleDataChange(names.length > 0 ? JSON.stringify(names) : '')
+                        }}
+                        sx={{ mt: 1 }}
+                        renderInput={(params) => <TextField {...params} />}
+                    />
+                )
+            }
+
             case 'array':
                 return (
                     <ArrayInput

packages/agentflow/src/infrastructure/api/chatflows.test.ts

@@ -1,6 +1,6 @@
 import type { AxiosInstance } from 'axios'
 
-import { createChatflowsApi } from './chatflows'
+import { bindChatflowsApi } from './chatflows'
 
 const mockClient = {
     get: jest.fn(),
@@ -13,8 +13,8 @@ beforeEach(() => {
     jest.clearAllMocks()
 })
 
-describe('createChatflowsApi', () => {
-    const api = createChatflowsApi(mockClient)
+describe('bindChatflowsApi', () => {
+    const api = bindChatflowsApi(mockClient)
 
     describe('getAllChatflows', () => {
         it('should call GET /chatflows', async () => {

packages/agentflow/src/infrastructure/api/chatflows.ts

@@ -5,7 +5,7 @@ import type { Chatflow, FlowData } from '@/core/types'
 /**
  * Create chatflows API functions bound to a client instance
  */
-export function createChatflowsApi(client: AxiosInstance) {
+export function bindChatflowsApi(client: AxiosInstance) {
     return {
         /**
          * Get all chatflows
@@ -104,4 +104,4 @@ export function createChatflowsApi(client: AxiosInstance) {
     }
 }
 
-export type ChatflowsApi = ReturnType<typeof createChatflowsApi>
+export type ChatflowsApi = ReturnType<typeof bindChatflowsApi>

packages/agentflow/src/infrastructure/api/client.test.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-import { createApiClient } from './client'
+import { bindApiClient } from './client'
 
 jest.mock('axios', () => {
     const mockResponseInterceptors = { use: jest.fn() }
@@ -21,9 +21,9 @@ beforeEach(() => {
     jest.clearAllMocks()
 })
 
-describe('createApiClient', () => {
+describe('bindApiClient', () => {
     it('should create client with correct baseURL', () => {
-        createApiClient('https://flowise.example.com')
+        bindApiClient('https://flowise.example.com')
         expect(mockedAxios.create).toHaveBeenCalledWith(
             expect.objectContaining({
                 baseURL: 'https://flowise.example.com/api/v1'
@@ -32,7 +32,7 @@ describe('createApiClient', () => {
     })
 
     it('should set Content-Type header', () => {
-        createApiClient('https://flowise.example.com')
+        bindApiClient('https://flowise.example.com')
         expect(mockedAxios.create).toHaveBeenCalledWith(
             expect.objectContaining({
                 headers: expect.objectContaining({
@@ -43,7 +43,7 @@ describe('createApiClient', () => {
     })
 
     it('should set Authorization header when token is provided', () => {
-        createApiClient('https://flowise.example.com', 'my-token')
+        bindApiClient('https://flowise.example.com', 'my-token')
         expect(mockedAxios.create).toHaveBeenCalledWith(
             expect.objectContaining({
                 headers: expect.objectContaining({
@@ -54,40 +54,40 @@ describe('createApiClient', () => {
     })
 
     it('should not set Authorization header when no token', () => {
-        createApiClient('https://flowise.example.com')
+        bindApiClient('https://flowise.example.com')
         const headers = mockedAxios.create.mock.calls[0][0]?.headers as Record<string, string>
         expect(headers['Authorization']).toBeUndefined()
     })
 
     it('should register request and response interceptors', () => {
-        const client = createApiClient('https://flowise.example.com')
+        const client = bindApiClient('https://flowise.example.com')
         expect(client.interceptors.request.use).toHaveBeenCalledTimes(1)
         expect(client.interceptors.response.use).toHaveBeenCalledTimes(1)
     })
 
     it('should pass config through request interceptor', () => {
-        const client = createApiClient('https://flowise.example.com')
+        const client = bindApiClient('https://flowise.example.com')
         const successHandler = (client.interceptors.request.use as jest.Mock).mock.calls[0][0]
         const config = { url: '/chatflows', headers: {} }
         expect(successHandler(config)).toBe(config)
     })
 
     it('should pass response through response interceptor', () => {
-        const client = createApiClient('https://flowise.example.com')
+        const client = bindApiClient('https://flowise.example.com')
         const successHandler = (client.interceptors.response.use as jest.Mock).mock.calls[0][0]
         const response = { data: {}, status: 200 }
         expect(successHandler(response)).toBe(response)
     })
 
     it('should reject request interceptor errors', async () => {
-        const client = createApiClient('https://flowise.example.com')
+        const client = bindApiClient('https://flowise.example.com')
         const errorHandler = (client.interceptors.request.use as jest.Mock).mock.calls[0][1]
         const error = new Error('Network error')
         await expect(errorHandler(error)).rejects.toBe(error)
     })
 
     it('should reject 401 errors through response interceptor', async () => {
-        const client = createApiClient('https://flowise.example.com', 'tok')
+        const client = bindApiClient('https://flowise.example.com', 'tok')
         const errorHandler = (client.interceptors.response.use as jest.Mock).mock.calls[0][1]
 
         const error = {
@@ -106,7 +106,7 @@ describe('createApiClient', () => {
     })
 
     it('should pass through non-401 errors without logging', async () => {
-        const client = createApiClient('https://flowise.example.com')
+        const client = bindApiClient('https://flowise.example.com')
         const errorHandler = (client.interceptors.response.use as jest.Mock).mock.calls[0][1]
 
         const error = { response: { status: 500 }, message: 'Server error' }
@@ -117,7 +117,7 @@ describe('createApiClient', () => {
     })
 
     it('should not set withCredentials by default', () => {
-        createApiClient('https://flowise.example.com')
+        bindApiClient('https://flowise.example.com')
         expect(mockedAxios.create).toHaveBeenCalledWith(
             expect.not.objectContaining({
                 withCredentials: true
@@ -130,7 +130,7 @@ describe('createApiClient', () => {
             config.withCredentials = true
             return config
         })
-        const client = createApiClient('https://flowise.example.com', undefined, interceptor)
+        const client = bindApiClient('https://flowise.example.com', undefined, interceptor)
         const successHandler = (client.interceptors.request.use as jest.Mock).mock.calls[0][0]
         const config = { url: '/chatflows', headers: {} }
         const result = successHandler(config)
@@ -139,7 +139,7 @@ describe('createApiClient', () => {
     })
 
     it('should pass config through when no requestInterceptor is provided', () => {
-        const client = createApiClient('https://flowise.example.com')
+        const client = bindApiClient('https://flowise.example.com')
         const successHandler = (client.interceptors.request.use as jest.Mock).mock.calls[0][0]
         const config = { url: '/chatflows', headers: {} }
         expect(successHandler(config)).toBe(config)
@@ -149,7 +149,7 @@ describe('createApiClient', () => {
         const interceptor = jest.fn(() => {
             throw new Error('interceptor broke')
         })
-        const client = createApiClient('https://flowise.example.com', undefined, interceptor)
+        const client = bindApiClient('https://flowise.example.com', undefined, interceptor)
         const successHandler = (client.interceptors.request.use as jest.Mock).mock.calls[0][0]
         const config = { url: '/chatflows', headers: {} }
         const consoleSpy = jest.spyOn(console, 'error').mockImplementation()

packages/agentflow/src/infrastructure/api/client.ts

@@ -8,7 +8,7 @@ import type { RequestInterceptor } from '@/core/types'
  * @param token - Authentication token (optional)
  * @param requestInterceptor - Optional callback to customize outgoing requests
  */
-export function createApiClient(apiBaseUrl: string, token?: string, requestInterceptor?: RequestInterceptor): AxiosInstance {
+export function bindApiClient(apiBaseUrl: string, token?: string, requestInterceptor?: RequestInterceptor): AxiosInstance {
     const headers: Record<string, string> = {
         'Content-Type': 'application/json'
     }

packages/agentflow/src/infrastructure/api/embeddings.ts

@@ -0,0 +1,20 @@
+import type { AxiosInstance } from 'axios'
+
+import type { NodeOption } from '@/core/types'
+
+/**
+ * Create embeddings API functions bound to a client instance
+ */
+export function bindEmbeddingsApi(client: AxiosInstance) {
+    return {
+        /**
+         * Get all available embedding models
+         */
+        getEmbeddings: async (): Promise<NodeOption[]> => {
+            const response = await client.post('/node-load-method/agentAgentflow', { loadMethod: 'listEmbeddings' })
+            return response.data
+        }
+    }
+}
+
+export type EmbeddingsApi = ReturnType<typeof bindEmbeddingsApi>

packages/agentflow/src/infrastructure/api/hooks/useAsyncOptions.ts

@@ -25,7 +25,7 @@ interface UseAsyncOptionsResult {
  * Fetches async option lists from the API using the loadMethodRegistry.
  */
 export function useAsyncOptions({ loadMethod, credentialNames, params }: UseAsyncOptionsParams): UseAsyncOptionsResult {
-    const { chatModelsApi, toolsApi, credentialsApi, apiBaseUrl } = useApiContext()
+    const { chatModelsApi, toolsApi, credentialsApi, storesApi, embeddingsApi, runtimeStateApi, apiBaseUrl } = useApiContext()
 
     const [options, setOptions] = useState<OptionItem[]>([])
     const [loading, setLoading] = useState(true)
@@ -67,7 +67,7 @@ export function useAsyncOptions({ loadMethod, credentialNames, params }: UseAsyn
                     if (!fn) {
                         throw new Error(`Unknown loadMethod: "${loadMethod}"`)
                     }
-                    const apis: ApiServices = { chatModelsApi, toolsApi, credentialsApi }
+                    const apis: ApiServices = { chatModelsApi, toolsApi, credentialsApi, storesApi, embeddingsApi, runtimeStateApi }
                     const stableParams = paramsKey ? (JSON.parse(paramsKey) as Record<string, unknown>) : undefined
                     const raw = await fn(apis, stableParams)
                     result = normalizeOptions(raw, apiBaseUrl)
@@ -92,7 +92,19 @@ export function useAsyncOptions({ loadMethod, credentialNames, params }: UseAsyn
         return () => {
             cancelled = true
         }
-    }, [loadMethod, credentialNamesKey, paramsKey, fetchCounter, chatModelsApi, toolsApi, credentialsApi, apiBaseUrl])
+    }, [
+        loadMethod,
+        credentialNamesKey,
+        paramsKey,
+        fetchCounter,
+        chatModelsApi,
+        toolsApi,
+        credentialsApi,
+        storesApi,
+        embeddingsApi,
+        runtimeStateApi,
+        apiBaseUrl
+    ])
 
     return { options, loading, error, refetch }
 }

packages/agentflow/src/infrastructure/api/index.ts

@@ -1,8 +1,11 @@
 // API infrastructure - External data layer
-export { type ChatflowsApi, createChatflowsApi } from './chatflows'
-export { createApiClient } from './client'
+export { bindChatflowsApi, type ChatflowsApi } from './chatflows'
+export { bindApiClient } from './client'
 export { bindCredentialsApi, type CredentialsApi } from './credentials'
+export { bindEmbeddingsApi, type EmbeddingsApi } from './embeddings'
 export { type ApiServices, getLoadMethod, loadMethodRegistry } from './loadMethodRegistry'
 export { bindChatModelsApi, type ChatModelsApi } from './models'
-export { createNodesApi, type NodesApi } from './nodes'
+export { bindNodesApi, type NodesApi } from './nodes'
+export { bindRuntimeStateApi, type RuntimeStateApi } from './runtimeState'
+export { bindStoresApi, type StoresApi } from './stores'
 export { bindToolsApi, type ToolsApi } from './tools'

packages/agentflow/src/infrastructure/api/loadMethodRegistry.test.ts

@@ -12,6 +12,16 @@ const mockApis: ApiServices = {
     credentialsApi: {
         getAllCredentials: jest.fn(),
         getCredentialsByName: jest.fn()
+    },
+    storesApi: {
+        getStores: jest.fn(),
+        getVectorStores: jest.fn()
+    },
+    embeddingsApi: {
+        getEmbeddings: jest.fn()
+    },
+    runtimeStateApi: {
+        getRuntimeStateKeys: jest.fn()
     }
 }