@lobehub/chat 1.68.9 → 1.68.11

package/src/features/Conversation/Extras/Usage/UsageDetail/ModelCard.tsx

@@ -2,7 +2,7 @@ import { ModelIcon } from '@lobehub/icons';
 import { Icon, Tooltip } from '@lobehub/ui';
 import { Segmented } from 'antd';
 import { createStyles } from 'antd-style';
-import { ArrowDownToDot, ArrowUpFromDot, CircleFadingArrowUp } from 'lucide-react';
+import { ArrowDownToDot, ArrowUpFromDot, BookUp2Icon, CircleFadingArrowUp } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -45,12 +45,16 @@ const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName })
     pricing?.cachedInput,
     pricing?.currency as ModelPriceCurrency,
   );
+  const writeCacheInputPrice = formatPriceByCurrency(
+    pricing?.writeCacheInput,
+    pricing?.currency as ModelPriceCurrency,
+  );
   const outputPrice = formatPriceByCurrency(
     pricing?.output,
     pricing?.currency as ModelPriceCurrency,
   );
   return (
-    <>
+    <Flexbox gap={8}>
       <Flexbox
         align={'center'}
         className={styles.container}
@@ -91,26 +95,38 @@ const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName })
           </Flexbox>
         )}
       </Flexbox>
-      {isShowCredit && (
+      {isShowCredit ? (
         <Flexbox horizontal justify={'space-between'}>
           <div />
           <Flexbox align={'center'} className={styles.pricing} gap={8} horizontal>
             {t('messages.modelCard.creditPricing')}:
+            {pricing?.cachedInput && (
+              <Tooltip
+                title={t('messages.modelCard.pricing.inputCachedTokens', {
+                  amount: cachedInputPrice,
+                })}
+              >
+                <Flexbox gap={2} horizontal>
+                  <Icon icon={CircleFadingArrowUp} />
+                  {cachedInputPrice}
+                </Flexbox>
+              </Tooltip>
+            )}
             <Tooltip title={t('messages.modelCard.pricing.inputTokens', { amount: inputPrice })}>
               <Flexbox gap={2} horizontal>
                 <Icon icon={ArrowUpFromDot} />
                 {inputPrice}
               </Flexbox>
             </Tooltip>
-            {pricing?.cachedInput && (
+            {pricing?.writeCacheInput && (
               <Tooltip
-                title={t('messages.modelCard.pricing.inputCachedTokens', {
-                  amount: cachedInputPrice,
+                title={t('messages.modelCard.pricing.writeCacheInputTokens', {
+                  amount: writeCacheInputPrice,
                 })}
               >
                 <Flexbox gap={2} horizontal>
-                  <Icon icon={CircleFadingArrowUp} />
-                  {cachedInputPrice}
+                  <Icon icon={BookUp2Icon} />
+                  {writeCacheInputPrice}
                 </Flexbox>
               </Tooltip>
             )}
@@ -122,8 +138,10 @@ const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName })
             </Tooltip>
           </Flexbox>
         </Flexbox>
+      ) : (
+        <div style={{ height: 18 }} />
       )}
-    </>
+    </Flexbox>
   );
 });
 

package/src/features/Conversation/Extras/Usage/UsageDetail/index.tsx

@@ -37,6 +37,12 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
       title: t('messages.tokenDetails.inputAudio'),
       value: isShowCredit ? detailTokens.inputAudio.credit : detailTokens.inputAudio.token,
     },
+    !!detailTokens.inputCitation && {
+      color: theme.orange,
+      id: 'inputText',
+      title: t('messages.tokenDetails.inputCitation'),
+      value: isShowCredit ? detailTokens.inputCitation.credit : detailTokens.inputCitation.token,
+    },
     !!detailTokens.inputText && {
       color: theme.green,
       id: 'inputText',
@@ -46,11 +52,13 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
   ].filter(Boolean) as TokenProgressItem[];
 
   const outputDetails = [
-    !!detailTokens.reasoning && {
+    !!detailTokens.outputReasoning && {
       color: theme.pink,
       id: 'reasoning',
       title: t('messages.tokenDetails.reasoning'),
-      value: isShowCredit ? detailTokens.reasoning.credit : detailTokens.reasoning.token,
+      value: isShowCredit
+        ? detailTokens.outputReasoning.credit
+        : detailTokens.outputReasoning.token,
     },
     !!detailTokens.outputAudio && {
       color: theme.cyan9,
@@ -67,18 +75,26 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
   ].filter(Boolean) as TokenProgressItem[];
 
   const totalDetail = [
-    !!detailTokens.uncachedInput && {
+    !!detailTokens.inputCacheMiss && {
       color: theme.colorFill,
 
       id: 'uncachedInput',
       title: t('messages.tokenDetails.inputUncached'),
-      value: isShowCredit ? detailTokens.uncachedInput.credit : detailTokens.uncachedInput.token,
+      value: isShowCredit ? detailTokens.inputCacheMiss.credit : detailTokens.inputCacheMiss.token,
     },
-    !!detailTokens.cachedInput && {
+    !!detailTokens.inputCached && {
       color: theme.orange,
-      id: 'cachedInput',
+      id: 'inputCached',
       title: t('messages.tokenDetails.inputCached'),
-      value: isShowCredit ? detailTokens.cachedInput.credit : detailTokens.cachedInput.token,
+      value: isShowCredit ? detailTokens.inputCached.credit : detailTokens.inputCached.token,
+    },
+    !!detailTokens.inputCachedWrite && {
+      color: theme.yellow,
+      id: 'cachedWriteInput',
+      title: t('messages.tokenDetails.inputWriteCached'),
+      value: isShowCredit
+        ? detailTokens.inputCachedWrite.credit
+        : detailTokens.inputCachedWrite.token,
     },
     !!detailTokens.totalOutput && {
       color: theme.colorSuccess,
@@ -91,43 +107,69 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
   const displayTotal =
     isShowCredit && !!detailTokens.totalTokens
       ? formatNumber(detailTokens.totalTokens.credit)
-      : formatNumber(usage.totalTokens);
+      : formatNumber(detailTokens.totalTokens!.token);
 
+  const averagePricing = formatNumber(
+    detailTokens.totalTokens!.credit / detailTokens.totalTokens!.token,
+    2,
+  );
   return (
     <Popover
       arrow={false}
       content={
-        <Flexbox gap={20} style={{ minWidth: 200 }}>
+        <Flexbox gap={8} style={{ minWidth: 200 }}>
           {modelCard && <ModelCard {...modelCard} provider={provider} />}
-          {inputDetails.length > 1 && (
-            <>
-              <Flexbox align={'center'} gap={4} horizontal justify={'space-between'} width={'100%'}>
-                <div style={{ color: theme.colorTextDescription }}>
-                  {t('messages.tokenDetails.inputTitle')}
-                </div>
+
+          <Flexbox gap={20}>
+            {inputDetails.length > 1 && (
+              <Flexbox gap={4}>
+                <Flexbox
+                  align={'center'}
+                  gap={4}
+                  horizontal
+                  justify={'space-between'}
+                  width={'100%'}
+                >
+                  <div style={{ color: theme.colorTextDescription, fontSize: 12 }}>
+                    {t('messages.tokenDetails.inputTitle')}
+                  </div>
+                </Flexbox>
+                <TokenProgress data={inputDetails} showIcon />
               </Flexbox>
-              <TokenProgress data={inputDetails} showIcon />
-            </>
-          )}
-          {outputDetails.length > 1 && (
-            <>
-              <Flexbox align={'center'} gap={4} horizontal justify={'space-between'} width={'100%'}>
-                <div style={{ color: theme.colorTextDescription }}>
-                  {t('messages.tokenDetails.outputTitle')}
+            )}
+            {outputDetails.length > 1 && (
+              <>
+                <Flexbox
+                  align={'center'}
+                  gap={4}
+                  horizontal
+                  justify={'space-between'}
+                  width={'100%'}
+                >
+                  <div style={{ color: theme.colorTextDescription }}>
+                    {t('messages.tokenDetails.outputTitle')}
+                  </div>
+                </Flexbox>
+                <TokenProgress data={outputDetails} showIcon />
+              </>
+            )}
+            <Flexbox>
+              <TokenProgress data={totalDetail} showIcon />
+              <Divider style={{ marginBlock: 8 }} />
+              <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
+                <div style={{ color: theme.colorTextSecondary }}>
+                  {t('messages.tokenDetails.total')}
                 </div>
+                <div style={{ fontWeight: 500 }}>{displayTotal}</div>
               </Flexbox>
-              <TokenProgress data={outputDetails} showIcon />
-            </>
-          )}
-
-          <Flexbox>
-            <TokenProgress data={totalDetail} showIcon />
-            <Divider style={{ marginBlock: 8 }} />
-            <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
-              <div style={{ color: theme.colorTextSecondary }}>
-                {t('messages.tokenDetails.total')}
-              </div>
-              <div style={{ fontWeight: 500 }}>{displayTotal}</div>
+              {isShowCredit && (
+                <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
+                  <div style={{ color: theme.colorTextSecondary }}>
+                    {t('messages.tokenDetails.average')}
+                  </div>
+                  <div style={{ fontWeight: 500 }}>{averagePricing}</div>
+                </Flexbox>
+              )}
             </Flexbox>
           </Flexbox>
         </Flexbox>

package/src/features/Conversation/Extras/Usage/UsageDetail/tokens.test.ts

@@ -0,0 +1,253 @@
+import { describe, expect, it } from 'vitest';
+
+import { LobeDefaultAiModelListItem } from '@/types/aiModel';
+import { ModelTokensUsage } from '@/types/message';
+
+import { getDetailsToken } from './tokens';
+
+describe('getDetailsToken', () => {
+  // 基本测试数据
+  const mockModelCard: LobeDefaultAiModelListItem = {
+    pricing: {
+      input: 0.01,
+      output: 0.02,
+      cachedInput: 0.005,
+      audioInput: 0.03,
+      audioOutput: 0.04,
+    },
+  } as LobeDefaultAiModelListItem;
+
+  it('should return empty object when usage is empty', () => {
+    const usage: ModelTokensUsage = {};
+    const result = getDetailsToken(usage);
+
+    expect(result).toEqual({
+      cachedInput: undefined,
+      inputAudio: undefined,
+      inputCitation: undefined,
+      inputText: undefined,
+      outputAudio: undefined,
+      outputText: undefined,
+      reasoning: undefined,
+      totalOutput: undefined,
+      totalTokens: undefined,
+      uncachedInput: undefined,
+    });
+  });
+
+  it('should handle inputTextTokens correctly', () => {
+    const usage: ModelTokensUsage = {
+      inputTextTokens: 100,
+    };
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result.inputText).toEqual({
+      credit: 1, // 100 * 0.01 = 1
+      token: 100,
+    });
+  });
+
+  it('should handle legacy inputTokens property', () => {
+    const usage = {
+      inputTokens: 100,
+    } as any;
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result.inputText).toEqual({
+      credit: 1, // 100 * 0.01 = 1
+      token: 100,
+    });
+  });
+
+  it('should handle cachedTokens correctly', () => {
+    const usage = {
+      totalInputTokens: 200,
+      cachedTokens: 50,
+    } as ModelTokensUsage;
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result.inputCached).toEqual({
+      credit: 0, // 50 * 0.005 = 0.25, rounded to 0
+      token: 50,
+    });
+
+    expect(result.inputCacheMiss).toEqual({
+      credit: 2, // (200 - 50) * 0.01 = 1.5, rounded to 2
+      token: 150,
+    });
+  });
+
+  it('should handle outputTokens correctly', () => {
+    const usage = { outputTokens: 150 } as ModelTokensUsage;
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result.outputText).toEqual({
+      credit: 3, // 150 * 0.02 = 3
+      token: 150,
+    });
+
+    expect(result.totalOutput).toEqual({
+      credit: 3,
+      token: 150,
+    });
+  });
+
+  it('should handle reasoningTokens correctly', () => {
+    const usage = {
+      outputTokens: 200,
+      reasoningTokens: 50,
+    } as ModelTokensUsage;
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result.outputReasoning).toEqual({
+      credit: 1, // 50 * 0.02 = 1
+      token: 50,
+    });
+
+    expect(result.outputText).toEqual({
+      credit: 3, // (200 - 50) * 0.02 = 3
+      token: 150,
+    });
+  });
+
+  it('should handle audio tokens correctly', () => {
+    const usage = {
+      inputAudioTokens: 100,
+      outputAudioTokens: 50,
+      outputTokens: 150,
+    } as ModelTokensUsage;
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result.inputAudio).toEqual({
+      credit: 3, // 100 * 0.03 = 3
+      token: 100,
+    });
+
+    expect(result.outputAudio).toEqual({
+      credit: 2, // 50 * 0.04 = 2
+      id: 'outputAudio',
+      token: 50,
+    });
+
+    expect(result.outputText).toEqual({
+      credit: 2, // (150 - 50) * 0.02 = 2
+      token: 100,
+    });
+  });
+
+  it('should handle inputCitationTokens correctly', () => {
+    const usage: ModelTokensUsage = {
+      inputCitationTokens: 75,
+    };
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result.inputCitation).toEqual({
+      credit: 1, // 75 * 0.01 = 0.75, rounded to 1
+      token: 75,
+    });
+  });
+
+  it('should handle totalTokens correctly', () => {
+    const usage = {
+      totalTokens: 500,
+      totalInputTokens: 200,
+      inputCachedTokens: 50,
+      outputTokens: 300,
+    } as ModelTokensUsage;
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    // uncachedInput: (200 - 50) * 0.01 = 1.5 -> 2
+    // cachedInput: 50 * 0.005 = 0.25 -> 0
+    // totalOutput: 300 * 0.02 = 6
+    // totalCredit = 2 + 0 + 6 = 8
+
+    expect(result.totalTokens).toEqual({
+      credit: 8,
+      token: 500,
+    });
+  });
+
+  it('should handle missing pricing information', () => {
+    const usage = { inputTextTokens: 100, outputTokens: 200 } as ModelTokensUsage;
+
+    const result = getDetailsToken(usage);
+
+    expect(result.inputText).toEqual({
+      credit: '-',
+      token: 100,
+    });
+
+    expect(result.outputText).toEqual({
+      credit: '-',
+      token: 200,
+    });
+  });
+
+  it('should handle complex scenario with all token types', () => {
+    const usage: ModelTokensUsage = {
+      totalTokens: 1000,
+      totalInputTokens: 400,
+      inputTextTokens: 300,
+      inputAudioTokens: 50,
+      inputCitationTokens: 50,
+      inputCachedTokens: 100,
+      totalOutputTokens: 600,
+      outputAudioTokens: 100,
+      outputReasoningTokens: 200,
+    };
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result).toMatchObject({
+      inputCached: {
+        credit: 1, // 100 * 0.005 = 0.5, rounded to 1
+        token: 100,
+      },
+      inputCacheMiss: {
+        credit: 3, // (400 - 100) * 0.01 = 3
+        token: 300,
+      },
+      inputText: {
+        credit: 3, // 300 * 0.01 = 3
+        token: 300,
+      },
+      inputAudio: {
+        credit: 2, // 50 * 0.03 = 1.5, rounded to 2
+        token: 50,
+      },
+      inputCitation: {
+        credit: 1, // 50 * 0.01 = 0.5, rounded to 1
+        token: 50,
+      },
+      outputAudio: {
+        credit: 4, // 100 * 0.04 = 4
+        id: 'outputAudio',
+        token: 100,
+      },
+      outputReasoning: {
+        credit: 4, // 200 * 0.02 = 4
+        token: 200,
+      },
+      outputText: {
+        credit: 6, // (600 - 200 - 100) * 0.02 = 6
+        token: 300,
+      },
+      totalOutput: {
+        credit: 12, // 600 * 0.02 = 12
+        token: 600,
+      },
+      totalTokens: {
+        credit: 16, // 3 + 1 + 12 = 16
+        token: 1000,
+      },
+    });
+  });
+});

package/src/features/Conversation/Extras/Usage/UsageDetail/tokens.ts

@@ -11,43 +11,75 @@ export const getDetailsToken = (
   usage: ModelTokensUsage,
   modelCard?: LobeDefaultAiModelListItem,
 ) => {
-  const uncachedInputCredit = (
-    !!usage.inputTokens
-      ? calcCredit(usage.inputTokens - (usage.cachedTokens || 0), modelCard?.pricing?.input)
-      : 0
+  const inputTextTokens = usage.inputTextTokens || (usage as any).inputTokens || 0;
+  const totalInputTokens = usage.totalInputTokens || (usage as any).inputTokens || 0;
+
+  const totalOutputTokens = usage.totalOutputTokens || (usage as any).outputTokens || 0;
+
+  const outputReasoningTokens = usage.outputReasoningTokens || (usage as any).reasoningTokens || 0;
+
+  const outputTextTokens = usage.outputTextTokens
+    ? usage.outputTextTokens
+    : totalOutputTokens - outputReasoningTokens - (usage.outputAudioTokens || 0);
+
+  const inputWriteCacheTokens = usage.inputWriteCacheTokens || 0;
+  const inputCacheTokens = usage.inputCachedTokens || (usage as any).cachedTokens || 0;
+
+  const inputCacheMissTokens = usage?.inputCacheMissTokens
+    ? usage?.inputCacheMissTokens
+    : totalInputTokens - (inputCacheTokens || 0);
+
+  const inputCacheMissCredit = (
+    !!inputCacheMissTokens ? calcCredit(inputCacheMissTokens, modelCard?.pricing?.input) : 0
   ) as number;
 
-  const cachedInputCredit = (
-    !!usage.cachedTokens ? calcCredit(usage.cachedTokens, modelCard?.pricing?.cachedInput) : 0
+  const inputCachedCredit = (
+    !!inputCacheTokens ? calcCredit(inputCacheTokens, modelCard?.pricing?.cachedInput) : 0
   ) as number;
 
-  const totalOutput = (
-    !!usage.outputTokens ? calcCredit(usage.outputTokens, modelCard?.pricing?.output) : 0
+  const inputWriteCachedCredit = !!inputWriteCacheTokens
+    ? (calcCredit(inputWriteCacheTokens, modelCard?.pricing?.writeCacheInput) as number)
+    : 0;
+
+  const totalOutputCredit = (
+    !!totalOutputTokens ? calcCredit(totalOutputTokens, modelCard?.pricing?.output) : 0
   ) as number;
+  const totalInputCredit = (
+    !!totalInputTokens ? calcCredit(totalInputTokens, modelCard?.pricing?.output) : 0
+  ) as number;
+
+  const totalCredit =
+    inputCacheMissCredit + inputCachedCredit + inputWriteCachedCredit + totalOutputCredit;
 
-  const totalTokens = uncachedInputCredit + cachedInputCredit + totalOutput;
   return {
-    cachedInput: !!usage.cachedTokens
-      ? {
-          credit: cachedInputCredit,
-          token: usage.cachedTokens,
-        }
-      : undefined,
     inputAudio: !!usage.inputAudioTokens
       ? {
           credit: calcCredit(usage.inputAudioTokens, modelCard?.pricing?.audioInput),
           token: usage.inputAudioTokens,
         }
       : undefined,
-    inputText: !!usage.inputTokens
+    inputCacheMiss: !!inputCacheMissTokens
+      ? { credit: inputCacheMissCredit, token: inputCacheMissTokens }
+      : undefined,
+    inputCached: !!inputCacheTokens
+      ? { credit: inputCachedCredit, token: inputCacheTokens }
+      : undefined,
+    inputCachedWrite: !!inputWriteCacheTokens
+      ? { credit: inputWriteCachedCredit, token: inputWriteCacheTokens }
+      : undefined,
+    inputCitation: !!usage.inputCitationTokens
+      ? {
+          credit: calcCredit(usage.inputCitationTokens, modelCard?.pricing?.input),
+          token: usage.inputCitationTokens,
+        }
+      : undefined,
+    inputText: !!inputTextTokens
       ? {
-          credit: calcCredit(
-            usage.inputTokens - (usage.inputAudioTokens || 0),
-            modelCard?.pricing?.input,
-          ),
-          token: usage.inputTokens - (usage.inputAudioTokens || 0),
+          credit: calcCredit(inputTextTokens, modelCard?.pricing?.input),
+          token: inputTextTokens,
         }
       : undefined,
+
     outputAudio: !!usage.outputAudioTokens
       ? {
           credit: calcCredit(usage.outputAudioTokens, modelCard?.pricing?.audioOutput),
@@ -55,40 +87,27 @@ export const getDetailsToken = (
           token: usage.outputAudioTokens,
         }
       : undefined,
-
-    outputText: !!usage.outputTokens
+    outputReasoning: !!outputReasoningTokens
       ? {
-          credit: calcCredit(
-            usage.outputTokens - (usage.reasoningTokens || 0) - (usage.outputAudioTokens || 0),
-            modelCard?.pricing?.output,
-          ),
-          token: usage.outputTokens - (usage.reasoningTokens || 0) - (usage.outputAudioTokens || 0),
+          credit: calcCredit(outputReasoningTokens, modelCard?.pricing?.output),
+          token: outputReasoningTokens,
         }
       : undefined,
-    reasoning: !!usage.reasoningTokens
+    outputText: !!outputTextTokens
       ? {
-          credit: calcCredit(usage.reasoningTokens, modelCard?.pricing?.output),
-          token: usage.reasoningTokens,
+          credit: calcCredit(outputTextTokens, modelCard?.pricing?.output),
+          token: outputTextTokens,
         }
       : undefined,
 
-    totalOutput: !!usage.outputTokens
-      ? {
-          credit: totalOutput,
-          token: usage.outputTokens,
-        }
+    totalInput: !!totalInputTokens
+      ? { credit: totalInputCredit, token: totalInputTokens }
       : undefined,
-    totalTokens: !!usage.totalTokens
-      ? {
-          credit: totalTokens,
-          token: usage.totalTokens,
-        }
+    totalOutput: !!totalOutputTokens
+      ? { credit: totalOutputCredit, token: totalOutputTokens }
       : undefined,
-    uncachedInput: !!usage.inputTokens
-      ? {
-          credit: uncachedInputCredit,
-          token: usage.inputTokens - (usage.cachedTokens || 0),
-        }
+    totalTokens: !!usage.totalTokens
+      ? { credit: totalCredit, token: usage.totalTokens }
       : undefined,
   };
 };