🗃️ refactor: migrate some agent config to chatConfig (lobehub#2646)

* 🗃️ refactor: refactor the agent config to chat config * ✅ test: fix test * 🗃️ refactor: add db migration * ✅ test: fix test
whyliam · May 25, 2024 · 2f311dc · 2f311dc
1 parent 25e6007
commit 2f311dc
Show file tree

Hide file tree

Showing 53 changed files with 1,066 additions and 213 deletions.
diff --git a/public/icons/apple-touch-icon.png → public/apple-touch-icon.png b/public/icons/apple-touch-icon.png → public/apple-touch-icon.png
diff --git a/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx b/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx
@@ -75,7 +75,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
         addon={addon}
         avatar={avatar}
         avatarBackground={avatarBackground}
-        date={updateAt}
+        date={updateAt?.valueOf()}
         description={description}
         loading={loading}
         pin={pin}

diff --git a/src/app/(main)/chat/_layout/Desktop/index.tsx b/src/app/(main)/chat/_layout/Desktop/index.tsx
@@ -19,6 +19,9 @@ const Layout = ({ children, session }: LayoutProps) => {
         </Flexbox>
       </Flexbox>
       <Migration />
+      {/* ↓ cloud slot ↓ */}
+
+      {/* ↑ cloud slot ↑ */}
     </>
   );
 };

diff --git a/src/app/(main)/chat/settings/features/EditPage.tsx b/src/app/(main)/chat/settings/features/EditPage.tsx
@@ -16,7 +16,10 @@ const EditPage = memo(() => {
   const id = useSessionStore((s) => s.activeId);
   const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
   const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
-  const [updateAgentConfig] = useAgentStore((s) => [s.updateAgentConfig]);
+  const [updateAgentConfig, updateAgentChatConfig] = useAgentStore((s) => [
+    s.updateAgentConfig,
+    s.updateAgentChatConfig,
+  ]);
 
   const [updateAgentMeta, title] = useSessionStore((s) => [
     s.updateSessionMeta,
@@ -30,6 +33,7 @@ const EditPage = memo(() => {
         config={config}
         id={id}
         meta={meta}
+        onChatConfigChange={updateAgentChatConfig}
         onConfigChange={updateAgentConfig}
         onMetaChange={updateAgentMeta}
       />

diff --git a/src/app/(main)/welcome/_layout/Desktop.tsx b/src/app/(main)/welcome/_layout/Desktop.tsx
@@ -8,23 +8,28 @@ const COPYRIGHT = `© ${new Date().getFullYear()} LobeHub, LLC`;
 
 const DesktopLayout = ({ children }: PropsWithChildren) => {
   return (
-    <Flexbox
-      align={'center'}
-      height={'100%'}
-      justify={'space-between'}
-      padding={16}
-      style={{ overflow: 'hidden', position: 'relative' }}
-      width={'100%'}
-    >
-      <Logo size={36} style={{ alignSelf: 'flex-start' }} type={'text'} />
-      <GridShowcase innerProps={{ gap: 24 }} style={{ maxWidth: 1024 }} width={'100%'}>
-        {children}
-      </GridShowcase>
-      <Flexbox align={'center'} horizontal justify={'space-between'}>
-        <span style={{ opacity: 0.5 }}>{COPYRIGHT}</span>
-        <Follow />
+    <>
+      <Flexbox
+        align={'center'}
+        height={'100%'}
+        justify={'space-between'}
+        padding={16}
+        style={{ overflow: 'hidden', position: 'relative' }}
+        width={'100%'}
+      >
+        <Logo size={36} style={{ alignSelf: 'flex-start' }} type={'text'} />
+        <GridShowcase innerProps={{ gap: 24 }} style={{ maxWidth: 1024 }} width={'100%'}>
+          {children}
+        </GridShowcase>
+        <Flexbox align={'center'} horizontal justify={'space-between'}>
+          <span style={{ opacity: 0.5 }}>{COPYRIGHT}</span>
+          <Follow />
+        </Flexbox>
       </Flexbox>
-    </Flexbox>
+      {/* ↓ cloud slot ↓ */}
+
+      {/* ↑ cloud slot ↑ */}
+    </>
   );
 };
 

diff --git a/src/app/@modal/chat/(.)settings/modal/layout.tsx b/src/app/@modal/chat/(.)settings/modal/layout.tsx
@@ -28,8 +28,10 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
   const id = useSessionStore((s) => s.activeId);
   const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
   const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
-  const [updateAgentConfig] = useAgentStore((s) => [s.updateAgentConfig]);
-
+  const [updateAgentConfig, updateAgentChatConfig] = useAgentStore((s) => [
+    s.updateAgentConfig,
+    s.updateAgentChatConfig,
+  ]);
   const [updateAgentMeta] = useSessionStore((s) => [
     s.updateSessionMeta,
     sessionMetaSelectors.currentAgentTitle(s),
@@ -47,6 +49,7 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
           config={config}
           id={id}
           meta={meta}
+          onChatConfigChange={updateAgentChatConfig}
           onConfigChange={updateAgentConfig}
           onMetaChange={updateAgentMeta}
         />

diff --git a/src/app/metadata.ts b/src/app/metadata.ts
@@ -21,7 +21,7 @@ export const generateMetadata = async (): Promise<Metadata> => {
     },
     description: t('chat.description'),
     icons: {
-      apple: '/icons/apple-touch-icon.png',
+      apple: '/apple-touch-icon.png',
       icon: '/favicon.ico',
       shortcut: '/favicon-32x32.ico',
     },

diff --git a/src/const/session.ts b/src/const/session.ts
@@ -9,12 +9,12 @@ export const WELCOME_GUIDE_CHAT_ID = 'welcome';
 
 export const DEFAULT_AGENT_LOBE_SESSION: LobeAgentSession = {
   config: DEFAULT_AGENT_CONFIG,
-  createdAt: Date.now(),
+  createdAt: new Date(),
   id: '',
   meta: DEFAULT_AGENT_META,
   model: DEFAULT_AGENT_CONFIG.model,
   type: LobeSessionType.Agent,
-  updatedAt: Date.now(),
+  updatedAt: new Date(),
 };
 
 export const DEFAULT_INBOX_SESSION: LobeAgentSession = merge(DEFAULT_AGENT_LOBE_SESSION, {

diff --git a/src/const/settings/agent.ts b/src/const/settings/agent.ts
@@ -1,6 +1,6 @@
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { ModelProvider } from '@/libs/agent-runtime';
-import { LobeAgentConfig, LobeAgentTTSConfig } from '@/types/agent';
+import { LobeAgentChatConfig, LobeAgentConfig, LobeAgentTTSConfig } from '@/types/agent';
 import { GlobalDefaultAgent } from '@/types/settings';
 
 export const DEFAUTT_AGENT_TTS_CONFIG: LobeAgentTTSConfig = {
@@ -12,11 +12,15 @@ export const DEFAUTT_AGENT_TTS_CONFIG: LobeAgentTTSConfig = {
   },
 };
 
-export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
+export const DEFAULT_AGENT_CHAT_CONFIG: LobeAgentChatConfig = {
   autoCreateTopicThreshold: 2,
   displayMode: 'chat',
   enableAutoCreateTopic: true,
   historyCount: 1,
+};
+
+export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
+  chatConfig: DEFAULT_AGENT_CHAT_CONFIG,
   model: 'gpt-3.5-turbo',
   params: {
     frequency_penalty: 0,

diff --git a/src/database/client/core/db.ts b/src/database/client/core/db.ts
@@ -1,6 +1,7 @@
 import Dexie, { Transaction } from 'dexie';
 
 import { MigrationLLMSettings } from '@/migrations/FromV3ToV4';
+import { MigrationAgentChatConfig } from '@/migrations/FromV5ToV6';
 import { uuid } from '@/utils/uuid';
 
 import { DB_File } from '../schemas/files';
@@ -72,6 +73,10 @@ export class BrowserDB extends Dexie {
       .stores(dbSchemaV9)
       .upgrade((trans) => this.upgradeToV9(trans));
 
+    this.version(10)
+      .stores(dbSchemaV9)
+      .upgrade((trans) => this.upgradeToV10(trans));
+
     this.files = this.table('files');
     this.sessions = this.table('sessions');
     this.messages = this.table('messages');
@@ -159,6 +164,11 @@ export class BrowserDB extends Dexie {
     });
   };
 
+  /**
+   * 2024.05.11
+   *
+   * message role=function to role=tool
+   */
   upgradeToV9 = async (trans: Transaction) => {
     const messages = trans.table('messages');
     await messages.toCollection().modify(async (message: DBModel<DB_Message>) => {
@@ -185,6 +195,18 @@ export class BrowserDB extends Dexie {
       }
     });
   };
+
+  /**
+   * 2024.05.25
+   * migrate some agent config to chatConfig
+   */
+  upgradeToV10 = async (trans: Transaction) => {
+    const sessions = trans.table('sessions');
+    await sessions.toCollection().modify(async (session: DBModel<DB_Session>) => {
+      if (session.config)
+        session.config = MigrationAgentChatConfig.migrateChatConfig(session.config as any);
+    });
+  };
 }
 
 export const browserDB = new BrowserDB();

diff --git a/src/database/client/core/migrations/migrateSettingsToUser/index.ts b/src/database/client/core/migrations/migrateSettingsToUser/index.ts
@@ -1,11 +1,9 @@
-import { DB_Settings } from '@/database/client/schemas/user';
-
-import { V4Settings } from './type';
+import { V4Settings, V5Settings } from './type';
 
 export const migrateSettingsToUser = (
   settings: V4Settings,
-): { avatar: string; settings: DB_Settings } => {
-  const dbSettings: DB_Settings = {
+): { avatar: string; settings: V5Settings } => {
+  const dbSettings: V5Settings = {
     defaultAgent: settings.defaultAgent,
     fontSize: settings.fontSize,
     language: settings.language,

diff --git a/src/database/client/core/migrations/migrateSettingsToUser/type.ts b/src/database/client/core/migrations/migrateSettingsToUser/type.ts
@@ -58,7 +58,7 @@ interface V4DefaultAgent {
   meta: MetaData;
 }
 
-interface V4OpenAIConfig {
+interface OpenAIConfig {
   OPENAI_API_KEY: string;
   azureApiVersion?: string;
   customModelName?: string;
@@ -68,15 +68,10 @@ interface V4OpenAIConfig {
 }
 
 interface V4LLMConfig {
-  openAI: V4OpenAIConfig;
+  openAI: OpenAIConfig;
 }
 
-interface V4Tool {
-  dalle: {
-    autoGenerate: boolean;
-  };
-}
-interface V4TTSConfig {
+interface TTSConfig {
   openAI: {
     sttModel: 'whisper-1';
     ttsModel: 'tts-1' | 'tts-1-hd';
@@ -95,6 +90,19 @@ export interface V4Settings {
   password: string;
   primaryColor?: string;
   themeMode: ThemeMode;
-  tool: V4Tool;
-  tts: V4TTSConfig;
+  tts: TTSConfig;
+}
+
+export interface V5Settings {
+  defaultAgent: V4DefaultAgent;
+  fontSize: number;
+  language: string;
+  languageModel: {
+    openai: OpenAIConfig;
+  };
+  neutralColor?: string;
+  password: string;
+  primaryColor?: string;
+  themeMode: ThemeMode;
+  tts: TTSConfig;
 }
diff --git a/src/database/client/models/session.ts b/src/database/client/models/session.ts
@@ -246,16 +246,20 @@ class _SessionModel extends BaseModel {
   private mapToDB_Session(session: LobeAgentSession): DBModel<DB_Session> {
     return {
       ...session,
+      createdAt: session.createdAt?.valueOf(),
       group: session.group || SessionDefaultGroup.Default,
       pinned: session.pinned ? 1 : 0,
+      updatedAt: session.updatedAt?.valueOf(),
     };
   }
 
   private DB_SessionToAgentSession(session: DBModel<DB_Session>) {
     return {
       ...session,
+      createdAt: new Date(session.createdAt),
       model: session.config.model,
       pinned: !!session.pinned,
+      updatedAt: new Date(session.updatedAt),
     } as LobeAgentSession;
   }
 

diff --git a/src/database/client/schemas/session.ts b/src/database/client/schemas/session.ts
@@ -1,5 +1,6 @@
 import { z } from 'zod';
 
+import { AgentChatConfigSchema } from '@/types/agent';
 import { LobeMetaDataSchema } from '@/types/meta';
 
 const fewShotsSchema = z.array(
@@ -23,16 +24,8 @@ const ttsSchema = z.object({
 });
 
 export const AgentSchema = z.object({
-  autoCreateTopicThreshold: z.number().default(2),
-  compressThreshold: z.number().optional(),
-  displayMode: z.enum(['chat', 'docs']).optional(),
-  enableAutoCreateTopic: z.boolean().default(true),
-  enableCompressThreshold: z.boolean().optional(),
-  enableHistoryCount: z.boolean().optional(),
-  enableMaxTokens: z.boolean().optional(),
+  chatConfig: AgentChatConfigSchema,
   fewShots: fewShotsSchema.optional(),
-  historyCount: z.number().default(8).optional(),
-  inputTemplate: z.string().optional(),
   model: z.string().default('gpt-3.5-turbo'),
   params: z.object({
     frequency_penalty: z.number().default(0).optional(),

diff --git a/src/features/AgentSetting/AgentChat/index.tsx b/src/features/AgentSetting/AgentChat/index.tsx
@@ -3,15 +3,16 @@
 import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
 import { Input, Switch } from 'antd';
 import { useThemeMode } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { LayoutList, MessagesSquare } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
 
 import { useStore } from '../store';
-import { useAgentSyncSettings } from '../useSyncAgemtSettings';
+import { selectors } from '../store/selectors';
 
 const AgentChat = memo(() => {
   const { t } = useTranslation('setting');
@@ -23,15 +24,23 @@ const AgentChat = memo(() => {
     enableHistoryCount,
     enableCompressThreshold,
     updateConfig,
-  ] = useStore((s) => [
-    s.config.displayMode,
-    s.config.enableAutoCreateTopic,
-    s.config.enableHistoryCount,
-    s.config.enableCompressThreshold,
-    s.setAgentConfig,
-  ]);
+  ] = useStore((s) => {
+    const config = selectors.chatConfig(s);
 
-  useAgentSyncSettings(form);
+    return [
+      config.displayMode,
+      config.enableAutoCreateTopic,
+      config.enableHistoryCount,
+      config.enableCompressThreshold,
+      s.setChatConfig,
+    ];
+  });
+
+  const config = useStore(selectors.chatConfig, isEqual);
+
+  useLayoutEffect(() => {
+    form.setFieldsValue(config);
+  }, [config]);
 
   const chat: ItemGroup = {
     children: [

diff --git a/src/features/AgentSetting/AgentModal/index.tsx b/src/features/AgentSetting/AgentModal/index.tsx
@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { FORM_STYLE } from '@/const/layoutTokens';
 
 import { useStore } from '../store';
+import { selectors } from '../store/selectors';
 import { useAgentSyncSettings } from '../useSyncAgemtSettings';
 import ModelSelect from './ModelSelect';
 
@@ -17,7 +18,7 @@ const AgentModal = memo(() => {
   const [form] = Form.useForm();
 
   const [enableMaxTokens, updateConfig] = useStore((s) => [
-    s.config.enableMaxTokens,
+    selectors.chatConfig(s).enableMaxTokens,
     s.setAgentConfig,
   ]);