From 4f0c892b322fbd38ad00b4543543603090ddbfe6 Mon Sep 17 00:00:00 2001
From: SFL79 <87714190+SFL79@users.noreply.github.com>
Date: Sat, 28 Feb 2026 04:51:39 +0200
Subject: [PATCH] feat(ui): add individual model delete buttons across all
 providers (#13271)

### What problem does this PR solve?

Added the option to delete models individually from providers.
For additional context, see
[issue-13184](https://github.com/infiniflow/ragflow/issues/13184)

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

Note: when deleting a selected model, it leaves the full model name as
text as seen here:
<img width="676" height="90" alt="image"
src="https://github.com/user-attachments/assets/c11c7c1b-3f2a-4119-b20c-bb8148a8ad16"
/>

If attempting to use ragflow with that deleted model, ragflow will throw
an unauthorized model error as expected.
I left it like that on purpose, so it's easier for the user to
understand what he deleted and that he needs to replace it with another
model.

Co-authored-by: Shahar Flumin <shahar@Shahars-MacBook-Air.local>
---
 .../setting-model/components/modal-card.tsx     | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/user-setting/setting-model/components/modal-card.tsx b/web/src/pages/user-setting/setting-model/components/modal-card.tsx
index 5273d893aa..3e76f999fb 100644
--- a/web/src/pages/user-setting/setting-model/components/modal-card.tsx
+++ b/web/src/pages/user-setting/setting-model/components/modal-card.tsx
@@ -13,7 +13,11 @@ import { EditOutlined, SettingOutlined } from '@ant-design/icons';
 import { ChevronsDown, ChevronsUp, Trash2 } from 'lucide-react';
 import { FC } from 'react';
 import { isLocalLlmFactory } from '../../utils';
-import { useHandleDeleteFactory, useHandleEnableLlm } from '../hooks';
+import {
+  useHandleDeleteFactory,
+  useHandleDeleteLlm,
+  useHandleEnableLlm,
+} from '../hooks';
 import { mapModelKey } from './un-add-model';
 
 interface IModelCardProps {
@@ -60,6 +64,7 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
   const { t } = useTranslate('setting');
   const { handleEnableLlm } = useHandleEnableLlm(item.name);
   const { deleteFactory } = useHandleDeleteFactory(item.name);
+  const { handleDeleteLlm } = useHandleDeleteLlm(item.name);
 
   const handleApiKeyClick = () => {
     clickApiKey(item.name);
@@ -183,6 +188,16 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
                         handleEnableLlm(model.name, value);
                       }}
                     />
+                    <Button
+                      variant={'ghost'}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteLlm(model.name);
+                      }}
+                      className="p-1 hover:text-state-error hover:bg-state-error-5 transition-colors border-none"
+                    >
+                      <Trash2 size={16} />
+                    </Button>
                   </div>
                 </div>
               ))}