From 2d7ae1180f19edf177fe9d30fe55ee598757d953 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 13 Jul 2025 17:24:55 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(tokens-table):=20show=20?=
 =?UTF-8?q?=E2=80=9COther=E2=80=9D=20avatar=20for=20models=20without=20ven?=
 =?UTF-8?q?dor=20logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds UI fallback in TokensTable “Available Models” column:
• Tracks models already matched to a known vendor icon.
• Collects unmatched models and renders a neutral “Other” avatar (labelled via `t('其他')`) with a tooltip listing the model names.
• Removes previous generic fallback so every model is now either vendor-specific or grouped under “Other”.

This improves clarity for users by explicitly indicating models from unrecognized providers rather than leaving them unlabelled.
---
 web/src/components/table/TokensTable.js | 11 +++++++----
 web/src/i18n/locales/en.json            |  3 ++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/components/table/TokensTable.js b/web/src/components/table/TokensTable.js
index 5d50a785..e292f5d8 100644
--- a/web/src/components/table/TokensTable.js
+++ b/web/src/components/table/TokensTable.js
@@ -227,6 +227,7 @@ const TokensTable = () => {
           const categories = getModelCategories(t);
 
           const vendorAvatars = [];
+          const matchedModels = new Set();
           Object.entries(categories).forEach(([key, category]) => {
             if (key === 'all') return;
             if (!category.icon || !category.filter) return;
@@ -239,14 +240,16 @@ const TokensTable = () => {
                   </Avatar>
                 </Tooltip>
               );
+              vendorModels.forEach((m) => matchedModels.add(m));
             }
           });
 
-          if (vendorAvatars.length === 0) {
+          const unmatchedModels = models.filter((m) => !matchedModels.has(m));
+          if (unmatchedModels.length > 0) {
             vendorAvatars.push(
-              <Tooltip key='default' content={models.join(', ')} position='top' showArrow>
-                <Avatar size='extra-extra-small' alt='models'>
-                  {models[0].slice(0, 2).toUpperCase()}
+              <Tooltip key='unknown' content={unmatchedModels.join(', ')} position='top' showArrow>
+                <Avatar size='extra-extra-small' alt='unknown'>
+                  {t('其他')}
                 </Avatar>
               </Tooltip>
             );
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 409995a3..40864582 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1772,5 +1772,6 @@
   "仅支持 JSON 文件，支持多文件": "Only JSON files are supported, multiple files are supported",
   "请上传密钥文件": "Please upload the key file",
   "请填写部署地区": "Please fill in the deployment region",
-  "请输入部署地区，例如：us-central1\n支持使用模型映射格式\n{\n    \"default\": \"us-central1\",\n    \"claude-3-5-sonnet-20240620\": \"europe-west1\"\n}": "Please enter the deployment region, for example: us-central1\nSupports using model mapping format\n{\n    \"default\": \"us-central1\",\n    \"claude-3-5-sonnet-20240620\": \"europe-west1\"\n}"
+  "请输入部署地区，例如：us-central1\n支持使用模型映射格式\n{\n    \"default\": \"us-central1\",\n    \"claude-3-5-sonnet-20240620\": \"europe-west1\"\n}": "Please enter the deployment region, for example: us-central1\nSupports using model mapping format\n{\n    \"default\": \"us-central1\",\n    \"claude-3-5-sonnet-20240620\": \"europe-west1\"\n}",
+  "其他": "Other"
 }
\ No newline at end of file