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

package/locales/zh-CN/auth.json

@@ -145,6 +145,50 @@
     "apikey": "API Key 管理",
     "profile": "个人资料",
     "security": "安全",
-    "stats": "数据统计"
+    "stats": "数据统计",
+    "usage": "用量统计"
+  },
+  "usage": {
+    "activeModels": {
+      "modelTable": "模型列表",
+      "models": "活跃模型",
+      "providerTable": "提供商列表",
+      "providers": "活跃提供商",
+      "table": {
+        "calls": "调用次数",
+        "model": "模型",
+        "provider": "提供商",
+        "spend": "花费"
+      }
+    },
+    "cards": {
+      "month": {
+        "modelCalls": "模型调用",
+        "title": "本月花费"
+      },
+      "today": {
+        "title": "今日花费",
+        "yesterday": "昨日"
+      }
+    },
+    "table": {
+      "actions": "操作",
+      "createdAt": "使用时间",
+      "inputTokens": "输入 Token",
+      "model": "模型",
+      "outputTokens": "输出 Token",
+      "spend": "花费",
+      "tps": "TPS",
+      "ttft": "TTFT",
+      "type": "调用类型"
+    },
+    "trends": {
+      "spend": "金额",
+      "tokens": "Token"
+    },
+    "welcome": {
+      "model": "模型",
+      "provider": "提供商"
+    }
   }
 }

package/locales/zh-TW/auth.json

@@ -145,6 +145,50 @@
     "apikey": "API Key 管理",
     "profile": "個人資料",
     "security": "安全",
-    "stats": "數據統計"
+    "stats": "數據統計",
+    "usage": "用量統計"
+  },
+  "usage": {
+    "activeModels": {
+      "modelTable": "模型列表",
+      "models": "活躍模型",
+      "providerTable": "供應商列表",
+      "providers": "活躍供應商",
+      "table": {
+        "calls": "調用次數",
+        "model": "模型",
+        "provider": "供應商",
+        "spend": "花費"
+      }
+    },
+    "cards": {
+      "month": {
+        "modelCalls": "模型調用",
+        "title": "本月花費"
+      },
+      "today": {
+        "title": "今日花費",
+        "yesterday": "昨日"
+      }
+    },
+    "table": {
+      "actions": "操作",
+      "createdAt": "使用時間",
+      "inputTokens": "輸入 Token",
+      "model": "模型",
+      "outputTokens": "輸出 Token",
+      "spend": "花費",
+      "tps": "TPS",
+      "ttft": "TTFT",
+      "type": "調用類型"
+    },
+    "trends": {
+      "spend": "金額",
+      "tokens": "Token"
+    },
+    "welcome": {
+      "model": "模型",
+      "provider": "供應商"
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.38",
+  "version": "2.0.0-next.39",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/packages/context-engine/src/processors/MessageCleanup.ts

@@ -66,6 +66,7 @@ export class MessageCleanupProcessor extends BaseProcessor {
           content: message.content,
           role: message.role,
           ...(message.tool_calls && { tool_calls: message.tool_calls }),
+          ...(message.reasoning && { reasoning: message.reasoning }),
         };
       }
 

package/packages/context-engine/src/processors/__tests__/MessageCleanup.test.ts

@@ -131,6 +131,34 @@ describe('MessageCleanupProcessor', () => {
       });
     });
 
+    it('should preserve reasoning in assistant messages', async () => {
+      const processor = new MessageCleanupProcessor();
+      const reasoning = {
+        content: 'Let me think about this...',
+        signature: 'sha256:abc123',
+      };
+
+      const context = createContext([
+        {
+          content: 'Here is the answer',
+          extraField: 'remove',
+          id: 'msg5',
+          reasoning: reasoning,
+          role: 'assistant',
+          timestamp: Date.now(),
+        },
+      ]);
+
+      const result = await processor.process(context);
+
+      expect(result.messages).toHaveLength(1);
+      expect(result.messages[0]).toEqual({
+        content: 'Here is the answer',
+        reasoning: reasoning,
+        role: 'assistant',
+      });
+    });
+
     it('should clean tool messages with name', async () => {
       const processor = new MessageCleanupProcessor();
       const context = createContext([

package/packages/obervability-otel/package.json

@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "exports": {
-    "./node": "./src/node.ts"
+    "./node": "./src/node.ts",
+    "./api": "./src/api.ts",
+    "./trpc": "./src/trpc/index.ts"
   },
   "dependencies": {
     "@opentelemetry/api": "^1.9.0",

package/packages/obervability-otel/src/api.ts

@@ -0,0 +1,2 @@
+export type { Attributes, Span } from '@opentelemetry/api';
+export { diag, metrics, SpanKind, SpanStatusCode, trace } from '@opentelemetry/api';

package/packages/obervability-otel/src/trpc/convention.ts

@@ -0,0 +1,16 @@
+export enum TRPCAttribute {
+  RPC_METHOD = 'rpc.method',
+  RPC_SERVICE = 'rpc.service',
+  RPC_SYSTEM = 'rpc.system',
+  RPC_TRPC_PATH = 'rpc.trpc.path',
+  RPC_TRPC_STATUS_CODE = 'rpc.trpc.status_code',
+  RPC_TRPC_SUCCESS = 'rpc.trpc.success',
+  RPC_TRPC_TYPE = 'rpc.trpc.type',
+}
+
+export {
+  ATTR_ERROR_TYPE,
+  ATTR_EXCEPTION_MESSAGE,
+  ATTR_EXCEPTION_STACKTRACE,
+  ATTR_EXCEPTION_TYPE,
+} from '@opentelemetry/semantic-conventions';

package/packages/obervability-otel/src/trpc/index.test.ts

@@ -0,0 +1,38 @@
+import { parseTRPCPath, tRPCConventionFromPathAndType } from './';
+
+describe('splitRpcPath', () => {
+  it('should split path into service and method with url', () => {
+    const { method, service } = parseTRPCPath('/trpc/lambda/someService.someMethod');
+    expect(method).toBe('someMethod');
+    expect(service).toBe('someService');
+  });
+
+  it('should split path into service and method without url', () => {
+    const { method, service } = parseTRPCPath('someService.someMethod');
+    expect(method).toBe('someMethod');
+    expect(service).toBe('someService');
+  });
+});
+
+describe('createBaseAttributes', () => {
+  it('should create base attributes with service and method', () => {
+    const attributes = tRPCConventionFromPathAndType('someService.someMethod', 'query');
+    expect(attributes).toEqual({
+      'rpc.system': 'trpc',
+      'rpc.trpc.path': 'someService.someMethod',
+      'rpc.trpc.type': 'query',
+      'rpc.service': 'someService',
+      'rpc.method': 'someMethod',
+    });
+  });
+
+  it('should create base attributes without service', () => {
+    const attributes = tRPCConventionFromPathAndType('someMethod', 'mutation');
+    expect(attributes).toEqual({
+      'rpc.system': 'trpc',
+      'rpc.trpc.path': 'someMethod',
+      'rpc.trpc.type': 'mutation',
+      'rpc.method': 'someMethod',
+    });
+  });
+});

package/packages/obervability-otel/src/trpc/index.ts

@@ -0,0 +1,62 @@
+import { Attributes } from '@opentelemetry/api';
+
+import { TRPCAttribute } from './convention';
+
+export const DEFAULT_ERROR_CODE = 'UNKNOWN_ERROR';
+export const DEFAULT_SUCCESS_STATUS = 'OK';
+
+const textEncoder = new TextEncoder();
+
+export function parseTRPCPath(path: string) {
+  const parts = path?.split('.') ?? [];
+  if (parts.length <= 1) {
+    return { method: path, service: undefined };
+  }
+
+  const method = parts.at(-1);
+  const service = parts.slice(0, -1).join('.').split('/').pop();
+  return { method, service };
+}
+
+export function tRPCConventionFromPathAndType(path: string, type: string): Attributes {
+  const { method, service } = parseTRPCPath(path);
+
+  const attributes: Attributes = {
+    [TRPCAttribute.RPC_SYSTEM]: 'trpc',
+    [TRPCAttribute.RPC_TRPC_PATH]: path,
+    [TRPCAttribute.RPC_TRPC_TYPE]: type,
+  };
+
+  if (service) {
+    attributes[TRPCAttribute.RPC_SERVICE] = service;
+  }
+  if (method) {
+    attributes[TRPCAttribute.RPC_METHOD] = method;
+  }
+
+  return attributes;
+}
+
+export const getPayloadSize = (payload: unknown): number | undefined => {
+  if (payload === undefined || payload === null) return undefined;
+
+  try {
+    const serialized = JSON.stringify(payload);
+    return textEncoder.encode(serialized).length;
+  } catch {
+    return undefined;
+  }
+};
+
+export const createAttributesForMetrics = (
+  baseAttributes: Attributes,
+  statusCode: string,
+  extraAttributes?: Attributes,
+): Attributes => ({
+  ...baseAttributes,
+  [TRPCAttribute.RPC_TRPC_STATUS_CODE]: statusCode,
+  ...extraAttributes,
+});
+
+export * from './convention';
+export * from './metrics';

package/packages/obervability-otel/src/trpc/metrics.ts

@@ -0,0 +1,31 @@
+import { metrics } from '@opentelemetry/api';
+
+const meter = metrics.getMeter('trpc-server');
+
+export const serverDurationHistogram = meter.createHistogram('rpc.server.duration', {
+  description: 'Measures the duration of inbound RPC.',
+  unit: 'ms',
+});
+
+export const serverRequestSizeHistogram = meter.createHistogram('rpc.server.request.size', {
+  description: 'Measures the size of RPC request messages (uncompressed).',
+  unit: 'By',
+});
+
+export const serverResponseSizeHistogram = meter.createHistogram('rpc.server.response.size', {
+  description: 'Measures the size of RPC response messages (uncompressed).',
+  unit: 'By',
+});
+
+export const serverRequestsPerRpcHistogram = meter.createHistogram('rpc.server.requests_per_rpc', {
+  description: 'Measures the number of messages received per RPC.',
+  unit: '{count}',
+});
+
+export const serverResponsesPerRpcHistogram = meter.createHistogram(
+  'rpc.server.responses_per_rpc',
+  {
+    description: 'Measures the number of messages sent per RPC.',
+    unit: '{count}',
+  },
+);

package/packages/types/src/usage/usageRecord.ts

@@ -0,0 +1,54 @@
+import { MessageMetadata } from '../message';
+
+export interface UsageRecordItem {
+  createdAt: Date;
+  /**
+   * ID
+   **/
+  id: string;
+  inputStartAt?: Date | null;
+  /**
+   * Meta information
+   **/
+  metadata?: MessageMetadata | null;
+  /**
+   * Model id
+   */
+  model: string;
+  outputFinishAt?: Date | null;
+  outputStartAt?: Date | null;
+  /**
+   * Provider id
+   */
+  provider: string;
+  /**
+   * Spend
+   **/
+  spend: number;
+  /**
+   * Usage details
+   **/
+  totalInputTokens?: number | null;
+  totalOutputTokens?: number | null;
+  totalTokens?: number | null;
+  /**
+   * Performance details
+   **/
+  tps?: number | null;
+  ttft?: number | null;
+  /**
+   * Call types
+   **/
+  type: string;
+  updatedAt: Date;
+  userId: string;
+}
+
+export type UsageLog = {
+  date: number;
+  day: string;
+  records: UsageRecordItem[];
+  totalRequests: number;
+  totalSpend: number;
+  totalTokens: number;
+};

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

@@ -1,5 +1,5 @@
 import { Icon } from '@lobehub/ui';
-import { ChartColumnBigIcon, KeyIcon, ShieldCheck, UserCircle } from 'lucide-react';
+import { BadgeCentIcon, ChartColumnBigIcon, KeyIcon, ShieldCheck, UserCircle } from 'lucide-react';
 import Link from 'next/link';
 import { useTranslation } from 'react-i18next';
 
@@ -54,6 +54,15 @@ export const useCategory = () => {
         </Link>
       ),
     },
+    {
+      icon: <Icon icon={BadgeCentIcon} />,
+      key: ProfileTabs.Usage,
+      label: (
+        <Link href={'/profile/usage'} onClick={(e) => e.preventDefault()}>
+          {t('tab.usage')}
+        </Link>
+      ),
+    },
   ].filter(Boolean) as MenuProps['items'];
 
   return cateItems;

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;