@lobehub/chat 0.83.9 → 0.83.10

package/src/layout/GlobalLayout/StoreHydration.tsx

@@ -1,9 +1,14 @@
+import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
 import { useGlobalStore } from '@/store/global';
 import { usePluginStore } from '@/store/plugin';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+import {
+  useEffectAfterSessionHydrated,
+  useOnFinishHydrationSession,
+  useSessionStore,
+} from '@/store/session';
 
 const StoreHydration = memo(() => {
   const router = useRouter();
@@ -22,6 +27,15 @@ const StoreHydration = memo(() => {
     store.setState({ router });
   });
 
+  const { mobile } = useResponsive();
+
+  useEffectAfterSessionHydrated(
+    (store) => {
+      store.setState({ isMobile: mobile });
+    },
+    [mobile],
+  );
+
   return null;
 });
 

package/src/layout/ResponsiveLayout.client.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+interface ServerResponsiveLayoutProps {
+  Desktop: (props: PropsWithChildren) => ReactNode;
+  Mobile: (props: PropsWithChildren) => ReactNode;
+  children?: ReactNode;
+}
+const ResponsiveLayout = ({ children, Desktop, Mobile }: ServerResponsiveLayoutProps) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+};
+
+export default ResponsiveLayout;

package/src/{components/ResponsiveLayout.tsx → layout/ResponsiveLayout.server.tsx}

@@ -1,13 +1,14 @@
 import { PropsWithChildren, ReactNode } from 'react';
 
+import { isMobileDevice } from '@/utils/responsive';
+
 interface ServerResponsiveLayoutProps {
   Desktop: (props: PropsWithChildren) => ReactNode;
   Mobile: (props: PropsWithChildren) => ReactNode;
   children?: ReactNode;
-  isMobile: () => boolean;
 }
-const ResponsiveLayout = ({ children, Desktop, Mobile, isMobile }: ServerResponsiveLayoutProps) => {
-  const mobile = isMobile();
+const ResponsiveLayout = ({ children, Desktop, Mobile }: ServerResponsiveLayoutProps) => {
+  const mobile = isMobileDevice();
 
   return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
 };

package/src/store/session/slices/session/initialState.ts

@@ -33,7 +33,7 @@ export const initLobeSession: LobeAgentSession = {
 
 export const initInbox = merge({}, initLobeSession, {
   config: {
-    systemRole: '你是一名 AI 助理',
+    systemRole: '',
   } as LobeAgentConfig,
   id: 'inbox',
   meta: {
@@ -42,7 +42,7 @@ export const initInbox = merge({}, initLobeSession, {
 } as Partial<LobeAgentSession>);
 
 export const initialSessionState: SessionState = {
-  activeId: undefined,
+  activeId: 'inbox',
   inbox: initInbox,
   isMobile: false,
   searchKeywords: '',

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

@@ -1,14 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import Mobile from '../../../components/ChatHeader/Mobile';
-import Desktop from './Desktop';
-
-const Header = memo(() => {
-  const { mobile } = useResponsive();
-  const Render = mobile ? Mobile : Desktop;
-
-  return <Render />;
-});
-
-export default Header;

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

@@ -1,22 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo, useState } from 'react';
-
-import { ChatInputContent } from '../../../components/ChatInput';
-import Mobile from '../../../components/ChatInput/Mobile';
-import Desktop from './Desktop';
-
-const ChatInput = () => {
-  const [expand, setExpand] = useState<boolean>(false);
-
-  const { mobile } = useResponsive();
-
-  const Render = mobile ? Mobile : Desktop;
-
-  return (
-    <Render expand={expand}>
-      <ChatInputContent expand={expand} onExpandChange={setExpand} />
-    </Render>
-  );
-};
-
-export default memo(ChatInput);

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

@@ -1,14 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import Mobile from '../../../(mobile)/features/SessionHeader';
-import Desktop from './Desktop';
-
-const Header = memo(() => {
-  const { mobile } = useResponsive();
-  const Render = mobile ? Mobile : Desktop;
-
-  return <Render />;
-});
-
-export default Header;

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

@@ -1,20 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import { SessionListContent } from '../../../components/SessionList';
-import Mobile from '../../../components/SessionList/Mobile';
-import Desktop from './Desktop';
-
-const ResponsiveSessionList = memo(() => {
-  const { mobile } = useResponsive();
-
-  const Wrapper = mobile ? Mobile : Desktop;
-
-  return (
-    <Wrapper>
-      <SessionListContent />
-    </Wrapper>
-  );
-});
-
-export default ResponsiveSessionList;

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

@@ -1,20 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import { InspectorContent } from '../../../components/Inspector';
-import Mobile from '../../../components/Inspector/Mobile';
-import Desktop from './Desktop';
-
-const SideBar = memo(() => {
-  const { mobile } = useResponsive();
-
-  const Render = mobile ? Mobile : Desktop;
-
-  return (
-    <Render>
-      <InspectorContent />
-    </Render>
-  );
-});
-
-export default SideBar;

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

@@ -1,25 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-
-import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
-
-import MobileLayout from '../../(mobile)/layout';
-import DesktopLayout from './Desktop';
-
-const Chat = memo<PropsWithChildren>(({ children }) => {
-  const { mobile } = useResponsive();
-
-  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
-
-  useEffectAfterSessionHydrated(
-    (store) => {
-      store.setState({ isMobile: mobile });
-    },
-    [mobile],
-  );
-
-  return <RenderLayout>{children}</RenderLayout>;
-});
-export default Chat;

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

@@ -1,12 +0,0 @@
-import { memo } from 'react';
-
-import { InspectorContent } from '../../components/Inspector';
-import Mobile from '../../components/Inspector/Mobile';
-
-const Topics = memo(() => (
-  <Mobile>
-    <InspectorContent />
-  </Mobile>
-));
-
-export default Topics;

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

@@ -1,15 +0,0 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
-
-import { useEffectAfterSessionHydrated } from '@/store/session';
-
-const ChatMobileLayout = memo<PropsWithChildren>(({ children }) => {
-  useEffectAfterSessionHydrated((store) => {
-    store.setState({ isMobile: true });
-  }, []);
-
-  return children;
-});
-
-export default ChatMobileLayout;

package/src/app/chat/components/ChatHeader/Mobile.tsx

@@ -1,54 +0,0 @@
-import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { LayoutList, Settings } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
-import { pathString } from '@/utils/url';
-
-import ShareButton from './ShareButton';
-
-const MobileHeader = memo(() => {
-  const { t } = useTranslation('common');
-  const router = useRouter();
-
-  const [isInbox, title] = useSessionStore((s) => [
-    sessionSelectors.isInboxSession(s),
-    agentSelectors.currentAgentTitle(s),
-  ]);
-
-  const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
-
-  const displayTitle = isInbox ? t('inbox.title') : title;
-
-  return (
-    <MobileNavBar
-      center={<MobileNavBarTitle title={displayTitle} />}
-      onBackClick={() => router.push('/chat')}
-      right={
-        <>
-          <ShareButton />
-          <ActionIcon
-            icon={LayoutList}
-            onClick={() => toggleConfig()}
-            size={MOBILE_HEADER_ICON_SIZE}
-          />
-          {!isInbox && (
-            <ActionIcon
-              icon={Settings}
-              onClick={() => router.push(pathString('/chat/settings', { hash: location.hash }))}
-              size={MOBILE_HEADER_ICON_SIZE}
-            />
-          )}
-        </>
-      }
-      showBackButton
-    />
-  );
-});
-
-export default MobileHeader;

package/src/app/chat/components/ChatInput/Mobile.tsx

@@ -1,35 +0,0 @@
-import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
-
-import SafeSpacing from '@/components/SafeSpacing';
-import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
-
-const useStyles = createStyles(
-  ({ css, token }) => css`
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    width: 100vw;
-
-    background: ${token.colorBgLayout};
-  `,
-);
-
-interface ChatInputMobileLayoutProps {
-  children: ReactNode;
-  expand?: boolean;
-}
-
-const ChatInputMobileLayout = memo<ChatInputMobileLayoutProps>(({ children }) => {
-  const { styles } = useStyles();
-  return (
-    <>
-      <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
-      <div className={styles}>{children}</div>
-    </>
-  );
-});
-
-export default ChatInputMobileLayout;

package/src/app/chat/components/SessionList/Mobile.tsx

@@ -1,16 +0,0 @@
-import { ReactNode, memo } from 'react';
-
-import SessionSearchBar from '../../features/SessionSearchBar';
-
-const Sessions = memo<{ children: ReactNode }>(({ children }) => {
-  return (
-    <>
-      <div style={{ padding: '8px 16px' }}>
-        <SessionSearchBar />
-      </div>
-      {children}
-    </>
-  );
-});
-
-export default Sessions;

package/src/app/chat/layout.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import ResponsiveLayout from '@/components/ResponsiveLayout';
-import { isMobileDevice } from '@/utils/responsive';
-
-import Desktop from './(desktop)/layout';
-import Mobile from './(mobile)/layout';
-
-const Layout = ({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={isMobileDevice}>
-    {children}
-  </ResponsiveLayout>
-);
-
-export default Layout;

package/src/app/chat/settings/layout.tsx

@@ -1,14 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { isMobileDevice } from '@/utils/responsive';
-
-import Desktop from './(desktop)/layout.desktop';
-import Mobile from './(mobile)/layout.mobile';
-
-const Layout = ({ children }: PropsWithChildren) => {
-  const mobile = isMobileDevice();
-
-  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
-};
-
-export default Layout;

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

@@ -1,16 +0,0 @@
-import { memo } from 'react';
-
-import Mobile from '@/app/market/components/AgentDetail/Mobile';
-import ResponsiveLayout from '@/components/ResponsiveLayout';
-import { useIsMobile } from '@/hooks/useIsMobile';
-
-import { AgentDetailContent } from '../../components/AgentDetail';
-import Desktop from './Desktop';
-
-const AgentDetail = memo(() => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile}>
-    <AgentDetailContent />
-  </ResponsiveLayout>
-));
-
-export default AgentDetail;

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

@@ -1,13 +0,0 @@
-import { memo } from 'react';
-
-import ResponsiveLayout from '@/components/ResponsiveLayout';
-import { useIsMobile } from '@/hooks/useIsMobile';
-
-import Mobile from '../../(mobile)/Header';
-import Desktop from './Desktop';
-
-const Header = memo(() => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile} />
-));
-
-export default Header;

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

@@ -1,17 +0,0 @@
-'use client';
-
-import { PropsWithChildren } from 'react';
-
-import ResponsiveLayout from '@/components/ResponsiveLayout';
-import { useIsMobile } from '@/hooks/useIsMobile';
-
-import Mobile from '../../(mobile)/layout.mobile';
-import Desktop from './Desktop';
-
-const Market = ({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile}>
-    {children}
-  </ResponsiveLayout>
-);
-
-export default Market;

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

@@ -1,12 +0,0 @@
-import { memo } from 'react';
-
-import { AgentDetailContent } from '../components/AgentDetail';
-import Mobile from '../components/AgentDetail/Mobile';
-
-const AgentDetail = memo(() => (
-  <Mobile>
-    <AgentDetailContent />
-  </Mobile>
-));
-
-export default AgentDetail;

package/src/app/market/layout.tsx

@@ -1,13 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import ResponsiveLayout from '@/components/ResponsiveLayout';
-import { isMobileDevice } from '@/utils/responsive';
-
-import Desktop from './(desktop)/layout';
-import Mobile from './(mobile)/layout.mobile';
-
-export default ({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={isMobileDevice}>
-    {children}
-  </ResponsiveLayout>
-);

package/src/app/settings/features/Header/index.tsx

@@ -1,14 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-
-const Header = memo(() => {
-  const { mobile } = useResponsive();
-  const Render = mobile ? Mobile : Desktop;
-
-  return <Render />;
-});
-
-export default Header;

package/src/app/settings/layout.desktop/index.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { PropsWithChildren } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PageTitle from '@/components/PageTitle';
-import ResponsiveLayout from '@/components/ResponsiveLayout';
-import { useIsMobile } from '@/hooks/useIsMobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
-import MobileLayout from '../layout.mobile';
-import DesktopLayout from './Desktop';
-
-const Setting = ({ children }: PropsWithChildren) => {
-  const { t } = useTranslation('setting');
-  const pageTitle = genSiteHeadTitle(t('header.global'));
-
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
-
-  return (
-    <>
-      <PageTitle title={pageTitle} />
-      <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} isMobile={useIsMobile}>
-        {children}
-      </ResponsiveLayout>
-    </>
-  );
-};
-
-export default Setting;

package/src/app/settings/layout.mobile.tsx

@@ -1,16 +0,0 @@
-'use client';
-
-import { PropsWithChildren } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-
-import Header from './features/Header';
-
-const SettingLayout = ({ children }: PropsWithChildren) => (
-  <AppMobileLayout navBar={<Header />}>
-    <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
-  </AppMobileLayout>
-);
-
-export default SettingLayout;

package/src/app/settings/layout.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import ResponsiveLayout from '@/components/ResponsiveLayout';
-import { isMobileDevice } from '@/utils/responsive';
-
-import Desktop from './layout.desktop';
-import Mobile from './layout.mobile';
-
-const Layout = ({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={isMobileDevice}>
-    {children}
-  </ResponsiveLayout>
-);
-
-export default Layout;

package/src/app/settings/mobile/page.tsx

@@ -1,7 +0,0 @@
-import Page from './index';
-
-const Index = () => {
-  return <Page />;
-};
-
-export default Index;

package/src/app/welcome/DesktopLayout/index.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-
-import Mobile from '../MobileLayout';
-import Desktop from './Desktop';
-
-const ResponsiveLayout = memo<PropsWithChildren>(({ children }) => {
-  const { mobile } = useResponsive();
-
-  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
-});
-
-export default ResponsiveLayout;

package/src/app/welcome/MobileLayout.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { Logo, MobileNavBar } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-
-const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  const theme = useTheme();
-
-  return (
-    <AppMobileLayout
-      navBar={<MobileNavBar center={<Logo type={'text'} />} />}
-      showTabBar
-      style={{ background: theme.colorBgLayout }}
-    >
-      {children}
-    </AppMobileLayout>
-  );
-});
-
-export default MobileLayout;

package/src/app/welcome/layout.tsx

@@ -1,22 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { isMobileDevice } from '@/utils/responsive';
-
-import Desktop from './DesktopLayout';
-import Mobile from './MobileLayout';
-import Footer from './features/Footer';
-
-const Layout = ({ children }: PropsWithChildren) => {
-  const mobile = isMobileDevice();
-
-  return mobile ? (
-    <Mobile>{children}</Mobile>
-  ) : (
-    <Desktop>
-      {children}
-      <Footer />
-    </Desktop>
-  );
-};
-
-export default Layout;