@lobehub/chat 0.120.2 → 0.120.4

package/src/app/chat/features/SessionListContent/List/Item/Actions.tsx

@@ -94,10 +94,8 @@ const Actions = memo<ActionProps>(({ id, setOpen }) => {
           domEvent.stopPropagation();
 
           modal.confirm({
-            cancelText: t('cancel'),
             centered: true,
             okButtonProps: { danger: true },
-            okText: t('ok'),
             onOk: () => {
               removeSession(id);
             },

package/src/app/chat/features/SessionListContent/List/index.tsx

@@ -4,7 +4,8 @@ import { memo } from 'react';
 import LazyLoad from 'react-lazy-load';
 
 import { SESSION_CHAT_URL } from '@/const/url';
-import { useSessionHydrated, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 import { LobeAgentSession } from '@/types/session';
 
 import AddButton from './AddButton';
@@ -21,9 +22,12 @@ interface SessionListProps {
   dataSource: LobeAgentSession[];
 }
 const SessionList = memo<SessionListProps>(({ dataSource }) => {
-  const [activeSession, switchSession] = useSessionStore((s) => [s.activeSession, s.switchSession]);
+  const [activeSession, switchSession, isInit] = useSessionStore((s) => [
+    s.activeSession,
+    s.switchSession,
+    sessionSelectors.isSessionListInit(s),
+  ]);
   const { styles } = useStyles();
-  const isInit = useSessionHydrated();
 
   const { mobile } = useResponsive();
 

package/src/app/chat/features/TopicListContent/Header.tsx

@@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 
-import SidebarHeader from '../SidebarHeader';
+import SidebarHeader from '../../components/SidebarHeader';
 import TopicSearchBar from './TopicSearchBar';
 
 const Header = memo(() => {

package/src/app/chat/page.tsx

@@ -2,6 +2,7 @@ import { isMobileDevice } from '@/utils/responsive';
 
 import DesktopPage from './(desktop)';
 import MobilePage from './(mobile)';
+import SessionHydration from './components/SessionHydration';
 import Migration from './features/Migration';
 
 const Page = () => {
@@ -10,9 +11,12 @@ const Page = () => {
   const Page = mobile ? MobilePage : DesktopPage;
 
   return (
-    <Migration>
-      <Page />
-    </Migration>
+    <>
+      <Migration>
+        <Page />
+      </Migration>
+      <SessionHydration />
+    </>
   );
 };
 

package/src/app/home/Redirect.tsx

@@ -24,11 +24,11 @@ const Redirect = memo(() => {
       useGlobalStore.getState().switchSideBar(SidebarTabKey.Chat);
 
       if (hasData) {
-        router.push('/chat');
+        router.replace('/chat');
 
         switchSession();
       } else {
-        router.push('/welcome');
+        router.replace('/welcome');
       }
     });
   }, []);

package/src/app/metadata.ts

@@ -1,9 +1,14 @@
 import { Metadata } from 'next';
 
+import { getServerConfig } from '@/config/server';
+
 import pkg from '../../package.json';
 
 const title = 'LobeChat';
 const { description, homepage } = pkg;
+
+const { METADATA_BASE_URL = 'https://chat-preview.lobehub.com/' } = getServerConfig();
+
 const metadata: Metadata = {
   appleWebApp: {
     statusBarStyle: 'black-translucent',
@@ -18,6 +23,7 @@ const metadata: Metadata = {
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon.ico',
   },
   manifest: '/manifest.json',
+  metadataBase: new URL(METADATA_BASE_URL),
   openGraph: {
     description: description,
     images: [

package/src/app/settings/common/Common.tsx

@@ -49,10 +49,8 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
 
   const handleReset = useCallback(() => {
     modal.confirm({
-      cancelText: t('cancel', { ns: 'common' }),
       centered: true,
       okButtonProps: { danger: true },
-      okText: t('ok', { ns: 'common' }),
       onOk: () => {
         resetSettings();
         form.setFieldsValue(DEFAULT_SETTINGS);
@@ -63,12 +61,10 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
 
   const handleClear = useCallback(() => {
     modal.confirm({
-      cancelText: t('cancel', { ns: 'common' }),
       centered: true,
       okButtonProps: {
         danger: true,
       },
-      okText: t('ok', { ns: 'common' }),
       onOk: async () => {
         await clearSessions();
         await removeAllPlugins();
@@ -136,20 +132,23 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
           <SliderWithInput
             marks={{
               12: {
-                label: t('settingTheme.fontSize.marks.small'),
+                label: 'A',
                 style: {
+                  fontSize: 12,
                   marginTop: 4,
                 },
               },
               14: {
                 label: t('settingTheme.fontSize.marks.normal'),
                 style: {
+                  fontSize: 14,
                   marginTop: 4,
                 },
               },
               18: {
-                label: t('settingTheme.fontSize.marks.large'),
+                label: 'A',
                 style: {
+                  fontSize: 18,
                   marginTop: 4,
                 },
               },

package/src/app/welcome/features/Banner/index.tsx

@@ -3,11 +3,13 @@
 import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
 import { SendHorizonal } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import DataImporter from '@/features/DataImporter';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 import Hero from './Hero';
@@ -15,13 +17,10 @@ import { useStyles } from './style';
 
 const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
+  const router = useRouter();
   const { styles } = useStyles();
-  const [switchSession, switchBackToChat, router, isMobile] = useSessionStore((s) => [
-    s.switchSession,
-    s.switchBackToChat,
-    s.router,
-    s.isMobile,
-  ]);
+  const [switchSession] = useSessionStore((s) => [s.switchSession]);
+  const [switchBackToChat, isMobile] = useGlobalStore((s) => [s.switchBackToChat, s.isMobile]);
 
   return (
     <>
@@ -46,7 +45,7 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
         </DataImporter>
         <Button
           block={mobile}
-          onClick={() => (isMobile ? router?.push('/chat') : switchBackToChat())}
+          onClick={() => (isMobile ? router.push('/chat') : switchBackToChat())}
           size={'large'}
           type={'primary'}
         >

package/src/components/StoreHydration/ChatHydration/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useQueryState } from 'nuqs';
+import { memo, useEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useChatStore } from '@/store/chat';
+
+// sync outside state to useChatStore
+const ChatHydration = memo(() => {
+  const useStoreUpdater = createStoreUpdater(useChatStore);
+
+  // two-way bindings the topic params to chat store
+  const [topic, setTopic] = useQueryState('topic', { history: 'replace', throttleMs: 500 });
+  useStoreUpdater('activeTopicId', topic);
+
+  useEffect(() => {
+    const unsubscribe = useChatStore.subscribe(
+      (s) => s.activeTopicId,
+      (state) => {
+        setTopic(!state ? null : state);
+      },
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return null;
+});
+
+export default ChatHydration;

package/src/config/server.ts

@@ -16,6 +16,8 @@ declare global {
 
       IMGUR_CLIENT_ID?: string;
 
+      METADATA_BASE_URL?: string;
+
       AGENTS_INDEX_URL?: string;
 
       PLUGINS_INDEX_URL?: string;
@@ -51,6 +53,8 @@ export const getServerConfig = () => {
     OPENAI_PROXY_URL: process.env.OPENAI_PROXY_URL,
     OPENAI_FUNCTION_REGIONS: regions,
 
+    METADATA_BASE_URL: process.env.METADATA_BASE_URL,
+
     AZURE_API_KEY: process.env.AZURE_API_KEY,
     AZURE_API_VERSION: process.env.AZURE_API_VERSION,
     USE_AZURE_OPENAI: process.env.USE_AZURE_OPENAI === '1',

package/src/const/locale.ts

@@ -1,4 +1,4 @@
-import { Locales, normalizeLocale, supportLocales } from '@/locales/resources';
+import { normalizeLocale, supportLocales } from '@/locales/resources';
 
 export const DEFAULT_LANG = 'en-US';
 export const LOBE_LOCALE_COOKIE = 'LOBE_LOCALE';
@@ -7,6 +7,6 @@ export const LOBE_LOCALE_COOKIE = 'LOBE_LOCALE';
  * Check if the language is supported
  * @param locale
  */
-export const isLocaleNotSupport = (locale: Locales) => {
+export const isLocaleNotSupport = (locale: string) => {
   return normalizeLocale(locale) === DEFAULT_LANG || !supportLocales.includes(locale);
 };

package/src/const/url.ts

@@ -17,5 +17,5 @@ export const AGENTS_INDEX_GITHUB = 'https://github.com/lobehub/lobe-chat-agents'
 export const AGENTS_INDEX_GITHUB_ISSUE = urlJoin(AGENTS_INDEX_GITHUB, 'issues/new');
 
 export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
-  mobile ? `/chat/mobile#session=${id}` : `/chat#session=${id}`;
+  mobile ? `/chat/mobile?session=${id}` : `/chat?session=${id}`;
 export const MANUAL_UPGRADE_URL = 'https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync';

package/src/database/models/__tests__/message.test.ts

@@ -329,14 +329,15 @@ describe('MessageModel', () => {
   describe('duplicateMessages', () => {
     it('should duplicate messages and update parentId for copied messages', async () => {
       // 创建原始消息和父消息
-      const parentMessageData: DB_Message = {
+      const parentMessageData: CreateMessageParams = {
         content: 'Parent message content',
         role: 'user',
         sessionId: 'session1',
+        topicId: undefined,
       };
       const parentMessage = await MessageModel.create(parentMessageData);
 
-      const childMessageData: DB_Message = {
+      const childMessageData: CreateMessageParams = {
         content: 'Child message content',
         role: 'user',
         sessionId: 'session1',

package/src/database/models/message.ts

@@ -46,14 +46,13 @@ class _MessageModel extends BaseModel {
   }: QueryMessageParams): Promise<ChatMessage[]> {
     const offset = current * pageSize;
 
-    const query =
-      topicId !== undefined
-        ? // TODO: The query {"sessionId":"xxx","topicId":"xxx"} on messages would benefit of a compound index [sessionId+topicId]
-          this.table.where({ sessionId, topicId }) // Use a compound index
-        : this.table
-            .where('sessionId')
-            .equals(sessionId)
-            .and((message) => !message.topicId);
+    const query = !!topicId
+      ? // TODO: The query {"sessionId":"xxx","topicId":"xxx"} on messages would benefit of a compound index [sessionId+topicId]
+        this.table.where({ sessionId, topicId }) // Use a compound index
+      : this.table
+          .where('sessionId')
+          .equals(sessionId)
+          .and((message) => !message.topicId);
 
     const dbMessages: DBModel<DB_Message>[] = await query
       .sortBy('createdAt')
@@ -221,7 +220,12 @@ class _MessageModel extends BaseModel {
     tts,
     ...item
   }: DBModel<DB_Message>): ChatMessage => {
-    return { ...item, extra: { fromModel, translate, tts }, meta: {} };
+    return {
+      ...item,
+      extra: { fromModel, translate, tts },
+      meta: {},
+      topicId: item.topicId ?? undefined,
+    };
   };
 }
 

package/src/database/schemas/message.ts

@@ -31,7 +31,7 @@ export const DB_MessageSchema = z.object({
   parentId: z.string().optional(),
   quotaId: z.string().optional(),
   sessionId: z.string(),
-  topicId: z.string().optional(),
+  topicId: z.string().nullable().optional(),
 });
 
 export type DB_Message = z.infer<typeof DB_MessageSchema>;

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

@@ -22,9 +22,7 @@ const Clear = memo(() => {
 
   return (
     <Popconfirm
-      cancelText={t('cancel', { ns: 'common' })}
       okButtonProps={{ danger: true }}
-      okText={t('ok', { ns: 'common' })}
       onConfirm={() => {
         resetConversation();
       }}

package/src/features/ChatInput/useChatInput.ts

@@ -1,7 +1,6 @@
 import { TextAreaRef } from 'antd/es/input/TextArea';
 import { useCallback, useRef, useState } from 'react';
 
-import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
@@ -20,15 +19,12 @@ export const useChatInput = () => {
     s.updateInputMessage,
     s.stopGenerateMessage,
   ]);
-  const mobile = useIsMobile();
 
   const handleSend = useCallback(() => {
     setExpand(false);
-    if (mobile) {
-      ref?.current?.blur();
-    }
+
     onSend();
-  }, [onSend, mobile]);
+  }, [onSend]);
 
   return {
     canUpload,

package/src/features/Conversation/hooks/useInitConversation.ts

@@ -28,8 +28,6 @@ export const useInitConversation = () => {
   checkPluginsIsInstalled(plugins);
 
   useEffect(() => {
-    useChatStore.persist.rehydrate();
-
     // // when activeId changed, switch topic to undefined
     const unsubscribe = useSessionStore.subscribe(
       (s) => s.activeId,

package/src/features/Conversation/index.tsx

@@ -2,6 +2,7 @@ import { createStyles } from 'antd-style';
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import ChatHydration from '@/components/StoreHydration/ChatHydration';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 
@@ -50,12 +51,16 @@ const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
   const init = useInitConversation();
 
   return (
-    //  relative is required, ChatInput's absolute position needs it
-    <Flexbox flex={1} style={{ position: 'relative' }}>
+    <Flexbox
+      flex={1}
+      //  position: 'relative' is required, ChatInput's absolute position needs it
+      style={{ position: 'relative' }}
+    >
       <div className={styles}>
         {init ? <ChatList mobile={mobile} /> : <SkeletonList mobile={mobile} />}
       </div>
       {chatInput}
+      <ChatHydration />
     </Flexbox>
   );
 });

package/src/features/PluginDetailModal/index.tsx

@@ -33,8 +33,6 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
     return (
       <Modal
         allowFullscreen
-        cancelText={t('cancel', { ns: 'common' })}
-        okText={t('ok', { ns: 'common' })}
         onCancel={onClose}
         onOk={() => {
           onClose();

package/src/features/PluginDevModal/index.tsx

@@ -96,7 +96,6 @@ const DevModal = memo<DevModalProps>(
       >
         <Modal
           allowFullscreen
-          cancelText={t('cancel', { ns: 'common' })}
           footer={footer}
           okText={t('dev.save')}
           onCancel={(e) => {

package/src/features/SideBar/TopActions.tsx

@@ -1,10 +1,10 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Bot, MessageSquare } from 'lucide-react';
+import { Compass, MessageSquare } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GlobalStore } from '@/store/global';
+import { GlobalStore, useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
@@ -15,7 +15,7 @@ export interface TopActionProps {
 
 const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
   const { t } = useTranslation('common');
-  const switchBackToChat = useSessionStore((s) => s.switchBackToChat);
+  const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
 
   return (
     <>
@@ -23,7 +23,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         href={'/chat'}
         onClick={(e) => {
           e.preventDefault();
-          switchBackToChat();
+          switchBackToChat(useSessionStore.getState().activeId);
           setTab(SidebarTabKey.Chat);
         }}
       >
@@ -38,7 +38,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
       <Link href={'/market'}>
         <ActionIcon
           active={tab === SidebarTabKey.Market}
-          icon={Bot}
+          icon={Compass}
           onClick={() => {
             setTab(SidebarTabKey.Market);
           }}

package/src/layout/GlobalLayout/Locale.tsx

@@ -1,24 +1,39 @@
 import { ConfigProvider } from 'antd';
-import { PropsWithChildren, memo, useState } from 'react';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
 import useSWR from 'swr';
 
 import { createI18nNext } from '@/locales/create';
+import { normalizeLocale } from '@/locales/resources';
 import { useOnFinishHydrationGlobal } from '@/store/global';
 import { isOnServerSide } from '@/utils/env';
 import { switchLang } from '@/utils/switchLang';
 
+const getAntdLocale = async (lang?: string) => {
+  let normalLang = normalizeLocale(lang);
+
+  // due to antd only have ar-EG locale, we need to convert ar to ar-EG
+  // refs: https://ant.design/docs/react/i18n
+
+  // And we don't want to handle it in `normalizeLocale` function
+  // because of other locale files are all `ar` not `ar-EG`
+  if (normalLang === 'ar') normalLang = 'ar-EG';
+
+  const { default: locale } = await import(`antd/locale/${normalLang.replace('-', '_')}.js`);
+
+  return locale;
+};
+
 interface LocaleLayoutProps extends PropsWithChildren {
-  lang?: string;
+  defaultLang?: string;
 }
 
-const Locale = memo<LocaleLayoutProps>(({ children, lang }) => {
-  const { data: locale } = useSWR(
-    lang,
-    async () =>
-      await import(`antd/locale/${lang?.includes('-') ? lang?.replace('-', '_') : 'en_US'}.js`),
-    { revalidateOnFocus: false },
-  );
-  const [i18n] = useState(createI18nNext(lang));
+const Locale = memo<LocaleLayoutProps>(({ children, defaultLang }) => {
+  const [i18n] = useState(createI18nNext(defaultLang));
+  const [lang, setLang] = useState(defaultLang);
+
+  const { data: locale } = useSWR(['antd-locale', lang], ([, key]) => getAntdLocale(key), {
+    revalidateOnFocus: false,
+  });
 
   // if run on server side, init i18n instance everytime
   if (isOnServerSide) {
@@ -38,6 +53,18 @@ const Locale = memo<LocaleLayoutProps>(({ children, lang }) => {
     }
   }, []);
 
+  // handle i18n instance language change
+  useEffect(() => {
+    const handleLang = (e: string) => {
+      setLang(e);
+    };
+
+    i18n.instance.on('languageChanged', handleLang);
+    return () => {
+      i18n.instance.off('languageChanged', handleLang);
+    };
+  }, [i18n]);
+
   return <ConfigProvider locale={locale}>{children}</ConfigProvider>;
 });
 

package/src/layout/GlobalLayout/StoreHydration.tsx

@@ -2,32 +2,32 @@ import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
-import { useGlobalStore } from '@/store/global';
-import { useEffectAfterSessionHydrated, useSessionStore } from '@/store/session';
+import { useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
 
 const StoreHydration = memo(() => {
-  const router = useRouter();
-
   const useFetchGlobalConfig = useGlobalStore((s) => s.useFetchGlobalConfig);
+  useFetchGlobalConfig();
 
   useEffect(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useSessionStore.persist.rehydrate();
     useGlobalStore.persist.rehydrate();
   }, []);
 
-  useFetchGlobalConfig();
-
   const { mobile } = useResponsive();
-
-  useEffectAfterSessionHydrated(
+  useEffectAfterGlobalHydrated(
     (store) => {
-      store.setState({ isMobile: mobile });
+      const prevState = store.getState().isMobile;
+
+      if (prevState !== mobile) {
+        store.setState({ isMobile: mobile });
+      }
     },
     [mobile],
   );
 
-  useEffectAfterSessionHydrated(
+  const router = useRouter();
+
+  useEffectAfterGlobalHydrated(
     (store) => {
       store.setState({ router });
     },
@@ -36,6 +36,7 @@ const StoreHydration = memo(() => {
 
   useEffect(() => {
     router.prefetch('/chat');
+    router.prefetch('/chat/settings');
     router.prefetch('/market');
     router.prefetch('/settings/common');
     router.prefetch('/settings/agent');

package/src/layout/GlobalLayout/index.tsx

@@ -48,7 +48,7 @@ interface GlobalLayoutProps extends AppThemeProps {
 
 const GlobalLayout = ({ children, defaultLang, ...theme }: GlobalLayoutProps) => (
   <AppTheme {...theme}>
-    <Locale lang={defaultLang}>
+    <Locale defaultLang={defaultLang}>
       <StoreHydration />
       <Container>{children}</Container>
       <DebugUI />

package/src/locales/default/setting.ts

@@ -252,9 +252,7 @@ export default {
     fontSize: {
       desc: '聊天内容的字体大小',
       marks: {
-        large: '大',
         normal: '标准',
-        small: '小',
       },
       title: '字体大小',
     },

package/src/locales/resources.ts

@@ -19,7 +19,9 @@ export const locales = [
 export type DefaultResources = typeof resources;
 export type Locales = (typeof locales)[number];
 
-export const normalizeLocale = (locale: string) => {
+export const normalizeLocale = (locale?: string) => {
+  if (!locale) return 'en-US';
+
   switch (locale) {
     case 'zh-CN':
     case 'zh': {
@@ -43,8 +45,8 @@ type LocaleOptions = {
 
 export const localeOptions: LocaleOptions = [
   {
-    label: 'العربية',
-    value: 'ar',
+    label: 'English',
+    value: 'en-US',
   },
   {
     label: '简体中文',
@@ -54,10 +56,6 @@ export const localeOptions: LocaleOptions = [
     label: '繁體中文',
     value: 'zh-TW',
   },
-  {
-    label: 'English',
-    value: 'en-US',
-  },
   {
     label: '日本語',
     value: 'ja-JP',
@@ -74,6 +72,10 @@ export const localeOptions: LocaleOptions = [
     label: 'Español',
     value: 'es-ES',
   },
+  {
+    label: 'العربية',
+    value: 'ar',
+  },
   {
     label: 'Français',
     value: 'fr-FR',