Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>

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

@@ -76,7 +76,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
   return (
     <div
       className={cn(
-        'relative group flex items-center p-1 gap-[2px] flex-grow rounded-lg bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
+        'group relative flex grow cursor-pointer items-center gap-[2px] rounded-lg bg-components-input-bg-normal p-1 hover:bg-state-base-hover-alt',
       )}
     >
       {modelId ? (
@@ -130,20 +130,20 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
             />
           )}
           {modelProvider && !disabled && !needsConfiguration && (
-            <div className="flex pr-1 items-center">
-              <RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
+            <div className="flex items-center pr-1">
+              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary group-hover:text-text-secondary" />
             </div>
           )}
         </>
       ) : (
         <>
-          <div className="flex p-1 pl-2 items-center gap-1 grow">
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular text-components-input-text-placeholder">
+          <div className="flex grow items-center gap-1 p-1 pl-2">
+            <span className="system-sm-regular overflow-hidden text-ellipsis whitespace-nowrap text-components-input-text-placeholder">
               {t('workflow.nodes.agent.configureModel')}
             </span>
           </div>
-          <div className="flex pr-1 items-center">
-            <RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
+          <div className="flex items-center pr-1">
+            <RiEqualizer2Line className="h-4 w-4 text-text-tertiary group-hover:text-text-secondary" />
           </div>
         </>
       )}

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

@@ -18,11 +18,11 @@ const ConfigurationButton = ({ modelProvider, handleOpenModal }: ConfigurationBu
         handleOpenModal(modelProvider, ConfigurationMethodEnum.predefinedModel, undefined)
       }}
     >
-      <div className="flex px-[3px] justify-center items-center gap-1">
+      <div className="flex items-center justify-center gap-1 px-[3px]">
         {t('workflow.nodes.agent.notAuthorized')}
       </div>
-      <div className="flex w-[14px] h-[14px] justify-center items-center">
-        <div className="w-2 h-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
+      <div className="flex h-[14px] w-[14px] items-center justify-center">
+        <div className="h-2 w-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
           bg-components-badge-status-light-warning-bg shadow-components-badge-status-light-warning-halo" />
       </div>
     </Button>

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

@@ -194,9 +194,9 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
           <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
-            <div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
+            <div className={cn('max-h-[420px] overflow-y-auto p-4 pt-3')}>
               <div className='relative'>
-                <div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
+                <div className={cn('system-sm-semibold mb-1 flex h-6 items-center text-text-secondary')}>
                   {t('common.modelProvider.model').toLocaleUpperCase()}
                 </div>
                 <ModelSelector
@@ -217,8 +217,8 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               }
               {
                 !isLoading && !!parameterRules.length && (
-                  <div className='flex items-center justify-between mb-2'>
-                    <div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
+                  <div className='mb-2 flex items-center justify-between'>
+                    <div className={cn('system-sm-semibold flex h-6 items-center text-text-secondary')}>{t('common.modelProvider.parameters')}</div>
                     {
                       PROVIDER_WITH_PRESET_TONE.includes(provider) && (
                         <PresetsParameter onSelect={handleSelectPresetParameter} />
@@ -247,7 +247,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
             </div>
             {!hideDebugWithMultipleModel && (
               <div
-                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'
+                className='bg-components-section-burn system-sm-regular flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 text-text-accent'
                 onClick={() => onDebugWithMultipleModelChange?.()}
               >
                 {
@@ -255,7 +255,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                     ? t('appDebug.debugAsSingleModel')
                     : t('appDebug.debugAsMultipleModel')
                 }
-                <ArrowNarrowLeft className='w-3 h-3 rotate-180' />
+                <ArrowNarrowLeft className='h-3 w-3 rotate-180' />
               </div>
             )}
           </div>

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

@@ -8,14 +8,14 @@ type ModelDisplayProps = {
 const ModelDisplay = ({ currentModel, modelId }: ModelDisplayProps) => {
   return currentModel ? (
     <ModelName
-      className="flex px-1 py-[3px] items-center gap-1 grow"
+      className="flex grow items-center gap-1 px-1 py-[3px]"
       modelItem={currentModel}
       showMode
       showFeatures
     />
   ) : (
-    <div className="flex py-[3px] px-1 items-center gap-1 grow opacity-50 truncate">
-      <div className="text-components-input-text-filled text-ellipsis overflow-hidden system-sm-regular">
+    <div className="flex grow items-center gap-1 truncate px-1 py-[3px] opacity-50">
+      <div className="system-sm-regular overflow-hidden text-ellipsis text-components-input-text-filled">
         {modelId}
       </div>
     </div>

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

@@ -148,7 +148,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           />}
           <input
             ref={numberInputRef}
-            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
+            className='system-sm-regular ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-none'
             type='number'
             max={parameterRule.max}
             min={parameterRule.min}
@@ -173,7 +173,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           />}
           <input
             ref={numberInputRef}
-            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
+            className='system-sm-regular ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-none'
             type='number'
             max={parameterRule.max}
             min={parameterRule.min}
@@ -188,7 +188,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'boolean') {
       return (
         <Radio.Group
-          className='w-[178px] flex items-center'
+          className='flex w-[178px] items-center'
           value={renderValue ? 1 : 0}
           onChange={handleRadioChange}
         >
@@ -201,7 +201,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'string' && !parameterRule.options?.length) {
       return (
         <input
-          className={cn(isInWorkflow ? 'w-[178px]' : 'w-full', 'ml-4 flex items-center px-3 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular')}
+          className={cn(isInWorkflow ? 'w-[178px]' : 'w-full', 'system-sm-regular ml-4 flex h-8 appearance-none items-center rounded-lg bg-components-input-bg-normal px-3 text-components-input-text-filled outline-none')}
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -211,7 +211,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'text') {
       return (
         <textarea
-          className='w-full h-20 ml-4 px-1 rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
+          className='system-sm-regular ml-4 h-20 w-full rounded-lg bg-components-input-bg-normal px-1 text-components-input-text-filled'
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -222,7 +222,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
       return (
         <SimpleSelect
           className='!py-0'
-          wrapperClassName={cn('w-full !h-8')}
+          wrapperClassName={cn('!h-8 w-full')}
           defaultValue={renderValue as string}
           onSelect={handleSelect}
           items={parameterRule.options.map(option => ({ value: option, name: option }))}
@@ -232,7 +232,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
 
     if (parameterRule.type === 'tag') {
       return (
-        <div className={cn('w-full !h-8')}>
+        <div className={cn('!h-8 w-full')}>
           <TagInput
             items={renderValue as string[]}
             onChange={handleTagChange}
@@ -247,9 +247,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
   }
 
   return (
-    <div className='flex items-center justify-between mb-2'>
+    <div className='mb-2 flex items-center justify-between'>
       <div className='shrink-0 basis-1/2'>
-        <div className={cn('shrink-0 w-full flex items-center')}>
+        <div className={cn('flex w-full shrink-0 items-center')}>
           {
             !parameterRule.required && parameterRule.name !== 'stop' && (
               <div className='mr-2 w-7'>
@@ -262,7 +262,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
             )
           }
           <div
-            className='mr-0.5 system-xs-regular text-text-secondary truncate'
+            className='system-xs-regular mr-0.5 truncate text-text-secondary'
             title={parameterRule.label[language] || parameterRule.label.en_US}
           >
             {parameterRule.label[language] || parameterRule.label.en_US}
@@ -281,7 +281,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
         </div>
         {
           parameterRule.type === 'tag' && (
-            <div className={cn(!isInWorkflow && 'w-[178px]', 'text-text-tertiary system-xs-regular')}>
+            <div className={cn(!isInWorkflow && 'w-[178px]', 'system-xs-regular text-text-tertiary')}>
               {parameterRule?.tagPlaceholder?.[language]}
             </div>
           )

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

@@ -25,7 +25,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
         className={cn(open && 'bg-state-base-hover')}
       >
         {t('common.modelProvider.loadPresets')}
-        <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5' />
+        <RiArrowDownSLine className='ml-0.5 h-3.5 w-3.5' />
       </Button>
     )
   }, [t])
@@ -42,7 +42,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
     return {
       value: tone.id,
       text: (
-        <div className='flex items-center h-full'>
+        <div className='flex h-full items-center'>
           {getToneIcon(tone.id)}
           {t(`common.model.tone.${tone.name}`) as string}
         </div>

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

@@ -17,15 +17,15 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
   const { data: pluginList } = useInstalledPluginList()
   const renderTooltipContent = (title: string, description?: string, linkText?: string, linkHref?: string) => {
     return (
-      <div className='flex w-[240px] max-w-[240px] gap-1 flex-col px-1 py-1.5' onClick={e => e.stopPropagation()}>
-        <div className='text-text-primary title-xs-semi-bold'>{title}</div>
+      <div className='flex w-[240px] max-w-[240px] flex-col gap-1 px-1 py-1.5' onClick={e => e.stopPropagation()}>
+        <div className='title-xs-semi-bold text-text-primary'>{title}</div>
         {description && (
-          <div className='min-w-[200px] text-text-secondary body-xs-regular'>
+          <div className='body-xs-regular min-w-[200px] text-text-secondary'>
             {description}
           </div>
         )}
         {linkText && linkHref && (
-          <div className='text-text-accent body-xs-regular cursor-pointer z-[100]'>
+          <div className='body-xs-regular z-[100] cursor-pointer text-text-accent'>
             <Link
               href={linkHref}
               onClick={(e) => {
@@ -52,7 +52,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
               asChild={false}
               needsDelay={false}
             >
-              <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+              <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
             </Tooltip>
           ) : !pluginInfo ? (
             <Tooltip
@@ -65,7 +65,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
               asChild={false}
               needsDelay={true}
             >
-              <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+              <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
             </Tooltip>
           ) : (
             <SwitchPluginVersion
@@ -89,7 +89,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
           asChild={false}
           needsDelay
         >
-          <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+          <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
         </Tooltip>
       )}
     </>

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

@@ -44,16 +44,16 @@ const Trigger: FC<TriggerProps> = ({
   return (
     <div
       className={cn(
-        'relative flex items-center px-2 h-8 rounded-lg  cursor-pointer',
+        'relative flex h-8 cursor-pointer items-center rounded-lg  px-2',
         !isInWorkflow && 'border ring-inset hover:ring-[0.5px]',
-        !isInWorkflow && (disabled ? 'border-text-warning ring-text-warning bg-state-warning-hover' : 'border-util-colors-indigo-indigo-600 ring-util-colors-indigo-indigo-600 bg-state-accent-hover'),
-        isInWorkflow && 'pr-[30px] bg-workflow-block-parma-bg border border-workflow-block-parma-bg  hover:border-gray-200',
+        !isInWorkflow && (disabled ? 'border-text-warning bg-state-warning-hover ring-text-warning' : 'border-util-colors-indigo-indigo-600 bg-state-accent-hover ring-util-colors-indigo-indigo-600'),
+        isInWorkflow && 'border border-workflow-block-parma-bg bg-workflow-block-parma-bg pr-[30px]  hover:border-gray-200',
       )}
     >
       {
         currentProvider && (
           <ModelIcon
-            className='mr-1.5 !w-5 !h-5'
+            className='mr-1.5 !h-5 !w-5'
             provider={currentProvider}
             modelName={currentModel?.model}
           />
@@ -62,7 +62,7 @@ const Trigger: FC<TriggerProps> = ({
       {
         !currentProvider && (
           <ModelIcon
-            className='mr-1.5 !w-5 !h-5'
+            className='mr-1.5 !h-5 !w-5'
             provider={modelProviders.find(item => item.provider === providerName)}
             modelName={modelId}
           />
@@ -80,7 +80,7 @@ const Trigger: FC<TriggerProps> = ({
       }
       {
         !currentModel && (
-          <div className='mr-1 text-[13px] font-medium text-text-primary truncate'>
+          <div className='mr-1 truncate text-[13px] font-medium text-text-primary'>
             {modelId}
           </div>
         )
@@ -97,14 +97,14 @@ const Trigger: FC<TriggerProps> = ({
                     : ''
               }
             >
-              <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+              <AlertTriangle className='h-4 w-4 text-[#F79009]' />
             </Tooltip>
           )
           : (
-            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'shrink-0 w-4 h-4')} />
+            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'h-4 w-4 shrink-0')} />
           )
       }
-      {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-text-tertiary' />)}
+      {isInWorkflow && (<RiArrowDownSLine className='absolute right-2 top-[9px] h-3.5 w-3.5 text-text-tertiary' />)}
     </div>
   )
 }