@lobehub/chat 0.122.2 → 0.122.4

package/src/app/settings/features/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -8,10 +8,11 @@ import {
 import { memo } from 'react';
 
 import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
 
 const ThemeSwatchesPrimary = memo(() => {
   const [primaryColor, setSettings] = useGlobalStore((s) => [
-    s.settings.primaryColor,
+    settingsSelectors.currentSettings(s).primaryColor,
     s.setSettings,
   ]);
 

package/src/app/settings/llm/LLM/index.tsx

@@ -3,12 +3,12 @@ import { Form as AntForm, AutoComplete, Input, Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import { debounce } from 'lodash-es';
 import { Webhook } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/selectors';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
 
 import Checker from './Checker';
 
@@ -35,16 +35,23 @@ const LLM = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
   const { styles } = useStyles();
-  const [setSettings] = useGlobalStore((s) => [s.setSettings]);
+  const [useAzure, setSettings] = useGlobalStore((s) => [
+    modelProviderSelectors.enableAzure(s),
+    s.setSettings,
+  ]);
 
-  useEffectAfterGlobalHydrated((store) => {
-    const settings = settingsSelectors.currentSettings(store.getState());
-
-    form.setFieldsValue(settings);
+  useEffect(() => {
+    const unsubscribe = useGlobalStore.subscribe(
+      (s) => s.settings,
+      (settings) => {
+        form.setFieldsValue(settings);
+      },
+    );
+    return () => {
+      unsubscribe();
+    };
   }, []);
 
-  const useAzure = useGlobalStore((s) => s.settings.languageModel.openAI.useAzure);
-
   const openAI: ItemGroup = {
     children: [
       {

package/src/const/settings.ts

@@ -11,7 +11,6 @@ import {
 } from '@/types/settings';
 
 export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
-  avatar: '',
   fontSize: 14,
   language: 'auto',
   password: '',

package/src/database/core/db.ts

@@ -1,14 +1,16 @@
 import Dexie, { Transaction } from 'dexie';
 
-import { DBModel, LOBE_CHAT_LOCAL_DB_NAME } from '@/database/core/types/db';
 import { DB_File } from '@/database/schemas/files';
 import { DB_Message } from '@/database/schemas/message';
 import { DB_Plugin } from '@/database/schemas/plugin';
 import { DB_Session } from '@/database/schemas/session';
 import { DB_SessionGroup } from '@/database/schemas/sessionGroup';
 import { DB_Topic } from '@/database/schemas/topic';
+import { DB_User } from '@/database/schemas/user';
 
-import { dbSchemaV1, dbSchemaV2, dbSchemaV3, dbSchemaV4 } from './schemas';
+import { migrateSettingsToUser } from './migrations/migrateSettingsToUser';
+import { dbSchemaV1, dbSchemaV2, dbSchemaV3, dbSchemaV4, dbSchemaV5 } from './schemas';
+import { DBModel, LOBE_CHAT_LOCAL_DB_NAME } from './types/db';
 
 interface LobeDBSchemaMap {
   files: DB_File;
@@ -17,6 +19,7 @@ interface LobeDBSchemaMap {
   sessionGroups: DB_SessionGroup;
   sessions: DB_Session;
   topics: DB_Topic;
+  users: DB_User;
 }
 
 // Define a local DB
@@ -27,6 +30,7 @@ export class LocalDB extends Dexie {
   public topics: LobeDBTable<'topics'>;
   public plugins: LobeDBTable<'plugins'>;
   public sessionGroups: LobeDBTable<'sessionGroups'>;
+  public users: LobeDBTable<'users'>;
 
   constructor() {
     super(LOBE_CHAT_LOCAL_DB_NAME);
@@ -37,12 +41,17 @@ export class LocalDB extends Dexie {
       .stores(dbSchemaV4)
       .upgrade((trans) => this.upgradeToV4(trans));
 
+    this.version(5)
+      .stores(dbSchemaV5)
+      .upgrade((trans) => this.upgradeToV5(trans));
+
     this.files = this.table('files');
     this.sessions = this.table('sessions');
     this.messages = this.table('messages');
     this.topics = this.table('topics');
     this.plugins = this.table('plugins');
     this.sessionGroups = this.table('sessionGroups');
+    this.users = this.table('users');
   }
 
   /**
@@ -59,6 +68,36 @@ export class LocalDB extends Dexie {
       session.group = 'default';
     });
   };
+
+  /**
+   * 2024.01.29
+   * settings from localStorage to indexedDB
+   */
+  upgradeToV5 = async (trans: Transaction) => {
+    const users = trans.table('users');
+
+    // if no user, create one
+    if ((await users.count()) === 0) {
+      const data = localStorage.getItem('LOBE_SETTINGS');
+
+      if (data) {
+        let json;
+
+        try {
+          json = JSON.parse(data);
+        } catch {
+          /* empty */
+        }
+
+        if (!json?.state?.settings) return;
+
+        const settings = json.state.settings;
+
+        const user = migrateSettingsToUser(settings);
+        await users.add(user);
+      }
+    }
+  };
 }
 
 export const LocalDBInstance = new LocalDB();

package/src/database/core/migrations/migrateSettingsToUser/fixtures/input.json

@@ -0,0 +1,55 @@
+{
+  "avatar": "",
+  "defaultAgent": {
+    "config": {
+      "autoCreateTopicThreshold": 2,
+      "displayMode": "chat",
+      "enableAutoCreateTopic": true,
+      "historyCount": 1,
+      "model": "gpt-3.5-turbo-1106",
+      "params": {
+        "frequency_penalty": 0,
+        "presence_penalty": 0,
+        "temperature": 0.7,
+        "top_p": 0.7
+      },
+      "plugins": ["website-crawler"],
+      "systemRole": "",
+      "tts": {
+        "showAllLocaleVoice": false,
+        "sttLocale": "auto",
+        "ttsService": "openai",
+        "voice": { "openai": "alloy" }
+      },
+      "enableHistoryCount": true
+    },
+    "meta": {}
+  },
+  "fontSize": 14,
+  "language": "auto",
+  "languageModel": {
+    "openAI": {
+      "OPENAI_API_KEY": "dfdf",
+      "models": [
+        "gpt-3.5-turbo",
+        "gpt-3.5-turbo-1106",
+        "gpt-3.5-turbo-16k",
+        "gpt-4",
+        "gpt-4-32k",
+        "gpt-4-1106-preview",
+        "gpt-4-vision-preview"
+      ],
+      "customModelName": "+glm-4,+glm-4v",
+      "endpoint": "sdaddsd"
+    },
+    "zhipu": { "ZHIPU_API_KEY": "", "enabled": false }
+  },
+  "password": "",
+  "themeMode": "auto",
+  "tool": { "dalle": { "autoGenerate": false } },
+  "tts": {
+    "openAI": { "sttModel": "whisper-1", "ttsModel": "tts-1" },
+    "sttAutoStop": true,
+    "sttServer": "openai"
+  }
+}

package/src/database/core/migrations/migrateSettingsToUser/fixtures/output.json

@@ -0,0 +1,60 @@
+{
+  "avatar": "",
+  "settings": {
+    "defaultAgent": {
+      "config": {
+        "autoCreateTopicThreshold": 2,
+        "displayMode": "chat",
+        "enableAutoCreateTopic": true,
+        "historyCount": 1,
+        "model": "gpt-3.5-turbo-1106",
+        "params": {
+          "frequency_penalty": 0,
+          "presence_penalty": 0,
+          "temperature": 0.7,
+          "top_p": 0.7
+        },
+        "plugins": ["website-crawler"],
+        "systemRole": "",
+        "tts": {
+          "showAllLocaleVoice": false,
+          "sttLocale": "auto",
+          "ttsService": "openai",
+          "voice": {
+            "openai": "alloy"
+          }
+        },
+        "enableHistoryCount": true
+      },
+      "meta": {}
+    },
+    "fontSize": 14,
+    "language": "auto",
+    "languageModel": {
+      "openai": {
+        "OPENAI_API_KEY": "dfdf",
+        "models": [
+          "gpt-3.5-turbo",
+          "gpt-3.5-turbo-1106",
+          "gpt-3.5-turbo-16k",
+          "gpt-4",
+          "gpt-4-32k",
+          "gpt-4-1106-preview",
+          "gpt-4-vision-preview"
+        ],
+        "customModelName": "+glm-4,+glm-4v",
+        "endpoint": "sdaddsd"
+      }
+    },
+    "password": "",
+    "themeMode": "auto",
+    "tts": {
+      "openAI": {
+        "sttModel": "whisper-1",
+        "ttsModel": "tts-1"
+      },
+      "sttAutoStop": true,
+      "sttServer": "openai"
+    }
+  }
+}

package/src/database/core/migrations/migrateSettingsToUser/index.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect } from 'vitest';
+
+import input from './fixtures/input.json';
+import outputData from './fixtures/output.json';
+import { V4Settings, migrateSettingsToUser } from './index';
+
+describe('migrateSettingsFromLocalStorage', () => {
+  it('from localStorage to indexedDB', () => {
+    const output = migrateSettingsToUser(input as V4Settings);
+
+    expect(output).toEqual(outputData);
+  });
+});

package/src/database/core/migrations/migrateSettingsToUser/index.ts

@@ -0,0 +1,39 @@
+import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
+import type { ThemeMode } from 'antd-style';
+
+import { DB_Settings, DB_User } from '@/database/schemas/user';
+import { LocaleMode } from '@/types/locale';
+import { GlobalDefaultAgent, GlobalLLMConfig, GlobalTTSConfig, GlobalTool } from '@/types/settings';
+
+export interface V4Settings {
+  avatar: string;
+  defaultAgent: GlobalDefaultAgent;
+  fontSize: number;
+  language: LocaleMode;
+  languageModel: GlobalLLMConfig;
+  neutralColor?: NeutralColors;
+  password: string;
+  primaryColor?: PrimaryColors;
+  themeMode: ThemeMode;
+  tool: GlobalTool;
+  tts: GlobalTTSConfig;
+}
+
+export const migrateSettingsToUser = (settings: V4Settings): DB_User => {
+  const dbSettings: DB_Settings = {
+    defaultAgent: settings.defaultAgent,
+    fontSize: settings.fontSize,
+    language: settings.language,
+    languageModel: {
+      openai: settings.languageModel.openAI,
+    },
+    password: settings.password,
+    themeMode: settings.themeMode,
+    tts: settings.tts,
+  };
+
+  return {
+    avatar: settings.avatar,
+    settings: dbSettings,
+  };
+};

package/src/database/core/schemas.ts

@@ -44,3 +44,13 @@ export const dbSchemaV4 = {
   sessions:
     '&id, type, group, pinned, meta.title, meta.description, meta.tags, createdAt, updatedAt',
 };
+
+// ************************************** //
+// ******* Version 5 - 2024-01-29 ******* //
+// ************************************** //
+// - Added `users` table
+
+export const dbSchemaV5 = {
+  ...dbSchemaV4,
+  users: '++id',
+};

package/src/database/models/user.ts

@@ -0,0 +1,54 @@
+import { DeepPartial } from 'utility-types';
+
+import { BaseModel } from '@/database/core';
+import { GlobalSettings } from '@/types/settings';
+
+import { DB_User, DB_UserSchema } from '../schemas/user';
+
+class _UserModel extends BaseModel {
+  constructor() {
+    super('users', DB_UserSchema);
+  }
+
+  getUser = async (): Promise<DB_User & { id: number }> => {
+    const hasUSer = !!(await this.table.count());
+
+    if (!hasUSer) await this.table.put({});
+
+    const list = await this.table.toArray();
+
+    return list[0];
+  };
+
+  create = async (user: DB_User) => {
+    return this.table.put(user);
+  };
+
+  private update = async (id: number, value: DeepPartial<DB_User>) => {
+    return this.table.update(id, value);
+  };
+
+  clear() {
+    return this.table.clear();
+  }
+
+  async updateSettings(settings: DeepPartial<GlobalSettings>) {
+    const user = await this.getUser();
+
+    return this.update(user.id, { settings: settings as any });
+  }
+
+  async resetSettings() {
+    const user = await this.getUser();
+
+    return this.update(user.id, { avatar: undefined, settings: undefined });
+  }
+
+  async updateAvatar(avatar: string) {
+    const user = await this.getUser();
+
+    return this.update(user.id, { avatar });
+  }
+}
+
+export const UserModel = new _UserModel();

package/src/database/schemas/user.ts

@@ -0,0 +1,57 @@
+import { z } from 'zod';
+
+import { AgentSchema } from '@/database/schemas/session';
+import { LobeMetaDataSchema } from '@/types/meta';
+
+const modelProviderSchema = z.object({
+  openai: z.object({
+    OPENAI_API_KEY: z.string().optional(),
+    azureApiVersion: z.string().optional(),
+    customModelName: z.string().optional(),
+    endpoint: z.string().optional(),
+    models: z.array(z.string()).optional(),
+    useAzure: z.boolean().optional(),
+  }),
+  // zhipu: z.object({
+  //   ZHIPU_API_KEY: z.string().optional(),
+  //   enabled: z.boolean().default(false),
+  // }),
+});
+
+const settingsSchema = z.object({
+  defaultAgent: z.object({
+    config: AgentSchema,
+    meta: LobeMetaDataSchema,
+  }),
+  fontSize: z.number().default(14),
+  language: z.string(),
+  languageModel: modelProviderSchema.partial(),
+  password: z.string(),
+  themeMode: z.string(),
+  tts: z.object({
+    openAI: z.object({
+      sttModel: z.string(),
+      ttsModel: z.string(),
+    }),
+    sttAutoStop: z.boolean(),
+    sttServer: z.string(),
+  }),
+});
+
+// const patchSchema = z.array(
+//   z.object({
+//     op: z.string(),
+//     path: z.string(),
+//     value: z.any(),
+//   }),
+// );
+
+export const DB_UserSchema = z.object({
+  avatar: z.string().optional(),
+  settings: settingsSchema.partial(),
+  // settings: patchSchema,
+});
+
+export type DB_User = z.infer<typeof DB_UserSchema>;
+
+export type DB_Settings = z.infer<typeof settingsSchema>;

package/src/features/AgentSetting/AgentConfig/index.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/selectors';
+import { modelProviderSelectors } from '@/store/global/selectors';
 
 import { useStore } from '../store';
 
@@ -21,7 +21,7 @@ const AgentConfig = memo(() => {
 
   const config = useStore((s) => s.config, isEqual);
 
-  const modelList = useGlobalStore(settingsSelectors.modelList);
+  const modelList = useGlobalStore(modelProviderSelectors.modelList);
 
   useEffect(() => {
     form.setFieldsValue(config);

package/src/features/AvatarWithUpload/index.tsx

@@ -5,6 +5,7 @@ import Avatar from 'next/image';
 import { CSSProperties, memo } from 'react';
 
 import { useGlobalStore } from '@/store/global';
+import { commonSelectors } from '@/store/global/selectors';
 import { imageToBase64 } from '@/utils/imageToBase64';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
@@ -36,15 +37,18 @@ interface AvatarWithUploadProps {
 
 const AvatarWithUpload = memo<AvatarWithUploadProps>(
   ({ size = 40, compressSize = 256, style, id }) => {
-    const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
     const { styles } = useStyle();
+    const [avatar, updateAvatar] = useGlobalStore((s) => [
+      commonSelectors.userAvatar(s),
+      s.updateAvatar,
+    ]);
 
     const handleUploadAvatar = createUploadImageHandler((avatar) => {
       const img = new Image();
       img.src = avatar;
       img.addEventListener('load', () => {
         const webpBase64 = imageToBase64({ img, size: compressSize });
-        setSettings({ avatar: webpBase64 });
+        updateAvatar(webpBase64);
       });
     });
 

package/src/features/ChatInput/ActionBar/ModelSwitch.tsx

@@ -6,7 +6,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/selectors';
+import { modelProviderSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { LanguageModel } from '@/types/llm';
@@ -18,7 +18,7 @@ const ModelSwitch = memo(() => {
     return [agentSelectors.currentAgentModel(s), s.updateAgentConfig];
   });
 
-  const modelList = useGlobalStore(settingsSelectors.modelList, isEqual);
+  const modelList = useGlobalStore(modelProviderSelectors.modelList, isEqual);
 
   return (
     <Dropdown

package/src/features/Conversation/Error/ApiKeyForm.tsx

@@ -7,7 +7,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/selectors';
+import { modelProviderSelectors } from '@/store/global/selectors';
 
 import { FormAction } from './style';
 
@@ -16,8 +16,8 @@ const APIKeyForm = memo<{ id: string }>(({ id }) => {
   const [showProxy, setShow] = useState(false);
 
   const [apiKey, proxyUrl, setConfig] = useGlobalStore((s) => [
-    settingsSelectors.openAIAPI(s),
-    settingsSelectors.openAIProxyUrl(s),
+    modelProviderSelectors.openAIAPI(s),
+    modelProviderSelectors.openAIProxyUrl(s),
     s.setOpenAIConfig,
   ]);
 

package/src/features/Conversation/Error/InvalidAccess.tsx

@@ -7,6 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
 
 import { RenderErrorMessage } from '../types';
 import APIKeyForm from './ApiKeyForm';
@@ -20,7 +21,10 @@ enum Tab {
 const InvalidAccess: RenderErrorMessage['Render'] = memo(({ id }) => {
   const { t } = useTranslation('error');
   const [mode, setMode] = useState<Tab>(Tab.Password);
-  const [password, setSettings] = useGlobalStore((s) => [s.settings.password, s.setSettings]);
+  const [password, setSettings] = useGlobalStore((s) => [
+    settingsSelectors.currentSettings(s).password,
+    s.setSettings,
+  ]);
   const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
 
   return (

package/src/features/Conversation/Extras/Translate.tsx

@@ -1,7 +1,6 @@
-import { ActionIcon, Icon, Markdown, Tag } from '@lobehub/ui';
+import { ActionIcon, Icon, Markdown, Tag, copyToClipboard } from '@lobehub/ui';
 import { App } from 'antd';
 import { createStyles } from 'antd-style';
-import copy from 'copy-to-clipboard';
 import { ChevronDown, ChevronUp, ChevronsRight, CopyIcon, TrashIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -41,8 +40,8 @@ const Translate = memo<TranslateProps>(({ content = '', from, to, id, loading })
         <Flexbox horizontal>
           <ActionIcon
             icon={CopyIcon}
-            onClick={() => {
-              copy(content);
+            onClick={async () => {
+              await copyToClipboard(content);
               message.success(t('copySuccess'));
             }}
             size={'small'}

package/src/layout/GlobalLayout/AppTheme.tsx

@@ -9,6 +9,7 @@ import {
   LOBE_THEME_PRIMARY_COLOR,
 } from '@/const/theme';
 import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
 import { GlobalStyle } from '@/styles';
 import { setCookie } from '@/utils/cookie';
 
@@ -24,11 +25,11 @@ const AppTheme = memo<AppThemeProps>(
     // console.debug('server:appearance', defaultAppearance);
     // console.debug('server:primaryColor', defaultPrimaryColor);
     // console.debug('server:neutralColor', defaultNeutralColor);
-    const themeMode = useGlobalStore((s) => s.settings.themeMode);
+    const themeMode = useGlobalStore((s) => settingsSelectors.currentSettings(s).themeMode);
 
     const [primaryColor, neutralColor] = useGlobalStore((s) => [
-      s.settings.primaryColor,
-      s.settings.neutralColor,
+      settingsSelectors.currentSettings(s).primaryColor,
+      settingsSelectors.currentSettings(s).neutralColor,
     ]);
 
     useEffect(() => {

package/src/layout/GlobalLayout/Locale.tsx

@@ -5,6 +5,7 @@ import useSWR from 'swr';
 import { createI18nNext } from '@/locales/create';
 import { normalizeLocale } from '@/locales/resources';
 import { useOnFinishHydrationGlobal } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
 import { isOnServerSide } from '@/utils/env';
 import { switchLang } from '@/utils/switchLang';
 
@@ -48,7 +49,7 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang }) => {
   }
 
   useOnFinishHydrationGlobal((s) => {
-    if (s.settings.language === 'auto') {
+    if (settingsSelectors.currentSettings(s).language === 'auto') {
       switchLang('auto');
     }
   }, []);

package/src/layout/GlobalLayout/StoreHydration.tsx

@@ -5,8 +5,13 @@ import { memo, useEffect } from 'react';
 import { useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
 
 const StoreHydration = memo(() => {
-  const useFetchGlobalConfig = useGlobalStore((s) => s.useFetchGlobalConfig);
-  useFetchGlobalConfig();
+  const [useFetchServerConfig, useFetchUserConfig] = useGlobalStore((s) => [
+    s.useFetchServerConfig,
+    s.useFetchUserConfig,
+  ]);
+  const { isLoading } = useFetchServerConfig();
+
+  useFetchUserConfig(!isLoading);
 
   useEffect(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated

package/src/services/_header.ts

@@ -6,10 +6,11 @@ import {
   USE_AZURE_OPENAI,
 } from '@/const/fetch';
 import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors, settingsSelectors } from '@/store/global/selectors';
 
 // eslint-disable-next-line no-undef
 export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
-  const openai = useGlobalStore.getState().settings.languageModel.openAI;
+  const openai = modelProviderSelectors.openAIConfig(useGlobalStore.getState());
 
   const apiKey = openai.OPENAI_API_KEY || '';
   const endpoint = openai.endpoint || '';
@@ -17,7 +18,7 @@ export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
   // eslint-disable-next-line no-undef
   const result: HeadersInit = {
     ...header,
-    [LOBE_CHAT_ACCESS_CODE]: useGlobalStore.getState().settings.password || '',
+    [LOBE_CHAT_ACCESS_CODE]: settingsSelectors.password(useGlobalStore.getState()),
     [OPENAI_API_KEY_HEADER_KEY]: apiKey,
     [OPENAI_END_POINT]: endpoint,
   };