@lobehub/chat 1.39.2 → 1.40.0

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;

package/src/app/(main)/chat/(workspace)/@portal/default.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense, lazy } from 'react';
 
-import Loading from '@/components/CircleLoading';
+import Loading from '@/components/Loading/BrandTextLoading';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import Desktop from './_layout/Desktop';

package/src/app/(main)/chat/(workspace)/@portal/loading.tsx

@@ -1,3 +1,3 @@
-import Loading from '@/components/CircleLoading';
+import Loading from '@/components/Loading/BrandTextLoading';
 
 export default () => <Loading />;

package/src/app/(main)/chat/(workspace)/page.tsx

@@ -1,7 +1,10 @@
 import StructuredData from '@/components/StructuredData';
+import { serverFeatureFlags } from '@/config/featureFlags';
 import { BRANDING_NAME } from '@/const/branding';
+import ChangelogModal from '@/features/ChangelogModal';
 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';
 
@@ -11,17 +14,18 @@ import TelemetryNotification from './features/TelemetryNotification';
 export const generateMetadata = async () => {
   const { t } = await translation('metadata');
   return metadataModule.generate({
-    description: t('chat.title', { appName: BRANDING_NAME }),
+    description: t('chat.description', { appName: BRANDING_NAME }),
     title: t('chat.title', { appName: BRANDING_NAME }),
     url: '/chat',
   });
 };
 
 const Page = async () => {
+  const hideDocs = serverFeatureFlags().hideDocs;
   const mobile = await isMobileDevice();
   const { t } = await translation('metadata');
   const ld = ldModule.generate({
-    description: t('chat.title', { appName: BRANDING_NAME }),
+    description: t('chat.description', { appName: BRANDING_NAME }),
     title: t('chat.title', { appName: BRANDING_NAME }),
     url: '/chat',
   });
@@ -31,6 +35,9 @@ const Page = async () => {
       <StructuredData ld={ld} />
       <PageTitle />
       <TelemetryNotification mobile={mobile} />
+      {!hideDocs && !mobile && (
+        <ChangelogModal currentId={await new ChangelogService().getLatestChangelogId()} />
+      )}
     </>
   );
 };

package/src/app/(main)/chat/@session/default.tsx

@@ -1,5 +1,6 @@
 import { Suspense, lazy } from 'react';
 
+import CircleLoading from '@/components/Loading/CircleLoading';
 import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
@@ -13,14 +14,14 @@ const Layout = ServerLayout({ Desktop, Mobile });
 
 const Session = () => {
   return (
-    <>
+    <Suspense fallback={<CircleLoading />}>
       <Layout>
         <Suspense fallback={<SkeletonList />}>
           <SessionListContent />
         </Suspense>
       </Layout>
       <SessionHydration />
-    </>
+    </Suspense>
   );
 };
 

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

@@ -1,3 +1,3 @@
-import CircleLoading from '@/components/CircleLoading';
+import CircleLoading from '@/components/Loading/BrandTextLoading';
 
 export default () => <CircleLoading />;

package/src/app/(main)/chat/settings/loading.tsx

@@ -1,3 +1,3 @@
-import SkeletonLoading from '@/components/SkeletonLoading';
+import SkeletonLoading from '@/components/Loading/SkeletonLoading';
 
 export default () => <SkeletonLoading paragraph={{ rows: 8 }} />;

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

@@ -1,6 +1,6 @@
 import { Center } from 'react-layout-kit';
 
-import CircleLoading from '@/components/CircleLoading';
+import CircleLoading from '@/components/Loading/BrandTextLoading';
 
 export default () => (
   <Center height={'90vh'} width={'100%'}>

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

@@ -1,23 +1,3 @@
-'use client';
+import CircleLoading from '@/components/Loading/BrandTextLoading';
 
-import { Icon } from '@lobehub/ui';
-import { Typography } from 'antd';
-import { LoaderCircle } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-
-export default () => {
-  const { t } = useTranslation('common');
-  return (
-    <Center height={'100%'} width={'100%'}>
-      <Flexbox align={'center'} gap={8}>
-        <div>
-          <Icon icon={LoaderCircle} size={'large'} spin />
-        </div>
-        <Typography.Text style={{ letterSpacing: '0.1em' }} type={'secondary'}>
-          {t('loading')}
-        </Typography.Text>
-      </Flexbox>
-    </Center>
-  );
-};
+export default () => <CircleLoading />;

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

@@ -1,6 +1,6 @@
 import { Flexbox } from 'react-layout-kit';
 
-import SkeletonLoading from '@/components/SkeletonLoading';
+import SkeletonLoading from '@/components/Loading/SkeletonLoading';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 const Loading = async () => {

package/src/app/(main)/repos/[id]/evals/dataset/page.tsx

@@ -3,7 +3,7 @@
 import { createStyles } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
-import CircleLoading from '@/components/CircleLoading';
+import CircleLoading from '@/components/Loading/BrandTextLoading';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
 import DatasetDetail from './DatasetDetail';

package/src/app/(main)/repos/[id]/evals/evaluation/page.tsx

@@ -2,7 +2,7 @@
 
 import { Flexbox } from 'react-layout-kit';
 
-import CircleLoading from '@/components/CircleLoading';
+import CircleLoading from '@/components/Loading/BrandTextLoading';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
 import EmptyGuide from './EmptyGuide';

package/src/app/(main)/settings/@category/default.tsx

@@ -1,12 +1,16 @@
+import { Suspense } from 'react';
+
+import SkeletonLoading from '@/components/Loading/SkeletonLoading';
+
 import UpgradeAlert from '../features/UpgradeAlert';
 import CategoryContent from './features/CategoryContent';
 
 const Category = () => {
   return (
-    <>
+    <Suspense fallback={<SkeletonLoading paragraph={{ rows: 7 }} title={false} />}>
       <CategoryContent />
       <UpgradeAlert />
-    </>
+    </Suspense>
   );
 };
 

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

@@ -33,7 +33,7 @@ const SidebarLayout = ({ children, className, title, desc, ...rest }: SidebarLay
       {...rest}
     >
       <PanelTitle desc={desc || t('header.desc')} title={title || t('header.title')} />
-      {children}
+      <Flexbox flex={1}>{children}</Flexbox>
       <BrandWatermark paddingInline={12} />
     </Flexbox>
   );

package/src/app/(main)/settings/about/features/Version.tsx

@@ -7,7 +7,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import { ProductLogo } from '@/components/Branding';
 import { BRANDING_NAME } from '@/const/branding';
-import { MANUAL_UPGRADE_URL, OFFICIAL_SITE, RELEASES_URL } from '@/const/url';
+import { CHANGELOG_URL, MANUAL_UPGRADE_URL, OFFICIAL_SITE } from '@/const/url';
 import { CURRENT_VERSION } from '@/const/version';
 import { useNewVersion } from '@/features/User/UserPanel/useNewVersion';
 import { useGlobalStore } from '@/store/global';
@@ -62,7 +62,7 @@ const Version = memo<{ mobile?: boolean }>(({ mobile }) => {
         </Flexbox>
       </Flexbox>
       <Flexbox flex={mobile ? 1 : undefined} gap={8} horizontal>
-        <Link href={RELEASES_URL} style={{ flex: 1 }} target={'_blank'}>
+        <Link href={CHANGELOG_URL} style={{ flex: 1 }} target={'_blank'}>
           <Button block={mobile}>{t('changelog')}</Button>
         </Link>
         {hasNewVersion && (

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

@@ -1,9 +1,3 @@
-import SkeletonLoading from '@/components/SkeletonLoading';
+import FullLoading from '@/components/Loading/BrandTextLoading';
 
-export default () => {
-  return (
-    <div style={{ flex: 1 }}>
-      <SkeletonLoading paragraph={{ rows: 8 }} title={false} />
-    </div>
-  );
-};
+export default () => <FullLoading />;

package/src/app/@modal/(.)changelog/modal/features/Cover.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: relative;
+    overflow: hidden;
+    background: ${token.colorFillSecondary};
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      z-index: 1;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      width: 100%;
+      height: 1px;
+
+      background: ${token.colorFillTertiary};
+    }
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      z-index: 1;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+
+      width: 100%;
+      height: 1px;
+
+      background: ${token.colorFillTertiary};
+    }
+  `,
+);
+
+const Cover = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+  return <Flexbox className={styles}>{children}</Flexbox>;
+});
+
+export default Cover;

package/src/app/@modal/(.)changelog/modal/features/Hero.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { FluentEmoji } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    background: linear-gradient(to bottom, ${token.colorFillTertiary}, transparent);
+  `,
+);
+
+const Hero = memo(() => {
+  const { theme, styles } = useStyles();
+  const { t } = useTranslation('changelog');
+  return (
+    <Flexbox className={styles} gap={8} padding={24}>
+      <Flexbox align={'center'} gap={12} horizontal>
+        <h1 style={{ fontSize: 24, fontWeight: 'bold', margin: 0 }}>{t('welcomeBack')}</h1>
+        <FluentEmoji emoji={'🤯'} size={28} type={'anim'} />
+      </Flexbox>
+      <div style={{ color: theme.colorTextSecondary, fontSize: 16 }}>{t('addedWhileAway')}</div>
+    </Flexbox>
+  );
+});
+
+export default Hero;

package/src/app/@modal/(.)changelog/modal/features/Pagination.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronRightIcon } from 'lucide-react';
+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 { OFFICIAL_SITE } from '@/const/url';
+
+const useStyles = createStyles(({ css, token }) => ({
+  button: css`
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  desc: css`
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    font-size: 16px;
+    font-weight: 500;
+  `,
+}));
+
+const Pagination = memo(() => {
+  const { t } = useTranslation('changelog');
+  const { styles } = useStyles();
+  return (
+    <Flexbox gap={16} horizontal style={{ marginTop: 24 }} width={'100%'}>
+      <Link
+        href={urlJoin(OFFICIAL_SITE, '/changelog/page/2')}
+        style={{ color: 'inherit', flex: 1 }}
+        target={'_blank'}
+      >
+        <Flexbox align={'flex-end'} className={styles.button} gap={4} padding={16}>
+          <Flexbox align={'center'} className={styles.desc} gap={4} horizontal>
+            {t('pagination.prev')}
+            <Icon icon={ChevronRightIcon} />
+          </Flexbox>
+          <div className={styles.title}>{t('pagination.older')}</div>
+        </Flexbox>
+      </Link>
+    </Flexbox>
+  );
+});
+
+export default Pagination;

package/src/app/@modal/(.)changelog/modal/features/Post.tsx

@@ -0,0 +1,57 @@
+import { Typography } from '@lobehub/ui';
+import Link from 'next/link';
+import { Flexbox } from 'react-layout-kit';
+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 Cover from './Cover';
+import PublishedTime from './PublishedTime';
+import ReadDetail from './ReadDetail';
+import VersionTag from './VersionTag';
+
+const Post = async ({
+  id,
+  versionRange,
+  locale,
+}: ChangelogIndexItem & { branch?: string; locale: Locales; mobile?: boolean }) => {
+  const changelogService = new ChangelogService();
+  const data = await changelogService.getPostById(id, { locale });
+  const url = urlJoin(OFFICIAL_SITE, 'changelog', id);
+
+  if (!data) return null;
+
+  return (
+    <Flexbox gap={8}>
+      <Link href={url} style={{ color: 'inherit' }} target={'_blank'}>
+        <Cover>
+          <Image alt={data.title} src={data.image} />
+        </Cover>
+      </Link>
+      <Flexbox gap={8} paddingInline={24}>
+        <Typography headerMultiple={0.2} style={{ width: '100%' }}>
+          <Link href={url} style={{ color: 'inherit' }} target={'_blank'}>
+            <h1 id={id}>{data.rawTitle || data.title}</h1>
+          </Link>
+          <CustomMDX source={data.content} />
+        </Typography>
+        <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>
+          <VersionTag range={versionRange} />
+          <PublishedTime
+            date={data.date.toISOString()}
+            style={{ fontSize: 12, opacity: 0.5 }}
+            template={'MMMM D, YYYY'}
+          />
+        </Flexbox>
+        <ReadDetail desc={data.description} postId={id} title={data.rawTitle || data.title} />
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default Post;

package/src/app/@modal/(.)changelog/modal/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/@modal/(.)changelog/modal/features/ReadDetail.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronRightIcon } from 'lucide-react';
+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 { OFFICIAL_SITE } from '@/const/url';
+import { useShare } from '@/hooks/useShare';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: relative;
+
+    margin-block: 16px 32px;
+    padding: 16px;
+
+    background: ${token.colorFillTertiary};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+);
+
+const ReadDetail = memo<{ desc: string; postId: string; title: string }>(
+  ({ postId, title, desc }) => {
+    const { t } = useTranslation('changelog');
+    const { styles, theme } = useStyles();
+    const url = urlJoin(OFFICIAL_SITE, `/changelog/${postId}`);
+    const { x, telegram, reddit, mastodon, whatsapp } = useShare({ desc, title, url });
+
+    return (
+      <Flexbox align={'center'} className={styles} gap={4} horizontal>
+        <Link href={x.link} style={{ color: 'inherit' }} target={'_blank'}>
+          <ActionIcon
+            fill={theme.colorTextSecondary}
+            icon={x.icon}
+            size={{ blockSize: 28, fontSize: 16 }}
+          />
+        </Link>
+        <Link href={telegram.link} style={{ color: 'inherit' }} target={'_blank'}>
+          <ActionIcon
+            fill={theme.colorTextSecondary}
+            icon={telegram.icon}
+            size={{ blockSize: 28, fontSize: 16 }}
+          />
+        </Link>
+        <Link href={reddit.link} style={{ color: 'inherit' }} target={'_blank'}>
+          <ActionIcon
+            fill={theme.colorTextSecondary}
+            icon={reddit.icon}
+            size={{ blockSize: 28, fontSize: 16 }}
+          />
+        </Link>
+        <Link href={mastodon.link} style={{ color: 'inherit' }} target={'_blank'}>
+          <ActionIcon
+            fill={theme.colorTextSecondary}
+            icon={mastodon.icon}
+            size={{ blockSize: 28, fontSize: 16 }}
+          />
+        </Link>
+        <Link href={whatsapp.link} style={{ color: 'inherit' }} target={'_blank'}>
+          <ActionIcon
+            fill={theme.colorTextSecondary}
+            icon={whatsapp.icon}
+            size={{ blockSize: 28, fontSize: 16 }}
+          />
+        </Link>
+        <Divider style={{ height: '100%' }} type={'vertical'} />
+        <Link href={url} style={{ color: 'inherit', flex: 1 }} target={'_blank'}>
+          <Flexbox
+            align={'center'}
+            horizontal
+            justify={'space-between'}
+            paddingInline={4}
+            width={'100%'}
+          >
+            {t('readDetails')}
+            <Icon
+              color={theme.colorTextSecondary}
+              icon={ChevronRightIcon}
+              size={{ fontSize: 20 }}
+            />
+          </Flexbox>
+        </Link>
+      </Flexbox>
+    );
+  },
+);
+
+export default ReadDetail;

package/src/app/@modal/(.)changelog/modal/features/UpdateChangelogStatus.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { memo, useEffect } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+
+const UpdateChangelogStatus = memo<{ currentId?: string }>(({ currentId }) => {
+  const [latestChangelogId, updateSystemStatus] = useGlobalStore((s) => [
+    s.status.latestChangelogId,
+    s.updateSystemStatus,
+  ]);
+
+  useEffect(() => {
+    if (!currentId || currentId === latestChangelogId) return;
+    updateSystemStatus({ latestChangelogId: currentId });
+  }, [latestChangelogId, currentId]);
+
+  return null;
+});
+
+export default UpdateChangelogStatus;