frontend for model runtime (#1861)

Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx

@@ -3,10 +3,16 @@ import type {
   Model,
   ModelItem,
 } from '../declarations'
+import {
+  MODEL_STATUS_TEXT,
+  ModelStatusEnum,
+} from '../declarations'
+import { useLanguage } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
-// import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type ModelTriggerProps = {
   open: boolean
@@ -20,12 +26,15 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
   model,
   className,
 }) => {
+  const language = useLanguage()
+
   return (
     <div
       className={`
         group flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
         ${className}
         ${open && '!bg-gray-200'}
+        ${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
       `}
     >
       <ModelIcon
@@ -40,9 +49,19 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
         showFeatures
       />
       <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <ChevronDown
-          className='w-3.5 h-3.5 text-gray-500'
-        />
+        {
+          model.status !== ModelStatusEnum.active
+            ? (
+              <TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
+                <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+              </TooltipPlus>
+            )
+            : (
+              <ChevronDown
+                className='w-3.5 h-3.5 text-gray-500'
+              />
+            )
+        }
       </div>
     </div>
   )