From 75c2a063cc9b705b161880ac16ec31f0432c2fcd Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Thu, 1 Jan 2026 15:07:37 +0800
Subject: [PATCH] refactor: remove providerUuid prop from model components and
 enhance provider deletion confirmation UI

---
 .../components/AddModelPopover.tsx            |  2 -
 .../models-dialog/components/ModelItem.tsx    |  2 -
 .../models-dialog/components/ProviderCard.tsx | 75 ++++++++++++++-----
 web/src/i18n/locales/en-US.ts                 |  2 +
 web/src/i18n/locales/ja-JP.ts                 |  1 +
 web/src/i18n/locales/zh-Hans.ts               |  1 +
 web/src/i18n/locales/zh-Hant.ts               |  1 +
 7 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx b/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
index 0afb438c..ac64d37d 100644
--- a/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
+++ b/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
@@ -17,7 +17,6 @@ import { ExtraArg, ModelType, TestResult } from '../types';
 import ExtraArgsEditor from './ExtraArgsEditor';
 
 interface AddModelPopoverProps {
-  providerUuid: string;
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
@@ -40,7 +39,6 @@ interface AddModelPopoverProps {
 }
 
 export default function AddModelPopover({
-  providerUuid,
   isOpen,
   onOpen,
   onClose,
diff --git a/web/src/app/home/components/models-dialog/components/ModelItem.tsx b/web/src/app/home/components/models-dialog/components/ModelItem.tsx
index 113e5cff..81649195 100644
--- a/web/src/app/home/components/models-dialog/components/ModelItem.tsx
+++ b/web/src/app/home/components/models-dialog/components/ModelItem.tsx
@@ -20,7 +20,6 @@ import ExtraArgsEditor from './ExtraArgsEditor';
 interface ModelItemProps {
   model: LLMModel | EmbeddingModel;
   modelType: ModelType;
-  providerUuid: string;
   isLangBotModels: boolean;
   editModelPopoverOpen: string | null;
   deleteConfirmOpen: string | null;
@@ -58,7 +57,6 @@ function convertExtraArgsToArray(extraArgs?: object): ExtraArg[] {
 export default function ModelItem({
   model,
   modelType,
-  providerUuid,
   isLangBotModels,
   editModelPopoverOpen,
   deleteConfirmOpen,
diff --git a/web/src/app/home/components/models-dialog/components/ProviderCard.tsx b/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
index 1076c032..b9bd4f81 100644
--- a/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
+++ b/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import {
   Plus,
   ChevronDown,
@@ -9,17 +10,18 @@ import {
   LogIn,
 } from 'lucide-react';
 import { httpClient, systemInfo } from '@/app/infra/http/HttpClient';
-import {
-  ModelProvider,
-  LLMModel,
-  EmbeddingModel,
-} from '@/app/infra/entities/api';
+import { ModelProvider } from '@/app/infra/entities/api';
 import { Button } from '@/components/ui/button';
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { useTranslation } from 'react-i18next';
@@ -116,6 +118,8 @@ export default function ProviderCard({
   onResetTestResult,
 }: ProviderCardProps) {
   const { t } = useTranslation();
+  const [deleteProviderConfirmOpen, setDeleteProviderConfirmOpen] =
+    useState(false);
 
   const canDelete =
     !isLangBotModels &&
@@ -231,17 +235,55 @@ export default function ProviderCard({
                     <Settings className="h-4 w-4" />
                   </Button>
                   {canDelete && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteProvider();
-                      }}
+                    <Popover
+                      open={deleteProviderConfirmOpen}
+                      onOpenChange={setDeleteProviderConfirmOpen}
                     >
-                      <Trash2 className="h-4 w-4 text-destructive" />
-                    </Button>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        className="w-64"
+                        align="end"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <div className="space-y-3">
+                          <p className="text-sm">
+                            {t('models.deleteProviderConfirmation')}
+                          </p>
+                          <div className="flex gap-2 justify-end">
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() =>
+                                setDeleteProviderConfirmOpen(false)
+                              }
+                            >
+                              {t('common.cancel')}
+                            </Button>
+                            <Button
+                              variant="destructive"
+                              size="sm"
+                              onClick={() => {
+                                onDeleteProvider();
+                                setDeleteProviderConfirmOpen(false);
+                              }}
+                            >
+                              {t('common.delete')}
+                            </Button>
+                          </div>
+                        </div>
+                      </PopoverContent>
+                    </Popover>
                   )}
                 </>
               )}
@@ -266,7 +308,6 @@ export default function ProviderCard({
             )}
             {!isLangBotModels && (
               <AddModelPopover
-                providerUuid={provider.uuid}
                 isOpen={addModelPopoverOpen === provider.uuid}
                 onOpen={onOpenAddModel}
                 onClose={onCloseAddModel}
@@ -293,7 +334,6 @@ export default function ProviderCard({
                     key={model.uuid}
                     model={model}
                     modelType="llm"
-                    providerUuid={provider.uuid}
                     isLangBotModels={isLangBotModels}
                     editModelPopoverOpen={editModelPopoverOpen}
                     deleteConfirmOpen={deleteConfirmOpen}
@@ -325,7 +365,6 @@ export default function ProviderCard({
                     key={model.uuid}
                     model={model}
                     modelType="embedding"
-                    providerUuid={provider.uuid}
                     isLangBotModels={isLangBotModels}
                     editModelPopoverOpen={editModelPopoverOpen}
                     deleteConfirmOpen={deleteConfirmOpen}
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index cc6847fa..46527306 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -218,6 +218,8 @@ const enUS = {
     providerSaveError: 'Failed to save provider: ',
     providerDeleted: 'Provider deleted',
     providerDeleteError: 'Failed to delete provider: ',
+    deleteProviderConfirmation:
+      'Are you sure you want to delete this provider?',
     loadError: 'Failed to load data',
     chat: 'Chat',
     embedding: 'Embedding',
diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts
index ccf20861..cecb276a 100644
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -224,6 +224,7 @@ const jaJP = {
     providerSaveError: 'プロバイダーの保存に失敗しました：',
     providerDeleted: 'プロバイダーを削除しました',
     providerDeleteError: 'プロバイダーの削除に失敗しました：',
+    deleteProviderConfirmation: 'このプロバイダーを削除してもよろしいですか？',
     loadError: 'データの読み込みに失敗しました',
     chat: 'チャット',
     embedding: '埋め込み',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index 295a95b3..f5556dbb 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -211,6 +211,7 @@ const zhHans = {
     providerSaveError: '保存供应商失败：',
     providerDeleted: '供应商已删除',
     providerDeleteError: '删除供应商失败：',
+    deleteProviderConfirmation: '你确定要删除这个供应商吗？',
     loadError: '加载数据失败',
     chat: '对话',
     embedding: '嵌入',
diff --git a/web/src/i18n/locales/zh-Hant.ts b/web/src/i18n/locales/zh-Hant.ts
index da6db88e..97fd74ce 100644
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -210,6 +210,7 @@ const zhHant = {
     providerSaveError: '儲存供應商失敗：',
     providerDeleted: '供應商已刪除',
     providerDeleteError: '刪除供應商失敗：',
+    deleteProviderConfirmation: '您確定要刪除這個供應商嗎？',
     loadError: '載入資料失敗',
     chat: '對話',
     embedding: '嵌入',