@lobehub/chat 0.155.3 → 0.155.5

package/src/app/(main)/chat/_layout/Desktop/index.tsx

@@ -1,20 +1,24 @@
 import { Flexbox } from 'react-layout-kit';
 
+import Migration from '../../features/Migration';
 import { LayoutProps } from '../type';
-import ResponsiveSessionList from './SessionList';
+import SessionPanel from './SessionPanel';
 
-const Layout = ({ children }: LayoutProps) => {
+const Layout = ({ children, session }: LayoutProps) => {
   return (
     <>
-      <ResponsiveSessionList />
       <Flexbox
-        flex={1}
         height={'100%'}
-        id={'lobe-conversion-container'}
-        style={{ position: 'relative' }}
+        horizontal
+        style={{ maxWidth: 'calc(100vw - 64px)', overflow: 'hidden', position: 'relative' }}
+        width={'100%'}
       >
-        {children}
+        <SessionPanel>{session}</SessionPanel>
+        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
+          {children}
+        </Flexbox>
       </Flexbox>
+      <Migration />
     </>
   );
 };

package/src/app/(main)/chat/_layout/Mobile.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Migration from '@/app/(main)/chat/features/Migration';
+import { useQuery } from '@/hooks/useQuery';
+
+import { LayoutProps } from './type';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    display: unset;
+  `,
+  main: css`
+    position: relative;
+    overflow: hidden;
+    display: none;
+    background: ${token.colorBgLayout};
+  `,
+}));
+
+const Layout = memo<LayoutProps>(({ children, session }) => {
+  const { showMobileWorkspace } = useQuery();
+  const { cx, styles } = useStyles();
+
+  return (
+    <>
+      <Flexbox
+        className={cx(styles.main, !showMobileWorkspace && styles.active)}
+        height="100%"
+        width="100%"
+      >
+        {session}
+      </Flexbox>
+      <Flexbox
+        className={cx(styles.main, showMobileWorkspace && styles.active)}
+        height="100%"
+        id={'lobe-workspace-mobile'}
+        width="100%"
+      >
+        {children}
+      </Flexbox>
+      <Migration />
+    </>
+  );
+});
+
+Layout.displayName = 'MobileChatLayout';
+
+export default Layout;

package/src/app/(main)/chat/_layout/type.ts

@@ -2,4 +2,5 @@ import { ReactNode } from 'react';
 
 export interface LayoutProps {
   children: ReactNode;
+  session: ReactNode;
 }

package/src/app/(main)/chat/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/chat/features/Migration/index.tsx

@@ -3,13 +3,13 @@
 import { Spin } from 'antd';
 import { createStore, getMany } from 'idb-keyval';
 import dynamic from 'next/dynamic';
-import { PropsWithChildren, memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { MIGRATE_KEY, V1DB_NAME, V1DB_TABLE_NAME } from './const';
 
 const Modal = dynamic(() => import('./Modal'), { loading: () => <Spin fullscreen />, ssr: false });
 
-const Migration = memo<PropsWithChildren>(({ children }) => {
+const Migration = memo(() => {
   const [dbState, setDbState] = useState(null);
   const [open, setOpen] = useState(false);
 
@@ -33,12 +33,7 @@ const Migration = memo<PropsWithChildren>(({ children }) => {
     checkMigration();
   }, []);
 
-  return (
-    <>
-      {open && <Modal open={open} setOpen={setOpen} state={dbState} />}
-      {children}
-    </>
-  );
+  return open && <Modal open={open} setOpen={setOpen} state={dbState} />;
 });
 
 export default Migration;

package/src/app/(main)/chat/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'));

package/src/app/(main)/chat/settings/_layout/Mobile/Header.tsx

@@ -1,23 +1,22 @@
 'use client';
 
 import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
-import { pathString } from '@/utils/url';
 
 import HeaderContent from '../../features/HeaderContent';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
-  const router = useRouter();
+  const router = useQueryRoute();
 
   return (
     <MobileNavBar
       center={<MobileNavBarTitle title={t('header.session')} />}
-      onBackClick={() => router.push(pathString('/chat/mobile', { search: location.search }))}
+      onBackClick={() => router.push('/chat')}
       right={<HeaderContent />}
       showBackButton
       style={mobileHeaderSticky}

package/src/app/(main)/chat/settings/features/HeaderContent.tsx

@@ -1,12 +1,12 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { Button, Dropdown, MenuProps } from 'antd';
-import { useResponsive } from 'antd-style';
 import { HardDriveDownload } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { configService } from '@/services/config';
+import { useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
 import SubmitAgentButton from './SubmitAgentButton';
@@ -15,7 +15,7 @@ export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ moda
   const { t } = useTranslation('setting');
   const id = useSessionStore((s) => s.activeId);
 
-  const { mobile } = useResponsive();
+  const mobile = useServerConfigStore((s) => s.isMobile);
 
   const items = useMemo<MenuProps['items']>(
     () => [

package/src/app/(main)/chat/settings/features/SubmitAgentButton/index.tsx

@@ -1,17 +1,17 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { Button } from 'antd';
-import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useServerConfigStore } from '@/store/serverConfig';
 
 import SubmitAgentModal from './SubmitAgentModal';
 
 const SubmitAgentButton = memo<{ modal?: boolean }>(({ modal }) => {
   const { t } = useTranslation('setting');
-  const { mobile } = useResponsive();
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (

package/src/app/(main)/market/@detail/features/Header.tsx

@@ -8,8 +8,8 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import { SESSION_CHAT_URL } from '@/const/url';
-import { useIsMobile } from '@/hooks/useIsMobile';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
+import { useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
 import { useStyles } from './style';
@@ -29,7 +29,7 @@ const Header = memo(() => {
   const { meta, createAt, author, homepage, config } = agentItem;
   const { title, description, tags } = meta;
 
-  const isMobile = useIsMobile();
+  const isMobile = useServerConfigStore((s) => s.isMobile);
 
   const handleAddAgentAndConverse = async () => {
     if (!agentItem) return;

package/src/components/Cell/Divider.tsx

@@ -4,11 +4,11 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
 const useStyles = createStyles(
-  ({ css, token, isDarkMode }) => css`
+  ({ css, token }) => css`
     flex: none;
     width: 100%;
     height: 6px;
-    background: ${isDarkMode ? token.colorBgContainer : token.colorBgLayout};
+    background: ${token.colorFillTertiary};
   `,
 );
 

package/src/components/Cell/index.tsx

@@ -5,7 +5,7 @@ import { ReactNode, memo } from 'react';
 
 const { Item } = List;
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   container: css`
     position: relative;
 
@@ -13,7 +13,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     padding: 16px !important;
 
-    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
+    background: ${token.colorBgLayout};
     border-radius: 0;
   `,
 }));

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useQueryState } from 'nuqs';
-import { memo, useEffect } from 'react';
+import { memo, useLayoutEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
 import { useChatStore } from '@/store/chat';
@@ -14,7 +14,7 @@ const ChatHydration = memo(() => {
   const [topic, setTopic] = useQueryState('topic', { history: 'replace', throttleMs: 500 });
   useStoreUpdater('activeTopicId', topic);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const unsubscribe = useChatStore.subscribe(
       (s) => s.activeTopicId,
       (state) => {

package/src/const/session.ts

@@ -5,6 +5,8 @@ import { merge } from '@/utils/merge';
 
 export const INBOX_SESSION_ID = 'inbox';
 
+export const WELCOME_GUIDE_CHAT_ID = 'welcome';
+
 export const DEFAULT_AGENT_LOBE_SESSION: LobeAgentSession = {
   config: DEFAULT_AGENT_CONFIG,
   createdAt: Date.now(),

package/src/const/url.ts

@@ -1,3 +1,4 @@
+import qs from 'query-string';
 import urlJoin from 'url-join';
 
 import { withBasePath } from '@/utils/basePath';
@@ -40,7 +41,10 @@ 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}`;
+  qs.stringifyUrl({
+    query: mobile ? { session: id, showMobileWorkspace: mobile } : { session: id },
+    url: '/chat',
+  });
 
 export const imageUrl = (filename: string) => withBasePath(`/images/${filename}`);
 

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

@@ -3,22 +3,20 @@
 import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
 import { Input, Switch } from 'antd';
 import { useThemeMode } from 'antd-style';
-import { debounce } from 'lodash-es';
 import { LayoutList, MessagesSquare } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
 
 import { useStore } from '../store';
+import { useAgentSyncSettings } from '../useSyncAgemtSettings';
 
 const AgentChat = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
   const { isDarkMode } = useThemeMode();
-
   const [
     displayMode,
     enableAutoCreateTopic,
@@ -33,7 +31,7 @@ const AgentChat = memo(() => {
     s.setAgentConfig,
   ]);
 
-  useSyncSettings(form);
+  useAgentSyncSettings(form);
 
   const chat: ItemGroup = {
     children: [
@@ -125,7 +123,7 @@ const AgentChat = memo(() => {
       form={form}
       items={[chat]}
       itemsType={'group'}
-      onValuesChange={debounce(updateConfig, 100)}
+      onValuesChange={updateConfig}
       variant={'pure'}
       {...FORM_STYLE}
     />

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

@@ -6,7 +6,7 @@ import isEqual from 'fast-deep-equal';
 import { isString } from 'lodash-es';
 import { Wand2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
@@ -77,60 +77,57 @@ const AgentMeta = memo(() => {
     };
   });
 
-  const metaData: ItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: (
-            <EmojiPicker
-              backgroundColor={meta.backgroundColor}
-              locale={locale}
-              onChange={(avatar) => updateMeta({ avatar })}
-              value={meta.avatar}
-            />
-          ),
-          label: t('settingAgent.avatar.title'),
-          minWidth: undefined,
-        },
-        {
-          children: (
-            <BackgroundSwatches
-              backgroundColor={meta.backgroundColor}
-              onChange={(backgroundColor) => updateMeta({ backgroundColor })}
-            />
-          ),
-          label: t('settingAgent.backgroundColor.title'),
-          minWidth: undefined,
-        },
-        ...autocompleteItems,
-      ],
-      extra: (
-        <Tooltip
-          title={
-            !hasSystemRole
-              ? t('autoGenerateTooltipDisabled', { ns: 'common' })
-              : t('autoGenerateTooltip', { ns: 'common' })
-          }
-        >
-          <Button
-            disabled={!hasSystemRole}
-            icon={<Icon icon={Wand2} />}
-            loading={Object.values(loading).some((i) => !!i)}
-            onClick={(e: any) => {
-              e.stopPropagation();
+  const metaData: ItemGroup = {
+    children: [
+      {
+        children: (
+          <EmojiPicker
+            backgroundColor={meta.backgroundColor}
+            locale={locale}
+            onChange={(avatar) => updateMeta({ avatar })}
+            value={meta.avatar}
+          />
+        ),
+        label: t('settingAgent.avatar.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <BackgroundSwatches
+            backgroundColor={meta.backgroundColor}
+            onChange={(backgroundColor) => updateMeta({ backgroundColor })}
+          />
+        ),
+        label: t('settingAgent.backgroundColor.title'),
+        minWidth: undefined,
+      },
+      ...autocompleteItems,
+    ],
+    extra: (
+      <Tooltip
+        title={
+          !hasSystemRole
+            ? t('autoGenerateTooltipDisabled', { ns: 'common' })
+            : t('autoGenerateTooltip', { ns: 'common' })
+        }
+      >
+        <Button
+          disabled={!hasSystemRole}
+          icon={<Icon icon={Wand2} />}
+          loading={Object.values(loading).some((i) => !!i)}
+          onClick={(e: any) => {
+            e.stopPropagation();
 
-              autocompleteAllMeta(true);
-            }}
-            size={'small'}
-          >
-            {t('autoGenerate', { ns: 'common' })}
-          </Button>
-        </Tooltip>
-      ),
-      title: t('settingAgent.title'),
-    }),
-    [autocompleteItems, meta],
-  );
+            autocompleteAllMeta(true);
+          }}
+          size={'small'}
+        >
+          {t('autoGenerate', { ns: 'common' })}
+        </Button>
+      </Tooltip>
+    ),
+    title: t('settingAgent.title'),
+  };
 
   return <Form items={[metaData]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />;
 });

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

@@ -6,10 +6,10 @@ import { debounce } from 'lodash-es';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 
 import { useStore } from '../store';
+import { useAgentSyncSettings } from '../useSyncAgemtSettings';
 import ModelSelect from './ModelSelect';
 
 const AgentModal = memo(() => {
@@ -21,7 +21,7 @@ const AgentModal = memo(() => {
     s.setAgentConfig,
   ]);
 
-  useSyncSettings(form);
+  useAgentSyncSettings(form);
 
   const model: ItemGroup = {
     children: [

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

@@ -2,11 +2,10 @@
 
 import { VoiceList } from '@lobehub/tts';
 import { Form, ItemGroup } from '@lobehub/ui';
-import { Form as AFrom, Select, Switch } from 'antd';
-import isEqual from 'fast-deep-equal';
+import { Select, Switch } from 'antd';
 import { debounce } from 'lodash-es';
 import { Mic } from 'lucide-react';
-import { memo, useEffect } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
@@ -14,6 +13,7 @@ import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
 import { useStore } from '../store';
+import { useAgentSyncSettings } from '../useSyncAgemtSettings';
 import SelectWithTTSPreview from './SelectWithTTSPreview';
 import { ttsOptions } from './options';
 
@@ -22,21 +22,23 @@ const { openaiVoiceOptions, localeOptions } = VoiceList;
 
 const AgentTTS = memo(() => {
   const { t } = useTranslation('setting');
-  const updateConfig = useStore((s) => s.setAgentConfig);
-  const [form] = AFrom.useForm();
+  const [form] = Form.useForm();
   const voiceList = useUserStore((s) => {
     const locale = settingsSelectors.currentLanguage(s);
     return (all?: boolean) => new VoiceList(all ? undefined : locale);
   });
-  const config = useStore((s) => s.config, isEqual);
+  const [showAllLocaleVoice, ttsService, updateConfig] = useStore((s) => [
+    s.config.tts.showAllLocaleVoice,
+    s.config.tts.ttsService,
+    s.setAgentConfig,
+  ]);
 
-  useEffect(() => {
-    form.setFieldsValue(config);
-  }, [config]);
+  useAgentSyncSettings(form);
 
-  const showAllLocaleVoice = config.tts.showAllLocaleVoice;
-
-  const { edgeVoiceOptions, microsoftVoiceOptions } = voiceList(showAllLocaleVoice);
+  const { edgeVoiceOptions, microsoftVoiceOptions } = useMemo(
+    () => voiceList(showAllLocaleVoice),
+    [showAllLocaleVoice],
+  );
 
   const tts: ItemGroup = {
     children: [
@@ -49,7 +51,7 @@ const AgentTTS = memo(() => {
       {
         children: <Switch />,
         desc: t('settingTTS.showAllLocaleVoice.desc'),
-        hidden: config.tts.ttsService === 'openai',
+        hidden: ttsService === 'openai',
         label: t('settingTTS.showAllLocaleVoice.title'),
         minWidth: undefined,
         name: [TTS_SETTING_KEY, 'showAllLocaleVoice'],
@@ -58,7 +60,7 @@ const AgentTTS = memo(() => {
       {
         children: <SelectWithTTSPreview options={openaiVoiceOptions} server={'openai'} />,
         desc: t('settingTTS.voice.desc'),
-        hidden: config.tts.ttsService !== 'openai',
+        hidden: ttsService !== 'openai',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'openai'],
       },
@@ -66,7 +68,7 @@ const AgentTTS = memo(() => {
         children: <SelectWithTTSPreview options={edgeVoiceOptions} server={'edge'} />,
         desc: t('settingTTS.voice.desc'),
         divider: false,
-        hidden: config.tts.ttsService !== 'edge',
+        hidden: ttsService !== 'edge',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'edge'],
       },
@@ -74,7 +76,7 @@ const AgentTTS = memo(() => {
         children: <SelectWithTTSPreview options={microsoftVoiceOptions} server={'microsoft'} />,
         desc: t('settingTTS.voice.desc'),
         divider: false,
-        hidden: config.tts.ttsService !== 'microsoft',
+        hidden: ttsService !== 'microsoft',
         label: t('settingTTS.voice.title'),
         name: [TTS_SETTING_KEY, 'voice', 'microsoft'],
       },

package/src/features/AgentSetting/useSyncAgemtSettings.ts

@@ -0,0 +1,14 @@
+import { FormInstance } from 'antd/es/form/hooks/useForm';
+import isEqual from 'fast-deep-equal';
+import { useLayoutEffect } from 'react';
+
+import { useStore } from './store';
+
+export const useAgentSyncSettings = (form: FormInstance) => {
+  const config = useStore((s) => s.config, isEqual);
+  useLayoutEffect(() => {
+    form.setFieldsValue(config);
+  }, [config]);
+
+  return config;
+};

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -4,10 +4,11 @@ import { createStyles } from 'antd-style';
 import type { ItemType } from 'antd/es/menu/hooks/useItems';
 import isEqual from 'fast-deep-equal';
 import { ArrowRight, Blocks, Store, ToyBrick } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useWorkspaceModal } from '@/app/(main)/chat/(workspace)/features/useWorkspaceModal';
 import PluginStore from '@/features/PluginStore';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
@@ -45,7 +46,7 @@ const Tools = memo(() => {
         .filter((i) => !builtinList.some((b) => b.identifier === i)).length,
   );
 
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useWorkspaceModal();
   const { styles } = useStyles();
 
   const model = useAgentStore(agentSelectors.currentAgentModel);

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -63,7 +63,7 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
   const agentList = useMarketStore((s) => s.agentList, isEqual);
   const { styles } = useStyles();
 
-  const agentLength = mobile ? 3 : 4;
+  const agentLength = mobile ? 2 : 4;
 
   const loadingCards = Array.from({ length: agentLength }).map((_, index) => (
     <Flexbox className={styles.card} key={index}>

package/src/features/Conversation/components/InboxWelcome/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import { useGreeting } from '@/hooks/useGreeting';
-import { useIsMobile } from '@/hooks/useIsMobile';
+import { useServerConfigStore } from '@/store/serverConfig';
 
 import AgentsSuggest from './AgentsSuggest';
 import QuestionSuggest from './QuestionSuggest';
@@ -42,7 +42,7 @@ const useStyles = createStyles(({ css, responsive }) => ({
 const InboxWelcome = memo(() => {
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
-  const mobile = useIsMobile();
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const greeting = useGreeting();
 
   return (