@lobehub/chat 0.57.0 → 0.58.0

package/src/pages/welcome/index.page.tsx

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,8 +8,10 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 import Banner from './Banner';
 import Footer from './Footer';
 import Layout from './layout';
+import Mobile from './mobile';
 
 const Welcome = memo(() => {
+  const { mobile } = useResponsive();
   const { t } = useTranslation('welcome');
   const pageTitle = genSiteHeadTitle(t('header'));
 
@@ -17,10 +20,16 @@ const Welcome = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Layout>
-        <Banner />
-        <Footer />
-      </Layout>
+      {mobile ? (
+        <Mobile>
+          <Banner />
+        </Mobile>
+      ) : (
+        <Layout>
+          <Banner />
+          <Footer />
+        </Layout>
+      )}
     </>
   );
 });

package/src/pages/welcome/mobile.tsx

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

package/src/pages/welcome/style.ts

@@ -41,9 +41,9 @@ export const useStyles = createStyles(({ css, token, stylish, cx }) => {
       padding: 16px;
     `,
     title: css`
-      margin-bottom: 0.2em;
+      margin-bottom: 0.25em;
       font-weight: 800;
-      line-height: 1.2;
+      line-height: 1.4;
       text-align: center;
     `,
     view: cx(

package/src/store/global/initialState.ts

@@ -25,6 +25,7 @@ export interface GlobalState {
 export interface GlobalPreference {
   guide?: Guide;
   inputHeight: number;
+  mobileShowTopic?: boolean;
   sessionsWidth: number;
   showChatSideBar?: boolean;
   showSessionPanel?: boolean;
@@ -34,6 +35,7 @@ export const initialState: GlobalState = {
   preference: {
     guide: {},
     inputHeight: 200,
+    mobileShowTopic: false,
     sessionsWidth: 320,
     showChatSideBar: true,
     showSessionPanel: true,

package/src/store/global/slices/common.ts

@@ -19,6 +19,7 @@ export interface CommonAction {
    */
   switchSideBar: (key: SidebarTabKey) => void;
   toggleChatSideBar: (visible?: boolean) => void;
+  toggleMobileTopic: (visible?: boolean) => void;
   updateGuideState: (guide: Partial<Guide>) => void;
   updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
 }
@@ -38,6 +39,12 @@ export const createCommonSlice: StateCreator<
 
     get().updatePreference({ showChatSideBar }, t('toggleAgentPanel', newValue) as string);
   },
+  toggleMobileTopic: (newValue) => {
+    const mobileShowTopic =
+      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
+
+    get().updatePreference({ mobileShowTopic }, t('toggleMobileTopic', newValue) as string);
+  },
   updateGuideState: (guide) => {
     const { updatePreference } = get();
     const nextGuide = merge({}, get().preference.guide, guide);

package/src/components/HeaderSpacing/index.tsx

@@ -1,9 +0,0 @@
-import { memo } from 'react';
-
-import { HEADER_HEIGHT } from '@/const/layoutTokens';
-
-const HeaderSpacing = memo<{ height?: number }>(({ height = HEADER_HEIGHT }) => (
-  <div style={{ flex: 'none', height }} />
-));
-
-export default HeaderSpacing;