feat: multiple model configuration (#2196)

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

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

@@ -1,4 +1,7 @@
-import type { FC } from 'react'
+import type {
+  FC,
+  ReactNode,
+} from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 import cn from 'classnames'
@@ -8,32 +11,25 @@ import type {
   FormValue,
   ModelParameterRule,
 } from '../declarations'
-import {
-  MODEL_STATUS_TEXT,
-  ModelStatusEnum,
-} from '../declarations'
-import ModelIcon from '../model-icon'
-import ModelName from '../model-name'
+import { ModelStatusEnum } from '../declarations'
 import ModelSelector from '../model-selector'
 import {
-  useLanguage,
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '../hooks'
 import { isNullOrUndefined } from '../utils'
 import ParameterItem from './parameter-item'
 import type { ParameterValue } from './parameter-item'
+import Trigger from './trigger'
+import type { TriggerProps } from './trigger'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
 import { fetchModelParameterRules } from '@/service/common'
 import Loading from '@/app/components/base/loading'
 import { useProviderContext } from '@/context/provider-context'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
 import Radio from '@/app/components/base/radio'
 import { TONE_LIST } from '@/config'
 import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
@@ -41,15 +37,19 @@ import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAn
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
 import { Sliders02 } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 
-type ModelParameterModalProps = {
+export type ModelParameterModalProps = {
   isAdvancedMode: boolean
   mode: string
   modelId: string
   provider: string
-  setModel: (model: { modelId: string; provider: string; mode?: string; features: string[] }) => void
+  setModel: (model: { modelId: string; provider: string; mode?: string; features?: string[] }) => void
   completionParams: FormValue
   onCompletionParamsChange: (newParams: FormValue) => void
+  debugWithMultipleModel: boolean
+  onDebugWithMultipleModelChange: () => void
+  renderTrigger?: (v: TriggerProps) => ReactNode
 }
 const stopParameerRule: ModelParameterRule = {
   default: [],
@@ -78,14 +78,16 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   setModel,
   completionParams,
   onCompletionParamsChange,
+  debugWithMultipleModel,
+  onDebugWithMultipleModelChange,
+  renderTrigger,
 }) => {
   const { t } = useTranslation()
-  const language = useLanguage()
-  const { hasSettedApiKey, modelProviders } = useProviderContext()
+  const { hasSettedApiKey } = useProviderContext()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
   const [open, setOpen] = useState(false)
-  const { data: parameterRulesData, isLoading } = useSWR(`/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`, fetchModelParameterRules)
+  const { data: parameterRulesData, isLoading } = useSWR((provider && modelId) ? `/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}` : null, fetchModelParameterRules)
   const {
     currentProvider,
     currentModel,
@@ -220,71 +222,32 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
           onClick={() => setOpen(v => !v)}
           className='block'
         >
-          <div
-            className={`
-              flex items-center px-2 h-8 rounded-lg border cursor-pointer hover:border-[1.5px]
-              ${disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'}
-            `}
-          >
-            {
-              currentProvider && (
-                <ModelIcon
-                  className='mr-1.5 !w-5 !h-5'
-                  provider={currentProvider}
-                  modelName={currentModel?.model}
+          {
+            renderTrigger
+              ? renderTrigger({
+                open,
+                disabled,
+                modelDisabled,
+                hasDeprecated,
+                currentProvider,
+                currentModel,
+                providerName: provider,
+                modelId,
+              })
+              : (
+                <Trigger
+                  disabled={disabled}
+                  modelDisabled={modelDisabled}
+                  hasDeprecated={hasDeprecated}
+                  currentProvider={currentProvider}
+                  currentModel={currentModel}
+                  providerName={provider}
+                  modelId={modelId}
                 />
               )
-            }
-            {
-              !currentProvider && (
-                <ModelIcon
-                  className='mr-1.5 !w-5 !h-5'
-                  provider={modelProviders.find(item => item.provider === provider)}
-                  modelName={modelId}
-                />
-              )
-            }
-            {
-              currentModel && (
-                <ModelName
-                  className='mr-1.5 text-gray-900'
-                  modelItem={currentModel}
-                  showMode
-                  modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
-                  showFeatures
-                  featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
-                />
-              )
-            }
-            {
-              !currentModel && (
-                <div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
-                  {modelId}
-                </div>
-              )
-            }
-            {
-              disabled
-                ? (
-                  <TooltipPlus
-                    popupContent={
-                      hasDeprecated
-                        ? t('common.modelProvider.deprecated')
-                        : (modelDisabled && currentModel)
-                          ? MODEL_STATUS_TEXT[currentModel.status as string][language]
-                          : ''
-                    }
-                  >
-                    <AlertTriangle className='w-4 h-4 text-[#F79009]' />
-                  </TooltipPlus>
-                )
-                : (
-                  <SlidersH className='w-4 h-4 text-indigo-600' />
-                )
-            }
-          </div>
+          }
         </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent>
+        <PortalToFollowElemContent className='z-[60]'>
           <div className='w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl'>
             <div className='flex items-center px-4 h-12 rounded-t-xl border-b border-gray-100 bg-gray-50 text-md font-medium text-gray-900'>
               <CubeOutline className='mr-2 w-4 h-4 text-primary-600' />
@@ -296,7 +259,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                   {t('common.modelProvider.model')}
                 </div>
                 <ModelSelector
-                  defaultModel={{ provider, model: modelId }}
+                  defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
                   modelList={textGenerationModelList}
                   onSelect={handleChangeModel}
                 />
@@ -370,6 +333,17 @@ 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>
           </div>
         </PortalToFollowElemContent>
       </div>

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

@@ -0,0 +1,107 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  Model,
+  ModelItem,
+  ModelProvider,
+} from '../declarations'
+import { MODEL_STATUS_TEXT } from '../declarations'
+import { useLanguage } from '../hooks'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+import { useProviderContext } from '@/context/provider-context'
+import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+
+export type TriggerProps = {
+  open?: boolean
+  disabled?: boolean
+  currentProvider?: ModelProvider | Model
+  currentModel?: ModelItem
+  providerName?: string
+  modelId?: string
+  hasDeprecated?: boolean
+  modelDisabled?: boolean
+}
+const Trigger: FC<TriggerProps> = ({
+  disabled,
+  currentProvider,
+  currentModel,
+  providerName,
+  modelId,
+  hasDeprecated,
+  modelDisabled,
+}) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+  const { modelProviders } = useProviderContext()
+
+  return (
+    <div
+      className={`
+        flex items-center px-2 h-8 rounded-lg border cursor-pointer hover:border-[1.5px]
+        ${disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'}
+      `}
+    >
+      {
+        currentProvider && (
+          <ModelIcon
+            className='mr-1.5 !w-5 !h-5'
+            provider={currentProvider}
+            modelName={currentModel?.model}
+          />
+        )
+      }
+      {
+        !currentProvider && (
+          <ModelIcon
+            className='mr-1.5 !w-5 !h-5'
+            provider={modelProviders.find(item => item.provider === providerName)}
+            modelName={modelId}
+          />
+        )
+      }
+      {
+        currentModel && (
+          <ModelName
+            className='mr-1.5 text-gray-900'
+            modelItem={currentModel}
+            showMode
+            modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
+            showFeatures
+            featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
+          />
+        )
+      }
+      {
+        !currentModel && (
+          <div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
+            {modelId}
+          </div>
+        )
+      }
+      {
+        disabled
+          ? (
+            <TooltipPlus
+              popupContent={
+                hasDeprecated
+                  ? t('common.modelProvider.deprecated')
+                  : (modelDisabled && currentModel)
+                    ? MODEL_STATUS_TEXT[currentModel.status as string][language]
+                    : ''
+              }
+            >
+              <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+            </TooltipPlus>
+          )
+          : (
+            <SlidersH className='w-4 h-4 text-indigo-600' />
+          )
+      }
+    </div>
+  )
+}
+
+export default Trigger