@lobehub/chat 0.161.8 → 0.161.10

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/app/(main)/settings/system-agent/features/Translation.tsx

@@ -3,7 +3,6 @@
 import { Form, type ItemGroup } from '@lobehub/ui';
 import { Form as AntForm } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { Globe } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -40,7 +39,6 @@ const Translation = memo(() => {
         name: [SYSTEM_AGENT_SETTING_KEY, 'translation', 'model'],
       },
     ],
-    icon: Globe,
     title: t('systemAgent.translation.title'),
   };
 

package/src/components/FileList/ImageFileItem.tsx

@@ -19,7 +19,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   editableImage: css`
     background: ${token.colorBgContainer};
-    border: 1px solid ${token.colorBorderSecondary};
+    box-shadow: 0 0 0 1px ${token.colorFill} inset;
   `,
   image: css`
     margin-block: 0 !important;

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/const/meta.ts

@@ -5,5 +5,4 @@ export const DEFAULT_USER_AVATAR = '😀';
 export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
 export const DEFAULT_AGENT_META: MetaData = {};
 export const DEFAULT_INBOX_AVATAR = '🤯';
-export const DEFAULT_USER_AVATAR_URL =
-  'https://registry.npmmirror.com/@lobehub/assets-logo/1.2.0/files/assets/logo-3d.webp';
+export const DEFAULT_USER_AVATAR_URL = '/icons/icon-192x192.png';

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/AuthProvider/Clerk/useAppearance.ts

@@ -112,7 +112,7 @@ export const useAppearance = () => {
       colorDanger: theme.colorError,
       colorInputBackground: theme.colorFillTertiary,
       colorNeutral: theme.colorText,
-      colorPrimary: theme.colorPrimary,
+
       colorSuccess: theme.colorSuccess,
       colorText: theme.colorText,
       colorTextSecondary: theme.colorTextDescription,

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>;
 }

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

@@ -0,0 +1,100 @@
+import { DeepPartial } from 'utility-types';
+import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { UserModel } from '@/database/client/models/user';
+import { GlobalSettings } from '@/types/settings';
+import { UserPreference } from '@/types/user';
+import { AsyncLocalStorage } from '@/utils/localStorage';
+
+import { ClientService } from './client';
+
+vi.mock('@/database/client/models/user', () => ({
+  UserModel: {
+    getUser: vi.fn(),
+    updateSettings: vi.fn(),
+    resetSettings: vi.fn(),
+    updateAvatar: vi.fn(),
+  },
+}));
+
+const mockUser = {
+  avatar: 'avatar.png',
+  settings: { themeMode: 'light' } as unknown as GlobalSettings,
+  uuid: 'user-id',
+};
+
+const mockPreference = {
+  useCmdEnterToSend: true,
+} as UserPreference;
+
+describe('ClientService', () => {
+  let clientService: ClientService;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    clientService = new ClientService();
+  });
+
+  it('should get user state correctly', async () => {
+    (UserModel.getUser as Mock).mockResolvedValue(mockUser);
+    const spyOn = vi
+      .spyOn(clientService['preferenceStorage'], 'getFromLocalStorage')
+      .mockResolvedValue(mockPreference);
+
+    const userState = await clientService.getUserState();
+
+    expect(userState).toEqual({
+      avatar: mockUser.avatar,
+      isOnboard: true,
+      canEnableTrace: false,
+      preference: mockPreference,
+      settings: mockUser.settings,
+      userId: mockUser.uuid,
+    });
+    expect(UserModel.getUser).toHaveBeenCalledTimes(1);
+    expect(spyOn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should update user settings correctly', async () => {
+    const settingsPatch: DeepPartial<GlobalSettings> = { themeMode: 'dark' };
+    (UserModel.updateSettings as Mock).mockResolvedValue(undefined);
+
+    await clientService.updateUserSettings(settingsPatch);
+
+    expect(UserModel.updateSettings).toHaveBeenCalledWith(settingsPatch);
+    expect(UserModel.updateSettings).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reset user settings correctly', async () => {
+    (UserModel.resetSettings as Mock).mockResolvedValue(undefined);
+
+    await clientService.resetUserSettings();
+
+    expect(UserModel.resetSettings).toHaveBeenCalledTimes(1);
+  });
+
+  it('should update user avatar correctly', async () => {
+    const newAvatar = 'new-avatar.png';
+    (UserModel.updateAvatar as Mock).mockResolvedValue(undefined);
+
+    await clientService.updateAvatar(newAvatar);
+
+    expect(UserModel.updateAvatar).toHaveBeenCalledWith(newAvatar);
+    expect(UserModel.updateAvatar).toHaveBeenCalledTimes(1);
+  });
+
+  it('should update user preference correctly', async () => {
+    const newPreference = {
+      useCmdEnterToSend: false,
+    } as UserPreference;
+
+    const spyOn = vi
+      .spyOn(clientService['preferenceStorage'], 'saveToLocalStorage')
+      .mockResolvedValue(undefined);
+
+    await clientService.updatePreference(newPreference);
+
+    expect(spyOn).toHaveBeenCalledWith(newPreference);
+    expect(spyOn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/services/user/client.ts

@@ -1,27 +1,33 @@
 import { DeepPartial } from 'utility-types';
 
+import { MessageModel } from '@/database/client/models/message';
 import { UserModel } from '@/database/client/models/user';
-import { IUserService } from '@/services/user/type';
 import { GlobalSettings } from '@/types/settings';
-import { UserPreference } from '@/types/user';
+import { UserInitializationState, UserPreference } from '@/types/user';
 import { AsyncLocalStorage } from '@/utils/localStorage';
 
-export interface UserConfig {
-  avatar?: string;
-  settings: DeepPartial<GlobalSettings>;
-  uuid: string;
-}
+import { IUserService } from './type';
 
 export class ClientService implements IUserService {
   private preferenceStorage: AsyncLocalStorage<UserPreference>;
+
   constructor() {
     this.preferenceStorage = new AsyncLocalStorage('LOBE_PREFERENCE');
   }
 
-  getUserConfig = async () => {
+  async getUserState(): Promise<UserInitializationState> {
     const user = await UserModel.getUser();
-    return user as unknown as UserConfig;
-  };
+    const messageCount = await MessageModel.count();
+
+    return {
+      avatar: user.avatar,
+      canEnableTrace: messageCount >= 4,
+      isOnboard: true,
+      preference: await this.preferenceStorage.getFromLocalStorage(),
+      settings: user.settings as GlobalSettings,
+      userId: user.uuid,
+    };
+  }
 
   updateUserSettings = async (patch: DeepPartial<GlobalSettings>) => {
     return UserModel.updateSettings(patch);
@@ -35,10 +41,6 @@ export class ClientService implements IUserService {
     return UserModel.updateAvatar(avatar);
   }
 
-  async getPreference() {
-    return this.preferenceStorage.getFromLocalStorage();
-  }
-
   async updatePreference(preference: UserPreference) {
     await this.preferenceStorage.saveToLocalStorage(preference);
   }

package/src/services/user/index.ts

@@ -8,6 +8,4 @@
 // export const userService = ENABLED_SERVER_SERVICE ? new ServerService() : new ClientService();
 import { ClientService } from './client';
 
-export type { UserConfig } from './client';
-
 export const userService = new ClientService();

package/src/services/user/type.ts

@@ -1,12 +1,10 @@
 import { DeepPartial } from 'utility-types';
 
-import { UserConfig } from '@/services/user/client';
 import { GlobalSettings } from '@/types/settings';
-import { UserPreference } from '@/types/user';
+import { UserInitializationState, UserPreference } from '@/types/user';
 
 export interface IUserService {
-  getPreference: () => Promise<UserPreference>;
-  getUserConfig: () => Promise<UserConfig>;
+  getUserState: () => Promise<UserInitializationState>;
   resetUserSettings: () => Promise<any>;
   updateAvatar: (avatar: string) => Promise<any>;
   updatePreference: (preference: UserPreference) => Promise<any>;

package/src/store/user/initialState.ts

@@ -1,13 +1,22 @@
 import { UserAuthState, initialAuthState } from './slices/auth/initialState';
+import { CommonState, initialCommonState } from './slices/common/initialState';
+import { ModelListState, initialModelListState } from './slices/modelList/initialState';
 import { UserPreferenceState, initialPreferenceState } from './slices/preference/initialState';
 import { UserSettingsState, initialSettingsState } from './slices/settings/initialState';
 import { UserSyncState, initialSyncState } from './slices/sync/initialState';
 
-export type UserState = UserSyncState & UserSettingsState & UserPreferenceState & UserAuthState;
+export type UserState = UserSyncState &
+  UserSettingsState &
+  UserPreferenceState &
+  UserAuthState &
+  ModelListState &
+  CommonState;
 
 export const initialState: UserState = {
   ...initialSyncState,
   ...initialSettingsState,
   ...initialPreferenceState,
   ...initialAuthState,
+  ...initialCommonState,
+  ...initialModelListState,
 };