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/create-app-modal/index.tsx

@@ -77,7 +77,6 @@ const CreateAppModal = ({
       </Modal>
       {showEmojiPicker && <EmojiPicker
         onSelect={(icon, icon_background) => {
-          console.log(icon, icon_background)
           setEmoji({ icon, icon_background })
           setShowEmojiPicker(false)
         }}

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

@@ -5,12 +5,11 @@ import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
 import Config from '@/app/components/explore/universal-chat/config'
-import type { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
 import type { DataSet } from '@/models/datasets'
 
 type Props = {
   modelId: string
-  providerName: ProviderEnum
+  providerName: string
   plugins: Record<string, boolean>
   dataSets: DataSet[]
 }

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

@@ -4,17 +4,16 @@ import React from 'react'
 import cn from 'classnames'
 import { useBoolean, useClickAway } from 'ahooks'
 import s from './style.module.css'
-import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
+import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
+import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
 import { Google, WebReader, Wikipedia } from '@/app/components/base/icons/src/public/plugins'
 import ConfigDetail from '@/app/components/explore/universal-chat/config-view/detail'
-import type { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
-import ModelName from '@/app/components/app/configuration/config-model/model-name'
-import { useProviderContext } from '@/context/provider-context'
 import type { DataSet } from '@/models/datasets'
+import { useAgentThoughtCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 export type ISummaryProps = {
   modelId: string
-  providerName: ProviderEnum
+  providerName: string
   plugins: Record<string, boolean>
   dataSets: DataSet[]
 }
@@ -49,9 +48,12 @@ const Summary: FC<ISummaryProps> = ({
   plugins,
   dataSets,
 }) => {
-  const { agentThoughtModelList } = useProviderContext()
-  const currModel = agentThoughtModelList.find(item => item.model_name === modelId && item.model_provider.provider_name === providerName)
-
+  const {
+    currentModel: currModel,
+    currentProvider,
+  } = useAgentThoughtCurrentProviderAndModelAndModelList(
+    { provider: providerName, model: modelId },
+  )
   // current_datetime is not configable and do not have icon
   const pluginIds = Object.keys(plugins).filter(key => plugins[key] && key !== 'current_datetime')
   const [isShowConfig, { setFalse: hideConfig, toggle: toggleShowConfig }] = useBoolean(false)
@@ -63,8 +65,16 @@ const Summary: FC<ISummaryProps> = ({
   return (
     <div ref={configContentRef} className='relative'>
       <div onClick={toggleShowConfig} className={cn(getColorInfo(modelId), 'flex items-center px-1 h-8 rounded-lg border cursor-pointer')}>
-        <ModelIcon providerName={providerName} modelId={modelId} className='!w-6 !h-6' />
-        <div className='ml-2 text-[13px] font-medium text-gray-900'><ModelName modelId={modelId} modelDisplayName={currModel?.model_display_name} /></div>
+        <ModelIcon
+          provider={currentProvider}
+          modelName={currModel?.model}
+          className='!w-6 !h-6'
+        />
+        <div className='ml-2 text-[13px] font-medium text-gray-900'>
+          <ModelName
+            modelItem={currModel!}
+          />
+        </div>
         {
           pluginIds.length > 0 && (
             <div className='ml-1.5 flex items-center'>

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}
       />

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

@@ -39,8 +39,8 @@ import type { DataSet } from '@/models/datasets'
 import ConfigSummary from '@/app/components/explore/universal-chat/config-view/summary'
 import { fetchDatasets } from '@/service/datasets'
 import ItemOperation from '@/app/components/explore/item-operation'
+import { useCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useProviderContext } from '@/context/provider-context'
-import type { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
 
 const APP_ID = 'universal-chat'
 const DEFAULT_PLUGIN = {
@@ -76,8 +76,8 @@ const Main: FC<IMainProps> = () => {
   const getInitConfig = (type: 'model' | 'plugin') => {
     if (type === 'model') {
       return {
-        providerName: prevConfig?.providerName || agentThoughtModelList?.[0]?.model_provider.provider_name,
-        modelId: prevConfig?.modelId || agentThoughtModelList?.[0]?.model_name,
+        providerName: prevConfig?.providerName || agentThoughtModelList[0]?.provider,
+        modelId: prevConfig?.modelId || agentThoughtModelList[0]?.models[0]?.model,
       }
     }
 
@@ -452,9 +452,16 @@ const Main: FC<IMainProps> = () => {
   const [hasStopResponded, setHasStopResponded, getHasStopResponded] = useGetState(false)
   const [errorHappened, setErrorHappened] = useState(false)
   const [isResponsingConIsCurrCon, setIsResponsingConCurrCon, getIsResponsingConIsCurrCon] = useGetState(true)
+  const initConfig = getInitConfig('model')
+  const [modelId, setModeId] = useState<string>((initConfig as any)?.modelId as string)
+  const [providerName, setProviderName] = useState<string>((initConfig as any)?.providerName)
+  const { currentModel } = useCurrentProviderAndModel(
+    agentThoughtModelList,
+    { provider: providerName, model: modelId },
+  )
   const handleSend = async (message: string) => {
     if (isNewConversation) {
-      const isModelSelected = modelId && !!agentThoughtModelList.find(item => item.model_name === modelId)
+      const isModelSelected = modelId && !!currentModel
       if (!isModelSelected) {
         notify({ type: 'error', message: t('appDebug.errorMessage.notSelectModel') })
         return
@@ -601,7 +608,7 @@ const Main: FC<IMainProps> = () => {
         setChatList(newListWithAnswer)
       },
       onMessageEnd: (messageEnd) => {
-        responseItem.citation = messageEnd.retriever_resources
+        responseItem.citation = messageEnd.metadata?.retriever_resources
 
         const newListWithAnswer = produce(
           getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
@@ -691,9 +698,6 @@ const Main: FC<IMainProps> = () => {
       />
     )
   }
-  const initConfig = getInitConfig('model')
-  const [modelId, setModeId] = useState<string>((initConfig as any)?.modelId as string)
-  const [providerName, setProviderName] = useState<ProviderEnum>((initConfig as any)?.providerName as ProviderEnum)
   // const currModel = MODEL_LIST.find(item => item.id === modelId)
 
   const [plugins, setPlugins] = useState<Record<string, boolean>>(getInitConfig('plugin') as Record<string, boolean>)
@@ -707,7 +711,7 @@ const Main: FC<IMainProps> = () => {
   const configSetDefaultValue = () => {
     const initConfig = getInitConfig('model')
     setModeId((initConfig as any)?.modelId as string)
-    setProviderName((initConfig as any)?.providerName as ProviderEnum)
+    setProviderName((initConfig as any)?.providerName)
     setPlugins(getInitConfig('plugin') as any)
     setDateSets([])
   }