@lobehub/chat 1.42.6 → 1.43.0

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';
 

package/src/database/server/models/__tests__/message.test.ts

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { eq } from 'drizzle-orm/expressions';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -1042,41 +1043,6 @@ describe('MessageModel', () => {
     });
   });
 
-  describe('countToday', () => {
-    it('should return the count of messages created today', async () => {
-      // 创建测试数据
-      await serverDB.insert(messages).values([
-        {
-          id: '1',
-          userId,
-          role: 'user',
-          content: 'message 1',
-          createdAt: new Date(),
-        },
-        {
-          id: '2',
-          userId,
-          role: 'user',
-          content: 'message 2',
-          createdAt: new Date(),
-        },
-        {
-          id: '3',
-          userId,
-          role: 'user',
-          content: 'message 3',
-          createdAt: new Date('2023-01-01'),
-        },
-      ]);
-
-      // 调用 countToday 方法
-      const result = await messageModel.countToday();
-
-      // 断言结果
-      expect(result).toBe(2);
-    });
-  });
-
   describe('findMessageQueriesById', () => {
     it('should return undefined for non-existent message query', async () => {
       const result = await messageModel.findMessageQueriesById('non-existent-id');
@@ -1211,4 +1177,349 @@ describe('MessageModel', () => {
       expect(id2).toMatch(/^msg_/);
     });
   });
+
+  describe('countWords', () => {
+    it('should count total words of messages belonging to the user', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'user', content: 'hello world' },
+        { id: '2', userId, role: 'user', content: 'test message' },
+        { id: '3', userId: '456', role: 'user', content: 'other user message' },
+      ]);
+
+      // 调用 countWords 方法
+      const result = await messageModel.countWords();
+
+      // 断言结果 - 'hello world' + 'test message' = 23 characters
+      expect(result).toEqual(23);
+    });
+
+    it('should count words within date range', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        {
+          id: '1',
+          userId,
+          role: 'user',
+          content: 'old message',
+          createdAt: new Date('2023-01-01'),
+        },
+        {
+          id: '2',
+          userId,
+          role: 'user',
+          content: 'new message',
+          createdAt: new Date('2023-06-01'),
+        },
+      ]);
+
+      // 调用 countWords 方法，设置日期范围
+      const result = await messageModel.countWords({
+        range: ['2023-05-01', '2023-07-01'],
+      });
+
+      // 断言结果 - 只计算 'new message' = 11 characters
+      expect(result).toEqual(11);
+    });
+
+    it('should handle empty content', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'user', content: '' },
+        { id: '2', userId, role: 'user', content: null },
+      ]);
+
+      // 调用 countWords 方法
+      const result = await messageModel.countWords();
+
+      // 断言结果
+      expect(result).toEqual(0);
+    });
+  });
+
+  describe('getHeatmaps', () => {
+    it('should return heatmap data for the last year', async () => {
+      const today = dayjs();
+
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        {
+          id: '1',
+          userId,
+          role: 'user',
+          content: 'message 1',
+          createdAt: today.subtract(2, 'day').toDate(),
+        },
+        {
+          id: '2',
+          userId,
+          role: 'user',
+          content: 'message 2',
+          createdAt: today.subtract(2, 'day').toDate(),
+        },
+        {
+          id: '3',
+          userId,
+          role: 'user',
+          content: 'message 3',
+          createdAt: today.subtract(1, 'day').toDate(),
+        },
+      ]);
+
+      // 调用 getHeatmaps 方法
+      const result = await messageModel.getHeatmaps();
+
+      // 断言结果
+      expect(result.length).toBeGreaterThan(366);
+      expect(result.length).toBeLessThan(368);
+
+      // 检查两天前的数据
+      const twoDaysAgo = result.find(
+        (item) => item.date === today.subtract(2, 'day').format('YYYY-MM-DD'),
+      );
+      expect(twoDaysAgo?.count).toBe(2);
+      expect(twoDaysAgo?.level).toBe(0);
+
+      // 检查一天前的数据
+      const oneDayAgo = result.find(
+        (item) => item.date === today.subtract(1, 'day').format('YYYY-MM-DD'),
+      );
+      expect(oneDayAgo?.count).toBe(1);
+      expect(oneDayAgo?.level).toBe(0);
+
+      // 检查今天的数据
+      const todayData = result.find((item) => item.date === today.format('YYYY-MM-DD'));
+      expect(todayData?.count).toBe(0);
+      expect(todayData?.level).toBe(0);
+    });
+
+    it('should calculate correct levels based on message count', async () => {
+      const today = dayjs();
+
+      // 创建测试数据 - 不同数量的消息以测试不同的等级
+      await serverDB.insert(messages).values([
+        // 1 message - level 0
+        {
+          id: '1',
+          userId,
+          role: 'user',
+          content: 'message 1',
+          createdAt: today.subtract(4, 'day').toDate(),
+        },
+        // 6 messages - level 1
+        ...Array(6)
+          .fill(0)
+          .map((_, i) => ({
+            id: `2-${i}`,
+            userId,
+            role: 'user',
+            content: `message 2-${i}`,
+            createdAt: today.subtract(3, 'day').toDate(),
+          })),
+        // 11 messages - level 2
+        ...Array(11)
+          .fill(0)
+          .map((_, i) => ({
+            id: `3-${i}`,
+            userId,
+            role: 'user',
+            content: `message 3-${i}`,
+            createdAt: today.subtract(2, 'day').toDate(),
+          })),
+        // 16 messages - level 3
+        ...Array(16)
+          .fill(0)
+          .map((_, i) => ({
+            id: `4-${i}`,
+            userId,
+            role: 'user',
+            content: `message 4-${i}`,
+            createdAt: today.subtract(1, 'day').toDate(),
+          })),
+        // 21 messages - level 4
+        ...Array(21)
+          .fill(0)
+          .map((_, i) => ({
+            id: `5-${i}`,
+            userId,
+            role: 'user',
+            content: `message 5-${i}`,
+            createdAt: today.toDate(),
+          })),
+      ]);
+
+      // 调用 getHeatmaps 方法
+      const result = await messageModel.getHeatmaps();
+
+      // 检查不同天数的等级
+      const fourDaysAgo = result.find(
+        (item) => item.date === today.subtract(4, 'day').format('YYYY-MM-DD'),
+      );
+      expect(fourDaysAgo?.count).toBe(1);
+      expect(fourDaysAgo?.level).toBe(0);
+
+      const threeDaysAgo = result.find(
+        (item) => item.date === today.subtract(3, 'day').format('YYYY-MM-DD'),
+      );
+      expect(threeDaysAgo?.count).toBe(6);
+      expect(threeDaysAgo?.level).toBe(1);
+
+      const twoDaysAgo = result.find(
+        (item) => item.date === today.subtract(2, 'day').format('YYYY-MM-DD'),
+      );
+      expect(twoDaysAgo?.count).toBe(11);
+      expect(twoDaysAgo?.level).toBe(2);
+
+      const oneDayAgo = result.find(
+        (item) => item.date === today.subtract(1, 'day').format('YYYY-MM-DD'),
+      );
+      expect(oneDayAgo?.count).toBe(16);
+      expect(oneDayAgo?.level).toBe(3);
+
+      const todayData = result.find((item) => item.date === today.format('YYYY-MM-DD'));
+      expect(todayData?.count).toBe(21);
+      expect(todayData?.level).toBe(4);
+    });
+
+    it('should handle empty data', async () => {
+      // 不创建任何消息数据
+
+      // 调用 getHeatmaps 方法
+      const result = await messageModel.getHeatmaps();
+
+      // 断言结果
+      expect(result.length).toBeGreaterThan(366);
+      expect(result.length).toBeLessThan(368);
+
+      // 检查所有数据的 count 和 level 是否为 0
+      result.forEach((item) => {
+        expect(item.count).toBe(0);
+        expect(item.level).toBe(0);
+      });
+    });
+  });
+
+  describe('rankModels', () => {
+    it('should rank models by usage count', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'assistant', content: 'message 1', model: 'gpt-3.5' },
+        { id: '2', userId, role: 'assistant', content: 'message 2', model: 'gpt-3.5' },
+        { id: '3', userId, role: 'assistant', content: 'message 3', model: 'gpt-4' },
+        { id: '4', userId: '456', role: 'assistant', content: 'message 4', model: 'gpt-3.5' }, // 其他用户的消息
+      ]);
+
+      // 调用 rankModels 方法
+      const result = await messageModel.rankModels();
+
+      // 断言结果
+      expect(result).toHaveLength(2);
+      expect(result[0]).toEqual({ id: 'gpt-3.5', count: 2 }); // 当前用户使用 gpt-3.5 两次
+      expect(result[1]).toEqual({ id: 'gpt-4', count: 1 }); // 当前用户使用 gpt-4 一次
+    });
+
+    it('should only count messages with model field', async () => {
+      // 创建测试数据，包括没有 model 字段的消息
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'assistant', content: 'message 1', model: 'gpt-3.5' },
+        { id: '2', userId, role: 'assistant', content: 'message 2', model: null },
+        { id: '3', userId, role: 'user', content: 'message 3' }, // 用户消息通常没有 model
+      ]);
+
+      // 调用 rankModels 方法
+      const result = await messageModel.rankModels();
+
+      // 断言结果
+      expect(result).toHaveLength(1);
+      expect(result[0]).toEqual({ id: 'gpt-3.5', count: 1 });
+    });
+
+    it('should return empty array when no models are used', async () => {
+      // 创建测试数据，所有消息都没有 model
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'user', content: 'message 1' },
+        { id: '2', userId, role: 'assistant', content: 'message 2' },
+      ]);
+
+      // 调用 rankModels 方法
+      const result = await messageModel.rankModels();
+
+      // 断言结果
+      expect(result).toHaveLength(0);
+    });
+
+    it('should order models by count in descending order', async () => {
+      // 创建测试数据，使用不同次数的模型
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'assistant', content: 'message 1', model: 'gpt-4' },
+        { id: '2', userId, role: 'assistant', content: 'message 2', model: 'gpt-3.5' },
+        { id: '3', userId, role: 'assistant', content: 'message 3', model: 'gpt-3.5' },
+        { id: '4', userId, role: 'assistant', content: 'message 4', model: 'claude' },
+        { id: '5', userId, role: 'assistant', content: 'message 5', model: 'gpt-3.5' },
+      ]);
+
+      // 调用 rankModels 方法
+      const result = await messageModel.rankModels();
+
+      // 断言结果
+      expect(result).toHaveLength(3);
+      expect(result[0]).toEqual({ id: 'gpt-3.5', count: 3 }); // 最多使用
+      expect(result[1]).toEqual({ id: 'claude', count: 1 });
+      expect(result[2]).toEqual({ id: 'gpt-4', count: 1 });
+    });
+  });
+
+  describe('hasMoreThanN', () => {
+    it('should return true when message count is greater than N', async () => {
+      // 创建测试数据
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'user', content: 'message 1' },
+        { id: '2', userId, role: 'user', content: 'message 2' },
+        { id: '3', userId, role: 'user', content: 'message 3' },
+      ]);
+
+      // 测试不同的 N 值
+      const result1 = await messageModel.hasMoreThanN(2); // 3 > 2
+      const result2 = await messageModel.hasMoreThanN(3); // 3 ≯ 3
+      const result3 = await messageModel.hasMoreThanN(4); // 3 ≯ 4
+
+      expect(result1).toBe(true);
+      expect(result2).toBe(false);
+      expect(result3).toBe(false);
+    });
+
+    it('should only count messages belonging to the user', async () => {
+      // 创建测试数据，包括其他用户的消息
+      await serverDB.insert(messages).values([
+        { id: '1', userId, role: 'user', content: 'message 1' },
+        { id: '2', userId, role: 'user', content: 'message 2' },
+        { id: '3', userId: '456', role: 'user', content: 'message 3' }, // 其他用户的消息
+      ]);
+
+      const result = await messageModel.hasMoreThanN(2);
+
+      expect(result).toBe(false); // 当前用户只有 2 条消息，不大于 2
+    });
+
+    it('should return false when no messages exist', async () => {
+      const result = await messageModel.hasMoreThanN(0);
+      expect(result).toBe(false);
+    });
+
+    it('should handle edge cases', async () => {
+      // 创建一条消息
+      await serverDB
+        .insert(messages)
+        .values([{ id: '1', userId, role: 'user', content: 'message 1' }]);
+
+      // 测试边界情况
+      const result1 = await messageModel.hasMoreThanN(0); // 1 > 0
+      const result2 = await messageModel.hasMoreThanN(1); // 1 ≯ 1
+      const result3 = await messageModel.hasMoreThanN(-1); // 1 > -1
+
+      expect(result1).toBe(true);
+      expect(result2).toBe(false);
+      expect(result3).toBe(true);
+    });
+  });
 });