Show per-turn model and token usage

src/_locales/de/main.json

@@ -82,6 +82,17 @@
   "Model Name": "Modellname",
   "Custom Model API Url": "Benutzerdefinierte Modell-API-URL",
   "Loading...": "Laden...",
+  "Input tokens": "Eingabe-Tokens",
+  "Output tokens": "Ausgabe-Tokens",
+  "Total tokens": "Tokens insgesamt",
+  "Cached input tokens": "Zwischengespeicherte Eingabe-Tokens",
+  "Cache write tokens": "In den Cache geschriebene Tokens",
+  "Selected model": "Ausgewähltes Modell",
+  "Reported model": "Gemeldetes Modell",
+  "Model": "Modell",
+  "Models": "Modelle",
+  "Turns": "Runden",
+  "Reported usage": "Gemeldete Nutzung",
   "Feedback": "Feedback",
   "Confirm": "Bestätigen",
   "Clear Conversation": "Konversation löschen",

src/_locales/en/main.json

@@ -89,6 +89,17 @@
   "Model Name": "Model Name",
   "Custom Model API Url": "Custom Model API Url",
   "Loading...": "Loading...",
+  "Input tokens": "Input tokens",
+  "Output tokens": "Output tokens",
+  "Total tokens": "Total tokens",
+  "Cached input tokens": "Cached input tokens",
+  "Cache write tokens": "Cache write tokens",
+  "Selected model": "Selected model",
+  "Reported model": "Reported model",
+  "Model": "Model",
+  "Models": "Models",
+  "Turns": "Turns",
+  "Reported usage": "Reported usage",
   "Feedback": "Feedback",
   "Confirm": "Confirm",
   "Clear Conversation": "Clear Conversation",

src/_locales/es/main.json

@@ -80,6 +80,17 @@
   "Model Name": "Nombre del modelo",
   "Custom Model API Url": "URL de la API de modelo personalizada",
   "Loading...": "Cargando...",
+  "Input tokens": "Tokens de entrada",
+  "Output tokens": "Tokens de salida",
+  "Total tokens": "Tokens totales",
+  "Cached input tokens": "Tokens de entrada en caché",
+  "Cache write tokens": "Tokens escritos en caché",
+  "Selected model": "Modelo seleccionado",
+  "Reported model": "Modelo informado",
+  "Model": "Modelo",
+  "Models": "Modelos",
+  "Turns": "Turnos",
+  "Reported usage": "Uso informado",
   "Feedback": "Comentarios",
   "Confirm": "Confirmar",
   "Clear Conversation": "Borrar conversación",

src/_locales/fr/main.json

@@ -80,6 +80,17 @@
   "Model Name": "Nom du modèle",
   "Custom Model API Url": "URL API personnalisée du modèle",
   "Loading...": "Chargement...",
+  "Input tokens": "Jetons d’entrée",
+  "Output tokens": "Jetons de sortie",
+  "Total tokens": "Total des jetons",
+  "Cached input tokens": "Jetons d’entrée mis en cache",
+  "Cache write tokens": "Jetons écrits dans le cache",
+  "Selected model": "Modèle sélectionné",
+  "Reported model": "Modèle déclaré",
+  "Model": "Modèle",
+  "Models": "Modèles",
+  "Turns": "Échanges",
+  "Reported usage": "Utilisation déclarée",
   "Feedback": "Commentaires",
   "Confirm": "Confirmer",
   "Clear Conversation": "Effacer la conversation",

src/_locales/id/main.json

@@ -80,6 +80,17 @@
   "Model Name": "Nama Model",
   "Custom Model API Url": "URL API Model Kustom",
   "Loading...": "Sedang Memuat...",
+  "Input tokens": "Token masukan",
+  "Output tokens": "Token keluaran",
+  "Total tokens": "Total token",
+  "Cached input tokens": "Token masukan dari cache",
+  "Cache write tokens": "Token yang ditulis ke cache",
+  "Selected model": "Model yang dipilih",
+  "Reported model": "Model yang dilaporkan",
+  "Model": "Model",
+  "Models": "Model",
+  "Turns": "Putaran",
+  "Reported usage": "Penggunaan yang dilaporkan",
   "Feedback": "Masukan",
   "Confirm": "Konfirmasi",
   "Clear Conversation": "Bersihkan Percakapan",

src/_locales/it/main.json

@@ -80,6 +80,17 @@
   "Model Name": "Nome del modello",
   "Custom Model API Url": "URL API del modello personalizzato",
   "Loading...": "Caricamento...",
+  "Input tokens": "Token di input",
+  "Output tokens": "Token di output",
+  "Total tokens": "Token totali",
+  "Cached input tokens": "Token di input memorizzati nella cache",
+  "Cache write tokens": "Token scritti nella cache",
+  "Selected model": "Modello selezionato",
+  "Reported model": "Modello segnalato",
+  "Model": "Modello",
+  "Models": "Modelli",
+  "Turns": "Turni",
+  "Reported usage": "Utilizzo segnalato",
   "Feedback": "Feedback",
   "Confirm": "Conferma",
   "Clear Conversation": "Pulisci la conversazione",

src/_locales/ja/main.json

@@ -80,6 +80,17 @@
   "Model Name": "モデル名",
   "Custom Model API Url": "カスタムモデルのAPI URL",
   "Loading...": "読み込み中...",
+  "Input tokens": "入力トークン",
+  "Output tokens": "出力トークン",
+  "Total tokens": "合計トークン",
+  "Cached input tokens": "キャッシュ済み入力トークン",
+  "Cache write tokens": "キャッシュ書き込みトークン",
+  "Selected model": "選択したモデル",
+  "Reported model": "報告されたモデル",
+  "Model": "モデル",
+  "Models": "モデル",
+  "Turns": "ターン数",
+  "Reported usage": "報告された使用量",
   "Feedback": "フィードバック",
   "Confirm": "確認",
   "Clear Conversation": "会話をクリア",

src/_locales/ko/main.json

@@ -80,6 +80,17 @@
   "Model Name": "모델 이름",
   "Custom Model API Url": "사용자 정의 모델 API URL",
   "Loading...": "로딩 중...",
+  "Input tokens": "입력 토큰",
+  "Output tokens": "출력 토큰",
+  "Total tokens": "총 토큰",
+  "Cached input tokens": "캐시된 입력 토큰",
+  "Cache write tokens": "캐시 쓰기 토큰",
+  "Selected model": "선택한 모델",
+  "Reported model": "보고된 모델",
+  "Model": "모델",
+  "Models": "모델",
+  "Turns": "턴 수",
+  "Reported usage": "보고된 사용량",
   "Feedback": "피드백",
   "Confirm": "확인",
   "Clear Conversation": "대화 내용 지우기",

src/_locales/pt/main.json

@@ -80,6 +80,17 @@
   "Model Name": "Nome do Modelo",
   "Custom Model API Url": "URL da API do Modelo Personalizado",
   "Loading...": "Carregando...",
+  "Input tokens": "Tokens de entrada",
+  "Output tokens": "Tokens de saída",
+  "Total tokens": "Total de tokens",
+  "Cached input tokens": "Tokens de entrada em cache",
+  "Cache write tokens": "Tokens gravados no cache",
+  "Selected model": "Modelo selecionado",
+  "Reported model": "Modelo informado",
+  "Model": "Modelo",
+  "Models": "Modelos",
+  "Turns": "Turnos",
+  "Reported usage": "Uso informado",
   "Feedback": "Feedback",
   "Confirm": "Confirmar",
   "Clear Conversation": "Limpar Conversa",

src/_locales/ru/main.json

@@ -88,6 +88,17 @@
   "Model Name": "Название модели",
   "Custom Model API Url": "Custom Model API Url",
   "Loading...": "Загрузка...",
+  "Input tokens": "Входные токены",
+  "Output tokens": "Выходные токены",
+  "Total tokens": "Всего токенов",
+  "Cached input tokens": "Кэшированные входные токены",
+  "Cache write tokens": "Токены, записанные в кэш",
+  "Selected model": "Выбранная модель",
+  "Reported model": "Модель, указанная провайдером",
+  "Model": "Модель",
+  "Models": "Модели",
+  "Turns": "Ходы",
+  "Reported usage": "Данные об использовании",
   "Feedback": "Обратная связь",
   "Confirm": "Подтверждение",
   "Clear Conversation": "Очистить беседу",

src/_locales/tr/main.json

@@ -80,6 +80,17 @@
   "Model Name": "Model Adı",
   "Custom Model API Url": "Özel Model API Url'si",
   "Loading...": "Yükleniyor...",
+  "Input tokens": "Girdi tokenleri",
+  "Output tokens": "Çıktı tokenleri",
+  "Total tokens": "Toplam token",
+  "Cached input tokens": "Önbelleğe alınmış girdi tokenleri",
+  "Cache write tokens": "Önbelleğe yazılan tokenler",
+  "Selected model": "Seçilen model",
+  "Reported model": "Bildirilen model",
+  "Model": "Model",
+  "Models": "Modeller",
+  "Turns": "Turlar",
+  "Reported usage": "Bildirilen kullanım",
   "Feedback": "Geri Bildirim",
   "Confirm": "Onayla",
   "Clear Conversation": "Konuşmayı Temizle",

src/_locales/zh-hans/main.json

@@ -83,6 +83,17 @@
   "Model Name": "模型名",
   "Custom Model API Url": "自定义模型的API地址",
   "Loading...": "正在读取...",
+  "Input tokens": "输入 token",
+  "Output tokens": "输出 token",
+  "Total tokens": "token 总计",
+  "Cached input tokens": "缓存命中 token",
+  "Cache write tokens": "写入缓存 token",
+  "Selected model": "选用模型",
+  "Reported model": "上游回报模型",
+  "Model": "模型",
+  "Models": "模型",
+  "Turns": "轮次",
+  "Reported usage": "已回报用量",
   "Feedback": "反馈",
   "Confirm": "确认",
   "Clear Conversation": "清理对话",

src/_locales/zh-hant/main.json

@@ -83,6 +83,17 @@
   "Model Name": "模型名稱",
   "Custom Model API Url": "自訂模型 API 網址",
   "Loading...": "載入中...",
+  "Input tokens": "輸入 token",
+  "Output tokens": "輸出 token",
+  "Total tokens": "token 合計",
+  "Cached input tokens": "快取命中 token",
+  "Cache write tokens": "寫入快取 token",
+  "Selected model": "選用模型",
+  "Reported model": "上游回報模型",
+  "Model": "模型",
+  "Models": "模型",
+  "Turns": "輪次",
+  "Reported usage": "已回報用量",
   "Feedback": "意見回饋",
   "Confirm": "確認",
   "Clear Conversation": "清除對話",

src/components/ConversationCard/index.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import Browser from 'webextension-polyfill'
 import InputBox from '../InputBox'
 import ConversationItem from '../ConversationItem'
+import ConversationUsageSummary from '../ConversationUsageSummary'
 import {
   apiModeToModelName,
   createElementAtPosition,
@@ -45,6 +46,7 @@ import {
   createConversationPortMessage,
   createRetrySession,
   finalizeInterruptedSession,
+  getCompletedAnswerMetadata,
   getCompletedAnswerUpdate,
   getInterruptedCompletionState,
   isSupersededGenerationMessage,
@@ -59,12 +61,14 @@ class ConversationItemData extends Object {
    * @param {'question'|'answer'|'error'} type
    * @param {string} content
    * @param {bool} done
+   * @param {Object|null} meta
    */
-  constructor(type, content, done = false) {
+  constructor(type, content, done = false, meta = null) {
     super()
     this.type = type
     this.content = content
     this.done = done
+    this.meta = meta
   }
 }
 
@@ -81,6 +85,7 @@ function ConversationCard(props) {
   const retryRecordRef = useRef(null)
   const retryGenerationIdRef = useRef(0)
   const requestGenerationIdRef = useRef(0)
+  const requestModelRef = useRef('')
   const [completeDraggable, setCompleteDraggable] = useState(false)
   const useForegroundFetch = isUsingBingWebModel(session)
   const [apiModes, setApiModes] = useState([])
@@ -121,7 +126,7 @@ function ConversationCard(props) {
       const ret = []
       for (const record of session.conversationRecords) {
         ret.push(new ConversationItemData('question', record.question, true))
-        ret.push(new ConversationItemData('answer', record.answer, true))
+        ret.push(new ConversationItemData('answer', record.answer, true, record.meta))
       }
       setConversationItemData(ret)
     }
@@ -173,17 +178,19 @@ function ConversationCard(props) {
    * @param {boolean} appended
    * @param {'question'|'answer'|'error'} newType
    * @param {boolean} done
+   * @param {Object|null|undefined} meta
    */
-  const updateAnswer = (value, appended, newType, done = false) => {
+  const updateAnswer = (value, appended, newType, done = false, meta = undefined) => {
     setConversationItemData((old) => {
       const copy = [...old]
       const index = findLastIndex(copy, (v) => v.type === 'answer' || v.type === 'error')
       if (index === -1) return copy
       copy[index] = new ConversationItemData(
         newType,
         appended ? copy[index].content + value : value,
+        done,
+        meta === undefined ? copy[index].meta : meta,
       )
-      copy[index].done = done
       return copy
     })
   }
@@ -211,7 +218,16 @@ function ConversationCard(props) {
       partialAnswerRef.current = ''
       retryRecordRef.current = null
       const answerUpdate = getCompletedAnswerUpdate(completionState.restoredRetryAnswer)
-      updateAnswer(answerUpdate.value, answerUpdate.appended, 'answer', true)
+      const answerMetadata = getCompletedAnswerMetadata({
+        message: msg,
+        restoredRetryAnswer: completionState.restoredRetryAnswer,
+        partialAnswer,
+        retryRecord,
+        requestedModel: requestModelRef.current,
+        fallbackModel: currentAiName,
+      })
+      requestModelRef.current = ''
+      updateAnswer(answerUpdate.value, answerUpdate.appended, 'answer', true, answerMetadata)
       setIsReady(true)
     }
     if (msg.error) {
@@ -274,6 +290,7 @@ function ConversationCard(props) {
       }
       partialAnswerRef.current = ''
       retryRecordRef.current = null
+      requestModelRef.current = ''
       setIsReady(true)
     }
   }
@@ -287,6 +304,9 @@ function ConversationCard(props) {
    */
   const postMessage = async ({ session, stop, stopGenerationId }) => {
     const requestGenerationId = session ? ++requestGenerationIdRef.current : undefined
+    if (session) {
+      requestModelRef.current = getConversationAiName(session, t, customOpenAIProviders)
+    }
     if (useForegroundFetch) {
       foregroundMessageListeners.current.forEach((listener) =>
         listener({ session, stop, stopGenerationId, requestGenerationId }),
@@ -386,7 +406,13 @@ function ConversationCard(props) {
   }, [port, conversationItemData])
 
   const getRetryFn = (session) => async () => {
-    updateAnswer(`<p class="gpt-loading">${t('Waiting for response...')}</p>`, false, 'answer')
+    updateAnswer(
+      `<p class="gpt-loading">${t('Waiting for response...')}</p>`,
+      false,
+      'answer',
+      false,
+      null,
+    )
     setIsReady(false)
 
     const conversationRecords = session.conversationRecords.map((record) => ({ ...record }))
@@ -574,6 +600,7 @@ function ConversationCard(props) {
               }
               partialAnswerRef.current = ''
               retryRecordRef.current = null
+              requestModelRef.current = ''
               Browser.runtime.sendMessage({
                 type: 'DELETE_CONVERSATION',
                 data: {
@@ -649,6 +676,7 @@ function ConversationCard(props) {
         </span>
       </div>
       <hr />
+      <ConversationUsageSummary records={session.conversationRecords} />
       <div
         ref={bodyRef}
         className="markdown-body"
@@ -664,6 +692,7 @@ function ConversationCard(props) {
             key={idx}
             type={data.type}
             descName={data.type === 'answer' && currentAiName}
+            meta={data.meta}
             onRetry={idx === conversationItemData.length - 1 ? retryFn : null}
           />
         ))}