💄 style: show token generate performance

locales/ar/chat.json

@@ -119,6 +119,16 @@
       "outputText": "مخرجات نصية",
       "outputTitle": "تفاصيل المخرجات",
       "reasoning": "تفكير عميق",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "عدد الرموز في الثانية، TPS. يشير إلى متوسط سرعة توليد المحتوى بواسطة الذكاء الاصطناعي (رمز/ثانية)، ويبدأ الحساب عند استلام أول رمز."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "الوقت حتى أول رمز، TTFT. يشير إلى الفارق الزمني من لحظة إرسال الرسالة حتى استلام أول رمز في العميل."
+        }
+      },
       "title": "تفاصيل التوليد",
       "total": "الإجمالي المستهلك"
     }

locales/bg-BG/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Текстов изход",
       "outputTitle": "Детайли за изхода",
       "reasoning": "Дълбочинно разсъждение",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Токени на секунда, TPS. Отнася се до средната скорост на генериране на съдържание от AI (Токен/секунда), започвайки да се изчислява след получаване на първия токен."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Време до първия токен, TTFT. Отнася се до времевия интервал от изпращането на съобщението до получаването на първия токен от клиента."
+        }
+      },
       "title": "Детайли за генериране",
       "total": "Общо разходи"
     }

locales/de-DE/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Text-Ausgabe",
       "outputTitle": "Ausgabedetails",
       "reasoning": "Tiefes Denken",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokens pro Sekunde, TPS. Bezieht sich auf die durchschnittliche Geschwindigkeit, mit der AI-Inhalte generiert werden (Token/Sekunde), und beginnt mit der Berechnung, nachdem das erste Token empfangen wurde."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Zeit bis zum ersten Token, TTFT. Bezieht sich auf das Zeitintervall von dem Moment, in dem Sie eine Nachricht senden, bis der Client das erste Token erhält."
+        }
+      },
       "title": "Generierungsdetails",
       "total": "Gesamter Verbrauch"
     }

locales/en-US/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Text Output",
       "outputTitle": "Output Details",
       "reasoning": "Deep Thinking",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokens Per Second (TPS). This indicates the average speed of AI-generated content (Tokens/second), calculated from the moment the first Token is received."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Time To First Token (TTFT). This refers to the time interval from when you send a message to when the client receives the first Token."
+        }
+      },
       "title": "Generation Details",
       "total": "Total Consumption"
     }

locales/es-ES/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Salida de texto",
       "outputTitle": "Detalles de salida",
       "reasoning": "Razonamiento profundo",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokens Por Segundo, TPS. Se refiere a la velocidad promedio de generación de contenido por la IA (Token/segundo), comenzando a contar desde que se recibe el primer Token."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Tiempo Hasta el Primer Token, TTFT. Se refiere al intervalo de tiempo desde que envía un mensaje hasta que el cliente recibe el primer Token."
+        }
+      },
       "title": "Detalles de generación",
       "total": "Total consumido"
     }

locales/fa-IR/chat.json

@@ -119,6 +119,16 @@
       "outputText": "خروجی متنی",
       "outputTitle": "جزئیات خروجی",
       "reasoning": "تفکر عمیق",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "تعداد توکن در ثانیه، TPS. به میانگین سرعت تولید محتوای AI اشاره دارد (توکن/ثانیه) و از زمان دریافت اولین توکن شروع به محاسبه می‌شود."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "زمان تا اولین توکن، TTFT. به فاصله زمانی بین ارسال پیام شما و دریافت اولین توکن توسط کلاینت اشاره دارد."
+        }
+      },
       "title": "جزئیات تولید",
       "total": "مجموع مصرف"
     }

locales/fr-FR/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Sortie texte",
       "outputTitle": "Détails de la sortie",
       "reasoning": "Raisonnement approfondi",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokens Par Seconde, TPS. Indique la vitesse moyenne de génération de contenu par l'IA (Token/seconde), calculée à partir de la réception du premier Token."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Temps Jusqu'au Premier Token, TTFT. Indique l'intervalle de temps entre l'envoi de votre message et la réception du premier Token par le client."
+        }
+      },
       "title": "Détails de génération",
       "total": "Total consommé"
     }

locales/it-IT/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Output testo",
       "outputTitle": "Dettagli output",
       "reasoning": "Ragionamento profondo",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Token Per Second, TPS. Indica la velocità media di generazione dei contenuti da parte dell'AI (Token/secondo), calcolata a partire dalla ricezione del primo Token."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Time To First Token, TTFT. Indica l'intervallo di tempo che intercorre tra l'invio del messaggio e la ricezione del primo Token da parte del client."
+        }
+      },
       "title": "Dettagli generati",
       "total": "Totale consumato"
     }

locales/ja-JP/chat.json

@@ -119,6 +119,16 @@
       "outputText": "テキスト出力",
       "outputTitle": "出力の詳細",
       "reasoning": "深い思考",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "トークン毎秒（TPS）。AIが生成するコンテンツの平均速度（トークン/秒）を示し、最初のトークンを受信した時点から計算が始まります。"
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "最初のトークンまでの時間（TTFT）。メッセージを送信してからクライアントが最初のトークンを受信するまでの時間間隔を示します。"
+        }
+      },
       "title": "生成の詳細",
       "total": "合計消費"
     }

locales/ko-KR/chat.json

@@ -119,6 +119,16 @@
       "outputText": "텍스트 출력",
       "outputTitle": "출력 세부사항",
       "reasoning": "심층 사고",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "초당 토큰 수(TPS). AI가 생성한 콘텐츠의 평균 속도(토큰/초)를 나타내며, 첫 번째 토큰을 수신한 후부터 계산됩니다."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "첫 번째 토큰까지의 시간(Time To First Token, TTFT). 메시지를 전송한 시점부터 클라이언트가 첫 번째 토큰을 수신할 때까지의 시간 간격을 나타냅니다."
+        }
+      },
       "title": "생성 세부사항",
       "total": "총 소모"
     }

locales/nl-NL/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Tekstuitvoer",
       "outputTitle": "Uitvoerdetails",
       "reasoning": "Diep nadenken",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokens Per Second, TPS. Dit verwijst naar de gemiddelde snelheid van AI-gegenereerde inhoud (Token/seconde), die begint te tellen vanaf het moment dat het eerste Token is ontvangen."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Time To First Token, TTFT. Dit verwijst naar de tijdsduur van het moment dat u een bericht verzendt tot het moment dat de client het eerste Token ontvangt."
+        }
+      },
       "title": "Genereren van details",
       "total": "Totaal verbruik"
     }

locales/pl-PL/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Wyjście tekstowe",
       "outputTitle": "Szczegóły wyjścia",
       "reasoning": "Głębokie myślenie",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokeny na sekundę, TPS. Oznacza średnią prędkość generowania treści przez AI (Tokeny/sekundę), obliczaną od momentu otrzymania pierwszego Tokena."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Czas do pierwszego tokena, TTFT. Oznacza czas od momentu wysłania wiadomości do momentu, w którym klient otrzymuje pierwszy Token."
+        }
+      },
       "title": "Szczegóły generacji",
       "total": "Całkowite zużycie"
     }

locales/pt-BR/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Saída de texto",
       "outputTitle": "Detalhes da saída",
       "reasoning": "Raciocínio profundo",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokens Por Segundo, TPS. Refere-se à velocidade média de geração de conteúdo pela IA (Token/segundo), começando a contagem após o recebimento do primeiro Token."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Tempo Para o Primeiro Token, TTFT. Refere-se ao intervalo de tempo desde que você envia a mensagem até que o cliente receba o primeiro Token."
+        }
+      },
       "title": "Detalhes da geração",
       "total": "Total consumido"
     }

locales/ru-RU/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Текстовый выход",
       "outputTitle": "Детали выхода",
       "reasoning": "Глубокое мышление",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Токены в секунду (TPS). Средняя скорость генерации контента ИИ (Токенов/сек), начинается с момента получения первого токена."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Время до первого токена (TTFT). Время, прошедшее с момента отправки вами сообщения до получения первого токена клиентом."
+        }
+      },
       "title": "Детали генерации",
       "total": "Общее потребление"
     }

locales/tr-TR/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Metin çıkışı",
       "outputTitle": "Çıkış detayları",
       "reasoning": "Derin düşünme",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Token Başına Saniye, TPS. AI tarafından üretilen içeriğin ortalama hızını (Token/saniye) belirtir, ilk Token alındıktan sonra hesaplanmaya başlanır."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "İlk Token'a Kadar Geçen Süre, TTFT. Mesajınızı göndermenizden, istemcinin ilk Token'ı almasına kadar geçen zaman aralığını belirtir."
+        }
+      },
       "title": "Üretim detayları",
       "total": "Toplam tüketim"
     }

locales/vi-VN/chat.json

@@ -119,6 +119,16 @@
       "outputText": "Văn bản xuất",
       "outputTitle": "Chi tiết xuất",
       "reasoning": "Suy nghĩ sâu sắc",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokens Mỗi Giây, TPS. Chỉ tốc độ trung bình của nội dung do AI tạo ra (Token/giây), bắt đầu tính từ khi nhận được Token đầu tiên."
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Thời Gian Đến Token Đầu Tiên, TTFT. Chỉ khoảng thời gian từ khi bạn gửi tin nhắn đến khi khách hàng nhận được Token đầu tiên."
+        }
+      },
       "title": "Chi tiết tạo ra",
       "total": "Tổng tiêu thụ"
     }

locales/zh-CN/chat.json

@@ -119,6 +119,16 @@
       "outputText": "文本输出",
       "outputTitle": "输出明细",
       "reasoning": "深度思考",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "Tokens Per Second，TPS。指AI生成内容的平均速度（Token/秒），在接收到首个 Token 后开始计算。"
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "Time To First Token，TTFT。指从您发送消息到客户端接收到首个 Token 的时间间隔。"
+        }
+      },
       "title": "生成明细",
       "total": "总计消耗"
     }

locales/zh-TW/chat.json

@@ -119,6 +119,16 @@
       "outputText": "文本輸出",
       "outputTitle": "輸出明細",
       "reasoning": "深度思考",
+      "speed": {
+        "tps": {
+          "title": "TPS",
+          "tooltip": "每秒令牌數，TPS。指AI生成內容的平均速度（Token/秒），在接收到首個令牌後開始計算。"
+        },
+        "ttft": {
+          "title": "TTFT",
+          "tooltip": "首次令牌時間，TTFT。指從您發送消息到客戶端接收到首個令牌的時間間隔。"
+        }
+      },
       "title": "生成明細",
       "total": "總計消耗"
     }

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

@@ -6,30 +6,31 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import InfoTooltip from '@/components/InfoTooltip';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
-import { ModelTokensUsage } from '@/types/message';
+import { MessageMetadata } from '@/types/message';
 import { formatNumber } from '@/utils/format';
 
 import ModelCard from './ModelCard';
 import TokenProgress, { TokenProgressItem } from './TokenProgress';
 import { getDetailsToken } from './tokens';
 
 interface TokenDetailProps {
+  meta: MessageMetadata;
   model: string;
   provider: string;
-  usage: ModelTokensUsage;
 }
 
-const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
+const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
   const { t } = useTranslation('chat');
   const theme = useTheme();
 
   const modelCard = useAiInfraStore(aiModelSelectors.getModelCard(model, provider));
   const isShowCredit = useGlobalStore(systemStatusSelectors.isShowCredit) && !!modelCard?.pricing;
 
-  const detailTokens = getDetailsToken(usage, modelCard);
+  const detailTokens = getDetailsToken(meta, modelCard);
   const inputDetails = [
     !!detailTokens.inputAudio && {
       color: theme.cyan9,
@@ -113,6 +114,10 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
     detailTokens.totalTokens!.credit / detailTokens.totalTokens!.token,
     2,
   );
+
+  const tps = meta?.tps ? formatNumber(meta.tps, 2) : undefined;
+  const ttft = meta?.ttft ? formatNumber(meta.ttft / 1000, 2) : undefined;
+
   return (
     <Popover
       arrow={false}
@@ -170,6 +175,28 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
                   <div style={{ fontWeight: 500 }}>{averagePricing}</div>
                 </Flexbox>
               )}
+              {tps && (
+                <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
+                  <Flexbox gap={8} horizontal>
+                    <div style={{ color: theme.colorTextSecondary }}>
+                      {t('messages.tokenDetails.speed.tps.title')}
+                    </div>
+                    <InfoTooltip title={t('messages.tokenDetails.speed.tps.tooltip')} />
+                  </Flexbox>
+                  <div style={{ fontWeight: 500 }}>{tps}</div>
+                </Flexbox>
+              )}
+              {ttft && (
+                <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
+                  <Flexbox gap={8} horizontal>
+                    <div style={{ color: theme.colorTextSecondary }}>
+                      {t('messages.tokenDetails.speed.ttft.title')}
+                    </div>
+                    <InfoTooltip title={t('messages.tokenDetails.speed.ttft.tooltip')} />
+                  </Flexbox>
+                  <div style={{ fontWeight: 500 }}>{ttft}s</div>
+                </Flexbox>
+              )}
             </Flexbox>
           </Flexbox>
         </Flexbox>

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

@@ -31,7 +31,7 @@ const Usage = memo<UsageProps>(({ model, metadata, provider }) => {
       </Center>
 
       {!!metadata.totalTokens && (
-        <TokenDetail model={model as string} provider={provider} usage={metadata} />
+        <TokenDetail meta={metadata} model={model as string} provider={provider} />
       )}
     </Flexbox>
   );