param rules panel

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

@@ -3,33 +3,26 @@ import type {
   ReactNode,
 } from 'react'
 import { useMemo, useState } from 'react'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import type {
   DefaultModel,
   FormValue,
-  ModelParameterRule,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { ModelStatusEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import {
   useModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import ParameterItem from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
-import type { ParameterValue } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
 import Trigger from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
 import type { TriggerProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
-import PresetsParameter from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter'
-import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { fetchModelParameterRules } from '@/service/common'
+import LLMParamsPanel from './llm-params-panel'
-import Loading from '@/app/components/base/loading'
 import { useProviderContext } from '@/context/provider-context'
-import { TONE_LIST } from '@/config'
+import cn from '@/utils/classnames'
 
 export type ModelParameterModalProps = {
   popupClassName?: string
@@ -46,26 +39,7 @@ export type ModelParameterModalProps = {
   isInWorkflow?: boolean
   scope?: string
 }
-const stopParameterRule: ModelParameterRule = {
-  default: [],
-  help: {
-    en_US: 'Up to four sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.',
-    zh_Hans: '最多四个序列，API 将停止生成更多的 token。返回的文本将不包含停止序列。',
-  },
-  label: {
-    en_US: 'Stop sequences',
-    zh_Hans: '停止序列',
-  },
-  name: 'stop',
-  required: false,
-  type: 'tag',
-  tagPlaceholder: {
-    en_US: 'Enter sequence and press Tab',
-    zh_Hans: '输入序列并按 Tab 键',
-  },
-}
 
-const PROVIDER_WITH_PRESET_TONE = ['langgenius/openai/openai', 'langgenius/azure_openai/azure_openai']
 const ModelParameterModal: FC<ModelParameterModalProps> = ({
   popupClassName,
   portalToFollowElemContentClassName,
@@ -84,11 +58,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   const { isAPIKeySet } = useProviderContext()
   const [open, setOpen] = useState(false)
   const scopeArray = scope.split('&')
-  const { data: parameterRulesData, isLoading } = useSWR(
+
-    (provider && modelId && (scopeArray.includes('text-generation') || scopeArray.includes('all')))
-      ? `/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`
-      : null, fetchModelParameterRules,
-  )
   const { data: textGenerationList } = useModelList(ModelTypeEnum.textGeneration)
   const { data: textEmbeddingList } = useModelList(ModelTypeEnum.textEmbedding)
   const { data: rerankList } = useModelList(ModelTypeEnum.rerank)
@@ -120,8 +90,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
       return sttList
     if (scopeArray.includes('tts'))
       return ttsList
-    // if (scopeArray.includes('vision'))
-    //   return textGenerationList
     return resultList
   }, [scopeArray, textGenerationList, textEmbeddingList, rerankList, sttList, ttsList, moderationList])
 
@@ -144,17 +112,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
     return !isAPIKeySet || hasDeprecated || modelDisabled
   }, [hasDeprecated, isAPIKeySet, modelDisabled])
 
-  const parameterRules: ModelParameterRule[] = useMemo(() => {
-    return parameterRulesData?.data || []
-  }, [parameterRulesData])
-
-  const handleParamChange = (key: string, value: ParameterValue) => {
-    onCompletionParamsChange({
-      ...completionParams,
-      [key]: value,
-    })
-  }
-
   const handleChangeModel = ({ provider, model }: DefaultModel) => {
     const targetProvider = scopedModelList.find(modelItem => modelItem.provider === provider)
     const targetModelItem = targetProvider?.models.find((modelItem: { model: string }) => modelItem.model === model)
@@ -166,31 +123,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
     })
   }
 
-  const handleSwitch = (key: string, value: boolean, assignValue: ParameterValue) => {
-    if (!value) {
-      const newCompletionParams = { ...completionParams }
-      delete newCompletionParams[key]
-
-      onCompletionParamsChange(newCompletionParams)
-    }
-    if (value) {
-      onCompletionParamsChange({
-        ...completionParams,
-        [key]: assignValue,
-      })
-    }
-  }
-
-  const handleSelectPresetParameter = (toneId: number) => {
-    const tone = TONE_LIST.find(tone => tone.id === toneId)
-    if (tone) {
-      onCompletionParamsChange({
-        ...completionParams,
-        ...tone.config,
-      })
-    }
-  }
-
   return (
     <PortalToFollowElem
       open={open}
@@ -246,45 +178,18 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                   onSelect={handleChangeModel}
                 />
               </div>
-              {
+              {(currentModel?.model_type === ModelTypeEnum.textGeneration || currentModel.model_type === ModelTypeEnum.tts) && (
-                !!parameterRules.length && (
+                <div className='my-3 h-[1px] bg-divider-subtle' />
-                  <div className='my-3 h-[1px] bg-divider-subtle' />
+              )}
-                )
+              {currentModel?.model_type === ModelTypeEnum.textGeneration && (
-              }
+                <LLMParamsPanel
-              {
+                  provider={provider}
-                isLoading && (
+                  modelId={modelId}
-                  <div className='mt-5'><Loading /></div>
+                  completionParams={completionParams}
-                )
+                  onCompletionParamsChange={onCompletionParamsChange}
-              }
+                  isAdvancedMode={isAdvancedMode}
-              {
+                />
-                !isLoading && !!parameterRules.length && (
+              )}
-                  <div className='flex items-center justify-between mb-2'>
-                    <div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
-                    {
-                      PROVIDER_WITH_PRESET_TONE.includes(provider) && (
-                        <PresetsParameter onSelect={handleSelectPresetParameter} />
-                      )
-                    }
-                  </div>
-                )
-              }
-              {
-                !isLoading && !!parameterRules.length && (
-                  [
-                    ...parameterRules,
-                    ...(isAdvancedMode ? [stopParameterRule] : []),
-                  ].map(parameter => (
-                    <ParameterItem
-                      key={`${modelId}-${parameter.name}`}
-                      parameterRule={parameter}
-                      value={completionParams?.[parameter.name]}
-                      onChange={v => handleParamChange(parameter.name, v)}
-                      onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
-                      isInWorkflow={isInWorkflow}
-                    />
-                  ))
-                )
-              }
             </div>
           </div>
         </PortalToFollowElemContent>

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

@@ -0,0 +1,126 @@
+import React, { useMemo } from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import PresetsParameter from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter'
+import ParameterItem from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
+import Loading from '@/app/components/base/loading'
+import type {
+  FormValue,
+  ModelParameterRule,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { ParameterValue } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
+import { fetchModelParameterRules } from '@/service/common'
+import { TONE_LIST } from '@/config'
+import cn from '@/utils/classnames'
+
+const PROVIDER_WITH_PRESET_TONE = ['langgenius/openai/openai', 'langgenius/azure_openai/azure_openai']
+const stopParameterRule: ModelParameterRule = {
+  default: [],
+  help: {
+    en_US: 'Up to four sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.',
+    zh_Hans: '最多四个序列，API 将停止生成更多的 token。返回的文本将不包含停止序列。',
+  },
+  label: {
+    en_US: 'Stop sequences',
+    zh_Hans: '停止序列',
+  },
+  name: 'stop',
+  required: false,
+  type: 'tag',
+  tagPlaceholder: {
+    en_US: 'Enter sequence and press Tab',
+    zh_Hans: '输入序列并按 Tab 键',
+  },
+}
+
+type Props = {
+  isAdvancedMode: boolean
+  provider: string
+  modelId: string
+  completionParams: FormValue
+  onCompletionParamsChange: (newParams: FormValue) => void
+}
+
+const LLMParamsPanel = ({
+  isAdvancedMode,
+  provider,
+  modelId,
+  completionParams,
+  onCompletionParamsChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const { data: parameterRulesData, isLoading } = useSWR(
+    (provider && modelId)
+      ? `/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`
+      : null, fetchModelParameterRules,
+  )
+
+  const parameterRules: ModelParameterRule[] = useMemo(() => {
+    return parameterRulesData?.data || []
+  }, [parameterRulesData])
+
+  const handleSelectPresetParameter = (toneId: number) => {
+    const tone = TONE_LIST.find(tone => tone.id === toneId)
+    if (tone) {
+      onCompletionParamsChange({
+        ...completionParams,
+        ...tone.config,
+      })
+    }
+  }
+  const handleParamChange = (key: string, value: ParameterValue) => {
+    onCompletionParamsChange({
+      ...completionParams,
+      [key]: value,
+    })
+  }
+  const handleSwitch = (key: string, value: boolean, assignValue: ParameterValue) => {
+    if (!value) {
+      const newCompletionParams = { ...completionParams }
+      delete newCompletionParams[key]
+
+      onCompletionParamsChange(newCompletionParams)
+    }
+    if (value) {
+      onCompletionParamsChange({
+        ...completionParams,
+        [key]: assignValue,
+      })
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className='mt-5'><Loading /></div>
+    )
+  }
+
+  return (
+    <>
+      <div className='flex items-center justify-between mb-2'>
+        <div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
+        {
+          PROVIDER_WITH_PRESET_TONE.includes(provider) && (
+            <PresetsParameter onSelect={handleSelectPresetParameter} />
+          )
+        }
+      </div>
+      {!!parameterRules.length && (
+        [
+          ...parameterRules,
+          ...(isAdvancedMode ? [stopParameterRule] : []),
+        ].map(parameter => (
+          <ParameterItem
+            key={`${modelId}-${parameter.name}`}
+            parameterRule={parameter}
+            value={completionParams?.[parameter.name]}
+            onChange={v => handleParamChange(parameter.name, v)}
+            onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
+            isInWorkflow
+          />
+        )))}
+    </>
+  )
+}
+
+export default LLMParamsPanel