Fix/agentflow async multi rendering

[j-sanaa]

JIRA - FLOWISE-230

• Added support for MultiOption Rendering
• Added support to call api endpoints for knowledge stores and embeddings
• Fixed nomenclature of all ApiClients to follow the same pattern
• Fixed key in ArrayInput to avoid index based keys which are unstable

multiOptions.mov

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the Agentflow UI by introducing multi-option selection capabilities and expanding its integration with backend services. It enables dynamic fetching of options for knowledge stores, embeddings, and runtime state keys, improving the flexibility and power of node configurations. Concurrently, the API client architecture has been refactored for consistency and maintainability, ensuring a more robust and predictable interaction with the backend.

Highlights

• MultiOption Rendering Support: Implemented support for rendering multiple selectable options within the UI, enhancing user input flexibility.
• New API Endpoints for Knowledge Stores and Embeddings: Added functionality to call dedicated API endpoints for fetching knowledge stores and embedding models.
• Standardized API Client Nomenclature: Refactored all API client creation functions to follow a consistent bind naming pattern, improving code readability and maintainability.
• Stable Keys for ArrayInput Components: Fixed an issue in ArrayInput by introducing stable, unique keys for array items, resolving potential re-rendering problems caused by index-based keys.

Changelog

• packages/agentflow/src/atoms/ArrayInput.tsx
  • Imported useEffect, useRef for managing stable keys.
  • Introduced idCounterRef and itemKeysRef to generate and store unique keys for array items.
  • Added a useEffect hook to populate itemKeysRef when arrayItems length changes.
  • Modified handleDeleteItem to remove the corresponding key from itemKeysRef.
  • Updated the Box component's key prop to use the stable keys from itemKeysRef.
• packages/agentflow/src/atoms/NodeInputHandler.tsx
  • Imported Autocomplete component from @mui/material.
  • Added a new case 'multiOptions' to the switch statement to render a multi-select Autocomplete component.
  • Implemented logic to parse and serialize multi-selected options as JSON strings.
• packages/agentflow/src/infrastructure/api/chatflows.test.ts
  • Updated import and usage of createChatflowsApi to bindChatflowsApi.
• packages/agentflow/src/infrastructure/api/chatflows.ts
  • Renamed createChatflowsApi function to bindChatflowsApi.
  • Updated ChatflowsApi type definition to use bindChatflowsApi.
• packages/agentflow/src/infrastructure/api/client.test.ts
  • Updated import and usage of createApiClient to bindApiClient.
• packages/agentflow/src/infrastructure/api/client.ts
  • Renamed createApiClient function to bindApiClient.
• packages/agentflow/src/infrastructure/api/embeddings.ts
  • Added a new file defining bindEmbeddingsApi to fetch available embedding models.
• packages/agentflow/src/infrastructure/api/hooks/useAsyncOptions.ts
  • Expanded useApiContext destructuring to include storesApi, embeddingsApi, and runtimeStateApi.
  • Updated the apis object passed to loadMethodRegistry to include the new API services.
  • Extended the useEffect dependency array to include storesApi, embeddingsApi, and runtimeStateApi.
• packages/agentflow/src/infrastructure/api/index.ts
  • Updated exports for chatflows, client, and nodes to use the bind prefix.
  • Added exports for bindEmbeddingsApi, type EmbeddingsApi, bindRuntimeStateApi, type RuntimeStateApi, bindStoresApi, and type StoresApi.
• packages/agentflow/src/infrastructure/api/loadMethodRegistry.test.ts
  • Added mock implementations for storesApi, embeddingsApi, and runtimeStateApi to mockApis.
• packages/agentflow/src/infrastructure/api/loadMethodRegistry.ts
  • Updated ApiServices interface to include storesApi, embeddingsApi, and runtimeStateApi.
  • Added new entries to loadMethodRegistry for listStores, listVectorStores, listEmbeddings, and listRuntimeStateKeys.
  • Updated comments for built-in entries to reflect POST method and new load methods.
• packages/agentflow/src/infrastructure/api/nodes.test.ts
  • Updated import and usage of createNodesApi to bindNodesApi.
• packages/agentflow/src/infrastructure/api/nodes.ts
  • Renamed createNodesApi function to bindNodesApi.
  • Updated NodesApi type definition to use bindNodesApi.
• packages/agentflow/src/infrastructure/api/runtimeState.ts
  • Added a new file defining bindRuntimeStateApi to fetch available runtime state keys.
• packages/agentflow/src/infrastructure/api/stores.ts
  • Added a new file defining bindStoresApi to fetch available document and vector stores.
• packages/agentflow/src/infrastructure/store/ApiContext.test.tsx
  • Updated jest.mock calls to use bindApiClient, bindNodesApi, bindChatflowsApi, and include mocks for bindStoresApi, bindEmbeddingsApi, bindRuntimeStateApi.
  • Updated destructuring of jest.requireMock to reflect bind nomenclature and new API services.
  • Adjusted assertions to check for the presence of new API services and use bindApiClient in toHaveBeenCalledWith.
• packages/agentflow/src/infrastructure/store/ApiContext.tsx
  • Updated imports to use bind prefixed functions and new API types.
  • Modified ApiContextValue interface to include storesApi, embeddingsApi, and runtimeStateApi.
  • Updated useMemo hook to call bindApiClient, bindNodesApi, bindChatflowsApi, and instantiate storesApi, embeddingsApi, runtimeStateApi.
  • Added new API services to the returned value object in useMemo.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces several significant improvements. It fixes an issue with unstable keys in ArrayInput by generating stable identifiers, which is a great enhancement for React list rendering. It also adds support for a new multiOptions input type, and expands API capabilities by adding clients for embeddings, stores, and runtime state. A consistent naming convention for API client creation functions (bind...Api) has been applied throughout the codebase, improving clarity. My review includes a minor suggestion to improve error logging in the new multiOptions handler for better debuggability. Overall, this is a solid contribution.