@lobehub/chat 1.39.3 → 1.40.0

package/src/app/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -1,10 +1,15 @@
 import { act, renderHook } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
+import { ServerConfigStoreProvider } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
 
 import { useCategory } from '../features/useCategory';
 
+const wrapper: React.JSXElementConstructor<{ children: React.ReactNode }> = ({ children }) => (
+  <ServerConfigStoreProvider>{children}</ServerConfigStoreProvider>
+);
+
 // Mock dependencies
 vi.mock('next/navigation', () => ({
   useRouter: vi.fn(() => ({
@@ -24,7 +29,7 @@ vi.mock('../../settings/features/useCategory', () => ({
 
 // 定义一个变量来存储 enableAuth 的值
 let enableAuth = true;
-let enableClerk = false;
+let enableClerk = true;
 // 模拟 @/const/auth 模块
 vi.mock('@/const/auth', () => ({
   get enableAuth() {
@@ -37,7 +42,7 @@ vi.mock('@/const/auth', () => ({
 
 afterEach(() => {
   enableAuth = true;
-  enableClerk = false;
+  enableClerk = true;
 });
 
 // 目前对 enableAuth 的判定是在 useUserStore 中，所以需要 mock useUserStore
@@ -47,8 +52,10 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true, enableAuth: () => true });
     });
+    enableAuth = true;
+    enableClerk = false;
 
-    const { result } = renderHook(() => useCategory());
+    const { result } = renderHook(() => useCategory(), { wrapper });
 
     act(() => {
       const items = result.current;
@@ -57,7 +64,7 @@ describe('useCategory', () => {
       expect(items.some((item) => item.key === 'data')).toBe(true);
       expect(items.some((item) => item.key === 'docs')).toBe(true);
       expect(items.some((item) => item.key === 'feedback')).toBe(true);
-      expect(items.some((item) => item.key === 'discord')).toBe(true);
+      expect(items.some((item) => item.key === 'changelog')).toBe(true);
     });
   });
 
@@ -65,9 +72,10 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true });
     });
+    enableAuth = true;
     enableClerk = true;
 
-    const { result } = renderHook(() => useCategory());
+    const { result } = renderHook(() => useCategory(), { wrapper });
 
     act(() => {
       const items = result.current;
@@ -76,16 +84,21 @@ describe('useCategory', () => {
       expect(items.some((item) => item.key === 'data')).toBe(true);
       expect(items.some((item) => item.key === 'docs')).toBe(true);
       expect(items.some((item) => item.key === 'feedback')).toBe(true);
-      expect(items.some((item) => item.key === 'discord')).toBe(true);
+      expect(items.some((item) => item.key === 'changelog')).toBe(true);
     });
   });
 
   it('should return correct items when the user is logged in with NextAuth', () => {
     act(() => {
-      useUserStore.setState({ isSignedIn: true, enableAuth: () => true, enabledNextAuth: true });
+      useUserStore.setState({
+        isSignedIn: true,
+        enableAuth: () => true,
+        enabledNextAuth: true,
+      });
     });
+    enableClerk = false;
 
-    const { result } = renderHook(() => useCategory());
+    const { result } = renderHook(() => useCategory(), { wrapper });
 
     act(() => {
       const items = result.current;
@@ -95,7 +108,7 @@ describe('useCategory', () => {
       expect(items.some((item) => item.key === 'data')).toBe(true);
       expect(items.some((item) => item.key === 'docs')).toBe(true);
       expect(items.some((item) => item.key === 'feedback')).toBe(true);
-      expect(items.some((item) => item.key === 'discord')).toBe(true);
+      expect(items.some((item) => item.key === 'changelog')).toBe(true);
       expect(items.some((item) => item.key === 'nextauthSignout')).toBe(true);
     });
   });
@@ -105,7 +118,7 @@ describe('useCategory', () => {
       useUserStore.setState({ isSignedIn: false, enableAuth: () => true });
     });
 
-    const { result } = renderHook(() => useCategory());
+    const { result } = renderHook(() => useCategory(), { wrapper });
 
     act(() => {
       const items = result.current;
@@ -114,7 +127,7 @@ describe('useCategory', () => {
       expect(items.some((item) => item.key === 'data')).toBe(false);
       expect(items.some((item) => item.key === 'docs')).toBe(true);
       expect(items.some((item) => item.key === 'feedback')).toBe(true);
-      expect(items.some((item) => item.key === 'discord')).toBe(true);
+      expect(items.some((item) => item.key === 'changelog')).toBe(true);
       expect(items.some((item) => item.key === 'nextauthSignout')).toBe(false);
     });
   });
@@ -125,7 +138,7 @@ describe('useCategory', () => {
     });
     enableClerk = false;
 
-    const { result } = renderHook(() => useCategory());
+    const { result } = renderHook(() => useCategory(), { wrapper });
 
     act(() => {
       const items = result.current;

package/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx

@@ -1,10 +1,11 @@
-import { DiscordIcon } from '@lobehub/ui';
 import {
   Book,
   CircleUserRound,
+  Cloudy,
   Database,
   Download,
   Feather,
+  FileClockIcon,
   LogOut,
   Settings2,
 } from 'lucide-react';
@@ -12,11 +13,13 @@ import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 
 import { CellProps } from '@/components/Cell';
-import { DISCORD, DOCUMENTS, FEEDBACK } from '@/const/url';
+import { LOBE_CHAT_CLOUD } from '@/const/branding';
+import { DOCUMENTS, FEEDBACK, OFFICIAL_URL, UTM_SOURCE } from '@/const/url';
 import { isServerMode } from '@/const/version';
 import { usePWAInstall } from '@/hooks/usePWAInstall';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
-import { authSelectors } from '@/store/user/slices/auth/selectors';
+import { authSelectors } from '@/store/user/selectors';
 
 import { useCategory as useSettingsCategory } from '../../settings/features/useCategory';
 
@@ -24,6 +27,7 @@ export const useCategory = () => {
   const router = useRouter();
   const { canInstall, install } = usePWAInstall();
   const { t } = useTranslation(['common', 'setting', 'auth']);
+  const { showCloudPromotion, hideDocs } = useServerConfigStore(featureFlagsSelectors);
   const [isLogin, isLoginWithAuth, isLoginWithClerk, enableAuth, signOut, isLoginWithNextAuth] =
     useUserStore((s) => [
       authSelectors.isLogin(s),
@@ -91,6 +95,12 @@ export const useCategory = () => {
   ];
 
   const helps: CellProps[] = [
+    showCloudPromotion && {
+      icon: Cloudy,
+      key: 'cloud',
+      label: t('userPanel.cloud', { name: LOBE_CHAT_CLOUD }),
+      onClick: () => window.open(`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}`, '__blank'),
+    },
     {
       icon: Book,
       key: 'docs',
@@ -104,12 +114,12 @@ export const useCategory = () => {
       onClick: () => window.open(FEEDBACK, '__blank'),
     },
     {
-      icon: DiscordIcon,
-      key: 'discord',
-      label: 'Discord',
-      onClick: () => window.open(DISCORD, '__blank'),
+      icon: FileClockIcon,
+      key: 'changelog',
+      label: t('changelog'),
+      onClick: () => router.push('/changelog'),
     },
-  ];
+  ].filter(Boolean) as CellProps[];
 
   const nextAuthSignOut: CellProps[] = [
     {
@@ -131,7 +141,7 @@ export const useCategory = () => {
     /* ↑ cloud slot ↑ */
     ...(canInstall ? pwa : []),
     ...(isLogin && !isServerMode ? data : []),
-    ...helps,
+    ...(!hideDocs ? helps : []),
     ...(enableAuth && isLoginWithNextAuth ? nextAuthSignOut : []),
   ].filter(Boolean) as CellProps[];
 

package/src/app/(main)/_layout/Desktop.tsx

@@ -1,15 +1,18 @@
 'use client';
 
 import { useTheme } from 'antd-style';
+import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import CloudBanner, { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
+import { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
 import { usePlatform } from '@/hooks/usePlatform';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import { LayoutProps } from './type';
 
+const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
+
 const Layout = memo<LayoutProps>(({ children, nav }) => {
   const { isPWA } = usePlatform();
   const theme = useTheme();

package/src/app/(main)/_layout/Mobile.tsx

@@ -1,15 +1,16 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import { usePathname } from 'next/navigation';
 import qs from 'query-string';
 import { memo } from 'react';
 
-import CloudBanner from '@/features/AlertBanner/CloudBanner';
 import { useQuery } from '@/hooks/useQuery';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import { LayoutProps } from './type';
 
+const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 const MOBILE_NAV_ROUTES = new Set([
   '/chat',
   '/discover',

package/src/app/(main)/changelog/_layout/Desktop.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Hero from '../features/Hero';
+
+type Props = { children: ReactNode };
+
+const Layout = ({ children }: Props) => {
+  return (
+    <Flexbox
+      align={'center'}
+      style={{ height: '100%', overflowX: 'hidden', overflowY: 'auto' }}
+      width={'100%'}
+    >
+      <Flexbox gap={24} paddingBlock={24} paddingInline={16} style={{ width: 'min(100%, 1024px)' }}>
+        <Hero />
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+Layout.displayName = 'DesktopChangelogLayout';
+
+export default Layout;

package/src/app/(main)/changelog/_layout/Mobile/Header.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
+
+const Header = memo(() => {
+  const { t } = useTranslation('changelog');
+
+  const router = useRouter();
+  return (
+    <MobileNavBar
+      center={
+        <MobileNavBarTitle
+          title={
+            <Flexbox align={'center'} gap={4} horizontal>
+              {t('title')}
+            </Flexbox>
+          }
+        />
+      }
+      onBackClick={() => router.back()}
+      showBackButton
+      style={mobileHeaderSticky}
+    />
+  );
+});
+
+export default Header;

package/src/app/(main)/changelog/_layout/Mobile/index.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
+import Hero from '../../features/Hero';
+import Header from './Header';
+
+type Props = { children: ReactNode };
+
+const Layout = ({ children }: Props) => {
+  return (
+    <MobileContentLayout header={<Header />} padding={16}>
+      <Hero />
+      {children}
+    </MobileContentLayout>
+  );
+};
+
+Layout.displayName = 'MobileChangelogLayout';
+
+export default Layout;

package/src/app/(main)/changelog/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/changelog/features/GridLayout.tsx

@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const GridLayout: FC<PropsWithChildren<{ date?: ReactNode; mobile?: boolean }>> = ({
+  mobile,
+  children,
+  date,
+}) => {
+  return (
+    <Flexbox horizontal={!mobile} wrap={'wrap'}>
+      <Flexbox flex={1} style={{ minWidth: 150, position: 'relative' }}>
+        {date}
+      </Flexbox>
+      <Flexbox flex={3} gap={16} style={{ minWidth: 'min(600px, 100%)', position: 'relative' }}>
+        {children}
+      </Flexbox>
+      {!mobile && <Flexbox flex={1} style={{ minWidth: 150, position: 'relative' }} />}
+    </Flexbox>
+  );
+};
+
+export default GridLayout;

package/src/app/(main)/changelog/features/Hero.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useResponsive, useTheme } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { BRANDING_NAME } from '@/const/branding';
+import { OFFICIAL_SITE, X } from '@/const/url';
+
+import GridLayout from './GridLayout';
+
+const Hero = memo(() => {
+  const { t } = useTranslation('changelog');
+  const theme = useTheme();
+  const { mobile } = useResponsive();
+  return (
+    <GridLayout>
+      <Flexbox gap={16} style={{ paddingTop: 32, zIndex: 1 }}>
+        <h1 style={{ fontSize: mobile ? 28 : 40, fontWeight: 'bold', margin: 0 }}>{t('title')}</h1>
+        <div style={{ fontSize: mobile ? 18 : 24, opacity: 0.6 }}>
+          {t('description', { appName: BRANDING_NAME })}
+        </div>
+        <Flexbox gap={8} horizontal style={{ fontSize: 16 }}>
+          <Link href={urlJoin(OFFICIAL_SITE, '/changelog/versions')} target={'_blank'}>
+            {t('actions.versions')}
+          </Link>
+          <div style={{ color: theme.colorInfo }}>·</div>
+          <Link href={X} target={'_blank'}>
+            {t('actions.followOnX')}
+          </Link>
+        </Flexbox>
+      </Flexbox>
+    </GridLayout>
+  );
+});
+
+export default Hero;

package/src/app/(main)/changelog/features/Post.tsx

@@ -0,0 +1,56 @@
+import { Typography } from '@lobehub/ui';
+import { Divider } from 'antd';
+import Link from 'next/link';
+import urlJoin from 'url-join';
+
+import { CustomMDX } from '@/components/mdx';
+import Image from '@/components/mdx/Image';
+import { OFFICIAL_SITE } from '@/const/url';
+import { Locales } from '@/locales/resources';
+import { ChangelogService } from '@/server/services/changelog';
+import { ChangelogIndexItem } from '@/types/changelog';
+
+import GridLayout from './GridLayout';
+import PublishedTime from './PublishedTime';
+import VersionTag from './VersionTag';
+
+const Post = async ({
+  id,
+  mobile,
+  versionRange,
+  locale,
+}: ChangelogIndexItem & { branch?: string; locale: Locales; mobile?: boolean }) => {
+  const changelogService = new ChangelogService();
+  const data = await changelogService.getPostById(id, { locale });
+
+  if (!data || !data.title) return null;
+
+  return (
+    <>
+      <Divider />
+      <GridLayout
+        date={
+          <PublishedTime
+            date={data.date.toISOString()}
+            style={{ lineHeight: mobile ? undefined : '60px' }}
+            template={'MMMM D, YYYY'}
+          />
+        }
+        mobile={mobile}
+      >
+        <Typography headerMultiple={mobile ? 0.2 : 0.3}>
+          <Link href={urlJoin(OFFICIAL_SITE, '/changelog', id)} style={{ color: 'inherit' }}>
+            <h1 id={id}>{data.rawTitle || data.title}</h1>
+          </Link>
+          <Image alt={data.title} src={data.image} />
+          <CustomMDX source={data.content} />
+          <Link href={urlJoin(OFFICIAL_SITE, '/changelog', id)} style={{ color: 'inherit' }}>
+            <VersionTag range={versionRange} />
+          </Link>
+        </Typography>
+      </GridLayout>
+    </>
+  );
+};
+
+export default Post;

package/src/app/(main)/changelog/features/PublishedTime.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh.js';
+import { CSSProperties, FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    time: css`
+      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
+
+      font-size: 14px;
+      line-height: var(--lobe-markdown-line-height);
+      color: ${token.colorTextSecondary};
+      letter-spacing: 0.02em;
+    `,
+  };
+});
+
+interface PrivacyUpdatedProps {
+  className?: string;
+  date: string;
+  style?: CSSProperties;
+  template?: string;
+}
+const PublishedTime: FC<PrivacyUpdatedProps> = ({
+  date = new Date().toISOString(),
+  style,
+  className,
+  template = 'dddd, MMMM D YYYY',
+}) => {
+  const { i18n } = useTranslation();
+  const { styles, cx } = useStyles();
+  const time = dayjs(date).locale(i18n.language).format(template);
+
+  return (
+    <time
+      aria-label={'published-date'}
+      className={cx(styles.time, className)}
+      dateTime={time}
+      style={style}
+    >
+      {time}
+    </time>
+  );
+};
+
+export default PublishedTime;

package/src/app/(main)/changelog/features/VersionTag.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    tag: css`
+      margin: 0;
+      padding-block: 4px;
+      padding-inline: 12px;
+
+      color: ${token.colorTextSecondary};
+
+      border-radius: 16px;
+    `,
+  };
+});
+
+const VersionTag = memo<{ range: string[] }>(({ range }) => {
+  const { styles } = useStyles();
+
+  return <Tag className={styles.tag}>{range.map((v) => 'v' + v).join(' ~ ')}</Tag>;
+});
+
+export default VersionTag;

package/src/app/(main)/changelog/layout.tsx

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

package/src/app/(main)/changelog/loading.tsx

@@ -0,0 +1,3 @@
+import { Skeleton } from 'antd';
+
+export default () => <Skeleton active paragraph={{ rows: 5 }} title={false} />;

package/src/app/(main)/changelog/modal/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useLayoutEffect } from 'react';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+
+/**
+ * @description: Changelog Modal (intercepting routes fallback when hard refresh)
+ * @example: /changelog/modal => /changelog
+ * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
+ */
+
+const ChangelogModalFallback = () => {
+  const router = useQueryRoute();
+
+  useLayoutEffect(() => {
+    router.replace('/changelog');
+  }, []);
+
+  return null;
+};
+
+export default ChangelogModalFallback;

package/src/app/(main)/changelog/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'));

package/src/app/(main)/changelog/page.tsx

@@ -0,0 +1,73 @@
+import { Divider, Skeleton } from 'antd';
+import { notFound } from 'next/navigation';
+import { Fragment, Suspense } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import Pagination from '@/app/@modal/(.)changelog/modal/features/Pagination';
+import StructuredData from '@/components/StructuredData';
+import { serverFeatureFlags } from '@/config/featureFlags';
+import { BRANDING_NAME } from '@/const/branding';
+import { OFFICIAL_SITE } from '@/const/url';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { ChangelogService } from '@/server/services/changelog';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/server/responsive';
+
+import GridLayout from './features/GridLayout';
+import Post from './features/Post';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('metadata');
+  return metadataModule.generate({
+    canonical: urlJoin(OFFICIAL_SITE, 'changelog'),
+    description: t('changelog.description', { appName: BRANDING_NAME }),
+    title: t('changelog.title'),
+    url: '/changelog',
+  });
+};
+
+const Page = async () => {
+  const hideDocs = serverFeatureFlags().hideDocs;
+
+  if (hideDocs) return notFound();
+
+  const mobile = await isMobileDevice();
+  const { t, locale } = await translation('metadata');
+  const changelogService = new ChangelogService();
+  const data = await changelogService.getChangelogIndex();
+
+  const ld = ldModule.generate({
+    description: t('changelog.description', { appName: BRANDING_NAME }),
+    title: t('changelog.title', { appName: BRANDING_NAME }),
+    url: '/changelog',
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <Flexbox gap={mobile ? 16 : 48}>
+        {data.map((item) => (
+          <Fragment key={item.id}>
+            <Suspense
+              fallback={
+                <GridLayout>
+                  <Divider />
+                  <Skeleton active paragraph={{ rows: 5 }} />
+                </GridLayout>
+              }
+            >
+              <Post locale={locale} mobile={mobile} {...item} />
+            </Suspense>
+          </Fragment>
+        ))}
+      </Flexbox>
+      <GridLayout>
+        <Pagination />
+      </GridLayout>
+    </>
+  );
+};
+
+export default Page;