@lobehub/chat 0.161.9 → 0.161.10

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.161.10](https://github.com/lobehub/lobe-chat/compare/v0.161.9...v0.161.10)
+
+<sup>Released on **2024-05-23**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Refactor user store and fix custom model list form.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Refactor user store and fix custom model list form, closes [#2620](https://github.com/lobehub/lobe-chat/issues/2620) ([81ea886](https://github.com/lobehub/lobe-chat/commit/81ea886))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.161.9](https://github.com/lobehub/lobe-chat/compare/v0.161.8...v0.161.9)
 
 <sup>Released on **2024-05-23**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.161.9",
+  "version": "0.161.10",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/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)}

package/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')}
         />

package/src/app/(main)/settings/llm/components/ProviderModelList/{ModelConfigModal.tsx → 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;

package/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;

package/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>
   );
 });

package/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>

package/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: {

package/src/components/ModelSelect/index.tsx

@@ -79,10 +79,10 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
     return (
       <Flexbox direction={directionReverse ? 'horizontal-reverse' : 'horizontal'} gap={4}>
         {model.files && (
-          <Tooltip 
+          <Tooltip
             overlayStyle={{ pointerEvents: 'none' }}
-            placement={placement} 
-            title={t('ModelSelect.featureTag.file')} 
+            placement={placement}
+            title={t('ModelSelect.featureTag.file')}
           >
             <div className={cx(styles.tag, styles.tagGreen)} style={{ cursor: 'pointer' }} title="">
               <Icon icon={LucidePaperclip} />
@@ -90,9 +90,9 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
           </Tooltip>
         )}
         {model.vision && (
-          <Tooltip 
+          <Tooltip
             overlayStyle={{ pointerEvents: 'none' }}
-            placement={placement} 
+            placement={placement}
             title={t('ModelSelect.featureTag.vision')}
           >
             <div className={cx(styles.tag, styles.tagGreen)} style={{ cursor: 'pointer' }} title="">
@@ -128,15 +128,6 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             </Center>
           </Tooltip>
         )}
-        {/*{model.isCustom && (*/}
-        {/*  <Tooltip*/}
-        {/*    overlayStyle={{ maxWidth: 300 }}*/}
-        {/*    placement={placement}*/}
-        {/*    title={t('ModelSelect.featureTag.custom')}*/}
-        {/*  >*/}
-        {/*    <Center className={styles.custom}>DIY</Center>*/}
-        {/*  </Tooltip>*/}
-        {/*)}*/}
       </Flexbox>
     );
   },

package/src/features/User/UserPanel/PanelContent.tsx

@@ -22,7 +22,7 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
     s.logout,
     s.openUserProfile,
     s.enableAuth(),
-    s.enabledNextAuth(),
+    s.enabledNextAuth,
   ]);
   const { mainItems, logoutItems } = useMenu();
 

package/src/hooks/useSyncData.ts

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
 import { useChatStore } from '@/store/chat';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
 import { syncSettingsSelectors } from '@/store/user/selectors';
@@ -42,7 +43,8 @@ export const useEnabledDataSync = () => {
     s.useEnabledSync,
   ]);
 
+  const { enableWebrtc } = useServerConfigStore(featureFlagsSelectors);
   const syncEvent = useSyncEvent();
 
-  useEnabledSync(userEnableSync, userId, syncEvent);
+  useEnabledSync(enableWebrtc, { onEvent: syncEvent, userEnableSync, userId });
 };

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -10,32 +10,40 @@ import { useIsMobile } from '@/hooks/useIsMobile';
 import { useEnabledDataSync } from '@/hooks/useSyncData';
 import { useAgentStore } from '@/store/agent';
 import { useGlobalStore } from '@/store/global';
+import { useServerConfigStore } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/selectors';
 
 const StoreInitialization = memo(() => {
-  const [useFetchServerConfig, useFetchUserConfig, useInitPreference] = useUserStore((s) => [
-    s.useFetchServerConfig,
-    s.useFetchUserConfig,
-    s.useInitPreference,
+  const router = useRouter();
+
+  const [useInitUserState, isLogin] = useUserStore((s) => [
+    s.useInitUserState,
+    authSelectors.isLogin(s),
   ]);
+
+  const { serverConfig } = useServerConfigStore();
+
   const useInitGlobalPreference = useGlobalStore((s) => s.useInitGlobalPreference);
 
   const useFetchDefaultAgentConfig = useAgentStore((s) => s.useFetchDefaultAgentConfig);
   // init the system preference
-  useInitPreference();
   useInitGlobalPreference();
-
   useFetchDefaultAgentConfig();
 
-  const { isLoading } = useFetchServerConfig();
-  useFetchUserConfig(!isLoading);
+  useInitUserState(isLogin, serverConfig, {
+    onSuccess: (state) => {
+      if (state.isOnboard === false) {
+        router.push('/onboard');
+      }
+    },
+  });
 
   useEnabledDataSync();
 
   const useStoreUpdater = createStoreUpdater(useGlobalStore);
 
   const mobile = useIsMobile();
-  const router = useRouter();
 
   useStoreUpdater('isMobile', mobile);
   useStoreUpdater('router', router);

package/src/layout/GlobalProvider/index.tsx

@@ -58,13 +58,13 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
           defaultNeutralColor={neutralColor?.value as any}
           defaultPrimaryColor={primaryColor?.value as any}
         >
-          <StoreInitialization />
           <ServerConfigStoreProvider
             featureFlags={serverFeatureFlags}
             isMobile={isMobile}
             serverConfig={serverConfig}
           >
             {children}
+            <StoreInitialization />
           </ServerConfigStoreProvider>
           <DebugUI />
         </AppTheme>

package/src/locales/default/components.ts

@@ -7,6 +7,7 @@ export default {
       tokens: '该模型单个会话最多支持 {{tokens}} Tokens',
       vision: '该模型支持视觉识别',
     },
+    removed: '该模型不在列表中，若取消选中将会自动移除',
   },
   ModelSwitchPanel: {
     emptyModel: '没有启用的模型，请前往设置开启',

package/src/services/message/client.test.ts

@@ -343,28 +343,4 @@ describe('MessageClientService', () => {
       expect(result).toBe(false);
     });
   });
-
-  describe('messageCountToCheckTrace', () => {
-    it('should return true if message count is greater than or equal to 4', async () => {
-      // Setup
-      (MessageModel.count as Mock).mockResolvedValue(5);
-
-      // Execute
-      const result = await messageService.messageCountToCheckTrace();
-
-      // Assert
-      expect(result).toBe(true);
-    });
-
-    it('should return false if message count is less than 4', async () => {
-      // Setup
-      (MessageModel.count as Mock).mockResolvedValue(3);
-
-      // Execute
-      const result = await messageService.messageCountToCheckTrace();
-
-      // Assert
-      expect(result).toBe(false);
-    });
-  });
 });

package/src/services/message/client.ts

@@ -80,9 +80,4 @@ export class ClientService implements IMessageService {
     const number = await this.countMessages();
     return number > 0;
   }
-
-  async messageCountToCheckTrace() {
-    const number = await this.countMessages();
-    return number >= 4;
-  }
 }

package/src/services/message/type.ts

@@ -43,5 +43,4 @@ export interface IMessageService {
   removeAllMessages(): Promise<any>;
 
   hasMessages(): Promise<boolean>;
-  messageCountToCheckTrace(): Promise<boolean>;
 }