From c0e51c3992b03d99e8becbbf43fd0530e7843068 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Fri, 26 Jul 2024 10:40:53 +0800
Subject: [PATCH]  feat(ProviderSetting.tsx): add remove icon for models to
 allow deletion

---
 .../settings/components/ProviderSetting.tsx   | 41 +++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/pages/settings/components/ProviderSetting.tsx b/src/renderer/src/pages/settings/components/ProviderSetting.tsx
index 3b113f80..52d28ba6 100644
--- a/src/renderer/src/pages/settings/components/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/components/ProviderSetting.tsx
@@ -6,7 +6,14 @@ import { useProvider } from '@renderer/hooks/useProvider'
 import { groupBy } from 'lodash'
 import { SettingContainer, SettingSubtitle, SettingTitle } from '.'
 import { getModelLogo } from '@renderer/config/provider'
-import { CheckOutlined, EditOutlined, ExportOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import {
+  CheckOutlined,
+  EditOutlined,
+  ExportOutlined,
+  LoadingOutlined,
+  MinusCircleOutlined,
+  PlusOutlined
+} from '@ant-design/icons'
 import AddModelPopup from './AddModelPopup'
 import EditModelsPopup from './EditModelsPopup'
 import Link from 'antd/es/typography/Link'
@@ -24,7 +31,7 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
   const [apiHost, setApiHost] = useState(provider.apiHost)
   const [apiValid, setApiValid] = useState(false)
   const [apiChecking, setApiChecking] = useState(false)
-  const { updateProvider, models } = useProvider(provider.id)
+  const { updateProvider, models, removeModel } = useProvider(provider.id)
   const { t } = useTranslation()
 
   const modelGroups = groupBy(models, 'group')
@@ -116,10 +123,13 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
         <Card key={group} type="inner" title={group} style={{ marginBottom: '10px' }} size="small">
           {modelGroups[group].map((model) => (
             <ModelListItem key={model.id}>
-              <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}>
-                {model.name[0].toUpperCase()}
-              </Avatar>
-              {model.name}
+              <ModelListHeader>
+                <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}>
+                  {model.name[0].toUpperCase()}
+                </Avatar>
+                {model.name}
+              </ModelListHeader>
+              <RemoveIcon onClick={() => removeModel(model)} />
             </ModelListItem>
           ))}
         </Card>
@@ -154,10 +164,16 @@ const ModelListItem = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   padding: 5px 0;
 `
 
+const ModelListHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`
+
 const HelpTextRow = styled.div`
   display: flex;
   flex-direction: row;
@@ -175,4 +191,15 @@ const HelpLink = styled(Link)`
   padding: 0 5px;
 `
 
+const RemoveIcon = styled(MinusCircleOutlined)`
+  margin-left: 10px;
+  color: var(--color-error);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  opacity: 0.75;
+  &:hover {
+    opacity: 1;
+  }
+`
+
 export default ProviderSetting