@lobehub/lobehub 2.0.0-next.38 → 2.0.0-next.39

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;

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

@@ -0,0 +1,107 @@
+import { type BarChartProps } from '@lobehub/charts';
+import { Segmented } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import StatisticCard from '@/components/StatisticCard';
+import { UsageLog } from '@/types/usage/usageRecord';
+import { formatNumber } from '@/utils/format';
+
+import { GroupBy, UsageChartProps } from '../Client';
+import { UsageBarChart } from './components/UsageBarChart';
+
+const groupByType = (
+  data: UsageLog[],
+  type: 'spend' | 'token',
+  groupBy: GroupBy,
+): { categories: string[]; data: BarChartProps['data'] } => {
+  if (!data || data?.length === 0) return { categories: [], data: [] };
+  let formattedData: BarChartProps['data'] = [];
+  let cate: Map<string, number> = data.reduce((acc, log) => {
+    if (log.records) {
+      for (const item of log.records) {
+        if (groupBy === GroupBy.Model && item.model) {
+          acc.set(item.model, 0);
+        } else if (groupBy === GroupBy.Provider && item.provider) {
+          acc.set(item.provider, 0);
+        }
+      }
+    }
+    return acc;
+  }, new Map<string, number>());
+  const categories: string[] = Array.from(cate.keys());
+  formattedData = data.map((log) => {
+    const totalObj = {
+      day: log.day,
+      total: type === 'spend' ? log.totalSpend : log.totalTokens,
+    };
+    let todayCate = new Map<string, number>(cate);
+    for (const item of log.records) {
+      const value = type === 'spend' ? item.spend || 0 : item.totalTokens || 0;
+      const key = groupBy === GroupBy.Model ? item.model : item.provider;
+      let displayValue = (todayCate.get(key) || 0) + value;
+      if (type === 'spend') {
+        const formattedNum = formatNumber((todayCate.get(key) || 0) + value, 2);
+        if (typeof formattedNum !== 'string') {
+          displayValue = formattedNum;
+        }
+      }
+      todayCate.set(key, displayValue);
+    }
+    return {
+      ...totalObj,
+      ...Object.fromEntries(todayCate.entries()),
+    };
+  });
+  return {
+    categories,
+    data: formattedData,
+  };
+};
+
+enum ShowType {
+  Spend = 'spend',
+  Token = 'token',
+}
+
+const UsageTrends = memo<UsageChartProps>(({ isLoading, data, groupBy }) => {
+  const { t } = useTranslation('auth');
+
+  const [type, setType] = useState<ShowType>(ShowType.Spend);
+
+  const { categories: spendCate, data: spendData } = groupByType(
+    data || [],
+    'spend',
+    groupBy || GroupBy.Model,
+  );
+  const { categories: tokenCate, data: tokenData } = groupByType(
+    data || [],
+    'token',
+    groupBy || GroupBy.Model,
+  );
+  return (
+    <StatisticCard
+      chart={
+        data &&
+        (type === ShowType.Spend ? (
+          <UsageBarChart categories={spendCate} data={spendData} index="day" />
+        ) : (
+          <UsageBarChart categories={tokenCate} data={tokenData} index="day" />
+        ))
+      }
+      extra={
+        <Segmented
+          onChange={(value) => setType(value as ShowType)}
+          options={[
+            { label: t('usage.trends.spend'), value: ShowType.Spend },
+            { label: t('usage.trends.tokens'), value: ShowType.Token },
+          ]}
+          value={type}
+        />
+      }
+      loading={isLoading}
+    />
+  );
+});
+
+export default UsageTrends;

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

@@ -0,0 +1,48 @@
+import { Divider, Typography } from 'antd'
+import { Flexbox } from 'react-layout-kit';
+import { BarChart, ChartTooltipFrame, ChartTooltipRow, type BarChartProps } from '@lobehub/charts';
+
+export const UsageBarChart = ({ ...props }: BarChartProps) => (
+    <BarChart
+        {...props}
+        customTooltip={({ active, payload, label, valueFormatter }) => {
+            if (active && payload) {
+                return (
+                    <ChartTooltipFrame>
+                        <Flexbox
+                            horizontal
+                            justify={'space-between'}
+                            paddingBlock={8}
+                            paddingInline={16}
+                        >
+                            <Typography.Paragraph ellipsis style={{ margin: 0 }}>
+                                {label}
+                            </Typography.Paragraph>
+                            <span style={{ fontWeight: 'bold' }}>
+                                {payload.reduce((acc: number, cur: any) => acc + cur.value, 0)}
+                            </span>
+                        </Flexbox>
+                        <Divider style={{ margin: 0 }} />
+                        <Flexbox
+                            gap={4}
+                            paddingBlock={8}
+                            paddingInline={16}
+                            style={{ flexDirection: 'column-reverse', marginTop: 4 }}
+                        >
+                            {payload.map(({ value, color, name }: any, idx: number) => (
+                                typeof value === 'number' && value > 0 ?
+                                    <ChartTooltipRow
+                                        color={color}
+                                        key={`id-${idx}`}
+                                        name={name}
+                                        value={(valueFormatter as any)?.(value)}
+                                    /> : null
+                            ))}
+                        </Flexbox>
+                    </ChartTooltipFrame>
+                );
+            }
+            return null;
+        }}
+    />
+)

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

@@ -0,0 +1,23 @@
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
+
+import Client from './Client';
+
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const locale = await RouteVariants.getLocale(props);
+  const { t } = await translation('auth', locale);
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('tab.usage'),
+    url: '/profile/usage',
+  });
+};
+
+const Page = async (props: DynamicLayoutProps) => {
+  const mobile = await RouteVariants.getIsMobile(props);
+  return <Client mobile={mobile} />;
+};
+
+export default Page;

package/src/features/Conversation/Messages/Assistant/Tool/Render/CustomRender.tsx

@@ -46,8 +46,8 @@ const CustomRender = memo<CustomRenderProps>(
     const [loading] = useChatStore((s) => [messageStateSelectors.isPluginApiInvoking(id)(s)]);
     const [isEditing, setIsEditing] = useState(false);
     const { message } = App.useApp();
-    const [updatePluginArguments, reInvokeToolMessage] = useChatStore((s) => [
-      s.updatePluginArguments,
+    const [optimisticUpdatePluginArguments, reInvokeToolMessage] = useChatStore((s) => [
+      s.optimisticUpdatePluginArguments,
       s.reInvokeToolMessage,
     ]);
     const handleCancel = useCallback(() => {
@@ -62,7 +62,7 @@ const CustomRender = memo<CustomRenderProps>(
           const newArgsString = JSON.stringify(editedObject, null, 2);
 
           if (newArgsString !== requestArgs) {
-            await updatePluginArguments(id, editedObject, true);
+            await optimisticUpdatePluginArguments(id, editedObject, true);
             await reInvokeToolMessage(id);
           }
           setIsEditing(false);