feat: support show model display name (#887)

web/app/components/app/configuration/config-model/index.tsx

@@ -257,7 +257,7 @@ const ConfigModel: FC<IConfigModelProps> = ({
           providerName={provider}
         />
         <div className='text-[13px] text-gray-900 font-medium'>
-          <ModelName modelId={selectedModel.name} />
+          <ModelName modelId={selectedModel.name} modelDisplayName={currModel?.model_display_name} />
         </div>
         {disabled ? <InformationCircleIcon className='w-3.5 h-3.5 text-[#F79009]' /> : <Cog8ToothIcon className='w-3.5 h-3.5 text-gray-500' />}
       </div>

web/app/components/app/configuration/config-model/model-name.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 
 export type IModelNameProps = {
   modelId: string
+  modelDisplayName?: string
 }
 
 export const supportI18nModelName = [
@@ -16,9 +17,14 @@ export const supportI18nModelName = [
 
 const ModelName: FC<IModelNameProps> = ({
   modelId,
+  modelDisplayName,
 }) => {
   const { t } = useTranslation()
-  const name = supportI18nModelName.includes(modelId) ? t(`common.modelName.${modelId}`) : modelId
+  let name = modelId
+  if (supportI18nModelName.includes(modelId))
+    name = t(`common.modelName.${modelId}`)
+  else if (modelDisplayName)
+    name = modelDisplayName
 
   return (
     <span title={name}>

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

@@ -9,6 +9,8 @@ import { Google, WebReader, Wikipedia } from '@/app/components/base/icons/src/pu
 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'
+
 export type ISummaryProps = {
   modelId: string
   providerName: ProviderEnum
@@ -46,6 +48,9 @@ const Summary: FC<ISummaryProps> = ({
   plugins,
   dataSets,
 }) => {
+  const { agentThoughtModelList } = useProviderContext()
+  const currModel = agentThoughtModelList.find(item => item.model_name === modelId && item.model_provider.provider_name === providerName)
+
   // 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)
@@ -58,7 +63,7 @@ const Summary: FC<ISummaryProps> = ({
     <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} /></div>
+        <div className='ml-2 text-[13px] font-medium text-gray-900'><ModelName modelId={modelId} modelDisplayName={currModel?.model_display_name} /></div>
         {
           pluginIds.length > 0 && (
             <div className='ml-1.5 flex items-center'>

web/app/components/header/account-setting/model-page/declarations.ts

@@ -70,6 +70,7 @@ export enum ModelFeature {
 // backend defined model struct: /console/api/workspaces/current/models/model-type/:model_type
 export type BackendModel = {
   model_name: string
+  model_display_name: string // not always exist
   model_type: ModelType
   model_provider: {
     provider_name: ProviderEnum

web/app/components/header/account-setting/model-page/model-selector/index.tsx

@@ -47,6 +47,7 @@ const ModelSelector: FC<Props> = ({
       [ModelType.embeddings]: embeddingsModelList,
       [ModelType.speech2text]: speech2textModelList,
     })[modelType]
+  const currModel = modelList.find(item => item.model_name === value?.modelName && item.model_provider.provider_name === value.providerName)
   const allModelNames = (() => {
     if (!search)
       return {}
@@ -77,11 +78,12 @@ const ModelSelector: FC<Props> = ({
         value: providerName,
       })
       const models = filteredModelList.filter(m => m.model_provider.provider_name === providerName)
-      models.forEach(({ model_name }) => {
+      models.forEach(({ model_name, model_display_name }) => {
         res.push({
           type: 'model',
           providerName,
           value: model_name,
+          modelDisplayName: model_display_name,
         })
       })
     })
@@ -104,7 +106,7 @@ const ModelSelector: FC<Props> = ({
                           modelId={value.modelName}
                           providerName={value.providerName}
                         />
-                        <div className='mr-1.5 grow text-left text-sm text-gray-900 truncate'><ModelName modelId={value.modelName} /></div>
+                        <div className='mr-1.5 grow text-left text-sm text-gray-900 truncate'><ModelName modelId={value.modelName} modelDisplayName={currModel?.model_display_name} /></div>
                       </>
                     )
                     : (
@@ -193,7 +195,7 @@ const ModelSelector: FC<Props> = ({
                           modelId={model.value}
                           providerName={model.providerName}
                         />
-                        <div className='grow text-left text-sm text-gray-900 truncate'><ModelName modelId={model.value} /></div>
+                        <div className='grow text-left text-sm text-gray-900 truncate'><ModelName modelId={model.value} modelDisplayName={model.modelDisplayName} /></div>
                         { (value?.providerName === model.providerName && value?.modelName === model.value) && <Check className='shrink-0 w-4 h-4 text-primary-600' /> }
                       </Popover.Button>
                     )