@lobehub/chat 0.122.2 → 0.122.3

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

package/src/services/user.ts

@@ -0,0 +1,31 @@
+import { DeepPartial } from 'utility-types';
+
+import { UserModel } from '@/database/models/user';
+import { GlobalSettings } from '@/types/settings';
+
+export interface UserConfig {
+  avatar?: string;
+  // settings: JSONPatch
+  settings: DeepPartial<GlobalSettings>;
+}
+
+class UserService {
+  getUserConfig = async () => {
+    const user = await UserModel.getUser();
+    return user as unknown as UserConfig;
+  };
+
+  updateUserSettings = async (patch: DeepPartial<GlobalSettings>) => {
+    return UserModel.updateSettings(patch);
+  };
+
+  resetUserSettings = async () => {
+    return UserModel.resetSettings();
+  };
+
+  updateAvatar(avatar: string) {
+    return UserModel.updateAvatar(avatar);
+  }
+}
+
+export const userService = new UserService();

package/src/store/chat/slices/message/selectors.test.ts

@@ -1,9 +1,11 @@
+import { act } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { ChatStore } from '@/store/chat';
 import { initialState } from '@/store/chat/initialState';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { ChatMessage } from '@/types/message';
 import { MetaData } from '@/types/meta';
@@ -155,8 +157,11 @@ describe('chatSelectors', () => {
     });
     it('should slice the messages according to config, assuming historyCount is mocked to 2', async () => {
       const state = merge(initialStore, { messages: mockMessages });
-
-      useSessionStore.getState().updateAgentConfig({ historyCount: 2, enableHistoryCount: true });
+      act(() => {
+        useGlobalStore.setState({
+          settings: { defaultAgent: { config: { historyCount: 2, enableHistoryCount: true } } },
+        });
+      });
 
       const chats = chatSelectors.currentChatsWithHistoryConfig(state);
 

package/src/store/chat/slices/message/selectors.ts

@@ -4,6 +4,7 @@ import { t } from 'i18next';
 import { DEFAULT_INBOX_AVATAR, DEFAULT_USER_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
+import { commonSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
@@ -17,7 +18,7 @@ const getMeta = (message: ChatMessage) => {
   switch (message.role) {
     case 'user': {
       return {
-        avatar: useGlobalStore.getState().settings.avatar || DEFAULT_USER_AVATAR,
+        avatar: commonSelectors.userAvatar(useGlobalStore.getState()) || DEFAULT_USER_AVATAR,
       };
     }