@lobehub/lobehub 2.0.0-next.4 → 2.0.0-next.40

package/src/app/[variants]/(main)/profile/usage/Client.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Icon, Segmented } from '@lobehub/ui';
+import { Col, DatePicker, DatePickerProps, Row } from 'antd';
+import dayjs from 'dayjs';
+import { Brain, Codesandbox } from 'lucide-react';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useClientDataSWR } from '@/libs/swr';
+import { usageService } from '@/services/usage';
+import { UsageLog } from '@/types/usage/usageRecord';
+
+import Welcome from '../stats/features/Welcome';
+import UsageCards from './features/UsageCards';
+import UsageTable from './features/UsageTable';
+import UsageTrends from './features/UsageTrends';
+
+export interface UsageChartProps {
+  data?: UsageLog[];
+  dateStrings?: string;
+  groupBy?: GroupBy;
+  inShare?: boolean;
+  isLoading?: boolean;
+  mobile?: boolean;
+}
+
+export enum GroupBy {
+  Model = 'model',
+  Provider = 'provider',
+}
+
+const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { t, i18n } = useTranslation('auth');
+  dayjs.locale(i18n.language);
+
+  const [groupBy, setGroupBy] = useState<GroupBy>(GroupBy.Model);
+  const [dateRange, setDateRange] = useState<dayjs.Dayjs>(dayjs(new Date()));
+  const [dateStrings, setDateStrings] = useState<string>();
+
+  const { data, isLoading, mutate } = useClientDataSWR('usage-stat', async () =>
+    usageService.findAndGroupByDay(dateStrings),
+  );
+
+  useEffect(() => {
+    if (dateStrings) {
+      mutate();
+    }
+  }, [dateStrings]);
+
+  const handleDateChange: DatePickerProps['onChange'] = (dates, dateStrings) => {
+    setDateRange(dates);
+    if (typeof dateStrings === 'string') {
+      setDateStrings(dateStrings);
+    }
+  };
+
+  return (
+    <Flexbox gap={mobile ? 0 : 24}>
+      <Flexbox>
+        <Row>
+          <Col span={16}>
+            {mobile ? (
+              <Welcome mobile />
+            ) : (
+              <Flexbox align={'flex-start'} gap={16} horizontal justify={'space-between'}>
+                <Welcome />
+              </Flexbox>
+            )}
+          </Col>
+          <Col span={8}>
+            <Flexbox gap={16} horizontal>
+              <Segmented
+                onChange={(v) => setGroupBy(v as GroupBy)}
+                options={[
+                  {
+                    icon: <Icon icon={Codesandbox} />,
+                    label: t('usage.welcome.model'),
+                    value: GroupBy.Model,
+                  },
+                  {
+                    icon: <Icon icon={Brain} />,
+                    label: t('usage.welcome.provider'),
+                    value: GroupBy.Provider,
+                  },
+                ]}
+                value={groupBy}
+              />
+              <DatePicker onChange={handleDateChange} picker="month" value={dateRange} />
+            </Flexbox>
+          </Col>
+        </Row>
+      </Flexbox>
+      <Flexbox>
+        <UsageCards data={data} groupBy={groupBy} isLoading={isLoading} />
+      </Flexbox>
+      <Flexbox>
+        <Row gutter={[16, 16]}>
+          <Col span={24}>
+            <UsageTrends data={data} groupBy={groupBy} isLoading={isLoading} />
+          </Col>
+        </Row>
+      </Flexbox>
+      <Row>
+        <Col span={24}>
+          <UsageTable dateStrings={dateStrings} />
+        </Col>
+      </Row>
+    </Flexbox>
+  );
+});
+
+export default Client;

package/src/app/[variants]/(main)/profile/usage/features/UsageCards/ActiveModels/ModelTable.tsx

@@ -0,0 +1,175 @@
+import { CategoryBar, useThemeColorRange } from '@lobehub/charts';
+import { ModelIcon, ProviderIcon } from '@lobehub/icons';
+import { Collapse, Tag } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InlineTable from '@/components/InlineTable';
+import { UsageLog } from '@/types/usage/usageRecord';
+import { formatPrice } from '@/utils/format';
+
+import { GroupBy, UsageChartProps } from '../../../Client';
+
+interface WeightGroup {
+  id: string;
+  spend: number | string;
+  weight: number;
+}
+
+const formatData = (
+  data: UsageLog[],
+  groupBy: GroupBy,
+): {
+  childrens: WeightGroup[];
+  id: string;
+  totalSpend: number;
+}[] => {
+  if (!data || data?.length === 0) return [];
+
+  const requestLogs = data.flatMap((log) => log.records);
+  const groupedLogs = requestLogs.reduce((acc, log) => {
+    const key = groupBy === GroupBy.Model ? log.model : log.provider;
+    if (!acc.has(key)) {
+      acc.set(key, []);
+    }
+    acc.get(key)?.push(log);
+    return acc;
+  }, new Map<string, UsageLog['records']>());
+
+  return Array.from(groupedLogs.entries())
+    .map(([key, logs]) => {
+      // 此处的 logs 为多日的 log，需要进行 sum
+      // 如果当前的 groupBy 是 Model，则 logs 应该按照 Provider 进行分组
+      const spend = logs.reduce((acc, log) => {
+        const key = groupBy === GroupBy.Model ? log.provider : log.model;
+        acc.set(key, (acc.get(key) || 0) + log.spend);
+        return acc;
+      }, new Map<string, number>());
+
+      const totalSpend = logs.reduce((total, log) => total + (log.spend || 0), 0);
+
+      const spendWithWeight = Array.from(
+        spend.entries().map(([key, value]) => {
+          return {
+            id: key,
+            spend: value,
+            weight: totalSpend > 0 ? value / totalSpend : 0,
+          };
+        }),
+      );
+
+      return {
+        childrens: spendWithWeight.sort((a, b) => b.weight - a.weight),
+        id: key,
+        totalSpend: totalSpend,
+      };
+    })
+    .sort((a, b) => b.totalSpend - a.totalSpend);
+};
+
+const ModelTable = memo<UsageChartProps>(({ data, isLoading, groupBy }) => {
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+  const themeColorRange = useThemeColorRange();
+
+  const formattedData = useMemo(
+    () => formatData(data || [], groupBy || GroupBy.Model),
+    [data, groupBy],
+  );
+
+  console.log('ModelTable', groupBy, formattedData);
+
+  return isLoading ? (
+    <Skeleton active paragraph={{ rows: 8 }} title={false} />
+  ) : (
+    <Collapse
+      defaultActiveKey={formattedData.map((item) => item.id)}
+      expandIconPosition={'end'}
+      gap={16}
+      items={formattedData.map((item) => {
+        const key = item.id;
+        return {
+          children: (
+            <Flexbox>
+              <CategoryBar
+                colors={themeColorRange}
+                showLabels={false}
+                size={2}
+                values={item.childrens.map((item) => item.weight)}
+              />
+              <InlineTable
+                columns={[
+                  {
+                    dataIndex: 'id',
+                    key: 'id',
+                    render: (value, record, index) => {
+                      return (
+                        <Flexbox align={'center'} gap={12} horizontal key={value}>
+                          {groupBy === GroupBy.Provider ? (
+                            <ProviderIcon
+                              provider={record.id}
+                              style={{
+                                boxShadow: `0 0 0 2px ${theme.colorBgContainer}, 0 0 0 4px ${themeColorRange[index]}`,
+                                boxSizing: 'content-box',
+                              }}
+                            />
+                          ) : (
+                            <ModelIcon
+                              model={record.id}
+                              style={{
+                                boxShadow: `0 0 0 2px ${theme.colorBgContainer}, 0 0 0 4px ${themeColorRange[index]}`,
+                                boxSizing: 'content-box',
+                              }}
+                            />
+                          )}
+                          {value}
+                        </Flexbox>
+                      );
+                    },
+                    title:
+                      groupBy === GroupBy.Model
+                        ? t('usage.activeModels.table.provider')
+                        : t('usage.activeModels.table.model'),
+                    width: 200,
+                  },
+                  {
+                    dataIndex: 'spend',
+                    key: 'spend',
+                    render: (value) => {
+                      return `$${formatPrice(value)}`;
+                    },
+                    title: t('usage.activeModels.table.spend'),
+                  },
+                ]}
+                dataSource={item.childrens}
+                hoverToActive={false}
+                loading={isLoading}
+                rowKey={(record) => record.id}
+              />
+            </Flexbox>
+          ),
+          extra: <Tag>{item?.childrens?.length ?? 0}</Tag>,
+          key,
+          label: (
+            <Flexbox align={'center'} gap={8} horizontal>
+              {groupBy === GroupBy.Model ? (
+                <ModelIcon model={key} size={24} />
+              ) : (
+                <ProviderIcon provider={key} size={24} />
+              )}
+              {key}
+            </Flexbox>
+          ),
+        };
+      })}
+      padding={{
+        body: 0,
+      }}
+    />
+  );
+});
+
+export default ModelTable;

package/src/app/[variants]/(main)/profile/usage/features/UsageCards/ActiveModels/index.tsx

@@ -0,0 +1,126 @@
+import { ModelIcon, ProviderIcon } from '@lobehub/icons';
+import { ActionIcon, Modal } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { MaximizeIcon } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import StatisticCard from '@/components/StatisticCard';
+import TitleWithPercentage from '@/components/StatisticCard/TitleWithPercentage';
+import { UsageLog } from '@/types/usage/usageRecord';
+import { formatNumber } from '@/utils/format';
+
+import { GroupBy, UsageChartProps } from '../../../Client';
+import ModelTable from './ModelTable';
+
+const computeList = (data: UsageLog[], groupBy: GroupBy): string[] => {
+  if (!data || data?.length === 0) return [];
+
+  return Array.from(
+    data.reduce((acc, log) => {
+      if (log.records) {
+        for (const item of log.records) {
+          if (groupBy === GroupBy.Model && item.model?.length !== 0) {
+            acc.add(item.model);
+          }
+          if (groupBy === GroupBy.Provider && item.provider?.length !== 0) {
+            acc.add(item.provider);
+          }
+        }
+      }
+      return acc;
+    }, new Set<string>()),
+  );
+};
+
+const ActiveModels = memo<UsageChartProps>(({ data, isLoading, groupBy }) => {
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+
+  const [open, setOpen] = useState(false);
+
+  const iconList = useMemo(
+    () => computeList(data || [], groupBy || GroupBy.Model),
+    [data, groupBy],
+  );
+
+  return (
+    <>
+      <StatisticCard
+        extra={
+          <ActionIcon
+            icon={MaximizeIcon}
+            onClick={() => setOpen(true)}
+            title={
+              groupBy === GroupBy.Model
+                ? t('usage.activeModels.modelTable')
+                : t('usage.activeModels.providerTable')
+            }
+          />
+        }
+        key={groupBy}
+        loading={isLoading}
+        statistic={{
+          description: (
+            <Flexbox horizontal wrap={'wrap'}>
+              {iconList.map((item, i) => {
+                if (!item) return null;
+                return groupBy === GroupBy.Model ? (
+                  <ModelIcon
+                    key={item}
+                    model={item}
+                    size={18}
+                    style={{
+                      border: `2px solid ${theme.colorBgContainer}`,
+                      boxSizing: 'content-box',
+                      marginRight: -8,
+                      zIndex: i + 1,
+                    }}
+                  />
+                ) : (
+                  <ProviderIcon
+                    key={item}
+                    provider={item}
+                    size={18}
+                    style={{
+                      border: `2px solid ${theme.colorBgContainer}`,
+                      boxSizing: 'content-box',
+                      marginRight: -8,
+                      zIndex: i + 1,
+                    }}
+                  />
+                );
+              })}
+            </Flexbox>
+          ),
+          precision: 0,
+          value: formatNumber(iconList?.length ?? 0),
+        }}
+        title={
+          <TitleWithPercentage
+            title={
+              groupBy === GroupBy.Model
+                ? t('usage.activeModels.models')
+                : t('usage.activeModels.providers')
+            }
+          />
+        }
+      />
+      <Modal
+        footer={null}
+        onCancel={() => setOpen(false)}
+        open={open}
+        title={
+          groupBy === GroupBy.Model
+            ? t('usage.activeModels.modelTable')
+            : t('usage.activeModels.providerTable')
+        }
+      >
+        <ModelTable data={data} groupBy={groupBy} isLoading={isLoading} />
+      </Modal>
+    </>
+  );
+});
+
+export default ActiveModels;

package/src/app/[variants]/(main)/profile/usage/features/UsageCards/MonthSpend.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Statistic from '@/components/Statistic';
+import StatisticCard from '@/components/StatisticCard';
+import TitleWithPercentage from '@/components/StatisticCard/TitleWithPercentage';
+import { UsageLog } from '@/types/usage/usageRecord';
+import { formatNumber } from '@/utils/format';
+
+import { UsageChartProps } from '../../Client';
+
+const computeMonth = (
+  data: UsageLog[],
+): {
+  calls: number | string;
+  spend: number | string;
+} => {
+  if (!data || data?.length === 0) return { calls: 0, spend: 0 };
+
+  const spend = data.reduce((acc, log) => acc + (log.totalSpend || 0), 0);
+  const calls = data.reduce((acc, log) => acc + (log.records?.length ?? 0), 0);
+
+  return {
+    calls: formatNumber(calls),
+    spend: formatNumber(spend),
+  };
+};
+
+const MonthSpend = memo<UsageChartProps>(({ data, isLoading }) => {
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+
+  const { spend, calls } = computeMonth(data || []);
+
+  return (
+    <StatisticCard
+      highlight={theme.blue}
+      loading={isLoading}
+      statistic={{
+        description: <Statistic title={t('usage.cards.month.modelCalls')} value={calls} />,
+        precision: 2,
+        prefix: '$',
+        value: spend,
+      }}
+      title={<TitleWithPercentage title={t('usage.cards.month.title')} />}
+    />
+  );
+});
+
+export default MonthSpend;

package/src/app/[variants]/(main)/profile/usage/features/UsageCards/TodaySpend.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Statistic from '@/components/Statistic';
+import StatisticCard from '@/components/StatisticCard';
+import TitleWithPercentage from '@/components/StatisticCard/TitleWithPercentage';
+import { UsageLog } from '@/types/usage/usageRecord';
+import { formatNumber } from '@/utils/format';
+
+import { UsageChartProps } from '../../Client';
+
+dayjs.extend(utc);
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+
+const computeSpend = (
+  data: UsageLog[],
+): {
+  today: number | string;
+  yesterday: number | string;
+} => {
+  if (!data || data?.length === 0) return { today: 0, yesterday: 0 };
+
+  const today = data.find((log) => dayjs.utc(log.day).isToday())?.totalSpend ?? 0;
+  const yesterday = data.find((log) => dayjs.utc(log.day).isYesterday())?.totalSpend ?? 0;
+
+  return {
+    today: formatNumber(today),
+    yesterday: formatNumber(yesterday),
+  };
+};
+
+const TodaySpend = memo<UsageChartProps>(({ data, isLoading }) => {
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+
+  const { today, yesterday } = computeSpend(data || []);
+
+  return (
+    <StatisticCard
+      highlight={theme.green}
+      loading={isLoading}
+      statistic={{
+        description: <Statistic title={t('usage.cards.today.yesterday')} value={yesterday} />,
+        precision: 2,
+        prefix: '$',
+        value: today,
+      }}
+      title={
+        <TitleWithPercentage
+          count={typeof today === 'number' ? today : 0}
+          prvCount={typeof yesterday === 'number' ? yesterday : 0}
+          title={t('usage.cards.today.title')}
+        />
+      }
+    />
+  );
+});
+
+export default TodaySpend;

package/src/app/[variants]/(main)/profile/usage/features/UsageCards/index.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { UsageChartProps } from '../../Client';
+import ActiveModels from './ActiveModels';
+import MonthSpend from './MonthSpend';
+import TodaySpend from './TodaySpend';
+
+const UsageCards = memo<UsageChartProps>(({ isLoading, data, groupBy }) => {
+  return (
+    <Flexbox gap={16} horizontal>
+      <TodaySpend data={data} isLoading={isLoading} />
+      <MonthSpend data={data} isLoading={isLoading} />
+      <ActiveModels data={data} groupBy={groupBy} isLoading={isLoading} />
+    </Flexbox>
+  );
+});
+
+export default UsageCards;

package/src/app/[variants]/(main)/profile/usage/features/UsageTable.tsx

@@ -0,0 +1,145 @@
+import { ProviderIcon } from '@lobehub/icons';
+import { Tag } from '@lobehub/ui';
+import { Table, TableColumnType, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useClientDataSWR } from '@/libs/swr';
+import { usageService } from '@/services/usage';
+import { formatDate, formatNumber } from '@/utils/format';
+
+import { UsageChartProps } from '../Client';
+
+const UsageTable = memo<UsageChartProps>(({ dateStrings }) => {
+  const theme = useTheme();
+  const { t } = useTranslation('auth');
+
+  const { data, isLoading, mutate } = useClientDataSWR('usage-logs', async () =>
+    usageService.findByMonth(dateStrings),
+  );
+
+  const [currentPage, setCurrentPage] = useQueryState(
+    'current',
+    parseAsInteger.withDefault(1).withOptions({ clearOnDefault: true }),
+  );
+  const [pageSize, setPageSize] = useQueryState(
+    'pageSize',
+    parseAsInteger.withDefault(5).withOptions({ clearOnDefault: true }),
+  );
+
+  useEffect(() => {
+    if (dateStrings) {
+      mutate();
+    }
+  }, [dateStrings]);
+
+  const columns: TableColumnType<any>[] = [
+    {
+      hidden: true,
+      key: 'id',
+      title: 'ID',
+    },
+    {
+      dataIndex: 'model',
+      key: 'model',
+      render: (value, record) => (
+        <Flexbox align={'start'} gap={16} horizontal>
+          <ProviderIcon
+            provider={record.provider}
+            size={18}
+            style={{
+              border: `2px solid ${theme.colorBgContainer}`,
+              boxSizing: 'content-box',
+              marginRight: -8,
+            }}
+          />
+          <Typography.Text>
+            {value?.length > 12 ? `${value.slice(0, 12)}...` : value}
+          </Typography.Text>
+        </Flexbox>
+      ),
+      title: t('usage.table.model'),
+    },
+    {
+      dataIndex: 'type',
+      filters: [
+        {
+          text: 'Chat',
+          value: 'chat',
+        },
+      ],
+      key: 'type',
+      onFilter: (value, record) => record.callType === value,
+      render: (value) => {
+        return <Tag>{value}</Tag>;
+      },
+      title: t('usage.table.type'),
+    },
+    {
+      dataIndex: 'totalInputTokens',
+      key: 'inputTokens',
+      title: t('usage.table.inputTokens'),
+    },
+    {
+      dataIndex: 'totalOutputTokens',
+      key: 'outputTokens',
+      title: t('usage.table.outputTokens'),
+    },
+    {
+      dataIndex: 'tps',
+      key: 'tps',
+      render: (value) => formatNumber(value, 2),
+      title: t('usage.table.tps'),
+    },
+    {
+      dataIndex: 'ttft',
+      key: 'ttft',
+      render: (value) => formatNumber(value / 1000, 2),
+      title: t('usage.table.ttft'),
+    },
+    {
+      dataIndex: 'spend',
+      key: 'spend',
+      render: (value) => {
+        return `$${formatNumber(value, 6)}`;
+      },
+      title: t('usage.table.spend'),
+    },
+    {
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (value) => {
+        return formatDate(new Date(value));
+      },
+      sortDirections: ['descend'],
+      sorter: (a, b) => a.createdAt - b.createdAt,
+      title: t('usage.table.createdAt'),
+    },
+  ];
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={data}
+      key="id"
+      loading={isLoading}
+      pagination={{
+        current: currentPage,
+        onChange: (page) => {
+          setCurrentPage(page);
+        },
+        onShowSizeChange: (current, size) => {
+          setCurrentPage(current);
+          setPageSize(size);
+        },
+        pageSize,
+      }}
+      size="small"
+    />
+  );
+});
+
+export default UsageTable;