@lobehub/chat 1.42.5 → 1.43.0

package/src/app/(main)/profile/hooks/useCategory.tsx

@@ -0,0 +1,51 @@
+import { Icon } from '@lobehub/ui';
+import { ChartColumnBigIcon, ShieldCheck, UserCircle } from 'lucide-react';
+import Link from 'next/link';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuProps } from '@/components/Menu';
+import { isDeprecatedEdition } from '@/const/version';
+import { ProfileTabs } from '@/store/global/initialState';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/slices/auth/selectors';
+
+export const useCategory = () => {
+  const { t } = useTranslation('auth');
+  const [enableAuth, isLoginWithClerk] = useUserStore((s) => [
+    authSelectors.enabledAuth(s),
+    authSelectors.isLoginWithClerk(s),
+  ]);
+
+  const cateItems: MenuProps['items'] = [
+    {
+      icon: <Icon icon={UserCircle} />,
+      key: ProfileTabs.Profile,
+      label: (
+        <Link href={'/profile'} onClick={(e) => e.preventDefault()}>
+          {t('tab.profile')}
+        </Link>
+      ),
+    },
+    enableAuth &&
+      isLoginWithClerk && {
+        icon: <Icon icon={ShieldCheck} />,
+        key: ProfileTabs.Security,
+        label: (
+          <Link href={'/profile/security'} onClick={(e) => e.preventDefault()}>
+            {t('tab.security')}
+          </Link>
+        ),
+      },
+    !isDeprecatedEdition && {
+      icon: <Icon icon={ChartColumnBigIcon} />,
+      key: ProfileTabs.Stats,
+      label: (
+        <Link href={'/profile/stats'} onClick={(e) => e.preventDefault()}>
+          {t('tab.stats')}
+        </Link>
+      ),
+    },
+  ].filter(Boolean) as MenuProps['items'];
+
+  return cateItems;
+};

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

@@ -1,21 +1,11 @@
-import { notFound } from 'next/navigation';
-import { PropsWithChildren } from 'react';
+import ServerLayout from '@/components/server/ServerLayout';
 
-import { enableClerk } from '@/const/auth';
-import { isMobileDevice } from '@/utils/server/responsive';
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
 
-import MobileLayout from './_layout/Mobile';
+const ProfileLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
 
-const Layout = async ({ children }: PropsWithChildren) => {
-  if (!enableClerk) return notFound();
+ProfileLayout.displayName = 'ProfileLayout';
 
-  const mobile = await isMobileDevice();
-
-  if (mobile) return <MobileLayout>{children}</MobileLayout>;
-
-  return children;
-};
-
-Layout.displayName = 'ProfileLayout';
-
-export default Layout;
+export default ProfileLayout;

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

@@ -1,23 +1,3 @@
-import { Flexbox } from 'react-layout-kit';
+import Loading from '@/components/Loading/BrandTextLoading';
 
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-import { isMobileDevice } from '@/utils/server/responsive';
-
-const Loading = async () => {
-  const mobile = await isMobileDevice();
-  if (mobile) return <SkeletonLoading paragraph={{ rows: 8 }} />;
-  return (
-    <Flexbox horizontal style={{ position: 'relative' }} width={'100%'}>
-      <Flexbox padding={24} width={256}>
-        <SkeletonLoading paragraph={{ rows: 8 }} />;
-      </Flexbox>
-      <Flexbox align={'center'} flex={1}>
-        <Flexbox padding={24} style={{ maxWidth: 1024 }} width={'100%'}>
-          <SkeletonLoading paragraph={{ rows: 8 }} />;
-        </Flexbox>
-      </Flexbox>
-    </Flexbox>
-  );
-};
-
-export default Loading;
+export default () => <Loading />;

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

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

package/src/app/(main)/profile/security/page.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { notFound } from 'next/navigation';
+
+import { enableClerk } from '@/const/auth';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/server/responsive';
+
+const ClerkProfile = dynamic(() => import('../features/ClerkProfile'), {
+  loading: () => (
+    <div style={{ flex: 1 }}>
+      <Skeleton paragraph={{ rows: 8 }} title={false} />
+    </div>
+  ),
+});
+
+export const generateMetadata = async () => {
+  const { t } = await translation('auth');
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('tab.security'),
+    url: '/profile/security',
+  });
+};
+
+const Page = async () => {
+  if (!enableClerk) return notFound();
+  const mobile = await isMobileDevice();
+
+  return <ClerkProfile mobile={mobile} />;
+};
+
+export default Page;

package/src/app/(main)/profile/stats/Client.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { FormGroup, Grid } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+
+import AiHeatmaps from './features/AiHeatmaps';
+import AssistantsRank from './features/AssistantsRank';
+import ModelsRank from './features/ModelsRank';
+import ShareButton from './features/ShareButton';
+import TopicsRank from './features/TopicsRank';
+import TotalAssistants from './features/TotalAssistants';
+import TotalMessages from './features/TotalMessages';
+import TotalTopics from './features/TotalTopics';
+import TotalWords from './features/TotalWords';
+import Welcome from './features/Welcome';
+
+const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { t } = useTranslation('auth');
+
+  return (
+    <Flexbox gap={mobile ? 0 : 24}>
+      {mobile ? (
+        <Welcome mobile />
+      ) : (
+        <Flexbox align={'flex-start'} gap={16} horizontal justify={'space-between'}>
+          <Welcome />
+          <ShareButton />
+        </Flexbox>
+      )}
+      <FormGroup style={FORM_STYLE.style} title={t('tab.stats')} variant={'pure'}>
+        <Grid maxItemWidth={150} paddingBlock={16} rows={4}>
+          <TotalAssistants mobile={mobile} />
+          <TotalTopics mobile={mobile} />
+          <TotalMessages mobile={mobile} />
+          <TotalWords />
+        </Grid>
+      </FormGroup>
+      <AiHeatmaps mobile={mobile} />
+      <Grid gap={mobile ? 0 : 48} rows={3}>
+        <ModelsRank />
+        <AssistantsRank />
+        <TopicsRank />
+      </Grid>
+    </Flexbox>
+  );
+});
+
+export default Client;

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

@@ -0,0 +1,130 @@
+import { Heatmaps, HeatmapsProps } from '@lobehub/charts';
+import { FormGroup, Icon } from '@lobehub/ui';
+import { Tag } from 'antd';
+import { useTheme } from 'antd-style';
+import { FlameIcon } from 'lucide-react';
+import { readableColor } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useClientDataSWR } from '@/libs/swr';
+import { messageService } from '@/services/message';
+
+const AiHeatmaps = memo<Omit<HeatmapsProps, 'data'> & { inShare?: boolean; mobile?: boolean }>(
+  ({ inShare, mobile, ...rest }) => {
+    const { t } = useTranslation('auth');
+    const theme = useTheme();
+    const { data, isLoading } = useClientDataSWR('stats-heatmaps', async () =>
+      messageService.getHeatmaps(),
+    );
+
+    const days = data?.filter((item) => item.level > 0).length || '--';
+    const hotDays = data?.filter((item) => item.level >= 3).length || '--';
+
+    const content = (
+      <Heatmaps
+        blockMargin={mobile ? 3 : undefined}
+        blockRadius={mobile ? 2 : undefined}
+        blockSize={mobile ? 6 : 14}
+        data={data || []}
+        labels={{
+          legend: {
+            less: t('heatmaps.legend.less'),
+            more: t('heatmaps.legend.more'),
+          },
+          months: [
+            t('heatmaps.months.jan'),
+            t('heatmaps.months.feb'),
+            t('heatmaps.months.mar'),
+            t('heatmaps.months.apr'),
+            t('heatmaps.months.may'),
+            t('heatmaps.months.jun'),
+            t('heatmaps.months.jul'),
+            t('heatmaps.months.aug'),
+            t('heatmaps.months.sep'),
+            t('heatmaps.months.oct'),
+            t('heatmaps.months.nov'),
+            t('heatmaps.months.dec'),
+          ],
+          tooltip: t('heatmaps.tooltip'),
+          totalCount: t('heatmaps.totalCount'),
+        }}
+        loading={isLoading || !data}
+        maxLevel={4}
+        {...rest}
+      />
+    );
+
+    const fillColor = readableColor(theme.gold);
+    const tags = (
+      <Flexbox
+        gap={4}
+        horizontal
+        style={{
+          alignSelf: 'center',
+          flex: 'none',
+          zoom: 0.9,
+        }}
+      >
+        <Tag
+          bordered={false}
+          style={{
+            background: theme.colorText,
+            color: theme.colorBgLayout,
+            fontWeight: 500,
+            margin: 0,
+          }}
+        >
+          {[days, t('stats.days')].join(' ')}
+        </Tag>
+        <Tag
+          bordered={false}
+          color={'gold'}
+          icon={<Icon color={fillColor} fill={fillColor} icon={FlameIcon} />}
+          style={{
+            background: theme.gold,
+            color: fillColor,
+            fontWeight: 500,
+            margin: 0,
+          }}
+        >
+          {[hotDays, t('stats.days')].join(' ')}
+        </Tag>
+      </Flexbox>
+    );
+
+    if (inShare) {
+      return (
+        <Flexbox gap={4}>
+          <Flexbox align={'baseline'} gap={4} horizontal justify={'space-between'}>
+            <div
+              style={{
+                color: theme.colorTextDescription,
+                fontSize: 12,
+              }}
+            >
+              {t('stats.lastYearActivity')}
+            </div>
+            {tags}
+          </Flexbox>
+          {content}
+        </Flexbox>
+      );
+    }
+
+    return (
+      <FormGroup
+        extra={tags}
+        style={FORM_STYLE.style}
+        title={t('stats.lastYearActivity')}
+        variant={'pure'}
+      >
+        <Flexbox paddingBlock={24}>{content}</Flexbox>
+      </FormGroup>
+    );
+  },
+);
+
+export default AiHeatmaps;

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

@@ -0,0 +1,115 @@
+import { BarList } from '@lobehub/charts';
+import { ActionIcon, Avatar, FormGroup, Modal } from '@lobehub/ui';
+import { MaximizeIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import qs from 'query-string';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { DEFAULT_AVATAR } from '@/const/meta';
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useClientDataSWR } from '@/libs/swr';
+import { sessionService } from '@/services/session';
+import { SessionRankItem } from '@/types/session';
+
+export const AssistantsRank = memo(() => {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation(['auth', 'chat']);
+  const router = useRouter();
+  const { data, isLoading } = useClientDataSWR('rank-sessions', async () =>
+    sessionService.rankSessions(),
+  );
+
+  const showExtra = Boolean(data && data?.length > 5);
+
+  const mapData = (item: SessionRankItem) => {
+    const link = qs.stringifyUrl({
+      query: {
+        session: item.id,
+      },
+      url: '/chat',
+    });
+
+    return {
+      icon: (
+        <Avatar
+          alt={item.title || t('defaultAgent', { ns: 'chat' })}
+          avatar={item.avatar || DEFAULT_AVATAR}
+          background={item.backgroundColor || undefined}
+          size={28}
+          style={{
+            backdropFilter: 'blur(8px)',
+          }}
+        />
+      ),
+      link,
+      name: (
+        <Link href={link} style={{ color: 'inherit' }}>
+          {item.title
+            ? item.id === INBOX_SESSION_ID
+              ? t('inbox.title', { ns: 'chat' })
+              : item.title
+            : t('defaultAgent', { ns: 'chat' })}
+        </Link>
+      ),
+      value: item.count,
+    };
+  };
+
+  return (
+    <>
+      <FormGroup
+        extra={
+          showExtra && (
+            <ActionIcon
+              icon={MaximizeIcon}
+              onClick={() => setOpen(true)}
+              size={{ blockSize: 28, fontSize: 20 }}
+            />
+          )
+        }
+        style={FORM_STYLE.style}
+        title={t('stats.assistantsRank.title')}
+        variant={'pure'}
+      >
+        <Flexbox paddingBlock={16}>
+          <BarList
+            data={data?.slice(0, 5).map((item) => mapData(item)) || []}
+            height={220}
+            leftLabel={t('stats.assistantsRank.left')}
+            loading={isLoading || !data}
+            noDataText={{
+              desc: t('stats.empty.desc'),
+              title: t('stats.empty.title'),
+            }}
+            onValueChange={(item) => router.push(item.link)}
+            rightLabel={t('stats.assistantsRank.right')}
+          />
+        </Flexbox>
+      </FormGroup>
+      {showExtra && (
+        <Modal
+          footer={null}
+          loading={isLoading || !data}
+          onCancel={() => setOpen(false)}
+          open={open}
+          title={t('stats.assistantsRank.title')}
+        >
+          <BarList
+            data={data?.map((item) => mapData(item)) || []}
+            height={340}
+            leftLabel={t('stats.assistantsRank.left')}
+            loading={isLoading || !data}
+            onValueChange={(item) => router.push(item.link)}
+            rightLabel={t('stats.assistantsRank.right')}
+          />
+        </Modal>
+      )}
+    </>
+  );
+});
+
+export default AssistantsRank;

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

@@ -0,0 +1,84 @@
+import { BarList } from '@lobehub/charts';
+import { ModelIcon } from '@lobehub/icons';
+import { ActionIcon, FormGroup, Modal } from '@lobehub/ui';
+import { MaximizeIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useClientDataSWR } from '@/libs/swr';
+import { messageService } from '@/services/message';
+import { ModelRankItem } from '@/types/message';
+
+export const TopicsRank = memo(() => {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation('auth');
+  const { data, isLoading } = useClientDataSWR('rank-models', async () =>
+    messageService.rankModels(),
+  );
+
+  const showExtra = Boolean(data && data?.length > 5);
+
+  const mapData = (item: ModelRankItem) => {
+    return {
+      icon: <ModelIcon model={item.id as string} size={24} />,
+      id: item.id,
+
+      name: item.id,
+      value: item.count,
+    };
+  };
+
+  return (
+    <>
+      <FormGroup
+        extra={
+          showExtra ? (
+            <ActionIcon
+              icon={MaximizeIcon}
+              onClick={() => setOpen(true)}
+              size={{ blockSize: 28, fontSize: 20 }}
+            />
+          ) : undefined
+        }
+        style={FORM_STYLE.style}
+        title={t('stats.modelsRank.title')}
+        variant={'pure'}
+      >
+        <Flexbox horizontal paddingBlock={16}>
+          <BarList
+            data={data?.slice(0, 5).map((item) => mapData(item)) || []}
+            height={220}
+            leftLabel={t('stats.modelsRank.left')}
+            loading={isLoading || !data}
+            noDataText={{
+              desc: t('stats.empty.desc'),
+              title: t('stats.empty.title'),
+            }}
+            rightLabel={t('stats.modelsRank.right')}
+          />
+        </Flexbox>
+      </FormGroup>
+      {showExtra && (
+        <Modal
+          footer={null}
+          loading={isLoading || !data}
+          onCancel={() => setOpen(false)}
+          open={open}
+          title={t('stats.modelsRank.title')}
+        >
+          <BarList
+            data={data?.map((item) => mapData(item)) || []}
+            height={340}
+            leftLabel={t('stats.assistantsRank.left')}
+            loading={isLoading || !data}
+            rightLabel={t('stats.assistantsRank.right')}
+          />
+        </Modal>
+      )}
+    </>
+  );
+});
+
+export default TopicsRank;

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

@@ -0,0 +1,159 @@
+import { Github } from '@lobehub/icons';
+import { Grid } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { ProductLogo } from '@/components/Branding';
+import { OFFICIAL_URL, imageUrl } from '@/const/url';
+import { isServerMode } from '@/const/version';
+import UserAvatar from '@/features/User/UserAvatar';
+
+import TotalMessages from '..//TotalMessages';
+import TotalWords from '..//TotalWords';
+import AiHeatmaps from '../AiHeatmaps';
+
+const useStyles = createStyles(({ css, token, stylish, cx, responsive }) => ({
+  avatar: css`
+    box-sizing: content-box;
+    background: ${token.colorText};
+    border: 4px solid ${token.colorBgLayout};
+  `,
+  background: css`
+    position: relative;
+
+    width: 100%;
+    padding: 24px;
+
+    background-color: ${token.colorBgLayout};
+    background-image: url(${imageUrl('screenshot_background.webp')});
+    background-position: center;
+    background-size: 120% 120%;
+  `,
+
+  container: css`
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+
+    background: ${token.colorBgLayout};
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG * 2}px;
+    box-shadow: ${token.boxShadow};
+  `,
+  decs: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  footer: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  heatmaps: css`
+    .legend-month,
+    footer {
+      display: none;
+    }
+  `,
+  preview: cx(
+    stylish.noScrollbar,
+    css`
+      overflow: hidden scroll;
+
+      width: 100%;
+      max-height: 70dvh;
+
+      background: ${token.colorBgLayout};
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadiusLG}px;
+
+      * {
+        pointer-events: none;
+
+        ::-webkit-scrollbar {
+          width: 0 !important;
+          height: 0 !important;
+        }
+      }
+
+      ${responsive.mobile} {
+        max-height: 40dvh;
+      }
+    `,
+  ),
+  title: css`
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+  `,
+}));
+
+const Preview = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('auth');
+  const isOfficial = !isServerMode && OFFICIAL_URL.includes(location.host);
+
+  return (
+    <div className={styles.preview}>
+      <div className={styles.background} id={'preview'}>
+        <Center className={styles.container} gap={12} padding={24}>
+          <ProductLogo size={24} type={'text'} />
+          <div className={styles.title}>{t('stats.share.title')}</div>
+          <Flexbox align={'center'} horizontal>
+            <UserAvatar
+              className={styles.avatar}
+              size={48}
+              style={{
+                marginRight: -12,
+                zIndex: 2,
+              }}
+            />
+            <Center
+              className={styles.avatar}
+              height={48}
+              style={{
+                borderRadius: '50%',
+                zIndex: 1,
+              }}
+              width={48}
+            >
+              <ProductLogo size={40} />
+            </Center>
+          </Flexbox>
+          <Flexbox gap={12} paddingBlock={12} width={'100%'}>
+            <AiHeatmaps
+              blockMargin={2}
+              blockRadius={1}
+              blockSize={4.5}
+              className={styles.heatmaps}
+              inShare
+              style={{
+                marginTop: -12,
+              }}
+              width={'100%'}
+            />
+            <Grid gap={8} maxItemWidth={100} rows={2} width={'100%'}>
+              <TotalMessages inShare />
+              <TotalWords inShare />
+            </Grid>
+          </Flexbox>
+          <div className={styles.footer}>
+            {isOfficial ? (
+              OFFICIAL_URL
+            ) : (
+              <Flexbox align={'center'} gap={8} horizontal>
+                <Github size={16} />
+                <span>lobehub/lobe-chat</span>
+              </Flexbox>
+            )}
+          </div>
+        </Center>
+      </div>
+    </div>
+  );
+});
+
+export default Preview;