add cached display

lobehub · Mar 6, 2025 · 80c501e · 80c501e
1 parent 9ea366e
commit 80c501e
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 20 deletions.
diff --git a/src/features/Conversation/Extras/Usage/UsageDetail/ModelCard.tsx b/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,6 +45,10 @@ 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,
@@ -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,6 +138,8 @@ const ModelCard = memo<ModelCardProps>(({ pricing, id, provider, displayName })
             </Tooltip>
           </Flexbox>
         </Flexbox>
+      ) : (
+        <div style={{ height: 18 }} />
       )}
     </Flexbox>
   );

diff --git a/src/features/Conversation/Extras/Usage/UsageDetail/index.tsx b/src/features/Conversation/Extras/Usage/UsageDetail/index.tsx
@@ -88,6 +88,14 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
       title: t('messages.tokenDetails.inputCached'),
       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,
       id: 'output',

diff --git a/src/features/Conversation/Extras/Usage/UsageDetail/tokens.test.ts b/src/features/Conversation/Extras/Usage/UsageDetail/tokens.test.ts
@@ -62,10 +62,10 @@ describe('getDetailsToken', () => {
   });
 
   it('should handle cachedTokens correctly', () => {
-    const usage: ModelTokensUsage = {
+    const usage = {
       totalInputTokens: 200,
-      inputCachedTokens: 50,
-    };
+      cachedTokens: 50,
+    } as ModelTokensUsage;
 
     const result = getDetailsToken(usage, mockModelCard);
 

diff --git a/src/features/Conversation/Extras/Usage/UsageDetail/tokens.ts b/src/features/Conversation/Extras/Usage/UsageDetail/tokens.ts
@@ -22,28 +22,34 @@ export const getDetailsToken = (
     ? 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 - (usage.inputCachedTokens || 0);
+    : totalInputTokens - (inputCacheTokens || 0);
 
   const inputCacheMissCredit = (
     !!inputCacheMissTokens ? calcCredit(inputCacheMissTokens, modelCard?.pricing?.input) : 0
   ) as number;
 
   const inputCachedCredit = (
-    !!usage.inputCachedTokens
-      ? calcCredit(usage.inputCachedTokens, modelCard?.pricing?.cachedInput)
-      : 0
+    !!inputCacheTokens ? calcCredit(inputCacheTokens, modelCard?.pricing?.cachedInput) : 0
   ) as number;
 
+  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 + totalOutputCredit;
+  const totalCredit =
+    inputCacheMissCredit + inputCachedCredit + inputWriteCachedCredit + totalOutputCredit;
 
   return {
     inputAudio: !!usage.inputAudioTokens
@@ -55,11 +61,11 @@ export const getDetailsToken = (
     inputCacheMiss: !!inputCacheMissTokens
       ? { credit: inputCacheMissCredit, token: inputCacheMissTokens }
       : undefined,
-    inputCached: !!usage.inputCachedTokens
-      ? {
-          credit: inputCachedCredit,
-          token: usage.inputCachedTokens,
-        }
+    inputCached: !!inputCacheTokens
+      ? { credit: inputCachedCredit, token: inputCacheTokens }
+      : undefined,
+    inputCachedWrite: !!inputWriteCacheTokens
+      ? { credit: inputWriteCachedCredit, token: inputWriteCacheTokens }
       : undefined,
     inputCitation: !!usage.inputCitationTokens
       ? {

diff --git a/src/locales/default/chat.ts b/src/locales/default/chat.ts
@@ -93,6 +93,7 @@ export default {
         inputMinutes: '${{amount}}/分钟',
         inputTokens: '输入 {{amount}}/积分 · ${{amount}}/M',
         outputTokens: '输出 {{amount}}/积分 · ${{amount}}/M',
+        writeCacheInputTokens: '缓存输入写入 {{amount}}/积分 · ${{amount}}/M',
       },
     },
     tokenDetails: {
@@ -104,6 +105,7 @@ export default {
       inputText: '文本输入',
       inputTitle: '输入明细',
       inputUncached: '输入未缓存',
+      inputWriteCached: '输入缓存写入',
       output: '输出',
       outputAudio: '音频输出',
       outputText: '文本输出',