From 10ee30695a37adecd325df99a9938664b5c699ca Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Wed, 24 Dec 2025 16:12:41 +0800
Subject: [PATCH] feat: add error handling and alert display for model testing
 in EmbeddingForm and LLMForm

---
 .../component/embedding-form/EmbeddingForm.tsx | 18 ++++++++++++++++--
 .../home/models/component/llm-form/LLMForm.tsx | 18 ++++++++++++++++--
 web/src/app/infra/http/BaseHttpClient.ts       |  4 +++-
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx b/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx
index 4cdaf011..41eeb635 100644
--- a/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx
+++ b/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx
@@ -40,6 +40,8 @@ import {
 } from '@/components/ui/select';
 import { toast } from 'sonner';
 import { extractI18nObject } from '@/i18n/I18nProvider';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
 
 const getExtraArgSchema = (t: (key: string) => string) =>
   z
@@ -119,6 +121,7 @@ export default function EmbeddingForm({
     string[]
   >([]);
   const [modelTesting, setModelTesting] = useState(false);
+  const [testErrorMessage, setTestErrorMessage] = useState<string | null>(null);
   const [currentModelProvider, setCurrentModelProvider] = useState('');
 
   useEffect(() => {
@@ -301,6 +304,7 @@ export default function EmbeddingForm({
 
   function testEmbeddingModelInForm() {
     setModelTesting(true);
+    setTestErrorMessage(null);
     const extraArgsObj: Record<string, string | number | boolean> = {};
     form
       .getValues('extra_args')
@@ -329,9 +333,10 @@ export default function EmbeddingForm({
       })
       .then(() => {
         toast.success(t('models.testSuccess'));
+        setTestErrorMessage(null);
       })
-      .catch(() => {
-        toast.error(t('models.testError'));
+      .catch((err: { message?: string }) => {
+        setTestErrorMessage(err?.message || t('models.testError'));
       })
       .finally(() => {
         setModelTesting(false);
@@ -598,6 +603,15 @@ export default function EmbeddingForm({
               <FormMessage />
             </FormItem>
           </div>
+          {testErrorMessage && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>{t('models.testError')}</AlertTitle>
+              <AlertDescription className="break-all">
+                {testErrorMessage}
+              </AlertDescription>
+            </Alert>
+          )}
           <DialogFooter>
             {editMode && (
               <Button
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 b2c18d3e..35b5757f 100644
--- a/web/src/app/home/models/component/llm-form/LLMForm.tsx
+++ b/web/src/app/home/models/component/llm-form/LLMForm.tsx
@@ -41,6 +41,8 @@ import {
 import { Checkbox } from '@/components/ui/checkbox';
 import { toast } from 'sonner';
 import { extractI18nObject } from '@/i18n/I18nProvider';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
 
 const getExtraArgSchema = (t: (key: string) => string) =>
   z
@@ -132,6 +134,7 @@ export default function LLMForm({
     string[]
   >([]);
   const [modelTesting, setModelTesting] = useState(false);
+  const [testErrorMessage, setTestErrorMessage] = useState<string | null>(null);
   const [currentModelProvider, setCurrentModelProvider] = useState('');
 
   useEffect(() => {
@@ -314,6 +317,7 @@ export default function LLMForm({
 
   function testLLMModelInForm() {
     setModelTesting(true);
+    setTestErrorMessage(null);
     const extraArgsObj: Record<string, string | number | boolean> = {};
     form
       .getValues('extra_args')
@@ -343,9 +347,10 @@ export default function LLMForm({
       })
       .then(() => {
         toast.success(t('models.testSuccess'));
+        setTestErrorMessage(null);
       })
-      .catch(() => {
-        toast.error(t('models.testError'));
+      .catch((err: { message?: string }) => {
+        setTestErrorMessage(err?.message || t('models.testError'));
       })
       .finally(() => {
         setModelTesting(false);
@@ -645,6 +650,15 @@ export default function LLMForm({
               <FormMessage />
             </FormItem>
           </div>
+          {testErrorMessage && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>{t('models.testError')}</AlertTitle>
+              <AlertDescription className="break-all">
+                {testErrorMessage}
+              </AlertDescription>
+            </Alert>
+          )}
           <DialogFooter>
             {editMode && (
               <Button
diff --git a/web/src/app/infra/http/BaseHttpClient.ts b/web/src/app/infra/http/BaseHttpClient.ts
index 11aaf21b..fa4100d0 100644
--- a/web/src/app/infra/http/BaseHttpClient.ts
+++ b/web/src/app/infra/http/BaseHttpClient.ts
@@ -93,7 +93,9 @@ export abstract class BaseHttpClient {
         // 统一错误处理
         if (error.response) {
           const { status, data } = error.response;
-          const errMessage = data?.message || error.message;
+          // Backend uses 'msg' field, also check 'message' for compatibility
+          const errMessage =
+            (data as { msg?: string })?.msg || data?.message || error.message;
 
           switch (status) {
             case 401: