@lobehub/chat 0.41.1 → 0.42.0

package/src/pages/welcome/Banner/Hero.tsx

@@ -0,0 +1,39 @@
+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 size = useMemo(
+    () => ({
+      base: genSize(width / 3.5, 240),
+      desc: genSize(width / 50, 14),
+      logo: genSize(width / 3.8, 180),
+      title: genSize(width / 20, 32),
+    }),
+    [width],
+  );
+  const { styles } = useStyles(size.base);
+  const { mobile } = useResponsive();
+  const { t } = useTranslation('welcome');
+
+  return (
+    <>
+      <LogoThree
+        size={size.logo}
+        style={{ marginBottom: -size.logo / 40, marginTop: -size.logo / 5 }}
+      />
+      <div className={styles.title} style={{ fontSize: size.title }}>
+        LobeChat{mobile ? <br /> : ' '}
+        {t('slogan.title')}
+      </div>
+      <div className={styles.desc} style={{ fontSize: size.desc }}>
+        {t('slogan.desc1')}
+      </div>
+    </>
+  );
+});
+
+export default Hero;

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

@@ -0,0 +1,56 @@
+import { GridShowcase, Icon } from '@lobehub/ui';
+import { useSize } from 'ahooks';
+import { Button, Upload } from 'antd';
+import { SendHorizonal } from 'lucide-react';
+import Link from 'next/link';
+import Router from 'next/router';
+import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useImportConfig } from '@/hooks/useImportConfig';
+
+import { useStyles } from '../style';
+import AgentTemplate from './AgentTemplate';
+import Hero from './Hero';
+
+const Banner = memo(() => {
+  const { importConfig } = useImportConfig();
+  const ref = useRef(null);
+  const domSize = useSize(ref);
+  const width = domSize?.width || 1024;
+  const { t } = useTranslation('welcome');
+
+  const { styles } = useStyles();
+
+  const handleImport = useCallback((e: any) => {
+    importConfig(e);
+    Router.push('/chat');
+  }, []);
+
+  return (
+    <>
+      <GridShowcase>
+        <div className={styles.container} ref={ref}>
+          <Hero width={width} />
+        </div>
+        <Flexbox gap={16} horizontal style={{ marginTop: 16 }}>
+          <Link href={'/chat'}>
+            <Button size={'large'} type={'primary'}>
+              <Flexbox align={'center'} gap={4} horizontal>
+                {t('button.start')}
+                <Icon icon={SendHorizonal} />
+              </Flexbox>
+            </Button>
+          </Link>
+          <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
+            <Button size={'large'}>{t('button.import')}</Button>
+          </Upload>
+        </Flexbox>
+      </GridShowcase>
+      <AgentTemplate width={width} />
+    </>
+  );
+});
+
+export default Banner;

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

@@ -0,0 +1,24 @@
+import { ActionIcon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Book, Github } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Discord from '@/components/DiscordIcon';
+import { CHANGELOG, DISCORD, GITHUB } from '@/const/url';
+
+const Footer = memo(() => {
+  const theme = useTheme();
+  return (
+    <Flexbox align={'center'} horizontal justify={'space-between'} style={{ padding: 16 }}>
+      <span style={{ color: theme.colorTextDescription }}>©{new Date().getFullYear()} LobeHub</span>
+      <Flexbox horizontal>
+        <ActionIcon icon={Discord} onClick={() => window.open(DISCORD, '__blank')} size={'site'} />
+        <ActionIcon icon={Book} onClick={() => window.open(CHANGELOG, '__blank')} size={'site'} />
+        <ActionIcon icon={Github} onClick={() => window.open(GITHUB, '__blank')} size={'site'} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Footer;

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

@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import Banner from './Banner';
+import Footer from './Footer';
+import Layout from './layout';
+
+const Welcome = memo(() => {
+  const { t } = useTranslation('welcome');
+  const pageTitle = genSiteHeadTitle(t('header'));
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      <Layout>
+        <Banner />
+        <Footer />
+      </Layout>
+    </>
+  );
+});
+
+export default Welcome;

package/src/pages/welcome/layout.tsx

@@ -0,0 +1,31 @@
+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 { useStyles } from './style';
+
+const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+  return (
+    <AppLayout>
+      <Center
+        className={styles.layout}
+        flex={1}
+        height={'100vh'}
+        horizontal
+        style={{ position: 'relative' }}
+      >
+        <Link href={'/'}>
+          <Logo className={styles.logo} size={36} type={'text'} />
+        </Link>
+        <Flexbox className={styles.view} flex={1} style={{ maxWidth: 1024 }}>
+          {children}
+        </Flexbox>
+      </Center>
+    </AppLayout>
+  );
+});
+
+export default WelcomeLayout;

package/src/pages/welcome/style.ts

@@ -0,0 +1,63 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+
+export const useStyles = createStyles(({ css, token, stylish, cx }) => {
+  return {
+    container: css`
+      z-index: 10;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      width: 100%;
+      margin-bottom: 24px;
+    `,
+    desc: css`
+      font-weight: 400;
+      color: ${rgba(token.colorText, 0.8)};
+      text-align: center;
+    `,
+    layout: css`
+      background: ${token.colorBgContainer};
+    `,
+    logo: css`
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      fill: ${token.colorText};
+    `,
+    note: css`
+      z-index: 10;
+      margin-top: 16px;
+      color: ${token.colorTextDescription};
+    `,
+    skip: css`
+      color: ${token.colorTextDescription};
+    `,
+    templateContainer: css`
+      flex-wrap: wrap;
+      width: 100%;
+      padding: 16px;
+    `,
+    title: css`
+      margin-bottom: 0.2em;
+      font-weight: 800;
+      line-height: 1.2;
+      text-align: center;
+    `,
+    view: cx(
+      stylish.noScrollbar,
+      css`
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: 100vh;
+        padding: 32px 16px;
+      `,
+    ),
+  };
+});
+
+export const genSize = (size: number, minSize: number) => {
+  return size < minSize ? minSize : size;
+};

package/src/store/session/slices/session/selectors/index.ts

@@ -4,6 +4,7 @@ import {
   currentSessionSafe,
   getSessionById,
   getSessionMetaById,
+  hasSessionList,
   sessionList,
 } from './list';
 
@@ -15,5 +16,6 @@ export const sessionSelectors = {
   getExportAgent,
   getSessionById,
   getSessionMetaById,
+  hasSessionList,
   sessionList,
 };

package/src/store/session/slices/session/selectors/list.ts

@@ -36,6 +36,11 @@ export const sessionList = (s: SessionStore) => {
   });
 };
 
+export const hasSessionList = (s: SessionStore) => {
+  const list = sessionList(s);
+  return list?.length > 0;
+};
+
 export const getSessionById =
   (id: string) =>
   (s: SessionStore): LobeAgentSession => {

package/src/store/session/store.ts

@@ -1,5 +1,5 @@
-import equal from 'fast-deep-equal';
 import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
@@ -49,5 +49,5 @@ export const useSessionStore = createWithEqualityFn<SessionStore>()(
     }),
     persistOptions,
   ),
-  equal,
+  shallow,
 );

package/src/store/settings/hooks/useHydrated.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+import { useSettings } from '../store';
+
+export const useSettingsHydrated = () => {
+  // 根据 sessions 是否有值来判断是否已经初始化
+  const hasInited = !!Object.values(useSettings.getState().settings).length;
+
+  const [isInit, setInit] = useState(hasInited);
+
+  useEffect(() => {
+    const hasRehydrated = useSettings.persist.hasHydrated();
+
+    if (hasRehydrated && !isInit) {
+      setInit(true);
+    }
+  }, []);
+
+  return isInit;
+};

package/src/store/settings/store.ts

@@ -1,5 +1,5 @@
-import equal from 'fast-deep-equal';
 import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
@@ -39,5 +39,5 @@ export const useSettings = createWithEqualityFn<SettingsStore>()(
     }),
     persistOptions,
   ),
-  equal,
+  shallow,
 );