From f78946398250f81607dfa4a15ed342904f2602a6 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:52:31 +0800
Subject: [PATCH] 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               | 21 ++++++++++++++++---
 web/src/constants/setting.ts                  |  4 ++--
 .../user-setting/setting-model/index.tsx      |  2 +-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/web/src/components/svg-icon.tsx b/web/src/components/svg-icon.tsx
index b329177ac..19f8f0dd7 100644
--- a/web/src/components/svg-icon.tsx
+++ b/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 />} />
   );
diff --git a/web/src/constants/setting.ts b/web/src/constants/setting.ts
index 6cc47f65a..a62b228a6 100644
--- a/web/src/constants/setting.ts
+++ b/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',
diff --git a/web/src/pages/user-setting/setting-model/index.tsx b/web/src/pages/user-setting/setting-model/index.tsx
index 017704566..09ca05dba 100644
--- a/web/src/pages/user-setting/setting-model/index.tsx
+++ b/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>