From bf51afedf687544d094bac5e3391ec2f710b8b78 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Wed, 14 May 2025 15:37:58 +0800
Subject: [PATCH] perf: async bug in llm form

---
 .../models/component/llm-form/LLMForm.tsx     | 68 ++++++++++---------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/web/src/app/home/models/component/llm-form/LLMForm.tsx b/web/src/app/home/models/component/llm-form/LLMForm.tsx
index 9b7087d0..be88fdef 100644
--- a/web/src/app/home/models/component/llm-form/LLMForm.tsx
+++ b/web/src/app/home/models/component/llm-form/LLMForm.tsx
@@ -132,38 +132,42 @@ export default function LLMForm({
   >([]);
 
   useEffect(() => {
-    initLLMModelFormComponent();
-    if (editMode && initLLMId) {
-      getLLMConfig(initLLMId).then((val) => {
-        form.setValue('name', val.name);
-        form.setValue('model_provider', val.model_provider);
-        form.setValue('url', val.url);
-        form.setValue('api_key', val.api_key);
-        form.setValue('abilities', val.abilities as ('vision' | 'func_call')[]);
-        // 转换extra_args为新格式
-        if (val.extra_args) {
-          const args = val.extra_args.map((arg) => {
-            const [key, value] = arg.split(':');
-            let type: 'string' | 'number' | 'boolean' = 'string';
-            if (!isNaN(Number(value))) {
-              type = 'number';
-            } else if (value === 'true' || value === 'false') {
-              type = 'boolean';
-            }
-            return {
-              key,
-              type,
-              value,
-            };
-          });
-          setExtraArgs(args);
-          form.setValue('extra_args', args);
-        }
-      });
-    } else {
-      form.reset();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    initLLMModelFormComponent().then(() => {
+      if (editMode && initLLMId) {
+        getLLMConfig(initLLMId).then((val) => {
+          form.setValue('name', val.name);
+          form.setValue('model_provider', val.model_provider);
+          form.setValue('url', val.url);
+          form.setValue('api_key', val.api_key);
+          form.setValue(
+            'abilities',
+            val.abilities as ('vision' | 'func_call')[],
+          );
+          // 转换extra_args为新格式
+          if (val.extra_args) {
+            const args = val.extra_args.map((arg) => {
+              const [key, value] = arg.split(':');
+              let type: 'string' | 'number' | 'boolean' = 'string';
+              if (!isNaN(Number(value))) {
+                type = 'number';
+              } else if (value === 'true' || value === 'false') {
+                type = 'boolean';
+              }
+              return {
+                key,
+                type,
+                value,
+              };
+            });
+            setExtraArgs(args);
+            form.setValue('extra_args', args);
+          }
+        });
+      } else {
+        form.reset();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
   }, []);
 
   const addExtraArg = () => {