@lobehub/chat 0.142.3 → 0.142.4

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [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.4",
   "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,12 @@ 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 TelemetryNotification from '../../features/TelemetryNotification';
 import ChatInput from '../features/ChatInput';
+import ChatHeader from './ChatHeader';
 
 const TopicList = dynamic(() => import('../features/TopicList'));
 
@@ -21,13 +20,14 @@ const Chat = memo(() => {
   useFetchSessions();
 
   return (
-    <AppLayoutMobile navBar={<ChatHeader />}>
+    <>
+      <ChatHeader />
       <Flexbox height={'calc(100% - 44px)'} horizontal>
         <Conversation chatInput={<ChatInput />} mobile />
         <TopicList />
         <TelemetryNotification mobile />
       </Flexbox>
-    </AppLayoutMobile>
+    </>
   );
 });
 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/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/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') });

package/src/app/market/_layout/Mobile/Header.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Logo, MobileNavBar } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
+
+import ShareAgentButton from '../../features/ShareAgentButton';
+
+const Header = memo(() => {
+  return (
+    <MobileNavBar
+      center={<Logo type={'text'} />}
+      right={<ShareAgentButton mobile />}
+      style={mobileHeaderSticky}
+    />
+  );
+});
+
+export default Header;

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

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

package/src/app/market/layout.ts

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

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

@@ -3,23 +3,21 @@
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveContainer from '@/components/ResponsiveContainer';
 import MobileSwitchLoading from '@/features/MobileSwitchLoading';
-import { SettingsTabs } from '@/store/global/initialState';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 import Common from '../common';
 import { SettingsCommonProps } from '../common/Common';
-import DesktopLayout from './layout.desktop';
 
 const Mobile: FC = dynamic(() => import('../(mobile)'), {
   loading: MobileSwitchLoading,
   ssr: false,
 }) as FC;
 
-export default memo<SettingsCommonProps>((props) => (
-  <ResponsiveContainer Mobile={Mobile}>
-    <DesktopLayout activeTab={SettingsTabs.Common}>
-      <Common {...props} />
-    </DesktopLayout>
-  </ResponsiveContainer>
-));
+const Desktop = memo<SettingsCommonProps>((props) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile /> : <Common {...props} />;
+});
+
+export default Desktop;

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

@@ -1 +1,53 @@
-export { default } from './mobile';
+'use client';
+
+import { Divider } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { CURRENT_VERSION } from '@/const/version';
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { useGlobalStore } from '@/store/global';
+import { commonSelectors } from '@/store/global/selectors';
+
+import SettingList from '../features/SettingList';
+import AvatarBanner from './features/AvatarBanner';
+import ExtraList from './features/ExtraList';
+
+const useStyles = createStyles(({ css, token }) => ({
+  divider: css`
+    height: 6px;
+    background: ${token.colorFillTertiary};
+  `,
+  footer: css`
+    font-size: 12px;
+    color: ${token.colorTextQuaternary};
+  `,
+}));
+
+const Setting = memo(() => {
+  const avatar = useGlobalStore(commonSelectors.userAvatar);
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox style={{ overflow: 'scroll' }}>
+      <AvatarBanner avatar={avatar}>
+        <Center style={{ marginTop: 32, position: 'absolute', zIndex: 2 }}>
+          <AvatarWithUpload size={88} />
+        </Center>
+      </AvatarBanner>
+      <div style={{ width: '100%' }}>
+        <SettingList />
+        <div className={styles.divider} />
+        <ExtraList />
+        <Center style={{ paddingInline: 64 }}>
+          <Divider>
+            <span className={styles.footer}>LobeChat v{CURRENT_VERSION}</span>
+          </Divider>
+        </Center>
+      </div>
+    </Flexbox>
+  );
+});
+
+export default Setting;