Fix: Due to the reference to tailwindcss, the height attribute setting of the image is invalid, resulting in an uneven model list #5339 (#5340)

### What problem does this PR solve?

Fix: Due to the reference to tailwindcss, the height attribute setting
of the image is invalid, resulting in an uneven model list #5339

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/svg-icon.tsx

@@ -1,4 +1,5 @@
 import { IconMap } from '@/constants/setting';
+import { cn } from '@/lib/utils';
 import Icon, { UserOutlined } from '@ant-design/icons';
 import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
 import { Avatar } from 'antd';
@@ -25,14 +26,21 @@ interface IProps extends IconComponentProps {
   name: string;
   width: string | number;
   height?: string | number;
+  imgClass?: string;
 }
 
-const SvgIcon = ({ name, width, height, ...restProps }: IProps) => {
+const SvgIcon = ({ name, width, height, imgClass, ...restProps }: IProps) => {
   const ListItem = routeList.find((item) => item.name === name);
   return (
     <Icon
       component={() => (
-        <img src={ListItem?.value} alt="" width={width} height={height} />
+        <img
+          src={ListItem?.value}
+          alt=""
+          width={width}
+          height={height}
+          className={cn(imgClass, 'max-w-full')}
+        />
       )}
       {...(restProps as any)}
     />
@@ -44,16 +52,23 @@ export const LlmIcon = ({
   height = 48,
   width = 48,
   size = 'large',
+  imgClass,
 }: {
   name: string;
   height?: number;
   width?: number;
   size?: AvatarSize;
+  imgClass?: string;
 }) => {
   const icon = IconMap[name as keyof typeof IconMap];
 
   return icon ? (
-    <SvgIcon name={`llm/${icon}`} width={width} height={height}></SvgIcon>
+    <SvgIcon
+      name={`llm/${icon}`}
+      width={width}
+      height={height}
+      imgClass={imgClass}
+    ></SvgIcon>
   ) : (
     <Avatar shape="square" size={size} icon={<UserOutlined />} />
   );

web/src/constants/setting.ts

@@ -50,14 +50,14 @@ export const IconMap = {
   NVIDIA: 'nvidia',
   'LM-Studio': 'lm-studio',
   'OpenAI-API-Compatible': 'openai-api',
-  cohere: 'cohere',
+  Cohere: 'cohere',
   LeptonAI: 'lepton-ai',
   TogetherAI: 'together-ai',
   PerfXCloud: 'perfx-cloud',
   Upstage: 'upstage',
   'novita.ai': 'novita-ai',
   SILICONFLOW: 'siliconflow',
-  'PPIO': 'ppio',
+  PPIO: 'ppio',
   '01.AI': 'yi',
   Replicate: 'replicate',
   'Tencent Hunyuan': 'hunyuan',

web/src/pages/user-setting/setting-model/index.tsx

@@ -330,7 +330,7 @@ const UserSettingModel = () => {
                 }
               >
                 <Flex vertical gap={'middle'}>
-                  <LlmIcon name={item.name} />
+                  <LlmIcon name={item.name} imgClass="h-12 w-auto" />
                   <Flex vertical gap={'middle'}>
                     <b>
                       <Text ellipsis={{ tooltip: item.name }}>{item.name}</Text>