@lobehub/chat 1.39.3 → 1.40.0

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)/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/@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;

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

@@ -0,0 +1,39 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ModalLayout from '../../_layout/ModalLayout';
+import Hero from './features/Hero';
+import Pagination from './features/Pagination';
+
+const useStyles = createStyles(
+  ({ css, prefixCls, token }) => css`
+    .${prefixCls}-modal-close {
+      background: ${token.colorBgElevated} !important;
+      border: 1px solid ${token.colorBorderSecondary};
+    }
+  `,
+);
+
+const Layout = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <ModalLayout centered className={styles} height={'min(90vh, 800px)'} width={'min(90vw, 600px)'}>
+      <Flexbox
+        style={{ overflowX: 'hidden', overflowY: 'auto', position: 'relative' }}
+        width={'100%'}
+      >
+        <Hero />
+        {children}
+        <Flexbox padding={24}>
+          <Pagination />
+        </Flexbox>
+      </Flexbox>
+    </ModalLayout>
+  );
+});
+
+export default Layout;

package/src/app/@modal/(.)changelog/modal/loading.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from 'antd';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  return (
+    <Flexbox paddingBlock={12} paddingInline={24}>
+      <Skeleton active paragraph={{ rows: 5 }} title={false} />
+    </Flexbox>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+
+import { serverFeatureFlags } from '@/config/featureFlags';
+import { ChangelogService } from '@/server/services/changelog';
+import { getLocale } from '@/server/translation';
+import { isMobileDevice } from '@/utils/server/responsive';
+
+import Post from './features/Post';
+import UpdateChangelogStatus from './features/UpdateChangelogStatus';
+import Loading from './loading';
+
+const Page = async () => {
+  const hideDocs = serverFeatureFlags().hideDocs;
+
+  if (hideDocs) return notFound();
+
+  const locale = await getLocale();
+  const mobile = await isMobileDevice();
+  const changelogService = new ChangelogService();
+  const data = await changelogService.getChangelogIndex();
+
+  return (
+    <>
+      {data.map((item) => (
+        <Suspense fallback={<Loading />} key={item.id}>
+          <Post locale={locale} mobile={mobile} {...item} />
+        </Suspense>
+      ))}
+      <UpdateChangelogStatus currentId={data[0]?.id} />
+    </>
+  );
+};
+
+Page.displayName = 'ChangelogModal';
+
+export default Page;

package/src/app/@modal/(.)settings/modal/layout.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
 import { SettingsTabs } from '@/store/global/initialState';
 
+import ModalLayout from '../../_layout/ModalLayout';
 import SettingModalLayout from '../../_layout/SettingModalLayout';
 
 const CategoryContent = dynamic(
@@ -22,22 +23,24 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
   const { t } = useTranslation('setting');
   const activeKey = useActiveSettingsKey();
   return (
-    <SettingModalLayout
-      activeTitle={
-        <>
-          {t(`tab.${activeKey}`)}
-          {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
-        </>
-      }
-      category={
-        <>
-          <CategoryContent modal />
-          <UpgradeAlert />
-        </>
-      }
-    >
-      {children}
-    </SettingModalLayout>
+    <ModalLayout>
+      <SettingModalLayout
+        activeTitle={
+          <>
+            {t(`tab.${activeKey}`)}
+            {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
+          </>
+        }
+        category={
+          <>
+            <CategoryContent modal />
+            <UpgradeAlert />
+          </>
+        }
+      >
+        {children}
+      </SettingModalLayout>
+    </ModalLayout>
   );
 });
 

package/src/app/@modal/_layout/ModalLayout.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { Modal, type ModalProps } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { useRouter } from 'next/navigation';
+import { memo, useState } from 'react';
+
+const ModalLayout = memo<ModalProps>(
+  ({
+    children,
+    height = 'min(80vh,750px)',
+    width = 'min(80vw, 1024px)',
+    onCancel,
+    afterClose,
+    styles,
+    ...rest
+  }) => {
+    const [open, setOpen] = useState(true);
+    const router = useRouter();
+    const theme = useTheme();
+
+    return (
+      <Modal
+        afterClose={() => {
+          afterClose?.();
+          router.back();
+        }}
+        enableResponsive={false}
+        footer={null}
+        height={height}
+        onCancel={(e) => {
+          onCancel?.(e);
+          setOpen(false);
+          router.back();
+        }}
+        open={open}
+        styles={{
+          ...styles,
+          body: {
+            display: 'flex',
+            height: height,
+            overflow: 'hidden',
+            padding: 0,
+            position: 'relative',
+            ...styles?.body,
+          },
+          content: {
+            border: 'none',
+            boxShadow: `0 0 0 1px ${theme.colorBorderSecondary}`,
+            ...styles?.content,
+          },
+        }}
+        title={false}
+        width={width}
+        {...rest}
+      >
+        {children}
+      </Modal>
+    );
+  },
+);
+
+export default ModalLayout;