Model Runtime (#1858)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: Garfield Dai <dai.hai@foxmail.com>
Co-authored-by: chenhe <guchenhe@gmail.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>

web/app/components/explore/universal-chat/config/index.tsx

@@ -4,15 +4,14 @@ import React from 'react'
 import ModelConfig from './model-config'
 import DataConfig from './data-config'
 import PluginConfig from './plugins-config'
-import type { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
 import type { DataSet } from '@/models/datasets'
 
 export type IConfigProps = {
   className?: string
   readonly?: boolean
   modelId: string
-  providerName: ProviderEnum
-  onModelChange?: (modelId: string, providerName: ProviderEnum) => void
+  providerName: string
+  onModelChange?: (modelId: string, providerName: string) => void
   plugins: Record<string, boolean>
   onPluginChange?: (key: string, value: boolean) => void
   dataSets: DataSet[]

web/app/components/explore/universal-chat/config/model-config/index.tsx

@@ -2,12 +2,13 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ModelType, type ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
-import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { useProviderContext } from '@/context/provider-context'
+
 export type IModelConfigProps = {
   modelId: string
-  providerName: ProviderEnum
-  onChange?: (modelId: string, providerName: ProviderEnum) => void
+  providerName: string
+  onChange?: (modelId: string, providerName: string) => void
   readonly?: boolean
 }
 
@@ -18,21 +19,17 @@ const ModelConfig: FC<IModelConfigProps> = ({
   readonly,
 }) => {
   const { t } = useTranslation()
+  const { agentThoughtModelList } = useProviderContext()
 
   return (
     <div className='flex items-center justify-between h-[52px] px-3 rounded-xl bg-gray-50'>
       <div className='text-sm font-semibold text-gray-800'>{t('explore.universalChat.model')}</div>
       <ModelSelector
-        popClassName="right-0"
-        triggerIconSmall
-        modelType={ModelType.textGeneration}
-        supportAgentThought
-        value={{
-          modelName: modelId,
-          providerName,
-        }}
-        onChange={(model) => {
-          onChange?.(model.model_name, model.model_provider.provider_name)
+        triggerClassName={`${readonly && '!cursor-not-allowed !opacity-60'}`}
+        defaultModel={{ provider: providerName, model: modelId }}
+        modelList={agentThoughtModelList}
+        onSelect={(model) => {
+          onChange?.(model.model, model.provider)
         }}
         readonly={readonly}
       />