🐛 Bugfix in createmode cannot edit tool & cannot change agent model id

WMC001 · web-flow · commit e175c337b726 · 2026-01-09T11:44:14.000+08:00
🐛 Bugfix in createmode cannot edit tool &amp; cannot change agent model id
diff --git a/frontend/app/[locale]/agents/components/AgentConfigComp.tsx b/frontend/app/[locale]/agents/components/AgentConfigComp.tsx
@@ -143,7 +143,7 @@ export default function AgentConfigComp({}: AgentConfigCompProps) {
           <Col xs={24} className="h-full">
             <ToolManagement
               toolGroups={groupedTools}
-              editable={editable}
+              isCreatingMode={isCreatingMode}
               currentAgentId={currentAgentId?? undefined}
             />
           </Col>
diff --git a/frontend/app/[locale]/agents/components/agentConfig/ToolManagement.tsx b/frontend/app/[locale]/agents/components/agentConfig/ToolManagement.tsx
@@ -16,7 +16,7 @@ import { Settings } from "lucide-react";
 
 interface ToolManagementProps {
   toolGroups: ToolGroup[];
-  editable?: boolean;
+  isCreatingMode?: boolean;
   currentAgentId?: number | undefined;
 }
 
@@ -26,12 +26,13 @@ interface ToolManagementProps {
  */
 export default function ToolManagement({
   toolGroups,
-  editable = true,
+  isCreatingMode = true,
   currentAgentId,
 }: ToolManagementProps) {
   const { t } = useTranslation("common");
   const queryClient = useQueryClient();
 
+  const editable = currentAgentId !== null || isCreatingMode;
   // Get state from store
   const usedTools = useAgentConfigStore((state) => state.editedAgent.tools);
   const updateTools = useAgentConfigStore((state) => state.updateTools);
@@ -49,45 +50,50 @@ export default function ToolManagement({
   const [toolParams, setToolParams] = useState<ToolParam[]>([]);
 
   // Get tool info for selected tool (when checking if config is needed)
-  const { data: selectedToolInfo } = useToolInfo(
+  const { data: selectedToolInfo, isLoading: isToolInfoLoading } = useToolInfo(
     (selectedTool) ? parseInt(selectedTool.id) : null,
     currentAgentId ?? null
   );
 
   // Effect to handle tool selection when tool info is loaded
   useEffect(() => {
-    if (selectedTool && selectedToolInfo) {
-      // Use instance params if available, otherwise use default params
-      const mergedParams = selectedTool.initParams?.map((param: ToolParam) => {
+    let mergedParams: ToolParam[];
+
+    if (isCreatingMode && selectedTool) {
+      mergedParams = selectedTool.initParams || [];
+    } else if (selectedTool && selectedToolInfo) {
+      mergedParams = selectedTool.initParams?.map((param: ToolParam) => {
         const instanceValue = selectedToolInfo?.params?.[param.name];
         return {
           ...param,
           value: instanceValue !== undefined ? instanceValue : param.value,
         };
       }) || [];
-      setToolParams(mergedParams);
-      
-      const hasEmptyRequiredParams = mergedParams.some(
-        (param: ToolParam) => param.required &&
+    } else {
+      return;
+    }
+    setToolParams(mergedParams);
+    const hasEmptyRequiredParams = mergedParams.some(
+      (param: ToolParam) => param.required &&
         (param.value === undefined || param.value === '' || param.value === null)
-      );
-      if (isClickSetting || hasEmptyRequiredParams) {
-        // Open modal for configuration with pre-calculated params
-        setIsToolModalOpen(true);
-        setIsClickSetting(false)
-      } else {
-        // Add tool directly
-        const newSelectedTools = [...usedTools, {
-          ...selectedTool,
-          initParams: mergedParams
-        }];
-        updateTools(newSelectedTools);
-        setSelectedTool(null); // Clear selected tool
-        setIsClickSetting(false)
-      }
-
+    );
+    if (isClickSetting || hasEmptyRequiredParams) {
+      // Open modal for configuration with pre-calculated params
+      setIsToolModalOpen(true);
+      setIsClickSetting(false)
+    } else {
+      // Add tool directly
+      const newSelectedTools = [...usedTools, {
+        ...selectedTool,
+        initParams: mergedParams
+      }];
+      updateTools(newSelectedTools);
+      setSelectedTool(null); // Clear selected tool
+      setIsClickSetting(false)
     }
-  }, [selectedTool, selectedToolInfo]); 
+
+    
+  }, [selectedTool, isToolInfoLoading]); 
 
   // Create selected tool ID set for efficient lookup
   const selectedToolIdsSet = new Set(
@@ -109,48 +115,55 @@ export default function ToolManagement({
   };
 
   const handleToolModalSave = async (params: ToolParam[]) => {
-    if (!selectedTool || !currentAgentId) return;
+    if (!selectedTool) return;
 
-    try {
       // Convert params to backend format
       const paramsObj = params.reduce((acc, param) => {
         acc[param.name] = param.value;
         return acc;
       }, {} as Record<string, any>);
 
-      // Save tool config
-      const isEnabled = true; // New tool is enabled by default
-      const result = await updateToolConfig(
-        parseInt(selectedTool.id),
-        currentAgentId,
-        paramsObj,
-        isEnabled
-      );
-
-      if (result.success) {
-        // Add tool to selected tools with updated params
-        const updatedTool = { ...selectedTool, initParams: params };
-        const newSelectedTools = [...usedTools, updatedTool];
-        updateTools(newSelectedTools);
-
-        message.success(t("toolConfig.message.saveSuccess"));
+      if (isCreatingMode) {
+        saveToolConfig(params);
+      } else if (currentAgentId) {
 
-        queryClient.invalidateQueries({ 
-          queryKey: ["toolInfo", parseInt(selectedTool.id), currentAgentId] 
-        });
+        try {
+          const isEnabled = true; // New tool is enabled by default
+          const result = await updateToolConfig(
+            parseInt(selectedTool.id),
+            currentAgentId,
+            paramsObj,
+            isEnabled
+          );
 
-        setIsToolModalOpen(false);
-        setSelectedTool(null);
-        setToolParams([]);
-        setIsClickSetting(false)
-      } else {
-        message.error(result.message || t("toolConfig.message.saveError"));
+          if (result.success) {
+            saveToolConfig(params);
+            queryClient.invalidateQueries({ 
+              queryKey: ["toolInfo", parseInt(selectedTool.id), currentAgentId] 
+            });
+          } else {
+            message.error(result.message || t("toolConfig.message.saveError"));
+          }
+        } catch (error) {
+          message.error(t("toolConfig.message.saveError"));
+        }
       }
-    } catch (error) {
-      message.error(t("toolConfig.message.saveError"));
-    }
   };
 
+
+  const saveToolConfig = async (params: ToolParam[]) => {
+    // Add tool to selected tools with updated params
+    const updatedTool = { ...selectedTool!, initParams: params };
+    const newSelectedTools = [...usedTools, updatedTool];
+    updateTools(newSelectedTools);
+
+    message.success(t("toolConfig.message.saveSuccess"));
+
+    setIsToolModalOpen(false);
+    setSelectedTool(null);
+    setToolParams([]);
+    setIsClickSetting(false)
+  }
   const handleToolSettingsClick = (tool: Tool) => {
     setIsClickSetting(true)
     setSelectedTool(tool); 
@@ -164,7 +177,6 @@ export default function ToolManagement({
     const isCurrentlySelected = usedTools.some(
       (t) => parseInt(t.id) === toolId
     );
-
     if (isCurrentlySelected) {
       const newSelectedTools = usedTools.filter((t) => parseInt(t.id) !== toolId);
       updateTools(newSelectedTools);   
diff --git a/frontend/app/[locale]/agents/components/agentInfo/AgentGenerateDetail.tsx b/frontend/app/[locale]/agents/components/agentInfo/AgentGenerateDetail.tsx
@@ -399,7 +399,15 @@ export default function AgentGenerateDetail({
                 >
                   <Select
                     placeholder={t("businessLogic.config.modelPlaceholder")}
-                    onChange={(value) => onUpdateProfile({ model: value })}
+                    onChange={(value) => {
+                      const selectedModel = availableLlmModels.find(
+                        (m) => m.displayName === value
+                      );
+                      onUpdateProfile({
+                        model: value,
+                        model_id: selectedModel?.id || 0,
+                      });
+                    }}
                   >
                     {availableLlmModels.map((model) => (
                       <Select.Option
diff --git a/frontend/app/[locale]/models/components/modelConfig.tsx b/frontend/app/[locale]/models/components/modelConfig.tsx
@@ -843,21 +843,16 @@ export const ModelConfigSection = forwardRef<
         >
           <Row gutter={[8, 8]} style={{ width: "100%" }}>
             <Col xs={24} sm={12} md={6} lg={6} xl={6}>
-              <Button 
-                type="primary" 
-                size="middle" 
+              <Button
+                type="primary"
+                size="middle"
                 onClick={handleSyncModels}
                 style={{ width: "100%" }}
+                icon={<RefreshCw size={16} />}
                 block
               >
-                <RefreshCw className="mr-1" size={16} />
-                <span style={{ marginLeft: 4 }}>
-                  <span className="hidden xl:inline button-text-full">
-                    {t("modelConfig.button.syncModelEngine")}
-                  </span>
-                  <span className="xl:hidden button-text-short">
-                    {t("modelConfig.button.sync")}
-                  </span>
+                <span className="button-text-full">
+                  {t("modelConfig.button.syncModelEngine")}
                 </span>
               </Button>
             </Col>
@@ -873,12 +868,9 @@ export const ModelConfigSection = forwardRef<
                 style={{ width: "100%" }}
                 block
               >
-                <span className="hidden xl:inline button-text-full">
+                <span className="button-text-full">
                   {t("modelConfig.button.addCustomModel")}
                 </span>
-                <span className="xl:hidden button-text-short">
-                  {t("modelConfig.button.add")}
-                </span>
               </Button>
             </Col>
             <Col xs={24} sm={12} md={6} lg={6} xl={6}>
@@ -890,12 +882,9 @@ export const ModelConfigSection = forwardRef<
                 style={{ width: "100%" }}
                 block
               >
-                <span className="hidden xl:inline button-text-full">
+                <span className="button-text-full">
                   {t("modelConfig.button.editCustomModel")}
                 </span>
-                <span className="xl:hidden button-text-short">
-                  {t("modelConfig.button.edit")}
-                </span>
               </Button>
             </Col>
             <Col xs={24} sm={12} md={6} lg={6} xl={6}>
@@ -908,12 +897,9 @@ export const ModelConfigSection = forwardRef<
                 style={{ width: "100%" }}
                 block
               >
-                <span className="hidden xl:inline button-text-full">
+                <span className="button-text-full">
                   {t("modelConfig.button.checkConnectivity")}
                 </span>
-                <span className="xl:hidden button-text-short">
-                  {t("modelConfig.button.check")}
-                </span>
               </Button>
             </Col>
           </Row>
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
@@ -317,13 +317,13 @@
   }
 }
 
-@media (min-width: 1280px) {
-  .button-text-full {
-    display: inline !important;
-  }
-  .button-text-short {
-    display: none !important;
-  }
+
+.button-text-full {
+  display: inline !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 
 /* Selected table row: draw full-height left stripe inside first cell */

Original file line number	Diff line number	Diff line change
`@@ -317,13 +317,13 @@`
`317`	`317`	`}`
`318`	`318`	`}`
`319`	`319`
`320`		`-@media (min-width: 1280px) {`
`321`		`- .button-text-full {`
`322`		`- display: inline !important;`
`323`		`- }`
`324`		`- .button-text-short {`
`325`		`- display: none !important;`
`326`		`- }`
	`320`	`+`
	`321`	`+.button-text-full {`
	`322`	`+ display: inline !important;`
	`323`	`+ overflow: hidden;`
	`324`	`+ text-overflow: ellipsis;`
	`325`	`+ white-space: nowrap;`
	`326`	`+ max-width: 100%;`
`327`	`327`	`}`
`328`	`328`
`329`	`329`	`/* Selected table row: draw full-height left stripe inside first cell */`