🐛 fix: refactor user store and fix custom model list form

src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -50,6 +50,8 @@ interface ProviderConfigProps {
   canDeactivate?: boolean;
   checkModel?: string;
   checkerItem?: FormItemProps;
+  className?: string;
+  hideSwitch?: boolean;
   modelList?: {
     azureDeployName?: boolean;
     notFoundContent?: ReactNode;
@@ -81,11 +83,12 @@ const ProviderConfig = memo<ProviderConfigProps>(
     checkerItem,
     modelList,
     showBrowserRequest,
+    className,
   }) => {
     const { t } = useTranslation('setting');
     const { t: modelT } = useTranslation('modelProvider');
     const [form] = Form.useForm();
-    const { styles } = useStyles();
+    const { cx, styles } = useStyles();
     const [
       toggleProviderEnabled,
       setSettings,
@@ -192,7 +195,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
 
     return (
       <Form
-        className={styles.form}
+        className={cx(styles.form, className)}
         form={form}
         items={[model]}
         onValuesChange={debounce(setSettings, 100)}

src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -71,18 +71,17 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
             e.stopPropagation();
             e.preventDefault();
 
-            const isConfirm = await modal.confirm({
+            await modal.confirm({
               centered: true,
               content: s('llm.customModelCards.confirmDelete'),
               okButtonProps: { danger: true },
+              onOk: async () => {
+                // delete model and deactivate id
+                await dispatchCustomModelCards(provider, { id, type: 'delete' });
+                await removeEnabledModels(provider, id);
+              },
               type: 'warning',
             });
-
-            // delete model and deactive id
-            if (isConfirm) {
-              await dispatchCustomModelCards(provider, { id, type: 'delete' });
-              await removeEnabledModels(provider, id);
-            }
           }}
           title={t('delete')}
         />

src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal.tsx → src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/Form.tsx

@@ -1,71 +1,28 @@
-import { Modal } from '@lobehub/ui';
-import { Button, Checkbox, Form, Input } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { Checkbox, Form, FormInstance, Input } from 'antd';
+import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useUserStore } from '@/store/user';
-import { modelConfigSelectors } from '@/store/user/selectors';
+import { ChatModelCard } from '@/types/llm';
 
 import MaxTokenSlider from './MaxTokenSlider';
 
-interface ModelConfigModalProps {
-  provider?: string;
+interface ModelConfigFormProps {
+  initialValues?: ChatModelCard;
+  onFormInstanceReady: (instance: FormInstance) => void;
   showAzureDeployName?: boolean;
 }
-const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, provider }) => {
-  const [formInstance] = Form.useForm();
-  const { t } = useTranslation('setting');
-  const { t: tc } = useTranslation('common');
 
-  const [open, id, editingProvider, dispatchCustomModelCards, toggleEditingCustomModelCard] =
-    useUserStore((s) => [
-      !!s.editingCustomCardModel && provider === s.editingCustomCardModel?.provider,
-      s.editingCustomCardModel?.id,
-      s.editingCustomCardModel?.provider,
-      s.dispatchCustomModelCards,
-      s.toggleEditingCustomModelCard,
-    ]);
+const ModelConfigForm = memo<ModelConfigFormProps>(
+  ({ showAzureDeployName, onFormInstanceReady, initialValues }) => {
+    const { t } = useTranslation('setting');
 
-  const modelCard = useUserStore(
-    modelConfigSelectors.getCustomModelCard({ id, provider: editingProvider }),
-    isEqual,
-  );
+    const [formInstance] = Form.useForm();
 
-  const closeModal = () => {
-    toggleEditingCustomModelCard(undefined);
-  };
+    useEffect(() => {
+      onFormInstanceReady(formInstance);
+    }, []);
 
-  return (
-    <Modal
-      destroyOnClose
-      footer={[
-        <Button key="cancel" onClick={closeModal}>
-          {tc('cancel')}
-        </Button>,
-
-        <Button
-          key="ok"
-          onClick={() => {
-            if (!editingProvider || !id) return;
-            const data = formInstance.getFieldsValue();
-
-            dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
-
-            closeModal();
-          }}
-          style={{ marginInlineStart: '16px' }}
-          type="primary"
-        >
-          {tc('ok')}
-        </Button>,
-      ]}
-      maskClosable
-      onCancel={closeModal}
-      open={open}
-      title={t('llm.customModelCards.modelConfig.modalTitle')}
-      zIndex={1051} // Select is 1050
-    >
+    return (
       <div
         onClick={(e) => {
           e.stopPropagation();
@@ -77,9 +34,8 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
         <Form
           colon={false}
           form={formInstance}
-          initialValues={modelCard}
+          initialValues={initialValues}
           labelCol={{ span: 4 }}
-          preserve={false}
           style={{ marginTop: 16 }}
           wrapperCol={{ offset: 1, span: 18 }}
         >
@@ -136,7 +92,7 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
           </Form.Item>
         </Form>
       </div>
-    </Modal>
-  );
-});
-export default ModelConfigModal;
+    );
+  },
+);
+export default ModelConfigForm;

src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/index.tsx

@@ -0,0 +1,78 @@
+import { Modal } from '@lobehub/ui';
+import { Button, FormInstance } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useUserStore } from '@/store/user';
+import { modelConfigSelectors } from '@/store/user/slices/modelList/selectors';
+
+import ModelConfigForm from './Form';
+
+interface ModelConfigModalProps {
+  provider?: string;
+  showAzureDeployName?: boolean;
+}
+
+const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, provider }) => {
+  const { t } = useTranslation('setting');
+  const { t: tc } = useTranslation('common');
+  const [formInstance, setFormInstance] = useState<FormInstance>();
+
+  const [open, id, editingProvider, dispatchCustomModelCards, toggleEditingCustomModelCard] =
+    useUserStore((s) => [
+      !!s.editingCustomCardModel && provider === s.editingCustomCardModel?.provider,
+      s.editingCustomCardModel?.id,
+      s.editingCustomCardModel?.provider,
+      s.dispatchCustomModelCards,
+      s.toggleEditingCustomModelCard,
+    ]);
+
+  const modelCard = useUserStore(
+    modelConfigSelectors.getCustomModelCard({ id, provider: editingProvider }),
+    isEqual,
+  );
+
+  const closeModal = () => {
+    toggleEditingCustomModelCard(undefined);
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      footer={[
+        <Button key="cancel" onClick={closeModal}>
+          {tc('cancel')}
+        </Button>,
+
+        <Button
+          key="ok"
+          onClick={() => {
+            if (!editingProvider || !id || !formInstance) return;
+            const data = formInstance.getFieldsValue();
+
+            dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
+
+            closeModal();
+          }}
+          style={{ marginInlineStart: '16px' }}
+          type="primary"
+        >
+          {tc('ok')}
+        </Button>,
+      ]}
+      maskClosable
+      onCancel={closeModal}
+      open={open}
+      title={t('llm.customModelCards.modelConfig.modalTitle')}
+      zIndex={1251} // Select is 1150
+    >
+      <ModelConfigForm
+        initialValues={modelCard}
+        onFormInstanceReady={setFormInstance}
+        showAzureDeployName={showAzureDeployName}
+      />
+    </Modal>
+  );
+});
+export default ModelConfigModal;

src/app/(main)/settings/llm/components/ProviderModelList/Option.tsx

@@ -1,6 +1,10 @@
+import { ActionIcon, Tooltip } from '@lobehub/ui';
 import { Typography } from 'antd';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import { Recycle } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import ModelIcon from '@/components/ModelIcon';
@@ -16,25 +20,45 @@ interface OptionRenderProps {
   id: string;
   isAzure?: boolean;
   provider: GlobalLLMProviderKey;
+  removed?: boolean;
 }
-const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzure }) => {
+const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzure, removed }) => {
   const model = useUserStore((s) => modelProviderSelectors.getModelCardById(id)(s), isEqual);
-
+  const { t } = useTranslation('components');
+  const theme = useTheme();
   // if there is isCustom, it means it is a user defined custom model
   if (model?.isCustom || isAzure) return <CustomModelOption id={id} provider={provider} />;
 
   return (
-    <Flexbox align={'center'} gap={8} horizontal>
-      <ModelIcon model={id} size={32} />
-      <Flexbox>
-        <Flexbox align={'center'} gap={8} horizontal>
-          {displayName}
-          <ModelInfoTags directionReverse placement={'top'} {...model!} />
+    <Flexbox
+      align={'center'}
+      gap={8}
+      horizontal
+      justify={'space-between'}
+      style={{ paddingInlineEnd: 8 }}
+    >
+      <Flexbox align={'center'} gap={8} horizontal>
+        <ModelIcon model={id} size={32} />
+        <Flexbox>
+          <Flexbox align={'center'} gap={8} horizontal>
+            {displayName}
+            <ModelInfoTags directionReverse placement={'top'} {...model!} />
+          </Flexbox>
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {id}
+          </Typography.Text>
         </Flexbox>
-        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
-          {id}
-        </Typography.Text>
       </Flexbox>
+      {removed && (
+        <Tooltip
+          overlayStyle={{ maxWidth: 300 }}
+          placement={'top'}
+          style={{ pointerEvents: 'none' }}
+          title={t('ModelSelect.removed')}
+        >
+          <ActionIcon icon={Recycle} style={{ color: theme.colorWarning }} />
+        </Tooltip>
+      )}
     </Flexbox>
   );
 });

src/app/(main)/settings/llm/components/ProviderModelList/index.tsx

@@ -51,10 +51,9 @@ const ProviderModelListSelect = memo<CustomModelSelectProps>(
   ({ showModelFetcher = false, provider, showAzureDeployName, notFoundContent, placeholder }) => {
     const { t } = useTranslation('common');
     const { t: transSetting } = useTranslation('setting');
-    const [setModelProviderConfig, dispatchCustomModelCards] = useUserStore((s) => [
+    const [setModelProviderConfig, updateEnabledModels] = useUserStore((s) => [
       s.setModelProviderConfig,
-      s.dispatchCustomModelCards,
-      s.useFetchProviderModelList,
+      s.updateEnabledModels,
     ]);
 
     const chatModelCards = useUserStore(
@@ -94,21 +93,7 @@ const ProviderModelListSelect = memo<CustomModelSelectProps>(
               mode="tags"
               notFoundContent={notFoundContent}
               onChange={(value, options) => {
-                setModelProviderConfig(provider, { enabledModels: value.filter(Boolean) });
-
-                // if there is a new model, add it to `customModelCards`
-                options.forEach((option: { label?: string; value?: string }, index: number) => {
-                  // if is a known model, it should have value
-                  // if is an unknown model, the option will be {}
-                  if (option.value) return;
-
-                  const modelId = value[index];
-
-                  dispatchCustomModelCards(provider, {
-                    modelCard: { id: modelId },
-                    type: 'add',
-                  });
-                });
+                updateEnabledModels(provider, value, options as any[]);
               }}
               optionFilterProp="label"
               optionRender={({ label, value }) => {
@@ -123,6 +108,18 @@ const ProviderModelListSelect = memo<CustomModelSelectProps>(
                     />
                   );
 
+                if (enabledModels?.some((m) => value === m)) {
+                  return (
+                    <OptionRender
+                      displayName={label as string}
+                      id={value as string}
+                      isAzure={showAzureDeployName}
+                      provider={provider}
+                      removed
+                    />
+                  );
+                }
+
                 // model is defined by user in client
                 return (
                   <Flexbox align={'center'} gap={8} horizontal>

src/components/ModelProviderIcon/index.tsx

@@ -5,6 +5,7 @@ import {
   DeepSeek,
   Google,
   Groq,
+  LobeHub,
   Minimax,
   Mistral,
   Moonshot,
@@ -16,7 +17,6 @@ import {
   ZeroOne,
   Zhipu,
 } from '@lobehub/icons';
-import { Logo } from '@lobehub/ui';
 import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 
@@ -29,7 +29,7 @@ interface ModelProviderIconProps {
 const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
   switch (provider) {
     case 'lobehub': {
-      return <Logo size={20} />;
+      return <LobeHub size={20} />;
     }
 
     case ModelProvider.ZhiPu: {