💄 style: Update token tag popover style (lobehub#2631)

* 💄 style: Update token tag popover style

* 💄 style: Fix empty status

* 💄 style: Fix width

* 💄 style: Change num font family

* 💄 style: Add title

* 💄 style: Change fontfamily

locales/ar/chat.json

@@ -84,6 +84,7 @@
     "chats": "رسائل المحادثة",
     "rest": "المتبقي",
     "systemRole": "تعيين الدور",
+    "title": "تفاصيل الرمز",
     "tools": "تعيين الإضافات",
     "total": "الإجمالي",
     "used": "المستخدم"

locales/ar/components.json

@@ -6,7 +6,8 @@
       "functionCall": "يدعم هذا النموذج استدعاء الوظائف",
       "tokens": "يدعم هذا النموذج حتى {{tokens}} رمزًا في جلسة واحدة",
       "vision": "يدعم هذا النموذج التعرف البصري"
-    }
+    },
+    "removed": "هذا النموذج لم يعد متوفر في القائمة، سيتم إزالته تلقائيًا إذا تم إلغاء تحديده"
   },
   "ModelSwitchPanel": {
     "emptyModel": "لا توجد نماذج ممكن تمكينها، يرجى الانتقال إلى الإعدادات لتمكينها",

locales/bg-BG/chat.json

@@ -84,6 +84,7 @@
     "chats": "Чат съобщения",
     "rest": "Оставащи",
     "systemRole": "Настройки на ролята",
+    "title": "Детайли на токена",
     "tools": "Настройки на плъгина",
     "total": "Общо налични",
     "used": "Общо използвани"

locales/bg-BG/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Този модел поддържа функционални обаждания (Function Call)",
       "tokens": "Този модел поддържа до {{tokens}} токена за една сесия",
       "vision": "Този модел поддържа визуално разпознаване"
-    }
+    },
+    "removed": "Този модел не се намира в списъка. Ако бъде отменен изборът, той ще бъде автоматично премахнат."
   },
   "ModelSwitchPanel": {
     "emptyModel": "Няма активирани модели, моля, посетете настройките и ги активирайте",

locales/de-DE/chat.json

@@ -84,6 +84,7 @@
     "chats": "Chats",
     "rest": "Verbleibend",
     "systemRole": "Systemrolle",
+    "title": "Kontextdetails",
     "tools": "Werkzeuge",
     "total": "Insgesamt",
     "used": "Verwendet"

locales/de-DE/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Dieses Modell unterstützt Funktionsaufrufe.",
       "tokens": "Dieses Modell unterstützt maximal {{tokens}} Tokens pro Sitzung.",
       "vision": "Dieses Modell unterstützt die visuelle Erkennung."
-    }
+    },
+    "removed": "Das Modell wurde aus der Liste entfernt. Wenn Sie die Auswahl aufheben, wird es automatisch entfernt."
   },
   "ModelSwitchPanel": {
     "emptyModel": "Kein aktiviertes Modell. Bitte gehen Sie zu den Einstellungen, um es zu aktivieren.",

locales/en-US/chat.json

@@ -84,6 +84,7 @@
     "chats": "Chat Messages",
     "rest": "Remaining",
     "systemRole": "Role Settings",
+    "title": "Context Details",
     "tools": "Plugin Settings",
     "total": "Total Available",
     "used": "Total Used"

locales/en-US/components.json

@@ -6,7 +6,8 @@
       "functionCall": "This model supports function call.",
       "tokens": "This model supports up to {{tokens}} tokens in a single session.",
       "vision": "This model supports visual recognition."
-    }
+    },
+    "removed": "The model is not in the list. It will be automatically removed if deselected."
   },
   "ModelSwitchPanel": {
     "emptyModel": "No enabled model. Please go to settings to enable.",

locales/es-ES/chat.json

@@ -84,6 +84,7 @@
     "chats": "Mensajes de chat",
     "rest": "Restante",
     "systemRole": "Rol del sistema",
+    "title": "Detalles del token",
     "tools": "Herramientas",
     "total": "Total",
     "used": "Utilizado"

locales/es-ES/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Este modelo admite llamadas de función.",
       "tokens": "Este modelo admite un máximo de {{tokens}} tokens por sesión.",
       "vision": "Este modelo admite el reconocimiento visual."
-    }
+    },
+    "removed": "El modelo no está en la lista, se eliminará automáticamente si se cancela la selección"
   },
   "ModelSwitchPanel": {
     "emptyModel": "No hay modelos habilitados. Vaya a la configuración para habilitarlos.",

locales/fr-FR/chat.json

@@ -84,6 +84,7 @@
     "chats": "Messages de discussion",
     "rest": "Restant disponible",
     "systemRole": "Rôle système",
+    "title": "Détails du jeton",
     "tools": "Paramètres du plugin",
     "total": "Total disponible",
     "used": "Total utilisé"

locales/fr-FR/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Ce modèle prend en charge les appels de fonction.",
       "tokens": "Ce modèle prend en charge jusqu'à {{tokens}} jetons par session.",
       "vision": "Ce modèle prend en charge la reconnaissance visuelle."
-    }
+    },
+    "removed": "Le modèle n'est pas dans la liste, il sera automatiquement supprimé si vous annulez la sélection"
   },
   "ModelSwitchPanel": {
     "emptyModel": "Aucun modèle activé. Veuillez vous rendre dans les paramètres pour l'activer.",

locales/it-IT/chat.json

@@ -84,6 +84,7 @@
     "chats": "Chat",
     "rest": "Rimanenti",
     "systemRole": "Ruolo di sistema",
+    "title": "Dettagli del Token",
     "tools": "Strumenti",
     "total": "Totale",
     "used": "Utilizzati"

locales/it-IT/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Questo modello supporta la chiamata di funzioni.",
       "tokens": "Questo modello supporta un massimo di {{tokens}} token per sessione.",
       "vision": "Questo modello supporta il riconoscimento visivo."
-    }
+    },
+    "removed": "Il modello non è più nella lista, verrà rimosso automaticamente se deselezionato"
   },
   "ModelSwitchPanel": {
     "emptyModel": "Nessun modello attivo. Vai alle impostazioni per attivarne uno.",

locales/ja-JP/chat.json

@@ -84,6 +84,7 @@
     "chats": "チャットメッセージ",
     "rest": "残り利用可能",
     "systemRole": "システムロール設定",
+    "title": "コンテキストの詳細",
     "tools": "ツール設定",
     "total": "合計利用可能",
     "used": "合計使用"

locales/ja-JP/components.json

@@ -6,7 +6,8 @@
       "functionCall": "このモデルは関数呼び出し（Function Call）をサポートしています。",
       "tokens": "このモデルは1つのセッションあたり最大{{tokens}}トークンをサポートしています。",
       "vision": "このモデルはビジョン認識をサポートしています。"
-    }
+    },
+    "removed": "選択されたモデルはリストから削除されました。選択を解除すると自動的に削除されます。"
   },
   "ModelSwitchPanel": {
     "emptyModel": "有効なモデルがありません。設定に移動して有効にしてください。",

locales/ko-KR/chat.json

@@ -84,6 +84,7 @@
     "chats": "채팅 메시지",
     "rest": "남은 사용량",
     "systemRole": "시스템 역할",
+    "title": "컨텍스트 세부 정보",
     "tools": "도구 설정",
     "total": "총 사용량",
     "used": "총 사용"

locales/ko-KR/components.json

@@ -6,7 +6,8 @@
       "functionCall": "이 모델은 함수 호출을 지원합니다",
       "tokens": "이 모델은 단일 세션당 최대 {{tokens}} 토큰을 지원합니다",
       "vision": "이 모델은 시각 인식을 지원합니다"
-    }
+    },
+    "removed": "모델이 목록에서 제거되었습니다. 선택이 취소되면 자동으로 제거됩니다."
   },
   "ModelSwitchPanel": {
     "emptyModel": "활성화된 모델이 없습니다. 설정으로 이동하여 활성화하세요",

locales/nl-NL/chat.json

@@ -84,6 +84,7 @@
     "chats": "Chats",
     "rest": "Rust",
     "systemRole": "Systeemrol",
+    "title": "Contextuele details",
     "tools": "Tools",
     "total": "Totaal",
     "used": "Gebruikt"

locales/nl-NL/components.json

@@ -6,7 +6,8 @@
       "functionCall": "This model supports function call.",
       "tokens": "This model supports up to {{tokens}} tokens in a single session.",
       "vision": "This model supports visual recognition."
-    }
+    },
+    "removed": "Dit model staat niet meer in de lijst. Als je het deselecteert, wordt het automatisch verwijderd."
   },
   "ModelSwitchPanel": {
     "emptyModel": "No enabled model, please go to settings to enable.",

locales/pl-PL/chat.json

@@ -84,6 +84,7 @@
     "chats": "Rozmowy",
     "rest": "Pozostałe",
     "systemRole": "Rola systemowa",
+    "title": "Szczegóły tokena",
     "tools": "Narzędzia",
     "total": "Razem",
     "used": "Wykorzystane"

locales/pl-PL/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Ten model obsługuje wywołania funkcji (Function Call).",
       "tokens": "Ten model obsługuje maksymalnie {{tokens}} tokenów w pojedynczej sesji.",
       "vision": "Ten model obsługuje rozpoznawanie wizualne."
-    }
+    },
+    "removed": "Ten model nie znajduje się na liście, jeśli zostanie odznaczony, zostanie automatycznie usunięty"
   },
   "ModelSwitchPanel": {
     "emptyModel": "Brak włączonych modeli, przejdź do ustawień i włącz je",

locales/pt-BR/chat.json

@@ -84,6 +84,7 @@
     "chats": "Mensagens de bate-papo",
     "rest": "Restante disponível",
     "systemRole": "Configuração de papel do sistema",
+    "title": "Detalhes do Token",
     "tools": "Configuração de plug-ins",
     "total": "Total disponível",
     "used": "Total utilizado"

locales/pt-BR/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Este modelo suporta chamadas de função.",
       "tokens": "Este modelo suporta no máximo {{tokens}} tokens por sessão.",
       "vision": "Este modelo suporta reconhecimento visual."
-    }
+    },
+    "removed": "Este modelo não está na lista, se for desmarcado, será removido automaticamente"
   },
   "ModelSwitchPanel": {
     "emptyModel": "Nenhum modelo habilitado. Por favor, vá para as configurações e habilite um.",

locales/ru-RU/chat.json

@@ -84,6 +84,7 @@
     "chats": "Чаты",
     "rest": "Остаток",
     "systemRole": "Роль системы",
+    "title": "Детали контекста",
     "tools": "Инструменты",
     "total": "Всего",
     "used": "Использовано"

locales/ru-RU/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Эта модель поддерживает вызов функций",
       "tokens": "Эта модель поддерживает до {{tokens}} токенов в одной сессии",
       "vision": "Эта модель поддерживает распознавание изображений"
-    }
+    },
+    "removed": "Эта модель не находится в списке. Если вы ее отмените, она будет автоматически удалена"
   },
   "ModelSwitchPanel": {
     "emptyModel": "Нет активированных моделей. Пожалуйста, перейдите в настройки и включите модель",

locales/tr-TR/chat.json

@@ -84,6 +84,7 @@
     "chats": "Sohbetler",
     "rest": "Kalan",
     "systemRole": "Sistem Rolü",
+    "title": "Bağlam Detayları",
     "tools": "Araçlar",
     "total": "Toplam",
     "used": "Kullanılan"

locales/tr-TR/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Bu model fonksiyon çağrısını destekler",
       "tokens": "Bu model tek bir oturumda en fazla {{tokens}} Token destekler",
       "vision": "Bu model görüntü tanımıyı destekler"
-    }
+    },
+    "removed": "Bu model listeden çıkarıldı, seçiminizi kaldırırsanız otomatik olarak kaldırılacaktır"
   },
   "ModelSwitchPanel": {
     "emptyModel": "Etkinleştirilmiş model bulunmamaktadır, lütfen ayarlara giderek açın",

locales/vi-VN/chat.json

@@ -84,6 +84,7 @@
     "chats": "Tin nhắn trò chuyện",
     "rest": "Còn lại",
     "systemRole": "Vai trò hệ thống",
+    "title": "Chi tiết Ngữ cảnh",
     "tools": "Công cụ",
     "total": "Tổng cộng",
     "used": "Đã sử dụng"

locales/vi-VN/components.json

@@ -6,7 +6,8 @@
       "functionCall": "Mô hình này hỗ trợ cuộc gọi hàm (Function Call)",
       "tokens": "Mỗi phiên của mô hình này hỗ trợ tối đa {{tokens}} Tokens",
       "vision": "Mô hình này hỗ trợ nhận diện hình ảnh"
-    }
+    },
+    "removed": "Mô hình này không còn trong danh sách, nếu bỏ chọn sẽ tự động xóa"
   },
   "ModelSwitchPanel": {
     "emptyModel": "Không có mô hình nào được kích hoạt, vui lòng điều chỉnh trong cài đặt",

locales/zh-CN/chat.json

@@ -84,6 +84,7 @@
     "chats": "会话消息",
     "rest": "剩余可用",
     "systemRole": "角色设定",
+    "title": "上下文明细",
     "tools": "插件设定",
     "total": "总共可用",
     "used": "总计使用"

locales/zh-CN/components.json

@@ -6,7 +6,8 @@
       "functionCall": "该模型支持函数调用（Function Call）",
       "tokens": "该模型单个会话最多支持 {{tokens}} Tokens",
       "vision": "该模型支持视觉识别"
-    }
+    },
+    "removed": "该模型不在列表中，若取消选中将会自动移除"
   },
   "ModelSwitchPanel": {
     "emptyModel": "没有启用的模型，请前往设置开启",

locales/zh-TW/chat.json

@@ -84,6 +84,7 @@
     "chats": "聊天訊息",
     "rest": "剩餘可用",
     "systemRole": "角色設定",
+    "title": "上下文詳細資訊",
     "tools": "外掛程式設定",
     "total": "總共可用",
     "used": "總計使用"

locales/zh-TW/components.json

@@ -6,7 +6,8 @@
       "functionCall": "該模型支援函式呼叫（Function Call）",
       "tokens": "該模型單一會話最多支援 {{tokens}} Tokens",
       "vision": "該模型支援視覺辨識"
-    }
+    },
+    "removed": "該模型不在清單中，若取消選取將會自動移除"
   },
   "ModelSwitchPanel": {
     "emptyModel": "沒有啟用的模型，請前往設定開啟",

src/features/ChatInput/ActionBar/Token/TokenProgress.tsx

@@ -0,0 +1,80 @@
+import { Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import numeral from 'numeral';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface TokenProgressItem {
+  color: string;
+  id: string;
+  title: string;
+  value: number;
+}
+
+interface TokenProgressProps {
+  data: TokenProgressItem[];
+  showIcon?: boolean;
+  showTotal?: string;
+}
+
+const format = (number: number) => numeral(number).format('0,0');
+
+const TokenProgress = memo<TokenProgressProps>(({ data, showIcon, showTotal }) => {
+  const theme = useTheme();
+  const total = data.reduce((acc, item) => acc + item.value, 0);
+  return (
+    <Flexbox gap={8} style={{ position: 'relative' }} width={'100%'}>
+      <Flexbox
+        height={6}
+        horizontal
+        style={{
+          background: total === 0 ? theme.colorFill : undefined,
+          borderRadius: 3,
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        width={'100%'}
+      >
+        {data.map((item) => (
+          <Flexbox
+            height={'100%'}
+            key={item.id}
+            style={{ background: item.color, flex: item.value }}
+          />
+        ))}
+      </Flexbox>
+      <Flexbox>
+        {data.map((item) => (
+          <Flexbox align={'center'} gap={4} horizontal justify={'space-between'} key={item.id}>
+            <Flexbox align={'center'} gap={4} horizontal>
+              {showIcon && (
+                <div
+                  style={{
+                    background: item.color,
+                    borderRadius: '50%',
+                    flex: 'none',
+                    height: 6,
+                    width: 6,
+                  }}
+                />
+              )}
+              <div style={{ color: theme.colorTextSecondary }}>{item.title}</div>
+            </Flexbox>
+            <div style={{ fontWeight: 500 }}>{format(item.value)}</div>
+          </Flexbox>
+        ))}
+        {showTotal && (
+          <>
+            <Divider style={{ marginBlock: 8 }} />
+            <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
+              <div style={{ color: theme.colorTextSecondary }}>{showTotal}</div>
+              <div style={{ fontWeight: 500 }}>{format(total)}</div>
+            </Flexbox>
+          </>
+        )}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default TokenProgress;