Browse Source

✨ feat(tokens-table): show “Other” avatar for models without vendor logo

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.
t0ng7u 6 months ago
parent
commit
2d7ae1180f
2 changed files with 9 additions and 5 deletions
  1. 7 4
      web/src/components/table/TokensTable.js
  2. 2 1
      web/src/i18n/locales/en.json

+ 7 - 4
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>
             );

+ 2 - 1
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"
 }