From df421796bb493ec9814d64dc0f8fb72115c5f0a1 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 31 Dec 2024 12:38:07 +0800
Subject: [PATCH] add model info in model selector

---
 .../header/account-setting/menu-dialog.tsx    |   2 +-
 .../model-selector/index.tsx                  |   1 +
 .../model-selector/popup-item.tsx             | 100 +++++++++++++++---
 .../model-selector/popup.tsx                  |  14 +++
 .../plugins/plugin-detail-panel/index.tsx     |  11 ++
 .../model-selector/index.tsx                  |   2 +-
 web/i18n/en-US/common.ts                      |   2 +
 web/i18n/zh-Hans/common.ts                    |   2 +
 8 files changed, 116 insertions(+), 18 deletions(-)

diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index 4df8ab8ab1..76296b84dd 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -32,7 +32,7 @@ const MenuDialog = ({
 
   return (
     <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-40" onClose={() => {}}>
+      <Dialog as="div" className="relative z-[60]" onClose={() => {}}>
         <div className="fixed inset-0">
           <div className="flex flex-col items-center justify-center min-h-full">
             <Transition.Child
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
index 7613bebf37..da31cdeee5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
@@ -104,6 +104,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
             modelList={modelList}
             onSelect={handleSelect}
             scopeFeatures={scopeFeatures}
+            onHide={() => setOpen(false)}
           />
         </PortalToFollowElemContent>
       </div>
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
index 78e1d68357..df6e69193e 100644
--- 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
@@ -1,10 +1,25 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiFileTextLine,
+  RiFilmAiLine,
+  RiImageCircleAiLine,
+  RiVoiceAiFill,
+} from '@remixicon/react'
 import type {
   DefaultModel,
   Model,
   ModelItem,
 } from '../declarations'
+import {
+  ModelFeatureEnum,
+  ModelFeatureTextEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import {
+  modelTypeFormat,
+  sizeFormat,
+} from '../utils'
 import {
   useLanguage,
   useUpdateModelList,
@@ -12,15 +27,16 @@ import {
 } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
+import ModelBadge from '../model-badge'
 import {
   ConfigurationMethodEnum,
-  MODEL_STATUS_TEXT,
   ModelStatusEnum,
 } 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'
+import cn from '@/utils/classnames'
 
 type PopupItemProps = {
   defaultModel?: DefaultModel
@@ -71,34 +87,86 @@ const PopupItem: FC<PopupItemProps> = ({
         model.models.map(modelItem => (
           <Tooltip
             key={modelItem.model}
-            popupContent={modelItem.status !== ModelStatusEnum.active ? MODEL_STATUS_TEXT[modelItem.status][language] : undefined}
             position='right'
+            popupClassName='p-3 !w-[206px] bg-components-panel-bg-blur backdrop-blur-sm border-[0.5px] border-components-panel-border rounded-xl'
+            popupContent={
+              <div className='flex flex-col gap-1'>
+                <div className='flex flex-col gap-2'>
+                  <ModelIcon
+                    className={cn('shrink-0 w-5 h-5')}
+                    provider={model}
+                    modelName={modelItem.model}
+                  />
+                  <div className='truncate text-text-primary system-md-medium'>{modelItem.label[language] || modelItem.label.en_US}</div>
+                </div>
+                {/* {currentProvider?.description && (
+                  <div className='text-text-tertiary system-xs-regular'>{currentProvider?.description?.[language] || currentProvider?.description?.en_US}</div>
+                )} */}
+                <div className='flex flex-wrap gap-1'>
+                  {modelItem.model_type && (
+                    <ModelBadge>
+                      {modelTypeFormat(modelItem.model_type)}
+                    </ModelBadge>
+                  )}
+                  {modelItem.model_properties.mode && (
+                    <ModelBadge>
+                      {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
+                    </ModelBadge>
+                  )}
+                  {modelItem.model_properties.context_size && (
+                    <ModelBadge>
+                      {sizeFormat(modelItem.model_properties.context_size as number)}
+                    </ModelBadge>
+                  )}
+                </div>
+                {modelItem.model_type === ModelTypeEnum.textGeneration && modelItem.features?.some(feature => [ModelFeatureEnum.vision, ModelFeatureEnum.audio, ModelFeatureEnum.video, ModelFeatureEnum.document].includes(feature)) && (
+                  <div className='pt-2'>
+                    <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('common.model.capabilities')}</div>
+                    <div className='flex flex-wrap gap-1'>
+                      {modelItem.features?.includes(ModelFeatureEnum.vision) && (
+                        <ModelBadge>
+                          <RiImageCircleAiLine className='w-3.5 h-3.5 mr-0.5' />
+                          <span>{ModelFeatureTextEnum.vision}</span>
+                        </ModelBadge>
+                      )}
+                      {modelItem.features?.includes(ModelFeatureEnum.audio) && (
+                        <ModelBadge>
+                          <RiVoiceAiFill className='w-3.5 h-3.5 mr-0.5' />
+                          <span>{ModelFeatureTextEnum.audio}</span>
+                        </ModelBadge>
+                      )}
+                      {modelItem.features?.includes(ModelFeatureEnum.video) && (
+                        <ModelBadge>
+                          <RiFilmAiLine className='w-3.5 h-3.5 mr-0.5' />
+                          <span>{ModelFeatureTextEnum.video}</span>
+                        </ModelBadge>
+                      )}
+                      {modelItem.features?.includes(ModelFeatureEnum.document) && (
+                        <ModelBadge>
+                          <RiFileTextLine className='w-3.5 h-3.5 mr-0.5' />
+                          <span>{ModelFeatureTextEnum.document}</span>
+                        </ModelBadge>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            }
           >
             <div
               key={modelItem.model}
-              className={`
-                group relative flex items-center px-3 py-1.5 h-8 rounded-lg gap-1
-                ${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt'}
-              `}
+              className={cn('group relative flex items-center px-3 py-1.5 h-8 rounded-lg gap-1', modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt')}
               onClick={() => handleSelect(model.provider, modelItem)}
             >
               <div className='flex items-center gap-2'>
                 <ModelIcon
-                  className={`
-                    shrink-0 w-4 h-4
-                    ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
-                  `}
+                  className={cn('shrink-0 w-5 h-5')}
                   provider={model}
                   modelName={modelItem.model}
                 />
                 <ModelName
-                  className={`
-                    text-text-secondary system-sm-medium
-                    ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
-                  `}
+                  className={cn('text-text-secondary system-sm-medium', modelItem.status !== ModelStatusEnum.active && 'opacity-60')}
                   modelItem={modelItem}
-                  showMode
-                  showFeatures
                 />
               </div>
               {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index 1089697c98..ad06c3238b 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -1,6 +1,8 @@
 import type { FC } from 'react'
 import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
+  RiArrowRightUpLine,
   RiSearchLine,
 } from '@remixicon/react'
 import type {
@@ -12,21 +14,26 @@ import { ModelFeatureEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import PopupItem from './popup-item'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import { useModalContext } from '@/context/modal-context'
 
 type PopupProps = {
   defaultModel?: DefaultModel
   modelList: Model[]
   onSelect: (provider: string, model: ModelItem) => void
   scopeFeatures?: string[]
+  onHide: () => void
 }
 const Popup: FC<PopupProps> = ({
   defaultModel,
   modelList,
   onSelect,
   scopeFeatures = [],
+  onHide,
 }) => {
+  const { t } = useTranslation()
   const language = useLanguage()
   const [searchText, setSearchText] = useState('')
+  const { setShowAccountSettingModal } = useModalContext()
 
   const filteredModelList = useMemo(() => {
     return modelList.map((model) => {
@@ -99,6 +106,13 @@ const Popup: FC<PopupProps> = ({
           )
         }
       </div>
+      <div className='sticky bottom-0 px-4 py-2 flex items-center border-t border-divider-subtle cursor-pointer text-text-accent-light-mode-only' onClick={() => {
+        onHide()
+        setShowAccountSettingModal({ payload: 'provider' })
+      }}>
+        <span className='system-xs-medium'>{t('common.model.settingsLink')}</span>
+        <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 4d20c0877d..f0afd15f58 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -10,6 +10,8 @@ import Drawer from '@/app/components/base/drawer'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
 
+import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
+
 type Props = {
   detail?: PluginDetail
   onUpdate: () => void
@@ -52,6 +54,15 @@ const PluginDetailPanel: FC<Props> = ({
             {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
             {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
             {!!detail.declaration.model && <ModelList detail={detail} />}
+            <ModelParameterModal
+              popupClassName='!w-[387px]'
+              isAdvancedMode
+              isInWorkflow
+              isAgentStrategy={true}
+              value={null}
+              setModel={() => {}}
+              scope={'llm'}
+            />
           </div>
         </>
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
index 00b0cd74eb..1408b4f9be 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@@ -205,7 +205,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               )
           }
         </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
+        <PortalToFollowElemContent className={cn('z-50', portalToFollowElemContentClassName)}>
           <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
             <div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
               <div className='relative'>
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 91e27aa044..0dd789aa1b 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -126,6 +126,8 @@ const translation = {
       Custom: 'Custom',
     },
     addMoreModel: 'Go to settings to add more models',
+    settingsLink: 'Model Provider Settings',
+    capabilities: 'MultiModal Capabilities',
   },
   menus: {
     status: 'beta',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 9a5c377f7f..76e8d4b027 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -126,6 +126,8 @@ const translation = {
       Custom: '自定义',
     },
     addMoreModel: '添加更多模型',
+    settingsLink: '模型设置',
+    capabilities: '多模态能力',
   },
   menus: {
     status: 'beta',