chore: model and params select

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

@@ -5,6 +5,7 @@ import type {
 import { useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 import type {
   DefaultModel,
   FormValue,
@@ -33,6 +34,7 @@ import { TONE_LIST } from '@/config'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 
 export type ModelParameterModalProps = {
+  popupClassName?: string
   isAdvancedMode: boolean
   mode: string
   modelId: string
@@ -40,8 +42,9 @@ export type ModelParameterModalProps = {
   setModel: (model: { modelId: string; provider: string; mode?: string; features?: string[] }) => void
   completionParams: FormValue
   onCompletionParamsChange: (newParams: FormValue) => void
-  debugWithMultipleModel: boolean
-  onDebugWithMultipleModelChange: () => void
+  hideDebugWithMultipleModel?: boolean
+  debugWithMultipleModel?: boolean
+  onDebugWithMultipleModelChange?: () => void
   renderTrigger?: (v: TriggerProps) => ReactNode
 }
 const stopParameerRule: ModelParameterRule = {
@@ -65,12 +68,14 @@ const stopParameerRule: ModelParameterRule = {
 
 const PROVIDER_WITH_PRESET_TONE = ['openai', 'azure_openai']
 const ModelParameterModal: FC<ModelParameterModalProps> = ({
+  popupClassName,
   isAdvancedMode,
   modelId,
   provider,
   setModel,
   completionParams,
   onCompletionParamsChange,
+  hideDebugWithMultipleModel,
   debugWithMultipleModel,
   onDebugWithMultipleModelChange,
   renderTrigger,
@@ -196,7 +201,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
           }
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[60]'>
-          <div className='w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl'>
+          <div className={cn(popupClassName, 'w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl')}>
             <div className='max-h-[480px] px-10 pt-6 pb-8 overflow-y-auto'>
               <div className='flex items-center justify-between h-8'>
                 <div className='font-semibold text-gray-900'>
@@ -248,17 +253,19 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                 )
               }
             </div>
-            <div
-              className='flex items-center justify-between px-6 h-[50px] bg-gray-50 border-t border-t-gray-100 text-xs font-medium text-primary-600 cursor-pointer rounded-b-xl'
-              onClick={() => onDebugWithMultipleModelChange()}
-            >
-              {
-                debugWithMultipleModel
-                  ? t('appDebug.debugAsSingleModel')
-                  : t('appDebug.debugAsMultipleModel')
-              }
-              <ArrowNarrowLeft className='w-3 h-3 rotate-180' />
-            </div>
+            {!hideDebugWithMultipleModel && (
+              <div
+                className='flex items-center justify-between px-6 h-[50px] bg-gray-50 border-t border-t-gray-100 text-xs font-medium text-primary-600 cursor-pointer rounded-b-xl'
+                onClick={() => onDebugWithMultipleModelChange?.()}
+              >
+                {
+                  debugWithMultipleModel
+                    ? t('appDebug.debugAsSingleModel')
+                    : t('appDebug.debugAsMultipleModel')
+                }
+                <ArrowNarrowLeft className='w-3 h-3 rotate-180' />
+              </div>
+            )}
           </div>
         </PortalToFollowElemContent>
       </div>

web/app/components/workflow/nodes/llm/panel.tsx

@@ -6,20 +6,21 @@ import { mockLLMNodeData } from './mock'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
-import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
+
 import Switch from '@/app/components/base/switch'
 const i18nPrefix = 'workflow.nodes.llm'
 
 const Panel: FC = () => {
   const { t } = useTranslation()
   const {
-    textGenerationModelList,
     inputs,
     handleModelChanged,
     toggleContextEnabled,
+    handleCompletionParamsChange,
   } = useInput(mockLLMNodeData)
-
-  const modelMode = inputs.model.mode
+  const model = inputs.model
+  const modelMode = inputs.model?.mode
   const isChatMode = modelMode === 'chat'
 
   const handleAddVariable = () => {
@@ -32,15 +33,17 @@ const Panel: FC = () => {
           <Field
             title={t(`${i18nPrefix}.model`)}
           >
-            <ModelSelector
-              defaultModel={(inputs.model?.provider && inputs.model?.name)
-                ? {
-                  provider: inputs.model.provider,
-                  model: inputs.model.name,
-                }
-                : undefined}
-              modelList={textGenerationModelList}
-              onSelect={handleModelChanged}
+            <ModelParameterModal
+              popupClassName='!w-[387px]'
+              isAdvancedMode={true}
+              mode={model?.mode}
+              provider={model?.provider}
+              completionParams={model.completion_params}
+              modelId={model.name}
+              setModel={handleModelChanged}
+              onCompletionParamsChange={handleCompletionParamsChange}
+              hideDebugWithMultipleModel
+              debugWithMultipleModel={false}
             />
           </Field>
 

web/app/components/workflow/nodes/llm/use-input.ts

+/* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useState } from 'react'
 import produce from 'immer'
 import type { LLMNodeData } from '../../types'
-import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 const useInput = (initInputs: LLMNodeData) => {
-  const {
-    textGenerationModelList,
-  } = useTextGenerationCurrentProviderAndModelAndModelList()
-
   const [inputs, setInputs] = useState<LLMNodeData>(initInputs)
 
-  const handleModelChanged = useCallback((model: { provider: string; model: string }) => {
-    const targetProvider = textGenerationModelList.find(modelItem => modelItem.provider === model.provider)
-    const targetModelItem = targetProvider?.models.find(modelItem => modelItem.model === model.model)
+  const handleModelChanged = useCallback((model: { provider: string; modelId: string; mode?: string }) => {
     const newInputs = produce(inputs, (draft) => {
       draft.model.provider = model.provider
-      draft.model.name = model.model
-      draft.model.mode = targetModelItem?.model_properties.mode as string
+      draft.model.name = model.modelId
+      draft.model.mode = model.mode!
+    })
+    setInputs(newInputs)
+  }, [inputs.model])
+
+  const handleCompletionParamsChange = useCallback((newParams: Record<string, any>) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.model.completion_params = newParams
     })
     setInputs(newInputs)
-  }, [inputs.model, textGenerationModelList])
+  }, [inputs.model])
 
   const toggleContextEnabled = useCallback(() => {
     const newInputs = produce(inputs, (draft) => {
@@ -29,7 +30,7 @@ const useInput = (initInputs: LLMNodeData) => {
   }, [inputs.context.enabled])
 
   return {
-    textGenerationModelList,
+    handleCompletionParamsChange,
     inputs,
     handleModelChanged,
     toggleContextEnabled,