From 232fb66edd2f13abe31d0e454353725e120e49c0 Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Tue, 31 Dec 2024 11:08:53 +0800
Subject: [PATCH] ui fixes in model selector

---
 .../model-provider-page/model-icon/index.tsx  | 12 +++++------
 .../deprecated-model-trigger.tsx              | 20 ++++++++++---------
 .../model-selector/model-trigger.tsx          |  2 +-
 .../nodes/_base/components/setting-item.tsx   |  6 +++---
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index 9c81d99675..47eb0ef0ba 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -22,18 +22,18 @@ const ModelIcon: FC<ModelIconProps> = ({
 }) => {
   const language = useLanguage()
   if (provider?.provider.includes('openai') && modelName?.includes('gpt-4o'))
-    return <OpenaiBlue className={cn('w-5 h-5', className)}/>
+    return <div className='flex w-6 h-6 items-center justify-center'><OpenaiBlue className={cn('w-5 h-5', className)}/></div>
   if (provider?.provider.includes('openai') && modelName?.startsWith('gpt-4'))
-    return <OpenaiViolet className={cn('w-5 h-5', className)}/>
+    return <div className='flex w-6 h-6 items-center justify-center'><OpenaiViolet className={cn('w-5 h-5', className)}/></div>
 
   if (provider?.icon_small) {
     return (
 
-      <div className={isDeprecated ? 'opacity-50' : ''}>
+      <div className={`flex w-6 h-6 items-center justify-center ${isDeprecated ? 'opacity-50' : ''}`}>
         <img
           alt='model-icon'
           src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
-          className={cn('w-4 h-4', className)}
+          className={cn('w-5 h-5', className)}
         />
       </div>
     )
@@ -41,10 +41,10 @@ const ModelIcon: FC<ModelIconProps> = ({
 
   return (
     <div className={cn(
-      'flex items-center justify-center w-5 h-5 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
+      'flex items-center justify-center w-6 h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
       className,
     )}>
-      <div className='flex w-3 h-3 items-center justify-center opacity-35'>
+      <div className='flex w-5 h5 items-center justify-center opacity-35'>
         <Group className='text-text-tertiary' />
       </div>
     </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
index 6d42561774..8a6b283bdd 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
@@ -22,19 +22,21 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 
   return (
     <div
-      className={cn('group flex items-center p-1 gap-0.5 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
+      className={cn('group flex flex-grow items-center p-[3px] pl-1 gap-1 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
     >
-      <ModelIcon
-        className='shrink-0 mr-1.5'
-        provider={currentProvider}
-        modelName={modelName}
-      />
-      <div className='mr-1 system-sm-regular text-components-input-text-filled truncate'>
-        {modelName}
+      <div className='flex items-center py-[1px] gap-1 grow'>
+        <ModelIcon
+          className="m-0.5"
+          provider={currentProvider}
+          modelName={modelName}
+        />
+        <div className='system-sm-regular text-components-input-text-filled truncate'>
+          {modelName}
+        </div>
       </div>
       <div className='shrink-0 flex items-center justify-center w-4 h-4'>
         <Tooltip popupContent={t('common.modelProvider.deprecated')}>
-          <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+          <AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
         </Tooltip>
       </div>
     </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
index 0a6b129fe0..fa8abee9b0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -34,7 +34,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
   return (
     <div
       className={cn(
-        'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
+        'group flex items-center p-1 gap-0.5 h-8 rounded-lg bg-components-input-bg-normal',
         !readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
         open && 'bg-components-input-bg-hover',
         model.status !== ModelStatusEnum.active && 'bg-components-input-bg-disabled hover:bg-components-input-bg-disabled',
diff --git a/web/app/components/workflow/nodes/_base/components/setting-item.tsx b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
index 9e6e86844c..fdaadc476f 100644
--- a/web/app/components/workflow/nodes/_base/components/setting-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
@@ -12,12 +12,12 @@ export type SettingItemProps = PropsWithChildren<{
 export const SettingItem = ({ label, children, status, tooltip }: SettingItemProps) => {
   const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
   const needTooltip = ['error', 'warning'].includes(status as any)
-  return <div className='flex items-center h-6 justify-between bg-workflow-block-parma-bg rounded-md  px-1 space-x-1 text-xs font-normal relative'>
-    <div className={classNames('shrink-0 truncate text-xs font-medium text-text-tertiary uppercase', !!children && 'max-w-[100px]')}>
+  return <div className='flex items-center justify-between bg-workflow-block-parma-bg rounded-md py-1 px-1.5 space-x-1 text-xs font-normal relative'>
+    <div className={classNames('shrink-0 truncate text-text-tertiary system-xs-medium-uppercase', !!children && 'max-w-[100px]')}>
       {label}
     </div>
     <Tooltip popupContent={tooltip} disabled={!needTooltip}>
-      <div className='truncate text-right text-xs font-normal text-text-secondary'>
+      <div className='truncate text-right system-xs-medium text-text-secondary'>
         {children}
       </div>
     </Tooltip>