@lobehub/chat 1.42.6 → 1.43.0

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;

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

@@ -0,0 +1,87 @@
+'use client';
+
+import { type FormItemProps, FormModal, FormModalProps } from '@lobehub/ui';
+import { Segmented, Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ImageType, imageTypeOptions, useScreenshot } from '@/hooks/useScreenshot';
+
+const Preview = dynamic(() => import('./Preview'), {
+  loading: () => (
+    <Skeleton.Button
+      active
+      block
+      size={'large'}
+      style={{
+        height: 400,
+        width: '100%',
+      }}
+    />
+  ),
+});
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  preview: css`
+    .${prefixCls}-form-item-label {
+      display: none;
+    }
+  `,
+}));
+
+type FieldType = {
+  imageType: ImageType;
+};
+
+const DEFAULT_FIELD_VALUE: FieldType = {
+  imageType: ImageType.JPG,
+};
+
+const ShareModal = memo<FormModalProps & { mobile?: boolean }>(({ open, onCancel, mobile }) => {
+  const { t } = useTranslation(['chat', 'common']);
+  const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
+  const { styles } = useStyles();
+  const { loading, onDownload } = useScreenshot({
+    imageType: fieldValue.imageType,
+    title: 'stats',
+    width: mobile ? 440 : undefined,
+  });
+
+  const items: FormItemProps[] = [
+    {
+      children: <Preview />,
+      className: styles.preview,
+      divider: false,
+      minWidth: '100%',
+    },
+    {
+      children: <Segmented options={imageTypeOptions} />,
+      divider: false,
+      label: t('shareModal.imageType'),
+      minWidth: undefined,
+      name: 'imageType',
+    },
+  ];
+
+  return (
+    <FormModal
+      allowFullscreen
+      footer={null}
+      initialValues={DEFAULT_FIELD_VALUE}
+      items={items}
+      itemsType={'flat'}
+      onCancel={onCancel}
+      onFinish={onDownload}
+      onValuesChange={(_, v) => setFieldValue(v)}
+      open={open}
+      submitLoading={loading}
+      submitText={t('shareModal.download')}
+      title={t('share', { ns: 'common' })}
+      width={480}
+    />
+  );
+});
+
+export default ShareModal;

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

@@ -0,0 +1,39 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface TotalCardProps {
+  count: string | number;
+  title: string;
+}
+
+const TotalCard = memo<TotalCardProps>(({ title, count }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox
+      padding={12}
+      style={{
+        background: theme.isDarkMode ? theme.colorFillTertiary : theme.colorFillQuaternary,
+        borderRadius: theme.borderRadiusLG,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 13,
+        }}
+      >
+        {title}
+      </div>
+      <div
+        style={{
+          fontSize: 20,
+          fontWeight: 'bold',
+        }}
+      >
+        {count}
+      </div>
+    </Flexbox>
+  );
+});
+
+export default TotalCard;

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { Share2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+
+import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+
+import ShareModal from './ShareModal';
+
+const ShareButton = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <ActionIcon
+        icon={Share2Icon}
+        onClick={() => setOpen(true)}
+        size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
+      />
+      <ShareModal mobile={mobile} onCancel={() => setOpen(false)} open={open} />
+    </>
+  );
+});
+
+export default ShareButton;