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