@lobehub/chat 1.42.6 → 1.43.1

package/src/app/(main)/profile/stats/features/Welcome.tsx

@@ -0,0 +1,86 @@
+import { FluentEmoji } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { Clock3Icon, ClockArrowUp } from 'lucide-react';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import TimeLabel from '@/app/(main)/profile/stats/features/TimeLabel';
+import { BRANDING_NAME } from '@/const/branding';
+import { useClientDataSWR } from '@/libs/swr';
+import { userService } from '@/services/user';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/slices/auth/selectors';
+import { formatIntergerNumber } from '@/utils/format';
+
+const formatEnglishNumber = (number: number) => {
+  if (number === 1) return '1st';
+  if (number === 2) return '2nd';
+  if (number === 3) return '3rd';
+  return `${formatIntergerNumber(number)}th`;
+};
+
+const Welcome = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { t, i18n } = useTranslation('auth');
+  const theme = useTheme();
+  const [nickname, username] = useUserStore((s) => [
+    userProfileSelectors.nickName(s),
+    userProfileSelectors.username(s),
+  ]);
+
+  const { data, isLoading } = useClientDataSWR('welcome', async () =>
+    userService.getUserRegistrationDuration(),
+  );
+
+  return (
+    <Flexbox gap={8} padding={mobile ? 16 : 0}>
+      <Flexbox
+        align={'center'}
+        gap={8}
+        horizontal
+        style={{
+          fontSize: mobile ? 16 : 20,
+          fontWeight: 500,
+        }}
+      >
+        <div>
+          <Trans
+            components={{
+              span:
+                isLoading || !data ? (
+                  <Skeleton.Button active style={{ height: 24, minWidth: 40, width: 40 }} />
+                ) : (
+                  <span style={{ fontWeight: 'bold' }} />
+                ),
+            }}
+            i18nKey="stats.welcome"
+            ns={'auth'}
+            values={{
+              appName: BRANDING_NAME,
+              days:
+                i18n.language === 'en-US'
+                  ? formatEnglishNumber(Number(data?.duration || 1))
+                  : formatIntergerNumber(Number(data?.duration || 1)),
+              username: nickname || username,
+            }}
+          />
+        </div>
+        {!mobile && <FluentEmoji emoji={'🫶'} size={32} type={'anim'} />}
+      </Flexbox>
+      <Flexbox
+        gap={16}
+        horizontal
+        style={{
+          color: theme.colorTextDescription,
+        }}
+        wrap={'wrap'}
+      >
+        <TimeLabel date={data?.createdAt} icon={Clock3Icon} title={t('stats.createdAt')} />
+        <TimeLabel date={data?.updatedAt} icon={ClockArrowUp} title={t('stats.updatedAt')} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Welcome;

package/src/app/(main)/profile/{[[...slugs]] → stats}/page.tsx

@@ -5,17 +5,16 @@ import { isMobileDevice } from '@/utils/server/responsive';
 import Client from './Client';
 
 export const generateMetadata = async () => {
-  const { t } = await translation('clerk');
+  const { t } = await translation('auth');
   return metadataModule.generate({
-    description: t('userProfile.navbar.title'),
-    title: t('userProfile.navbar.description'),
-    url: '/profile',
+    description: t('header.desc'),
+    title: t('tab.stats'),
+    url: '/profile/stats',
   });
 };
 
 const Page = async () => {
   const mobile = await isMobileDevice();
-
   return <Client mobile={mobile} />;
 };
 

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/Loading/BrandTextLoading';
+import Loading from '@/components/Loading/BrandTextLoading';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
 import DatasetDetail from './DatasetDetail';
@@ -34,7 +34,7 @@ const Dataset = ({ params }: Props) => {
   const isEmpty = data?.length === 0;
 
   return isLoading ? (
-    <CircleLoading />
+    <Loading />
   ) : isEmpty ? (
     <EmptyGuide knowledgeBaseId={knowledgeBaseId} />
   ) : (

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

@@ -2,7 +2,7 @@
 
 import { Flexbox } from 'react-layout-kit';
 
-import CircleLoading from '@/components/Loading/BrandTextLoading';
+import Loading from '@/components/Loading/BrandTextLoading';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
 import EmptyGuide from './EmptyGuide';
@@ -24,7 +24,7 @@ const Evaluation = ({ params }: Props) => {
   const isEmpty = data?.length === 0;
 
   return isLoading ? (
-    <CircleLoading />
+    <Loading />
   ) : isEmpty ? (
     <EmptyGuide knowledgeBaseId={knowledgeBaseId} />
   ) : (

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

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
 import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { SettingsTabs } from '@/store/global/initialState';

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

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import SettingContainer from '@/features/Setting/SettingContainer';
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import { LayoutProps } from '../type';

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

@@ -7,7 +7,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
 import { SettingsTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';

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

@@ -1,4 +1,5 @@
 import MobileContentLayout from '@/components/server/MobileNavLayout';
+import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 
 import { LayoutProps } from '../type';
@@ -9,6 +10,7 @@ const Layout = ({ children }: LayoutProps) => {
     <MobileContentLayout header={<Header />}>
       {children}
       <Footer />
+      <InitClientDB />
     </MobileContentLayout>
   );
 };

package/src/app/(main)/settings/common/features/Theme/index.tsx

@@ -11,14 +11,9 @@ import { useTranslation } from 'react-i18next';
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
-import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { Locales, localeOptions } from '@/locales/resources';
 import { useUserStore } from '@/store/user';
-import {
-  authSelectors,
-  settingsSelectors,
-  userGeneralSettingsSelectors,
-} from '@/store/user/selectors';
+import { settingsSelectors, userGeneralSettingsSelectors } from '@/store/user/selectors';
 import { switchLang } from '@/utils/client/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
@@ -31,11 +26,7 @@ const Theme = memo(() => {
   const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const themeMode = useUserStore(userGeneralSettingsSelectors.currentThemeMode);
-  const [setThemeMode, setSettings, enableAuth] = useUserStore((s) => [
-    s.switchThemeMode,
-    s.setSettings,
-    authSelectors.enabledAuth(s),
-  ]);
+  const [setThemeMode, setSettings] = useUserStore((s) => [s.switchThemeMode, s.setSettings]);
 
   useSyncSettings(form);
 
@@ -46,12 +37,6 @@ const Theme = memo(() => {
 
   const theme: SettingItemGroup = {
     children: [
-      {
-        children: <AvatarWithUpload />,
-        hidden: enableAuth,
-        label: t('settingTheme.avatar.title'),
-        minWidth: undefined,
-      },
       {
         children: (
           <SelectWithImg

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

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

package/src/components/Loading/BrandTextLoading/index.tsx

@@ -1,16 +1,16 @@
+import { BrandLoading, LobeChatText } from '@lobehub/ui/brand';
 import { Center } from 'react-layout-kit';
 
 import { isCustomBranding } from '@/const/version';
 
 import CircleLoading from '../CircleLoading';
-import LobeChatText from './LobeChatText';
 
 export default () => {
   if (isCustomBranding) return <CircleLoading />;
 
   return (
     <Center height={'100%'} width={'100%'}>
-      <LobeChatText />
+      <BrandLoading size={40} style={{ opacity: 0.6 }} text={LobeChatText} />
     </Center>
   );
 };

package/src/components/Statistic/index.tsx

@@ -0,0 +1,15 @@
+import { useTheme } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Statistic = memo<{ title: ReactNode; value: ReactNode }>(({ value, title }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox gap={4} horizontal style={{ color: theme.colorTextSecondary, fontSize: 12 }}>
+      <span style={{ fontWeight: 'bold' }}>{value}</span>
+      <span>{title}</span>
+    </Flexbox>
+  );
+});
+
+export default Statistic;

package/src/components/StatisticCard/TitleWithPercentage.tsx

@@ -0,0 +1,80 @@
+import { Tag, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { CSSProperties, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { calcGrowthPercentage } from './growthPercentage';
+
+const { Title } = Typography;
+
+interface TitleWithPercentageProps {
+  count?: number;
+  inverseColor?: boolean;
+  prvCount?: number;
+  title: string;
+}
+
+const TitleWithPercentage = memo<TitleWithPercentageProps>(
+  ({ inverseColor, title, prvCount, count }) => {
+    const percentage = calcGrowthPercentage(count || 0, prvCount || 0);
+    const theme = useTheme();
+
+    const upStyle: CSSProperties = {
+      background: theme.colorSuccessBg,
+      borderColor: theme.colorSuccessBorder,
+      color: theme.colorSuccess,
+    };
+
+    const downStyle: CSSProperties = {
+      backgroundColor: theme.colorWarningBg,
+      borderColor: theme.colorWarningBorder,
+      color: theme.colorWarning,
+    };
+
+    return (
+      <Flexbox
+        align={'center'}
+        gap={8}
+        horizontal
+        justify={'flex-start'}
+        style={{
+          overflow: 'hidden',
+          position: 'inherit',
+        }}
+      >
+        <Title
+          ellipsis={{ rows: 1, tooltip: title }}
+          level={2}
+          style={{
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+            lineHeight: 'inherit',
+            margin: 0,
+            overflow: 'hidden',
+          }}
+        >
+          {title}
+        </Title>
+        {count && prvCount && percentage && percentage !== 0 ? (
+          <Tag
+            style={{
+              borderWidth: 0.5,
+              ...(inverseColor
+                ? percentage > 0
+                  ? downStyle
+                  : upStyle
+                : percentage > 0
+                  ? upStyle
+                  : downStyle),
+            }}
+          >
+            {percentage > 0 ? '+' : ''}
+            {percentage.toFixed(1)}%
+          </Tag>
+        ) : null}
+      </Flexbox>
+    );
+  },
+);
+
+export default TitleWithPercentage;

package/src/components/StatisticCard/growthPercentage.tsx

@@ -0,0 +1,8 @@
+export const calcGrowthPercentage = (currentCount: number, previousCount: number) => {
+  if (typeof currentCount !== 'number') return 0;
+  return previousCount !== 0
+    ? ((currentCount - previousCount) / previousCount) * 100 // 计算增长百分比
+    : currentCount > 0
+      ? 100
+      : 0;
+};

package/src/components/StatisticCard/index.tsx

@@ -0,0 +1,209 @@
+import {
+  StatisticCard as AntdStatisticCard,
+  StatisticCardProps as AntdStatisticCardProps,
+} from '@ant-design/pro-components';
+import { Spin, Typography } from 'antd';
+import { createStyles, useResponsive } from 'antd-style';
+import { adjustHue } from 'polished';
+import { memo } from 'react';
+
+const { Title } = Typography;
+
+const useStyles = createStyles(
+  ({ isDarkMode, css, token, prefixCls, responsive }, highlight: string = '#000') => ({
+    card: css`
+      border: 1px solid ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
+      border-radius: ${token.borderRadiusLG}px;
+
+      ${responsive.mobile} {
+        background: ${token.colorBgContainer};
+        border: none;
+        border-radius: 0;
+      }
+    `,
+    container: css`
+      ${responsive.mobile} {
+        background: ${token.colorBgContainer};
+        border: none;
+        border-radius: 0;
+      }
+
+      .${prefixCls}-pro-card-title {
+        overflow: hidden;
+
+        ${responsive.mobile} {
+          margin: 0;
+          font-size: 14px;
+          line-height: 16px !important;
+        }
+      }
+
+      .${prefixCls}-pro-card-body {
+        padding: 0;
+        .${prefixCls}-pro-statistic-card-content {
+          position: relative;
+          width: 100%;
+          padding-block-end: 16px;
+          padding-inline: 24px;
+          .${prefixCls}-pro-statistic-card-chart {
+            position: relative;
+            width: 100%;
+          }
+        }
+
+        .${prefixCls}-pro-statistic-card-footer {
+          overflow: hidden;
+
+          margin: 0;
+          padding: 0;
+
+          border-end-start-radius: ${token.borderRadiusLG}px;
+          border-end-end-radius: ${token.borderRadiusLG}px;
+        }
+      }
+
+      .${prefixCls}-pro-card-loading-content {
+        padding-block: 16px;
+        padding-inline: 24px;
+      }
+
+      .${prefixCls}-pro-card-header {
+        padding-block-start: 16px;
+        padding-inline: 24px;
+
+        .${prefixCls}-pro-card-title {
+          line-height: 32px;
+        }
+
+        + .${prefixCls}-pro-card-body {
+          padding-block-start: 0;
+        }
+
+        ${responsive.mobile} {
+          flex-wrap: wrap;
+          gap: 8px;
+
+          margin-block-end: 8px;
+          padding-block-start: 0;
+          padding-inline: 0;
+        }
+      }
+
+      .${prefixCls}-statistic-content-value-int, .${prefixCls}-statistic-content-value-decimal {
+        font-size: 24px;
+        font-weight: bold;
+        line-height: 1.2;
+      }
+
+      .${prefixCls}-pro-statistic-card-chart {
+        margin: 0;
+      }
+
+      .${prefixCls}-pro-statistic-card-content {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        ${responsive.mobile} {
+          padding-block-end: 0 !important;
+          padding-inline: 0 !important;
+        }
+      }
+
+      .${prefixCls}-pro-statistic-card-content-horizontal {
+        flex-direction: row;
+        align-items: center;
+
+        .${prefixCls}-pro-statistic-card-chart {
+          align-self: center;
+        }
+      }
+    `,
+    highlight: css`
+      overflow: hidden;
+
+      &::before {
+        content: '';
+
+        position: absolute;
+        z-index: 0;
+        inset-block-end: -30%;
+        inset-inline-end: -30%;
+        transform: rotate(-15deg);
+
+        width: 66%;
+        height: 50%;
+
+        opacity: ${isDarkMode ? 1 : 0.33};
+        background-image: linear-gradient(
+          60deg,
+          ${adjustHue(-30, highlight)} 20%,
+          ${highlight} 80%
+        );
+        background-repeat: no-repeat;
+        background-position: center left;
+        background-size: contain;
+        filter: blur(32px);
+        border-radius: 50%;
+      }
+
+      > div {
+        z-index: 1;
+      }
+    `,
+    icon: css`
+      background: ${token.colorFillSecondary};
+      border-radius: ${token.borderRadius}px;
+    `,
+    pure: css`
+      background: transparent !important;
+      border: none !important;
+    `,
+  }),
+);
+
+interface StatisticCardProps extends AntdStatisticCardProps {
+  highlight?: string;
+  variant?: 'pure' | 'card';
+}
+
+const StatisticCard = memo<StatisticCardProps>(
+  ({ title, className, highlight, variant, loading, extra, ...rest }) => {
+    const { cx, styles } = useStyles(highlight);
+    const { mobile } = useResponsive();
+    const isPure = variant === 'pure';
+    return (
+      <AntdStatisticCard
+        bordered={!mobile}
+        className={cx(
+          styles.container,
+          isPure ? styles.pure : styles.card,
+          highlight && styles.highlight,
+          className,
+        )}
+        extra={loading ? <Spin percent={'auto'} size={'small'} /> : extra}
+        title={
+          typeof title === 'string' ? (
+            <Title
+              ellipsis={{ rows: 1, tooltip: title }}
+              level={2}
+              style={{
+                fontSize: 'inherit',
+                fontWeight: 'inherit',
+                lineHeight: 'inherit',
+                margin: 0,
+                overflow: 'hidden',
+              }}
+            >
+              {title}
+            </Title>
+          ) : (
+            title
+          )
+        }
+        {...rest}
+      />
+    );
+  },
+);
+
+export default StatisticCard;

package/src/const/url.ts

@@ -9,9 +9,9 @@ import { INBOX_SESSION_ID } from './session';
 
 export const UTM_SOURCE = 'chat_preview';
 
-export const OFFICIAL_URL = 'https://lobechat.com/';
-export const OFFICIAL_PREVIEW_URL = 'https://chat-preview.lobehub.com/';
-export const OFFICIAL_SITE = 'https://lobehub.com/';
+export const OFFICIAL_URL = 'https://lobechat.com';
+export const OFFICIAL_PREVIEW_URL = 'https://chat-preview.lobehub.com';
+export const OFFICIAL_SITE = 'https://lobehub.com';
 
 export const OG_URL = '/og/cover.png?v=1';