fix: update templates containing Agent and Tool components (#7860)

* refactor: Update Simple Agent configuration and enhance tool integration

- Changed source and target handles to improve data flow between components.
- Updated input types for better compatibility with new data structures.
- Enhanced tool metadata and descriptions for clarity.
- Adjusted layout dimensions and properties for improved UI consistency.
- Updated agent and tool identifiers to reflect recent changes in the system.

* refactor: Update Invoice Summarizer project configuration and component identifiers

- Changed component IDs and source/target handles for improved data flow.
- Updated tool and agent identifiers to align with recent system changes.
- Adjusted layout properties and descriptions for better clarity and consistency.
- Enhanced metadata for tools and components to facilitate better integration.

* refactor: Update Pokédex Agent configuration and component identifiers

- Changed component IDs and source/target handles to enhance data flow.
- Updated input types and tool identifiers for improved compatibility with recent system changes.
- Enhanced layout properties and descriptions for better clarity and consistency.
- Adjusted metadata for tools and components to facilitate better integration.

* refactor: Update Search Agent configuration for improved compatibility

- Removed input types for the OpenAI API Key to streamline configuration.
- Added new model options including "gpt-4.1", "gpt-4.1-mini", and "gpt-4.1-nano" for enhanced flexibility.
- Updated default model value to "gpt-4.1" for better alignment with current capabilities.

* refactor: Update Financial Agent configuration and component identifiers

- Changed component IDs and source/target handles to enhance data flow.
- Updated tool and agent identifiers for improved compatibility with recent system changes.
- Adjusted layout properties and descriptions for better clarity and consistency.
- Enhanced metadata for tools and components to facilitate better integration.

* refactor: Update Gmail Agent configuration for improved model options

- Removed input types for the OpenAI API Key to streamline the configuration.
- Added new model options including "gpt-4.1", "gpt-4.1-mini", "gpt-4.1-nano", and "o1" for enhanced flexibility.
- Updated default model value to "gpt-4.1" for better alignment with current capabilities.

* refactor: Update Invoice Summarizer project configuration for improved clarity

- Standardized formatting of source and target handles for consistency.
- Adjusted score representation for better readability.
- Removed unnecessary hidden properties to streamline configuration.
- Enhanced metadata for components to facilitate better integration.

* refactor: Standardize source and target handles in agent configurations

- Updated formatting of source and target handles in both Pokédex and Simple Agent configurations for improved consistency.
- Removed unnecessary hidden properties to streamline the configuration.
- Enhanced metadata for components to facilitate better integration and clarity.

* refactor: Streamline OpenAI API Key configuration and enhance model options

- Removed input types for the OpenAI API Key to simplify the configuration.
- Added new model options including "gpt-4.1", "gpt-4.1-mini", "gpt-4.1-nano", and "o1" for increased flexibility.
- Updated default model value to "gpt-4.1" for better alignment with current capabilities.

* refactor: Simplify OpenAI API Key configuration and expand model options

- Removed input types for the OpenAI API Key to streamline the configuration.
- Added new model options "gpt-4.1", "gpt-4.1-mini", "gpt-4.1-nano", and "o1" for enhanced flexibility.
- Updated default model value to "gpt-4.1" for better alignment with current capabilities.

* refactor: Update YouTube Analysis project configuration for improved model options

- Removed input types for the OpenAI API Key to simplify the configuration.
- Added new model options "gpt-4.1", "gpt-4.1-mini", "gpt-4.1-nano", and "o1" for enhanced flexibility.
- Updated default model value to "gpt-4.1-mini" for better alignment with current capabilities.

* fix: update tools in Travel Planning Agents

* update mutateTemplate to be debounced by nodeId

* update fetch data on mount to fetch node data if its tool mode

* Update mutateTemplate instances to contain nodeId

* update starter projects to use gpt-4.1-mini model

* fix: update test expectation for Portfolio Website Code Generator

---------

Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>

src/frontend/src/CustomNodes/GenericNode/components/NodeDialogComponent/index.tsx

@@ -85,6 +85,7 @@ export const NodeDialog: React.FC<NodeDialogProps> = ({
     if (dialogTemplate[fieldKey].real_time_refresh) {
       mutateTemplate(
         { [fieldKey]: newValue },
+        nodeId,
         nodeClass,
         setNodeClass,
         postTemplateValue,
@@ -136,6 +137,7 @@ export const NodeDialog: React.FC<NodeDialogProps> = ({
 
     await mutateTemplate(
       fieldValues,
+      nodeId,
       nodeClass,
       setNodeClass,
       postTemplateValue,

src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx

@@ -82,7 +82,13 @@ export default function NodeInputField({
     };
   }, [data?.node?.id, isAuth, name]);
 
-  useFetchDataOnMount(data.node!, handleNodeClass, name, postTemplateValue);
+  useFetchDataOnMount(
+    data.node!,
+    data.id,
+    handleNodeClass,
+    name,
+    postTemplateValue,
+  );
 
   useEffect(() => {
     if (optionalHandle && optionalHandle.length === 0) {

src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx

@@ -106,6 +106,7 @@ export default function NodeStatus({
     pollingInterval.current = setInterval(() => {
       mutateTemplate(
         { validate: data.node?.template?.auth?.value || "" },
+        data.id,
         data.node,
         (newNode) => {
           setNode(nodeId, (old) => ({
@@ -136,6 +137,7 @@ export default function NodeStatus({
     setIsPolling(true);
     mutateTemplate(
       "disconnect",
+      data.id,
       data.node,
       (newNode) => {
         setNode(nodeId, (old) => ({

src/frontend/src/CustomNodes/helpers/mutate-template.ts

@@ -7,42 +7,79 @@ import { APIClassType, ResponseErrorDetailAPI } from "@/types/api";
 import { UseMutationResult } from "@tanstack/react-query";
 import { cloneDeep, debounce } from "lodash";
 
-export const mutateTemplate = debounce(
-  async (
+// Map to store debounced functions for each node ID
+const debouncedFunctions = new Map<string, ReturnType<typeof debounce>>();
+
+export const mutateTemplate = async (
+  newValue,
+  nodeId: string,
+  node: APIClassType,
+  setNodeClass,
+  postTemplateValue: UseMutationResult<
+    APIClassType | undefined,
+    ResponseErrorDetailAPI,
+    any
+  >,
+  setErrorData,
+  parameterName?: string,
+  callback?: () => void,
+  toolMode?: boolean,
+) => {
+  // Get or create a debounced function for this node ID
+  if (!debouncedFunctions.has(nodeId)) {
+    debouncedFunctions.set(
+      nodeId,
+      debounce(
+        async (
+          newValue,
+          node: APIClassType,
+          setNodeClass,
+          postTemplateValue: UseMutationResult<
+            APIClassType | undefined,
+            ResponseErrorDetailAPI,
+            any
+          >,
+          setErrorData,
+          parameterName?: string,
+          callback?: () => void,
+          toolMode?: boolean,
+        ) => {
+          try {
+            const newNode = cloneDeep(node);
+            const newTemplate = await postTemplateValue.mutateAsync({
+              value: newValue,
+              field_name: parameterName,
+              tool_mode: toolMode ?? node.tool_mode,
+            });
+            if (newTemplate) {
+              newNode.template = newTemplate.template;
+              newNode.outputs = newTemplate.outputs;
+              newNode.tool_mode = toolMode ?? node.tool_mode;
+            }
+            setNodeClass(newNode);
+            callback?.();
+          } catch (e) {
+            const error = e as ResponseErrorDetailAPI;
+            setErrorData({
+              title: TITLE_ERROR_UPDATING_COMPONENT,
+              list: [error.response?.data?.detail || ERROR_UPDATING_COMPONENT],
+            });
+          }
+        },
+        SAVE_DEBOUNCE_TIME,
+      ),
+    );
+  }
+
+  // Call the debounced function for this specific node
+  debouncedFunctions.get(nodeId)?.(
     newValue,
-    node: APIClassType,
+    node,
     setNodeClass,
-    postTemplateValue: UseMutationResult<
-      APIClassType | undefined,
-      ResponseErrorDetailAPI,
-      any
-    >,
+    postTemplateValue,
     setErrorData,
-    parameterName?: string,
-    callback?: () => void,
-    toolMode?: boolean,
-  ) => {
-    try {
-      const newNode = cloneDeep(node);
-      const newTemplate = await postTemplateValue.mutateAsync({
-        value: newValue,
-        field_name: parameterName,
-        tool_mode: toolMode ?? node.tool_mode,
-      });
-      if (newTemplate) {
-        newNode.template = newTemplate.template;
-        newNode.outputs = newTemplate.outputs;
-        newNode.tool_mode = toolMode ?? node.tool_mode;
-      }
-      setNodeClass(newNode);
-      callback?.();
-    } catch (e) {
-      const error = e as ResponseErrorDetailAPI;
-      setErrorData({
-        title: TITLE_ERROR_UPDATING_COMPONENT,
-        list: [error.response?.data?.detail || ERROR_UPDATING_COMPONENT],
-      });
-    }
-  },
-  SAVE_DEBOUNCE_TIME,
-);
+    parameterName,
+    callback,
+    toolMode,
+  );
+};

src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.ts

@@ -6,6 +6,7 @@ import { mutateTemplate } from "../helpers/mutate-template";
 
 const useFetchDataOnMount = (
   node: APIClassType,
+  nodeId: string,
   setNodeClass: (node: APIClassType) => void,
   name: string,
   postTemplateValue: UseMutationResult<
@@ -20,16 +21,22 @@ const useFetchDataOnMount = (
     async function fetchData() {
       const template = node.template[name];
       if (
-        (template?.real_time_refresh || template?.refresh_button) &&
+        (template?.real_time_refresh ||
+          template?.refresh_button ||
+          (node.tool_mode && name === "tools_metadata")) &&
         // options can be undefined but not an empty array
         (template?.options?.length ?? 0) === 0
       ) {
         mutateTemplate(
           template?.value,
+          nodeId,
           node,
           setNodeClass,
           postTemplateValue,
           setErrorData,
+          name,
+          () => {},
+          node.tool_mode,
         );
       }
     }

src/frontend/src/CustomNodes/hooks/use-handle-new-value.ts

@@ -130,6 +130,7 @@ const useHandleOnNewValue = ({
             ) => {
               await mutateTemplate(
                 value,
+                nodeId,
                 node,
                 setNodeClassFn,
                 postTemplateFn,

src/frontend/src/components/core/dropdownComponent/index.tsx

@@ -180,6 +180,7 @@ export default function Dropdown({
 
     await mutateTemplate(
       value,
+      nodeId,
       nodeClass!,
       handleNodeClass,
       postTemplateValue,

src/frontend/src/components/core/parameterRenderComponent/components/connectionComponent/index.tsx

@@ -117,6 +117,7 @@ const ConnectionComponent = ({
     pollingInterval.current = setInterval(() => {
       mutateTemplate(
         { validate: selectedItem[0]?.name || "" },
+        nodeId,
         nodeClass,
         handleNodeClass,
         postTemplateValue,

src/frontend/src/components/core/parameterRenderComponent/components/refreshParameterComponent/index.tsx

@@ -36,6 +36,7 @@ export function RefreshParameterComponent({
   const handleRefreshButtonPress = () =>
     mutateTemplate(
       templateData.value,
+      nodeId,
       nodeClass,
       handleNodeClass,
       postTemplateValue,

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -177,6 +177,7 @@ const NodeToolbarComponent = memo(
       setToolMode(newValue);
       mutateTemplate(
         newValue,
+        data.id,
         data.node!,
         handleNodeClass,
         postToolModeValue,

src/frontend/tests/core/integrations/Portfolio Website Code Generator.spec.ts

@@ -71,7 +71,7 @@ withEventDeliveryModes(
 
     expect(concatAllText.length).toBeGreaterThan(200);
 
-    expect(concatAllText).toContain("html");
+    expect(concatAllText).toContain("div");
     expect(concatAllText).toContain("body");
   },
 );