update style of model & parameter selector

web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx

@@ -19,11 +19,12 @@ const ModelIcon: FC<ModelIconProps> = ({
 }) => {
   const language = useLanguage()
 
-  if (provider?.provider === 'openai' && (modelName?.startsWith('gpt-4') || modelName?.includes('4o')))
+  if (provider?.provider.includes('openai') && (modelName?.startsWith('gpt-4') || modelName?.includes('4o')))
     return <OpenaiViolet className={`w-4 h-4 ${className}`}/>
 
   if (provider?.icon_small) {
     return (
+      // eslint-disable-next-line @next/next/no-img-element
       <img
         alt='model-icon'
         src={`${provider.icon_small[language] || provider.icon_small.en_US}`}

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx

@@ -190,26 +190,22 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               )
           }
         </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className={cn(portalToFollowElemContentClassName, 'z-[60]')}>
+        <PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
-          <div className={cn(popupClassName, 'w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl')}>
+          <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
-            <div className={cn(
+            <div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
-              'max-h-[480px]  overflow-y-auto',
+              <div className='relative'>
-              !isInWorkflow && 'px-10 pt-6 pb-8',
+                <div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
-              isInWorkflow && 'p-4')}>
-              <div className='flex items-center justify-between h-8'>
-                <div className={cn('font-semibold text-gray-900 shrink-0', isInWorkflow && 'text-[13px]')}>
                   {t('common.modelProvider.model').toLocaleUpperCase()}
                 </div>
                 <ModelSelector
                   defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
                   modelList={activeTextGenerationModelList}
                   onSelect={handleChangeModel}
-                  triggerClassName='max-w-[295px]'
                 />
               </div>
               {
                 !!parameterRules.length && (
-                  <div className='my-5 h-[1px] bg-gray-100' />
+                  <div className='my-3 h-[1px] bg-divider-subtle' />
                 )
               }
               {
@@ -219,8 +215,8 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               }
               {
                 !isLoading && !!parameterRules.length && (
-                  <div className='flex items-center justify-between mb-4'>
+                  <div className='flex items-center justify-between mb-2'>
-                    <div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>{t('common.modelProvider.parameters')}</div>
+                    <div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
                     {
                       PROVIDER_WITH_PRESET_TONE.includes(provider) && (
                         <PresetsParameter onSelect={handleSelectPresetParameter} />
@@ -237,7 +233,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                   ].map(parameter => (
                     <ParameterItem
                       key={`${modelId}-${parameter.name}`}
-                      className='mb-4'
                       parameterRule={parameter}
                       value={completionParams?.[parameter.name]}
                       onChange={v => handleParamChange(parameter.name, v)}
@@ -250,7 +245,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
             </div>
             {!hideDebugWithMultipleModel && (
               <div
-                className='flex items-center justify-between px-6 h-[50px] bg-gray-50 border-t border-t-gray-100 text-xs font-medium text-primary-600 cursor-pointer rounded-b-xl'
+                className='flex items-center justify-between px-4 h-[50px] bg-components-section-burn border-t border-t-divider-subtle system-sm-regular text-text-accent cursor-pointer rounded-b-xl'
                 onClick={() => onDebugWithMultipleModelChange?.()}
               >
                 {

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

@@ -17,7 +17,6 @@ type ParameterItemProps = {
   parameterRule: ModelParameterRule
   value?: ParameterValue
   onChange?: (value: ParameterValue) => void
-  className?: string
   onSwitch?: (checked: boolean, assignValue: ParameterValue) => void
   isInWorkflow?: boolean
 }
@@ -25,7 +24,6 @@ const ParameterItem: FC<ParameterItemProps> = ({
   parameterRule,
   value,
   onChange,
-  className,
   onSwitch,
   isInWorkflow,
 }) => {
@@ -249,9 +247,20 @@ const ParameterItem: FC<ParameterItemProps> = ({
   }
 
   return (
-    <div className={`flex items-center justify-between ${className}`}>
+    <div className='flex items-center justify-between mb-2'>
-      <div>
+      <div className='shrink-0 basis-1/2'>
-        <div className={cn(isInWorkflow ? 'w-[140px]' : 'w-full', 'ml-4 shrink-0 flex items-center')}>
+        <div className={cn('shrink-0 w-full flex items-center')}>
+          {
+            !parameterRule.required && parameterRule.name !== 'stop' && (
+              <div className='mr-2 w-7'>
+                <Switch
+                  defaultValue={!isNullOrUndefined(value)}
+                  onChange={handleSwitch}
+                  size='md'
+                />
+              </div>
+            )
+          }
           <div
             className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
             title={parameterRule.label[language] || parameterRule.label.en_US}
@@ -269,16 +278,6 @@ const ParameterItem: FC<ParameterItemProps> = ({
               />
             )
           }
-          {
-            !parameterRule.required && parameterRule.name !== 'stop' && (
-              <Switch
-                className='mr-1'
-                defaultValue={!isNullOrUndefined(value)}
-                onChange={handleSwitch}
-                size='md'
-              />
-            )
-          }
         </div>
         {
           parameterRule.type === 'tag' && (

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx

@@ -2,12 +2,13 @@ import type { FC } from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
 import Dropdown from '@/app/components/base/dropdown'
-import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
 import { TONE_LIST } from '@/config'
+import cn from '@/utils/classnames'
 
 type PresetsParameterProps = {
   onSelect: (toneId: number) => void
@@ -18,19 +19,16 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
   const { t } = useTranslation()
   const renderTrigger = useCallback((open: boolean) => {
     return (
-      <div
+      <Button
-        className={`
+        size={'small'}
-          flex items-center px-[7px] h-7 rounded-md border-[0.5px] border-gray-200 shadow-xs
+        variant={'secondary'}
-          text-xs font-medium text-gray-700 cursor-pointer
+        className={cn(open && 'bg-state-base-hover')}
-          ${open && 'bg-gray-100'}
-        `}
       >
-        <SlidersH className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
         {t('common.modelProvider.loadPresets')}
-        <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5 text-gray-500' />
+        <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5' />
-      </div>
+      </Button>
     )
-  }, [])
+  }, [t])
   const getToneIcon = (toneId: number) => {
     const className = 'mr-2 w-[14px] h-[14px]'
     const res = ({