From 882a33aa6fe52b73a8723c0e141882537d08da71 Mon Sep 17 00:00:00 2001
From: akhisud3195 <akhileshs.s4@gmail.com>
Date: Thu, 10 Apr 2025 14:10:13 +0530
Subject: [PATCH] Fix tool param name bug

---
 .../[projectId]/entities/tool_config.tsx       | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx b/apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx
index 472c6489..4a827b7f 100644
--- a/apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx
+++ b/apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx
@@ -3,7 +3,7 @@ import { WorkflowTool } from "../../../lib/types/workflow_types";
 import { Checkbox, Select, SelectItem, RadioGroup, Radio } from "@heroui/react";
 import { z } from "zod";
 import { ImportIcon, XIcon, PlusIcon } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { Panel } from "@/components/common/panel-common";
 import { Button } from "@/components/ui/button";
@@ -40,6 +40,12 @@ export function ParameterConfig({
     handleRename: (oldName: string, newName: string) => void,
     readOnly?: boolean
 }) {
+    const [localName, setLocalName] = useState(param.name);
+
+    useEffect(() => {
+        setLocalName(param.name);
+    }, [param.name]);
+
     return (
         <div className="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 space-y-4">
             <div className="flex items-center justify-between">
@@ -65,11 +71,11 @@ export function ParameterConfig({
                         Name
                     </label>
                     <Textarea
-                        value={param.name}
-                        onChange={(e) => {
-                            const newName = e.target.value;
-                            if (newName && newName !== param.name) {
-                                handleRename(param.name, newName);
+                        value={localName}
+                        onChange={(e) => setLocalName(e.target.value)}
+                        onBlur={() => {
+                            if (localName && localName !== param.name) {
+                                handleRename(param.name, localName);
                             }
                         }}
                         placeholder="Enter parameter name..."