@lobehub/chat 1.68.9 → 1.68.10

package/src/config/aiModels/perplexity.ts

@@ -1,6 +1,25 @@
 import { AIChatModelCard } from '@/types/aiModel';
 
 const perplexityChatModels: AIChatModelCard[] = [
+  {
+    abilities: {
+      reasoning: true,
+      search: true,
+    },
+    contextWindowTokens: 127_072,
+    description:
+      'Deep Research 进行全面的专家级研究，并将其综合成可访问、可作的报告。',
+    displayName: 'Sonar Deep Research',
+    enabled: true,
+    id: 'sonar-deep-research',
+    maxOutput: 8192,
+    pricing: { input: 2, output: 8 },
+    releasedAt: '2025-02-14',
+    settings: {
+      searchImpl: 'internal',
+    },
+    type: 'chat',
+  },
   {
     abilities: {
       reasoning: true,
@@ -12,6 +31,8 @@ const perplexityChatModels: AIChatModelCard[] = [
     enabled: true,
     id: 'sonar-reasoning-pro',
     maxOutput: 8192,
+    pricing: { input: 2, output: 8 },
+    releasedAt: '2025-01-21',
     settings: {
       searchImpl: 'internal',
     },
@@ -28,6 +49,8 @@ const perplexityChatModels: AIChatModelCard[] = [
     enabled: true,
     id: 'sonar-reasoning',
     maxOutput: 8192,
+    pricing: { input: 1, output: 5 },
+    releasedAt: '2025-01-21',
     settings: {
       searchImpl: 'internal',
     },
@@ -42,6 +65,8 @@ const perplexityChatModels: AIChatModelCard[] = [
     displayName: 'Sonar Pro',
     enabled: true,
     id: 'sonar-pro',
+    pricing: { input: 3, output: 15 },
+    releasedAt: '2025-01-21',
     settings: {
       searchImpl: 'internal',
     },
@@ -56,34 +81,25 @@ const perplexityChatModels: AIChatModelCard[] = [
     displayName: 'Sonar',
     enabled: true,
     id: 'sonar',
+    pricing: { input: 1, output: 1 },
+    releasedAt: '2025-01-21',
     settings: {
       searchImpl: 'internal',
     },
-    type: 'chat',
-  },
-  // The following will be deprecated on 02-22
-  {
-    contextWindowTokens: 127_072,
-    description:
-      'Llama 3.1 Sonar Small Online 模型，具备8B参数，支持约127,000个标记的上下文长度，专为在线聊天设计，能高效处理各种文本交互。',
-    displayName: 'Llama 3.1 Sonar Small Online',
-    id: 'llama-3.1-sonar-small-128k-online',
-    type: 'chat',
-  },
-  {
-    contextWindowTokens: 127_072,
-    description:
-      'Llama 3.1 Sonar Large Online 模型，具备70B参数，支持约127,000个标记的上下文长度，适用于高容量和多样化聊天任务。',
-    displayName: 'Llama 3.1 Sonar Large Online',
-    id: 'llama-3.1-sonar-large-128k-online',
+
     type: 'chat',
   },
   {
+    abilities: {
+      reasoning: true,
+    },
     contextWindowTokens: 127_072,
     description:
-      'Llama 3.1 Sonar Huge Online 模型，具备405B参数，支持约127,000个标记的上下文长度，设计用于复杂的在线聊天应用。',
-    displayName: 'Llama 3.1 Sonar Huge Online',
-    id: 'llama-3.1-sonar-huge-128k-online',
+      'R1-1776 是 DeepSeek R1 模型的一个版本，经过后训练，可提供未经审查、无偏见的事实信息。',
+    displayName: 'R1 1776',
+    id: 'r1-1776',
+    pricing: { input: 2, output: 8 },
+    releasedAt: '2025-02-18',
     type: 'chat',
   },
 ];

package/src/config/modelProviders/ppio.ts

@@ -243,7 +243,7 @@ const PPIO: ModelProviderCard = {
     sdkType: 'openai',
     showModelFetcher: true,
   },
-  url: 'https://ppinfra.com/user/register?invited_by=RQIMOC',
+  url: 'https://ppinfra.com/user/register?invited_by=RQIMOC&utm_source=github_lobechat',
 };
 
 export default PPIO; 

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,
+      },
+    });
+  });
+});