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/header/account-setting/model-provider-page/model-icon/index.tsx

@@ -0,0 +1,45 @@
+import type { FC } from 'react'
+import type {
+  Model,
+  ModelProvider,
+} from '../declarations'
+import { useLanguage } from '../hooks'
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+import { OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
+
+type ModelIconProps = {
+  provider?: Model | ModelProvider
+  modelName?: string
+  className?: string
+}
+const ModelIcon: FC<ModelIconProps> = ({
+  provider,
+  className,
+  modelName,
+}) => {
+  const language = useLanguage()
+
+  if (provider?.provider === 'openai' && modelName?.startsWith('gpt-4'))
+    return <OpenaiViolet className={`w-4 h-4 ${className}`}/>
+
+  if (provider?.icon_small) {
+    return (
+      <img
+        alt='model-icon'
+        src={`${provider.icon_small[language]}?_token=${localStorage.getItem('console_token')}`}
+        className={`w-4 h-4 ${className}`}
+      />
+    )
+  }
+
+  return (
+    <div className={`
+      flex items-center justify-center w-6 h-6 rounded border-[0.5px] border-black/5 bg-gray-50
+      ${className}
+    `}>
+      <CubeOutline className='w-4 h-4 text-gray-400' />
+    </div>
+  )
+}
+
+export default ModelIcon