@lobehub/chat 0.155.4 → 0.155.5

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/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 (

package/src/features/Conversation/components/SkeletonList.tsx

@@ -1,13 +1,20 @@
+'use client';
+
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
-  user: css`
+  message: css`
     display: flex;
+    gap: 12px;
+    .${prefixCls}-skeleton-header {
+      padding: 0;
+    }
+  `,
+  user: css`
     flex-direction: row-reverse;
-    gap: 16px;
 
     .${prefixCls}-skeleton-paragraph {
       display: flex;
@@ -20,18 +27,24 @@ interface SkeletonListProps {
   mobile?: boolean;
 }
 const SkeletonList = memo<SkeletonListProps>(({ mobile }) => {
-  const { styles } = useStyles();
+  const { cx, styles } = useStyles();
 
   return (
-    <Flexbox gap={24} padding={12} style={{ marginTop: 24 + (mobile ? 0 : 64) }}>
+    <Flexbox gap={24} padding={mobile ? 8 : 12} style={{ marginTop: 24 + (mobile ? 0 : 64) }}>
+      <Skeleton
+        active
+        avatar={{ size: mobile ? 32 : 40 }}
+        className={styles.message}
+        paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }}
+        title={false}
+      />
       <Skeleton
         active
-        avatar={{ size: 40 }}
-        className={styles.user}
-        paragraph={{ width: ['50%', '30%'] }}
+        avatar={{ size: mobile ? 32 : 40 }}
+        className={cx(styles.message, styles.user)}
+        paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }}
         title={false}
       />
-      <Skeleton active avatar={{ size: 40 }} paragraph={{ width: ['50%', '30%'] }} title={false} />
     </Flexbox>
   );
 });

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

@@ -1,11 +1,13 @@
+'use client';
+
 import isEqual from 'fast-deep-equal';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
+import { WELCOME_GUIDE_CHAT_ID } from '@/const/session';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { isMobileScreen } from '@/utils/screen';
 
 import { useInitConversation } from '../../hooks/useInitConversation';
 import AutoScroll from '../AutoScroll';
@@ -13,26 +15,11 @@ import Item from '../ChatItem';
 import InboxWelcome from '../InboxWelcome';
 import SkeletonList from '../SkeletonList';
 
-const WELCOME_ID = 'welcome';
-
-const itemContent = (index: number, id: string) => {
-  const isMobile = isMobileScreen();
-
-  if (id === WELCOME_ID) return <InboxWelcome />;
-
-  return index === 0 ? (
-    <div style={{ height: 24 + (isMobile ? 0 : 64) }} />
-  ) : (
-    <Item id={id} index={index - 1} />
-  );
-};
-
 interface VirtualizedListProps {
   mobile?: boolean;
 }
 const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
   useInitConversation();
-
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const [atBottom, setAtBottom] = useState(true);
   const [isScrolling, setIsScrolling] = useState(false);
@@ -44,7 +31,9 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
 
   const data = useChatStore((s) => {
     const showInboxWelcome = chatSelectors.showInboxWelcome(s);
-    const ids = showInboxWelcome ? [WELCOME_ID] : chatSelectors.currentChatIDsWithGuideMessage(s);
+    const ids = showInboxWelcome
+      ? [WELCOME_GUIDE_CHAT_ID]
+      : chatSelectors.currentChatIDsWithGuideMessage(s);
     return ['empty', ...ids];
   }, isEqual);
 
@@ -65,6 +54,19 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
   // overscan should be 1.5 times the height of the window
   const overscan = typeof window !== 'undefined' ? window.innerHeight * 1.5 : 0;
 
+  const itemContent = useCallback(
+    (index: number, id: string) => {
+      if (id === WELCOME_GUIDE_CHAT_ID) return <InboxWelcome />;
+
+      return index === 0 ? (
+        <div style={{ height: 24 + (mobile ? 0 : 64) }} />
+      ) : (
+        <Item id={id} index={index - 1} />
+      );
+    },
+    [mobile],
+  );
+
   return chatLoading ? (
     <SkeletonList mobile={mobile} />
   ) : (

package/src/features/Conversation/index.tsx

@@ -1,49 +1,30 @@
-import { createStyles } from 'antd-style';
-import { ReactNode, Suspense, lazy, memo } from 'react';
+import { Suspense, lazy } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ChatHydration from '@/components/StoreHydration/ChatHydration';
-
 import SkeletonList from './components/SkeletonList';
 
 const ChatList = lazy(() => import('./components/VirtualizedList'));
 
-const useStyles = createStyles(
-  ({ css, responsive }) => css`
-    position: relative;
-    overflow-y: auto;
-    height: 100%;
-
-    ${responsive.mobile} {
-      width: 100%;
-    }
-  `,
-);
-
 interface ConversationProps {
-  chatInput: ReactNode;
   mobile?: boolean;
 }
 
-const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
-  const { styles } = useStyles();
-
+const Conversation = ({ mobile }: ConversationProps) => {
   return (
     <Flexbox
       flex={1}
-      height={'100%'}
-      // `relative` is required, ChatInput's absolute position needs it
-      style={{ position: 'relative' }}
+      style={{
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        position: 'relative',
+      }}
+      width={'100%'}
     >
-      <div className={styles}>
-        <Suspense fallback={<SkeletonList mobile={mobile} />}>
-          <ChatList mobile={mobile} />
-        </Suspense>
-      </div>
-      {chatInput}
-      <ChatHydration />
+      <Suspense fallback={<SkeletonList mobile={mobile} />}>
+        <ChatList mobile={mobile} />
+      </Suspense>
     </Flexbox>
   );
-});
+};
 
 export default Conversation;

package/src/features/PluginStore/InstalledPluginList.tsx

@@ -1,10 +1,11 @@
 import { SearchBar } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { memo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
 
+import { useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
@@ -14,39 +15,45 @@ import PluginItem from './PluginItem';
 export const InstalledPluginList = memo(() => {
   const { t } = useTranslation('plugin');
   const [keywords, setKeywords] = useState<string>();
-  const { mobile } = useResponsive();
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const installedPlugins = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
 
+  const filteredPluginList = useMemo(
+    () =>
+      installedPlugins.filter((item) =>
+        [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
+          .filter(Boolean)
+          .join('')
+          .toLowerCase()
+          .includes((keywords || '')?.toLowerCase()),
+      ),
+    [installedPlugins, keywords],
+  );
+
   return (
     <>
-      <Flexbox align={'center'} gap={16} horizontal justify={'space-between'}>
+      <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
         <Flexbox flex={1}>
           <SearchBar
             allowClear
             onChange={(e) => setKeywords(e.target.value)}
             placeholder={t('store.placeholder')}
+            style={{ flex: 1, width: '100%' }}
             type={mobile ? 'block' : 'ghost'}
             value={keywords}
           />
         </Flexbox>
-        <Flexbox gap={8} horizontal>
-          <AddPluginButton />
-        </Flexbox>
-      </Flexbox>
-
-      <Flexbox gap={24}>
-        {installedPlugins
-          .filter((item) =>
-            [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
-              .filter(Boolean)
-              .join('')
-              .toLowerCase()
-              .includes((keywords || '')?.toLowerCase()),
-          )
-          .map((i) => (
-            <PluginItem {...i} key={i.identifier} />
-          ))}
+        <AddPluginButton />
       </Flexbox>
+      <Virtuoso
+        itemContent={(index) => {
+          const item = filteredPluginList[index];
+          return <PluginItem key={item.identifier} {...item} />;
+        }}
+        overscan={400}
+        style={{ height: 500, marginInline: -16 }}
+        totalCount={filteredPluginList.length}
+      />
     </>
   );
 });

package/src/features/PluginStore/OnlineList.tsx

@@ -1,6 +1,5 @@
 import { Icon, SearchBar } from '@lobehub/ui';
 import { Empty } from 'antd';
-import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ServerCrash } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
@@ -9,6 +8,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso } from 'react-virtuoso';
 
 import AddPluginButton from '@/features/PluginStore/AddPluginButton';
+import { useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
 
@@ -18,7 +18,7 @@ import PluginItem from './PluginItem';
 export const OnlineList = memo(() => {
   const { t } = useTranslation('plugin');
   const [keywords, setKeywords] = useState<string>();
-  const { mobile } = useResponsive();
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const pluginStoreList = useToolStore((s) => {
     const custom = pluginSelectors.installedCustomPluginMetaList(s);
     const store = pluginStoreSelectors.onlinePluginStore(s);
@@ -58,7 +58,6 @@ export const OnlineList = memo(() => {
         </Flexbox>
         <AddPluginButton />
       </Flexbox>
-
       {isLoading ? (
         <Loading />
       ) : isEmpty ? (
@@ -76,15 +75,10 @@ export const OnlineList = memo(() => {
         <Virtuoso
           itemContent={(index) => {
             const item = filteredPluginList[index];
-
-            return (
-              <Flexbox key={item.identifier} paddingBlock={12}>
-                <PluginItem {...item} />
-              </Flexbox>
-            );
+            return <PluginItem key={item.identifier} {...item} />;
           }}
           overscan={400}
-          style={{ height: 500 }}
+          style={{ height: 500, marginInline: -16 }}
           totalCount={filteredPluginList.length}
         />
       )}