Merge branch 'feat/model-provider-based-on-runtime' into deploy/dev

langgenius · Dec 28, 2023 · efa2eb9 · efa2eb9
2 parents c024882 + 0f31f5f
commit efa2eb9
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 37 deletions.
diff --git a/web/app/components/header/account-setting/model-provider-page/declarations.ts b/web/app/components/header/account-setting/model-provider-page/declarations.ts
@@ -61,6 +61,21 @@ export enum ModelStatusEnum {
   noPermission = 'no-permission',
 }
 
+export const MODEL_STATUS_TEXT = {
+  [ModelStatusEnum.noConfigure]: {
+    en_US: 'No Configure',
+    zh_Hans: '未配置凭据',
+  },
+  [ModelStatusEnum.quotaExceeded]: {
+    en_US: 'Quota Exceeded',
+    zh_Hans: '额度不足',
+  },
+  [ModelStatusEnum.noPermission]: {
+    en_US: 'No Permission',
+    zh_Hans: '无使用权限',
+  },
+}
+
 export enum CustomConfigurationStatusEnum {
   active = 'active',
   noConfigure = 'no-configure',

diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -14,12 +14,14 @@ import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import {
   ConfigurateMethodEnum,
+  MODEL_STATUS_TEXT,
   ModelStatusEnum,
   ModelTypeEnum,
 } from '../declarations'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import Tooltip from '@/app/components/base/tooltip'
 
 type PopupItemProps = {
   defaultModel?: DefaultModel
@@ -68,47 +70,54 @@ const PopupItem: FC<PopupItemProps> = ({
       </div>
       {
         model.models.map(modelItem => (
-          <div
+          <Tooltip
+            selector={`${modelItem.model}-${modelItem.status}`}
             key={modelItem.model}
-            className={`
-              group flex items-center px-3 py-1.5 h-8 rounded-lg
-              ${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-gray-50' : 'cursor-not-allowed hover:bg-gray-50/60'}
-            `}
-            onClick={() => handleSelect(model.provider, modelItem)}
+            content={modelItem.status !== ModelStatusEnum.active ? MODEL_STATUS_TEXT[modelItem.status][language] : undefined}
+            position='right'
           >
-            <ModelIcon
+            <div
+              key={modelItem.model}
               className={`
-                shrink-0 mr-2 w-4 h-4
-                ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
+                group relative flex items-center px-3 py-1.5 h-8 rounded-lg
+                ${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-gray-50' : 'cursor-not-allowed hover:bg-gray-50/60'}
               `}
-              provider={model}
-              modelName={modelItem.model}
-            />
-            <ModelName
-              className={`
-                grow text-sm font-normal text-gray-900
-                ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
-              `}
-              modelItem={modelItem}
-              showMode
-              showFeatures
-            />
-            {
-              defaultModel?.model === modelItem.model && (
-                <Check className='shrink-0 w-4 h-4 text-primary-600' />
-              )
-            }
-            {
-              modelItem.status === ModelStatusEnum.noConfigure && (
-                <div
-                  className='hidden group-hover:block text-xs font-medium text-primary-600 cursor-pointer'
-                  onClick={handleOpenModelModal}
-                >
-                  {t('common.operation.add').toLocaleUpperCase()}
-                </div>
-              )
-            }
-          </div>
+              onClick={() => handleSelect(model.provider, modelItem)}
+            >
+              <ModelIcon
+                className={`
+                  shrink-0 mr-2 w-4 h-4
+                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
+                `}
+                provider={model}
+                modelName={modelItem.model}
+              />
+              <ModelName
+                className={`
+                  grow text-sm font-normal text-gray-900
+                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
+                `}
+                modelItem={modelItem}
+                showMode
+                showFeatures
+              />
+              {
+                defaultModel?.model === modelItem.model && (
+                  <Check className='shrink-0 w-4 h-4 text-primary-600' />
+                )
+              }
+              {
+                modelItem.status === ModelStatusEnum.noConfigure && (
+                  <div
+                    className='hidden group-hover:block text-xs font-medium text-primary-600 cursor-pointer'
+                    onClick={handleOpenModelModal}
+                  >
+                    {t('common.operation.add').toLocaleUpperCase()}
+                  </div>
+                )
+              }
+            </div>
+          </Tooltip>
         ))
       }
     </div>