support & operator of model-selector scope

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

@@ -23,6 +23,7 @@ type ModelSelectorProps = {
   popupClassName?: string
   onSelect?: (model: DefaultModel) => void
   readonly?: boolean
+  scopeFeatures?: string[]
 }
 const ModelSelector: FC<ModelSelectorProps> = ({
   defaultModel,
@@ -31,6 +32,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
   popupClassName,
   onSelect,
   readonly,
+  scopeFeatures = [],
 }) => {
   const [open, setOpen] = useState(false)
   const {
@@ -101,6 +103,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
             defaultModel={defaultModel}
             modelList={modelList}
             onSelect={handleSelect}
+            scopeFeatures={scopeFeatures}
           />
         </PortalToFollowElemContent>
       </div>

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

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import {
   RiSearchLine,
 } from '@remixicon/react'
@@ -8,6 +8,7 @@ import type {
   Model,
   ModelItem,
 } from '../declarations'
+import { ModelFeatureEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import PopupItem from './popup-item'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
@@ -16,27 +17,39 @@ type PopupProps = {
   defaultModel?: DefaultModel
   modelList: Model[]
   onSelect: (provider: string, model: ModelItem) => void
+  scopeFeatures?: string[]
 }
 const Popup: FC<PopupProps> = ({
   defaultModel,
   modelList,
   onSelect,
+  scopeFeatures = [],
 }) => {
   const language = useLanguage()
   const [searchText, setSearchText] = useState('')
 
-  const filteredModelList = modelList.map((model) => {
-    const filteredModels = model.models.filter((modelItem) => {
+  const filteredModelList = useMemo(() => {
+    return modelList.map((model) => {
+      const filteredModels = model.models
+        .filter((modelItem) => {
           if (modelItem.label[language] !== undefined)
             return modelItem.label[language].toLowerCase().includes(searchText.toLowerCase())
-
           return Object.values(modelItem.label).some(label =>
             label.toLowerCase().includes(searchText.toLowerCase()),
           )
         })
-
+        .filter((modelItem) => {
+          if (scopeFeatures.length === 0)
+            return true
+          return scopeFeatures.every((feature) => {
+            if (feature === ModelFeatureEnum.toolCall)
+              return modelItem.features?.some(featureItem => featureItem === ModelFeatureEnum.toolCall || featureItem === ModelFeatureEnum.multiToolCall)
+            return modelItem.features?.some(featureItem => featureItem === feature)
+          })
+        })
       return { ...model, models: filteredModels }
     }).filter(model => model.models.length > 0)
+  }, [language, modelList, scopeFeatures, searchText])
 
   return (
     <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg overflow-y-auto'>

web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx

@@ -58,6 +58,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   const { isAPIKeySet } = useProviderContext()
   const [open, setOpen] = useState(false)
   const scopeArray = scope.split('&')
+  const scopeFeatures = scopeArray.slice(1) || []
 
   const { data: textGenerationList } = useModelList(ModelTypeEnum.textGeneration)
   const { data: textEmbeddingList } = useModelList(ModelTypeEnum.textEmbedding)
@@ -175,10 +176,11 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                 <ModelSelector
                   defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
                   modelList={scopedModelList}
+                  scopeFeatures={scopeFeatures}
                   onSelect={handleChangeModel}
                 />
               </div>
-              {(currentModel?.model_type === ModelTypeEnum.textGeneration || currentModel.model_type === ModelTypeEnum.tts) && (
+              {(currentModel?.model_type === ModelTypeEnum.textGeneration || currentModel?.model_type === ModelTypeEnum.tts) && (
                 <div className='my-3 h-[1px] bg-divider-subtle' />
               )}
               {currentModel?.model_type === ModelTypeEnum.textGeneration && (