@lobehub/chat 0.142.3 → 0.142.5

package/CHANGELOG.md

@@ -2,6 +2,49 @@
 
 # Changelog
 
+### [Version 0.142.5](https://github.com/lobehub/lobe-chat/compare/v0.142.4...v0.142.5)
+
+<sup>Released on **2024-03-26**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix mobile click, fix mobile click issue.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix mobile click ([3775b28](https://github.com/lobehub/lobe-chat/commit/3775b28))
+- **misc**: Fix mobile click issue, closes [#1744](https://github.com/lobehub/lobe-chat/issues/1744) ([a6b1234](https://github.com/lobehub/lobe-chat/commit/a6b1234))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.142.4](https://github.com/lobehub/lobe-chat/compare/v0.142.3...v0.142.4)
+
+<sup>Released on **2024-03-26**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.142.3](https://github.com/lobehub/lobe-chat/compare/v0.142.2...v0.142.3)
 
 <sup>Released on **2024-03-26**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.142.3",
+  "version": "0.142.5",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/chat/(desktop)/features/ChatHeader/HeaderAction.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 
-import SettingButton from '../../../features/ChatHeader/SettingButton';
-import ShareButton from '../../../features/ChatHeader/ShareButton';
+import SettingButton from '../../../features/SettingButton';
+import ShareButton from '../../../features/ShareButton';
 
 const HeaderAction = memo(() => {
   const { t } = useTranslation('chat');

package/src/app/chat/(desktop)/index.tsx

@@ -1,33 +1,22 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import { FC, memo } from 'react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ResponsiveContainer from '@/components/ResponsiveContainer';
-import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
 
-import PageTitle from '../features/PageTitle';
 import ChatHeader from './features/ChatHeader';
 import Conversation from './features/Conversation';
 import SideBar from './features/SideBar';
-import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), {
-  loading: MobileSwitchLoading,
-  ssr: false,
-}) as FC;
-
-const DesktopPage = memo(() => (
-  <ResponsiveContainer Mobile={Mobile}>
-    <Layout>
-      <PageTitle />
-      <ChatHeader />
-      <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
-        <Conversation />
-        <SideBar />
-      </Flexbox>
-    </Layout>
-  </ResponsiveContainer>
+const Desktop = memo(() => (
+  <>
+    <ChatHeader />
+    <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
+      <Conversation />
+      <SideBar />
+    </Flexbox>
+  </>
 ));
-export default DesktopPage;
+
+export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

package/src/app/chat/(mobile)/features/SessionHeader.tsx

@@ -10,6 +10,7 @@ import SyncStatusInspector from '@/features/SyncStatusInspector';
 import { useGlobalStore } from '@/store/global';
 import { commonSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`
@@ -43,6 +44,7 @@ const Header = memo(() => {
           size={MOBILE_HEADER_ICON_SIZE}
         />
       }
+      style={mobileHeaderSticky}
     />
   );
 });

package/src/app/chat/(mobile)/index.tsx

@@ -3,25 +3,22 @@
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-import PageTitle from '../features/PageTitle';
 import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
 
 const ChatMobilePage = memo(() => {
   const router = useRouter();
+
   useEffect(() => {
     router.prefetch('/chat/mobile');
     router.prefetch('/settings');
   }, []);
 
   return (
-    <AppLayoutMobile navBar={<SessionHeader />} showTabBar tabBarKey={SidebarTabKey.Chat}>
-      <PageTitle />
+    <>
+      <SessionHeader />
       <SessionList />
-    </AppLayoutMobile>
+    </>
   );
 });
 

package/src/app/chat/(mobile)/{features/ChatHeader.tsx → mobile/ChatHeader/index.tsx}

@@ -2,8 +2,8 @@ import { MobileNavBar } from '@lobehub/ui';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 
-import SettingButton from '../../features/ChatHeader/SettingButton';
-import ShareButton from '../../features/ChatHeader/ShareButton';
+import SettingButton from '../../../features/SettingButton';
+import ShareButton from '../../../features/ShareButton';
 import ChatHeaderTitle from './ChatHeaderTitle';
 
 const MobileHeader = memo(() => {

package/src/app/chat/(mobile)/mobile/page.tsx

@@ -4,13 +4,13 @@ import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ChatHeader from '@/app/chat/(mobile)/features/ChatHeader';
 import Conversation from '@/features/Conversation';
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
 import { useSessionStore } from '@/store/session';
 
+import SessionHydration from '../../components/SessionHydration';
 import TelemetryNotification from '../../features/TelemetryNotification';
 import ChatInput from '../features/ChatInput';
+import ChatHeader from './ChatHeader';
 
 const TopicList = dynamic(() => import('../features/TopicList'));
 
@@ -21,13 +21,15 @@ const Chat = memo(() => {
   useFetchSessions();
 
   return (
-    <AppLayoutMobile navBar={<ChatHeader />}>
+    <>
+      <ChatHeader />
       <Flexbox height={'calc(100% - 44px)'} horizontal>
         <Conversation chatInput={<ChatInput />} mobile />
         <TopicList />
         <TelemetryNotification mobile />
       </Flexbox>
-    </AppLayoutMobile>
+      <SessionHydration />
+    </>
   );
 });
 export default Chat;

package/src/app/chat/{(desktop)/features → _layout/Desktop}/SessionList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { DraggablePanelBody } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';

package/src/app/chat/{(desktop)/layout.desktop.tsx → _layout/Desktop/index.tsx}

@@ -3,14 +3,13 @@
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { SidebarTabKey } from '@/store/global/initialState';
+import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
 
-import ResponsiveSessionList from './features/SessionList';
+import ResponsiveSessionList from './SessionList';
 
-export default memo(({ children }: PropsWithChildren) => {
+const Desktop = memo(({ children }: PropsWithChildren) => {
   return (
-    <AppLayoutDesktop sidebarKey={SidebarTabKey.Chat}>
+    <>
       <ResponsiveSessionList />
       <Flexbox
         flex={1}
@@ -20,6 +19,8 @@ export default memo(({ children }: PropsWithChildren) => {
       >
         {children}
       </Flexbox>
-    </AppLayoutDesktop>
+    </>
   );
 });
+
+export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });

package/src/app/chat/_layout/Mobile/index.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+const MobileLayout = ({ children }: PropsWithChildren) => {
+  return children;
+};
+
+export default MobileLayout;

package/src/app/chat/components/SessionHydration/index.tsx

@@ -1,9 +1,8 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
-import { useRouter } from 'next/navigation';
 import { useQueryState } from 'nuqs';
-import { parseAsString } from 'nuqs/parsers';
+import { parseAsString } from 'nuqs/server';
 import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
@@ -16,10 +15,6 @@ const SessionHydration = memo(() => {
   const { mobile } = useResponsive();
   useStoreUpdater('isMobile', mobile);
 
-  const router = useRouter();
-  // TODO: 后续可以把 router 从 useSessionStore 移除
-  useStoreUpdater('router', router);
-
   // two-way bindings the url and session store
   const [session, setSession] = useQueryState(
     'session',

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

@@ -1,4 +1,3 @@
-import { useResponsive } from 'antd-style';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,24 +5,18 @@ import { useTranslation } from 'react-i18next';
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useSessionStore } from '@/store/session';
 
 import ListItem from '../ListItem';
 
 const Inbox = memo(() => {
   const { t } = useTranslation('chat');
-  const { mobile } = useResponsive();
-  const [activeId, switchSession] = useSessionStore((s) => [s.activeId, s.switchSession]);
+  const mobile = useIsMobile();
+  const activeId = useSessionStore((s) => s.activeId);
 
   return (
-    <Link
-      aria-label={t('inbox.title')}
-      href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
-      onClick={(e) => {
-        e.preventDefault();
-        switchSession(INBOX_SESSION_ID);
-      }}
-    >
+    <Link aria-label={t('inbox.title')} href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}>
       <ListItem
         active={activeId === INBOX_SESSION_ID}
         avatar={DEFAULT_INBOX_AVATAR}

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

@@ -24,11 +24,7 @@ interface SessionListProps {
   showAddButton?: boolean;
 }
 const SessionList = memo<SessionListProps>(({ dataSource, groupId, showAddButton = true }) => {
-  const [activeSession, switchSession, isInit] = useSessionStore((s) => [
-    s.activeSession,
-    s.switchSession,
-    sessionSelectors.isSessionListInit(s),
-  ]);
+  const isInit = useSessionStore((s) => sessionSelectors.isSessionListInit(s));
   const { styles } = useStyles();
 
   const { mobile } = useResponsive();
@@ -38,15 +34,7 @@ const SessionList = memo<SessionListProps>(({ dataSource, groupId, showAddButton
   ) : dataSource.length > 0 ? (
     dataSource.map(({ id }) => (
       <LazyLoad className={styles} key={id}>
-        <Link
-          aria-label={id}
-          href={SESSION_CHAT_URL(id, mobile)}
-          onClick={(e) => {
-            e.preventDefault();
-            if (mobile) switchSession(id);
-            else activeSession(id);
-          }}
-        >
+        <Link aria-label={id} href={SESSION_CHAT_URL(id, mobile)}>
           <SessionItem id={id} />
         </Link>
       </LazyLoad>

package/src/app/chat/features/{ChatHeader/ShareButton → ShareButton}/Preview.tsx

@@ -9,7 +9,7 @@ import ChatList from '@/features/Conversation/components/ChatList';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
-import PluginTag from '../../PluginTag';
+import PluginTag from '../PluginTag';
 import { useStyles } from './style';
 import { FieldType } from './type';
 

package/src/app/chat/layout.ts

@@ -0,0 +1,8 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const ChatLayout = ServerLayout({ Desktop, Mobile });
+
+export default ChatLayout;

package/src/app/chat/page.tsx

@@ -4,6 +4,7 @@ import DesktopPage from './(desktop)';
 import MobilePage from './(mobile)';
 import SessionHydration from './components/SessionHydration';
 import Migration from './features/Migration';
+import PageTitle from './features/PageTitle';
 
 const Page = () => {
   const mobile = isMobileDevice();
@@ -13,6 +14,7 @@ const Page = () => {
   return (
     <>
       <Migration>
+        <PageTitle />
         <Page />
       </Migration>
       <SessionHydration />

package/src/app/chat/settings/(desktop)/index.tsx

@@ -1,29 +1,23 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import { FC, memo } from 'react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
-import SessionHydration from '@/app/chat/components/SessionHydration';
-import ResponsiveContainer from '@/components/ResponsiveContainer';
-import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+import SafeSpacing from '@/components/SafeSpacing';
+import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
+import { HEADER_HEIGHT } from '@/const/layoutTokens';
 
 import EditPage from '../features/EditPage';
-import Layout from './layout.desktop';
+import Header from './Header';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), {
-  loading: MobileSwitchLoading,
-  ssr: false,
-}) as FC;
-
-const ChatSettings = memo(() => (
+const Desktop = memo(() => (
   <>
-    <ResponsiveContainer Mobile={Mobile}>
-      <Layout>
-        <EditPage />
-      </Layout>
-    </ResponsiveContainer>
-    <SessionHydration />
+    <Header />
+    <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'scroll' }}>
+      <SafeSpacing height={HEADER_HEIGHT - 16} />
+      <EditPage />
+    </Flexbox>
   </>
 ));
 
-export default ChatSettings;
+export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

package/src/app/chat/settings/(mobile)/{features/Header.tsx → Header.tsx}

@@ -3,9 +3,11 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import HeaderContent from '@/app/chat/settings/features/HeaderContent';
+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();
@@ -16,6 +18,7 @@ const Header = memo(() => {
       onBackClick={() => router.push(pathString('/chat/mobile', { search: location.search }))}
       right={<HeaderContent />}
       showBackButton
+      style={mobileHeaderSticky}
     />
   );
 });

package/src/app/chat/settings/(mobile)/index.tsx

@@ -3,12 +3,13 @@
 import { memo } from 'react';
 
 import EditPage from '../features/EditPage';
-import Layout from './layout.mobile';
+import Header from './Header';
 
 const ChatSettings = memo(() => (
-  <Layout>
+  <>
+    <Header />
     <EditPage />
-  </Layout>
+  </>
 ));
 
 export default ChatSettings;

package/src/app/home/Redirect.tsx

@@ -5,7 +5,6 @@ import { memo, useEffect } from 'react';
 
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
-import { useSessionStore } from '@/store/session';
 
 const checkHasConversation = async () => {
   const hasMessages = await messageService.hasMessages();
@@ -15,14 +14,11 @@ const checkHasConversation = async () => {
 
 const Redirect = memo(() => {
   const router = useRouter();
-  const [switchSession] = useSessionStore((s) => [s.switchSession]);
 
   useEffect(() => {
     checkHasConversation().then((hasData) => {
       if (hasData) {
         router.replace('/chat');
-
-        switchSession();
       } else {
         router.replace('/welcome');
       }

package/src/app/layout.tsx

@@ -1,35 +1,30 @@
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { ResolvingViewport } from 'next';
-import { SessionProvider } from 'next-auth/react';
 import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 import { isRtlLang } from 'rtl-detect';
 
 import Analytics from '@/components/Analytics';
-import { getServerConfig } from '@/config/server';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
+import AuthProvider from '@/layout/AuthProvider';
+import GlobalLayout from '@/layout/GlobalLayout';
 import GlobalProvider from '@/layout/GlobalProvider';
-import { API_ENDPOINTS } from '@/services/_url';
 import { isMobileDevice } from '@/utils/responsive';
 
-const { ENABLE_OAUTH_SSO = false } = getServerConfig();
-
 const RootLayout = async ({ children }: PropsWithChildren) => {
   const cookieStore = cookies();
 
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
   const direction = isRtlLang(lang?.value || DEFAULT_LANG) ? 'rtl' : 'ltr';
 
-  const content = ENABLE_OAUTH_SSO ? (
-    <SessionProvider basePath={API_ENDPOINTS.oauth}>{children}</SessionProvider>
-  ) : (
-    children
-  );
-
   return (
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
-        <GlobalProvider>{content}</GlobalProvider>
+        <GlobalProvider>
+          <AuthProvider>
+            <GlobalLayout>{children}</GlobalLayout>
+          </AuthProvider>
+        </GlobalProvider>
         <Analytics />
         <SpeedInsights />
       </body>

package/src/app/market/(desktop)/index.tsx

@@ -1,26 +1,18 @@
 'use client';
 
 import { SpotlightCard, SpotlightCardProps } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveContainer from '@/components/ResponsiveContainer';
-import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
 
 import AgentCard from '../features/AgentCard';
 import Index from '../index';
-import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), {
-  loading: MobileSwitchLoading,
-  ssr: false,
-}) as FC;
-
-export default memo(() => (
-  <ResponsiveContainer Mobile={Mobile}>
-    <Layout>
-      <Index />
-      <AgentCard CardRender={SpotlightCard as FC<SpotlightCardProps>} />
-    </Layout>
-  </ResponsiveContainer>
+const Desktop = memo(() => (
+  <>
+    <Index />
+    <AgentCard CardRender={SpotlightCard as FC<SpotlightCardProps>} />
+  </>
 ));
+
+export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

package/src/app/market/(mobile)/index.tsx

@@ -1,16 +1,21 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
-import AgentCard from '@/app/market/features/AgentCard';
-
+import AgentCard from '../features/AgentCard';
 import Index from '../index';
 import CardRender from './features/AgentCard';
-import Layout from './layout.mobile';
+
+const DetailModal = dynamic(() => import('./features/AgentDetail'), { ssr: false });
 
 export default memo(() => (
-  <Layout>
-    <Index />
-    <AgentCard CardRender={CardRender} mobile />
-  </Layout>
+  <>
+    <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
+      <Index />
+      <AgentCard CardRender={CardRender} mobile />{' '}
+    </Flexbox>
+    <DetailModal />
+  </>
 ));

package/src/app/market/_layout/Desktop/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { GridBackground } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
+import { PropsWithChildren, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
+import { MAX_WIDTH } from '@/const/layoutTokens';
+
+import Header from './Header';
+
+const SideBar = dynamic(() => import('./AgentDetail'));
+
+const useStyles = createStyles(({ css }) => ({
+  background: css`
+    width: 80%;
+    margin: -60px 0 -20px;
+  `,
+  title: css`
+    z-index: 2;
+    margin-top: 24px;
+    font-size: 56px;
+    font-weight: 800;
+  `,
+}));
+
+const Desktop = memo<PropsWithChildren>(({ children }) => {
+  const { theme, styles } = useStyles();
+
+  return (
+    <Flexbox flex={1} height={'100%'} id={'lobe-market-container'} style={{ position: 'relative' }}>
+      <Header />
+      <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
+        <Flexbox align={'center'} flex={1} style={{ overflow: 'scroll', padding: 16 }}>
+          <SafeSpacing />
+
+          <Flexbox gap={16} style={{ maxWidth: MAX_WIDTH, position: 'relative', width: '100%' }}>
+            <Center>
+              <h1 className={styles.title}>Find & Use The Best Agents</h1>
+              <GridBackground
+                animation
+                className={styles.background}
+                colorFront={theme.colorText}
+                random
+              />
+            </Center>
+            {children}
+          </Flexbox>
+        </Flexbox>
+        <SideBar />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });