@lobehub/chat 0.84.0-beta.2 → 0.85.0

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

@@ -1,15 +1,3 @@
-'use client';
+import Index from './index';
 
-import { memo } from 'react';
-
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
-
-import Common from './Common';
-
-const CommonSetting = memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.Common);
-  return <Common />;
-});
-
-export default CommonSetting;
+export default () => <Index />;

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

@@ -5,6 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import FolderPanel from '@/features/FolderPanel';
 
+import UpgradeAlert from '../UpgradeAlert';
 import List from './List';
 
 const useStyles = createStyles(({ stylish, token, css }) => ({
@@ -29,6 +30,7 @@ const SideBar = memo(() => {
             <Logo className={styles.logo} size={36} type={'text'} />
           </div>
         </Flexbox>
+        <UpgradeAlert />
         <List />
       </DraggablePanelBody>
     </FolderPanel>

package/src/app/settings/features/UpgradeAlert.tsx

@@ -0,0 +1,32 @@
+import { Alert, Button } from 'antd';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MANUAL_UPGRADE_URL } from '@/const/version';
+import { useGlobalStore } from '@/store/global';
+
+const UpgradeAlert = memo(() => {
+  const [hasNewVersion, latestVersion] = useGlobalStore((s) => [s.hasNewVersion, s.latestVersion]);
+  const { t } = useTranslation('common');
+
+  return (
+    hasNewVersion && (
+      <Alert
+        action={
+          <Link href={MANUAL_UPGRADE_URL} target={'_blank'}>
+            <Button size={'small'} type={'primary'}>
+              {t('upgradeVersion.action')}
+            </Button>
+          </Link>
+        }
+        banner
+        closable
+        message={t('upgradeVersion.newVersion', { version: latestVersion })}
+        type={'info'}
+      />
+    )
+  );
+});
+
+export default UpgradeAlert;

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

@@ -0,0 +1,12 @@
+import { PropsWithChildren, memo } from 'react';
+
+import ResponsiveLayout from '@/layout/ResponsiveLayout.server';
+
+import DesktopLayout from './(desktop)/layout.responsive';
+import MobileLayout from './(mobile)/layout.mobile';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+    {children}
+  </ResponsiveLayout>
+));

package/src/app/settings/llm/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import LLM from './LLM';
+
+export default memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.LLM);
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('tab.llm'));
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <LLM />
+    </>
+  );
+});

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

@@ -0,0 +1 @@
+export { default } from '../layout.server';

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

@@ -1,15 +1,3 @@
-'use client';
+import Index from './index';
 
-import { memo } from 'react';
-
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
-
-import LLM from './LLM';
-
-const LLMSetting = memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.LLM);
-  return <LLM />;
-});
-
-export default LLMSetting;
+export default () => <Index />;

package/src/app/settings/page.tsx

@@ -1 +1,14 @@
-export { default } from './common/page';
+import { isMobileDevice } from '@/utils/responsive';
+
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  const Page = mobile ? MobilePage : DesktopPage;
+
+  return <Page />;
+};
+
+export default Page;

package/src/app/welcome/{features/Footer/index.tsx → (desktop)/features/Footer.tsx}

@@ -6,7 +6,7 @@ import { Book, Github } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { CHANGELOG, DISCORD, GITHUB } from '@/const/url';
+import { DISCORD, GITHUB, WIKI } from '@/const/url';
 
 const Footer = memo(() => {
   const theme = useTheme();
@@ -21,9 +21,20 @@ const Footer = memo(() => {
           icon={DiscordIcon}
           onClick={() => window.open(DISCORD, '__blank')}
           size={'site'}
+          title={'Discord'}
+        />
+        <ActionIcon
+          icon={Book}
+          onClick={() => window.open(WIKI, '__blank')}
+          size={'site'}
+          title={'Wiki'}
+        />
+        <ActionIcon
+          icon={Github}
+          onClick={() => window.open(GITHUB, '__blank')}
+          size={'site'}
+          title={'GitHub'}
         />
-        <ActionIcon icon={Book} onClick={() => window.open(CHANGELOG, '__blank')} size={'site'} />
-        <ActionIcon icon={Github} onClick={() => window.open(GITHUB, '__blank')} size={'site'} />
       </Flexbox>
     </Flexbox>
   );

package/src/app/welcome/(desktop)/features/Showcase.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { GridShowcase } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Banner from '@/app/welcome/features/Banner';
+
+const Showcase = memo(() => (
+  <Flexbox
+    flex={1}
+    justify={'center'}
+    style={{ height: '100vh', position: 'relative', width: '100%' }}
+  >
+    <GridShowcase>
+      <Banner />
+    </GridShowcase>
+    {/*TODO：暂时隐藏，待模板完成后再补回*/}
+    {/*<AgentTemplate width={width} />*/}
+  </Flexbox>
+));
+
+export default Showcase;

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

@@ -0,0 +1,19 @@
+'use client';
+
+import { memo } from 'react';
+
+import ResponsiveIndex from '@/components/ResponsiveIndex';
+
+import Mobile from '../(mobile)';
+import Footer from './features/Footer';
+import Showcase from './features/Showcase';
+import Layout from './layout.responsive';
+
+export default memo(() => (
+  <ResponsiveIndex Mobile={Mobile}>
+    <Layout>
+      <Showcase />
+      <Footer />
+    </Layout>
+  </ResponsiveIndex>
+));

package/src/app/welcome/{DesktopLayout/Desktop.tsx → (desktop)/layout.desktop.tsx}

@@ -1,16 +1,15 @@
 import { Logo } from '@lobehub/ui';
-import Link from 'next/link';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import AppLayout from '@/layout/AppLayout';
+import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 
 import { useStyles } from '../features/Banner/style';
 
 const Desktop = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
   return (
-    <AppLayout>
+    <AppLayoutDesktop>
       <Center
         className={styles.layout}
         flex={1}
@@ -18,14 +17,12 @@ const Desktop = memo<PropsWithChildren>(({ children }) => {
         horizontal
         style={{ position: 'relative' }}
       >
-        <Link href={'/'}>
-          <Logo className={styles.logo} size={36} type={'text'} />
-        </Link>
-        <Flexbox className={styles.view} flex={1} style={{ maxWidth: 1024 }}>
+        <Logo className={styles.logo} size={36} type={'text'} />
+        <Flexbox className={styles.view} flex={1}>
           {children}
         </Flexbox>
       </Center>
-    </AppLayout>
+    </AppLayoutDesktop>
   );
 });
 

package/src/app/welcome/(desktop)/layout.responsive.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
+
+import MobileLayout from '../(mobile)/layout.mobile';
+import DesktopLayout from './layout.desktop';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+    {children}
+  </ResponsiveLayout>
+));

package/src/app/welcome/(mobile)/features/Header.tsx

@@ -0,0 +1,6 @@
+import { Logo, MobileNavBar } from '@lobehub/ui';
+import { memo } from 'react';
+
+const Header = memo(() => <MobileNavBar center={<Logo type={'text'} />} />);
+
+export default Header;

package/src/app/welcome/(mobile)/features/Showcase.tsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import Banner from '@/app/welcome/features/Banner';
+
+const Showcase = memo(() => (
+  <Flexbox align={'center'} justify={'center'} style={{ height: 'calc(100vh - 44px)' }}>
+    <Center gap={16}>
+      <Banner mobile />
+    </Center>
+    {/*TODO：暂时隐藏，待模板完成后再补回*/}
+    {/*<AgentTemplate width={width} />*/}
+  </Flexbox>
+));
+
+export default Showcase;

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

@@ -0,0 +1,10 @@
+import { memo } from 'react';
+
+import Showcase from './features/Showcase';
+import Layout from './layout.mobile';
+
+export default memo(() => (
+  <Layout>
+    <Showcase />
+  </Layout>
+));

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+
+import Header from './features/Header';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <AppLayoutMobile navBar={<Header />} showTabBar style={{ background: theme.colorBgLayout }}>
+      <div style={{ paddingInline: 16 }}>{children}</div>
+    </AppLayoutMobile>
+  );
+});
+
+export default MobileLayout;

package/src/app/welcome/features/Banner/Hero.tsx

@@ -1,11 +1,10 @@
 import { LogoThree } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { genSize, useStyles } from './style';
 
-const Hero = memo<{ width: number }>(({ width }) => {
+const Hero = memo<{ mobile?: boolean; width: number }>(({ width, mobile }) => {
   const size = useMemo(
     () => ({
       base: genSize(width / 3.5, 240),
@@ -16,7 +15,7 @@ const Hero = memo<{ width: number }>(({ width }) => {
     [width],
   );
   const { styles } = useStyles(size.base);
-  const { mobile } = useResponsive();
+
   const { t } = useTranslation('welcome');
 
   return (

package/src/app/welcome/features/Banner/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { GridShowcase, Icon } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';
 import { SendHorizonal } from 'lucide-react';
@@ -16,13 +16,12 @@ import { useSessionStore } from '@/store/session';
 import Hero from './Hero';
 import { useStyles } from './style';
 
-const Banner = memo<{ mobile?: boolean }>(() => {
+const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { importConfig } = useImportConfig();
   const ref = useRef(null);
   const domSize = useSize(ref);
   const width = domSize?.width || 1024;
   const { t } = useTranslation('welcome');
-
   const { styles } = useStyles();
 
   const switchSession = useSessionStore((s) => s.switchSession);
@@ -32,34 +31,38 @@ const Banner = memo<{ mobile?: boolean }>(() => {
   }, []);
 
   return (
-    <Flexbox height={'80vh'} style={{ paddingTop: '10vh' }}>
-      <GridShowcase>
-        <div className={styles.container} ref={ref}>
-          <Hero width={width} />
-        </div>
-        <Flexbox gap={16} horizontal style={{ marginTop: 16 }}>
-          <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
-            <Button size={'large'}>{t('button.import')}</Button>
-          </Upload>
-          <Link
-            href={SESSION_CHAT_URL()}
-            onClick={(e) => {
-              e.preventDefault();
-              switchSession();
-            }}
-          >
-            <Button size={'large'} type={'primary'}>
-              <Flexbox align={'center'} gap={4} horizontal>
-                {t('button.start')}
-                <Icon icon={SendHorizonal} />
-              </Flexbox>
-            </Button>
-          </Link>
-        </Flexbox>
-      </GridShowcase>
-      {/*TODO：暂时隐藏，待模板完成后再补回*/}
-      {/*<AgentTemplate width={width} />*/}
-    </Flexbox>
+    <>
+      <div className={styles.container} ref={ref}>
+        <Hero mobile={mobile} width={width} />
+      </div>
+      <Flexbox
+        className={styles.buttonGroup}
+        gap={16}
+        horizontal={!mobile}
+        justify={'center'}
+        width={'100%'}
+      >
+        <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
+          <Button block={mobile} size={'large'}>
+            {t('button.import')}
+          </Button>
+        </Upload>
+        <Link
+          href={SESSION_CHAT_URL()}
+          onClick={(e) => {
+            e.preventDefault();
+            switchSession();
+          }}
+        >
+          <Button block={mobile} size={'large'} type={'primary'}>
+            <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
+              {t('button.start')}
+              <Icon icon={SendHorizonal} />
+            </Flexbox>
+          </Button>
+        </Link>
+      </Flexbox>
+    </>
   );
 });
 

package/src/app/welcome/features/Banner/style.ts

@@ -1,8 +1,13 @@
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 
-export const useStyles = createStyles(({ css, token, stylish, cx }) => {
+export const useStyles = createStyles(({ css, token, stylish, cx, prefixCls }) => {
   return {
+    buttonGroup: css`
+      .${prefixCls}-upload {
+        width: 100% !important;
+      }
+    `,
     container: css`
       z-index: 10;
 
@@ -49,8 +54,12 @@ export const useStyles = createStyles(({ css, token, stylish, cx }) => {
     view: cx(
       stylish.noScrollbar,
       css`
+        position: relative;
+
         overflow-x: hidden;
         overflow-y: auto;
+
+        max-width: 1024px;
         height: 100vh;
         padding: 32px 16px;
       `,

package/src/app/welcome/page.tsx

@@ -1,12 +1,14 @@
-import { t } from 'i18next';
-import { Metadata } from 'next';
+import { isMobileDevice } from '@/utils/responsive';
 
-import Banner from './features/Banner';
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
 
-export const generateMetadata = (): Metadata => ({
-  title: t('header', { ns: 'welcome' }),
-});
+const Page = () => {
+  const mobile = isMobileDevice();
 
-const Page = () => <Banner />;
+  const Page = mobile ? MobilePage : DesktopPage;
+
+  return <Page />;
+};
 
 export default Page;

package/src/components/ResponsiveIndex.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { FC, ReactNode } from 'react';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+interface ResponsiveIndexProps {
+  Mobile: FC;
+  children: ReactNode;
+}
+const ResponsiveIndex = ({ children, Mobile }: ResponsiveIndexProps) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile /> : children;
+};
+
+export default ResponsiveIndex;

package/src/const/url.ts

@@ -8,7 +8,8 @@ import { DEFAULT_LANG, checkLang } from './locale';
 import { INBOX_SESSION_ID } from './session';
 
 export const GITHUB = pkg.homepage;
-export const CHANGELOG = `${pkg.homepage}/blob/master/CHANGELOG.md`;
+export const CHANGELOG = urlJoin(GITHUB, 'blob/master/CHANGELOG.md');
+export const WIKI = urlJoin(GITHUB, 'wiki');
 export const ABOUT = pkg.homepage;
 export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';

package/src/const/version.ts

@@ -0,0 +1,6 @@
+import pkg from '@/../package.json';
+
+export const CURRENT_VERSION = pkg.version;
+
+export const MANUAL_UPGRADE_URL =
+  'https://github.com/lobehub/lobe-chat/blob/main/docs/Upstream-Sync.md';

package/src/features/MobileTabBar/index.tsx

@@ -49,7 +49,7 @@ export default memo<{ className?: string }>(({ className }) => {
         key: SidebarTabKey.Setting,
         onClick: () => {
           setTab(SidebarTabKey.Setting);
-          router.push('/settings/mobile');
+          router.push('/settings');
         },
         title: t('tab.setting'),
       },