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/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx

@@ -55,28 +55,28 @@ const DatasetItem: FC<Props> = ({
   }, [onRemove])
 
   return (
-    <div className={`flex items-center h-10 justify-between rounded-xl px-2 border-[0.5px] 
-      border-components-panel-border-subtle cursor-pointer group/dataset-item 
+    <div className={`group/dataset-item flex h-10 cursor-pointer items-center justify-between rounded-xl 
+      border-[0.5px] border-components-panel-border-subtle px-2 
       ${isDeleteHovered
-      ? 'bg-state-destructive-hover border-state-destructive-border'
+      ? 'border-state-destructive-border bg-state-destructive-hover'
       : 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover'
     }`}>
-      <div className='w-0 grow flex items-center space-x-1.5'>
+      <div className='flex w-0 grow items-center space-x-1.5'>
         {
           payload.data_source_type === DataSourceType.NOTION
             ? (
-              <div className='shrink-0 flex items-center justify-center w-6 h-6 rounded-md border-[0.5px] border-[#EAECF5]'>
-                <FileIcon type='notion' className='w-4 h-4' />
+              <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'>
+                <FileIcon type='notion' className='h-4 w-4' />
               </div>
             )
-            : <div className='shrink-0 flex items-center justify-center w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'>
-              <Folder className='w-4 h-4 text-[#444CE7]' />
+            : <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'>
+              <Folder className='h-4 w-4 text-[#444CE7]' />
             </div>
         }
-        <div className='w-0 grow text-text-secondary system-sm-medium truncate'>{payload.name}</div>
+        <div className='system-sm-medium w-0 grow truncate text-text-secondary'>{payload.name}</div>
       </div>
       {!readonly && (
-        <div className='hidden group-hover/dataset-item:flex shrink-0 ml-2  items-center space-x-1'>
+        <div className='ml-2 hidden shrink-0 items-center  space-x-1 group-hover/dataset-item:flex'>
           {
             editable && <ActionButton
               onClick={(e) => {
@@ -84,7 +84,7 @@ const DatasetItem: FC<Props> = ({
                 showSettingsModal()
               }}
             >
-              <RiEditLine className='w-4 h-4 shrink-0 text-text-tertiary' />
+              <RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
             </ActionButton>
           }
           <ActionButton
@@ -93,19 +93,19 @@ const DatasetItem: FC<Props> = ({
             onMouseEnter={() => setIsDeleteHovered(true)}
             onMouseLeave={() => setIsDeleteHovered(false)}
           >
-            <RiDeleteBinLine className={`w-4 h-4 shrink-0 ${isDeleteHovered ? 'text-text-destructive' : 'text-text-tertiary'}`} />
+            <RiDeleteBinLine className={`h-4 w-4 shrink-0 ${isDeleteHovered ? 'text-text-destructive' : 'text-text-tertiary'}`} />
           </ActionButton>
         </div>
       )}
       {
         payload.indexing_technique && <Badge
-          className='group-hover/dataset-item:hidden shrink-0'
+          className='shrink-0 group-hover/dataset-item:hidden'
           text={formatIndexingTechniqueAndMethod(payload.indexing_technique, payload.retrieval_model_dict?.search_method)}
         />
       }
       {
         payload.provider === 'external' && <Badge
-          className='group-hover/dataset-item:hidden shrink-0'
+          className='shrink-0 group-hover/dataset-item:hidden'
           text={t('dataset.externalTag') as string}
         />
       }

web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx

@@ -70,7 +70,7 @@ const DatasetList: FC<Props> = ({
           )
         })
         : (
-          <div className='p-3 text-xs text-center text-gray-500 rounded-lg cursor-default select-none bg-gray-50'>
+          <div className='cursor-default select-none rounded-lg bg-gray-50 p-3 text-center text-xs text-gray-500'>
             {t('appDebug.datasetConfig.knowledgeTip')}
           </div>
         )

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx

@@ -50,12 +50,12 @@ const AddCondition = ({
           size='small'
           variant='secondary'
         >
-          <RiAddLine className='w-3.5 h-3.5' />
+          <RiAddLine className='h-3.5 w-3.5' />
           {t('workflow.nodes.knowledgeRetrieval.metadata.panel.add')}
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='w-[320px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
+        <div className='w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
           <div className='p-2 pb-1'>
             <Input
               showLeftIcon
@@ -69,7 +69,7 @@ const AddCondition = ({
               filteredMetadataList?.map(metadata => (
                 <div
                   key={metadata.name}
-                  className='flex items-center px-3 h-6 rounded-md system-sm-medium text-text-secondary cursor-pointer hover:bg-state-base-hover'
+                  className='system-sm-medium flex h-6 cursor-pointer items-center rounded-md px-3 text-text-secondary hover:bg-state-base-hover'
                 >
                   <div className='mr-1 p-[1px]'>
                     <MetadataIcon type={metadata.type} />
@@ -81,7 +81,7 @@ const AddCondition = ({
                   >
                     {metadata.name}
                   </div>
-                  <div className='shrink-0 system-xs-regular text-text-tertiary'>{metadata.type}</div>
+                  <div className='system-xs-regular shrink-0 text-text-tertiary'>{metadata.type}</div>
                 </div>
               ))
             }

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx.tsx

@@ -44,11 +44,11 @@ const ConditionCommonVariableSelector = ({
         if (!variables.length) return
         setOpen(!open)
       }}>
-        <div className="grow flex items-center cursor-pointer h-6">
+        <div className="flex h-6 grow cursor-pointer items-center">
           {
             selected && (
-              <div className='inline-flex items-center pl-[5px] pr-1.5 h-6 text-text-secondary rounded-md system-xs-medium border-[0.5px] border-components-panel-border-subtle shadow-xs bg-components-badge-white-to-dark'>
-                <Variable02 className='mr-1 w-3.5 h-3.5 text-text-accent' />
+              <div className='system-xs-medium inline-flex h-6 items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-[5px] pr-1.5 text-text-secondary shadow-xs'>
+                <Variable02 className='mr-1 h-3.5 w-3.5 text-text-accent' />
                 {selected.name}
               </div>
             )
@@ -56,11 +56,11 @@ const ConditionCommonVariableSelector = ({
           {
             !selected && (
               <>
-                <div className='grow flex items-center text-components-input-text-placeholder system-sm-regular'>
-                  <Variable02 className='mr-1 w-4 h-4' />
+                <div className='system-sm-regular flex grow items-center text-components-input-text-placeholder'>
+                  <Variable02 className='mr-1 h-4 w-4' />
                   {t('workflow.nodes.knowledgeRetrieval.metadata.panel.select')}
                 </div>
-                <div className='shrink-0 flex items-center px-[5px] h-5 border border-divider-deep rounded-[5px] system-2xs-medium text-text-tertiary'>
+                <div className='system-2xs-medium flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-[5px] text-text-tertiary'>
                   {varType}
                 </div>
               </>
@@ -69,15 +69,15 @@ const ConditionCommonVariableSelector = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className='p-1 w-[200px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='w-[200px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
           {
             variables.map(v => (
               <div
                 key={v.name}
-                className='flex items-center px-2 h-6 cursor-pointer rounded-md text-text-secondary system-xs-medium hover:bg-state-base-hover'
+                className='system-xs-medium flex h-6 cursor-pointer items-center rounded-md px-2 text-text-secondary hover:bg-state-base-hover'
                 onClick={() => handleChange(v.name)}
               >
-                <Variable02 className='mr-1 w-4 h-4 text-text-accent' />
+                <Variable02 className='mr-1 h-4 w-4 text-text-accent' />
                 {v.name}
               </div>
             ))

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx

@@ -35,7 +35,7 @@ const ConditionDate = ({
       <div className='group flex items-center' onClick={handleClickTrigger}>
         <div
           className={cn(
-            'grow flex items-center mr-0.5 px-1 h-6 system-sm-regular cursor-pointer',
+            'system-sm-regular mr-0.5 flex h-6 grow cursor-pointer items-center px-1',
             value ? 'text-text-secondary' : 'text-text-tertiary',
           )}
         >
@@ -49,7 +49,7 @@ const ConditionDate = ({
           value && (
             <RiCloseCircleFill
               className={cn(
-                'hidden group-hover:block shrink-0 w-4 h-4 cursor-pointer hover:text-components-input-text-filled',
+                'hidden h-4 w-4 shrink-0 cursor-pointer hover:text-components-input-text-filled group-hover:block',
                 value && 'text-text-quaternary',
               )}
               onClick={(e) => {
@@ -61,7 +61,7 @@ const ConditionDate = ({
         }
         <RiCalendarLine
           className={cn(
-            'block shrink-0 w-4 h-4',
+            'block h-4 w-4 shrink-0',
             value ? 'text-text-quaternary' : 'text-text-tertiary',
             value && 'group-hover:hidden',
           )}
@@ -71,7 +71,7 @@ const ConditionDate = ({
   }, [value, handleDateChange, timezone, t])
 
   return (
-    <div className='px-2 py-1 h-8'>
+    <div className='h-8 px-2 py-1'>
       <DatePicker
         timezone={timezone}
         value={value ? dayjs(value * 1000) : undefined}

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx

@@ -115,22 +115,22 @@ const ConditionItem = ({
   }, [condition, onUpdateCondition])
 
   return (
-    <div className={cn('flex mb-1 last-of-type:mb-0', className)}>
+    <div className={cn('mb-1 flex last-of-type:mb-0', className)}>
       <div className={cn(
-        'grow bg-components-input-bg-normal rounded-lg',
+        'grow rounded-lg bg-components-input-bg-normal',
         isHovered && 'bg-state-destructive-hover',
       )}>
         <div className='flex items-center p-1'>
-          <div className='grow w-0'>
-            <div className='inline-flex items-center pl-1 pr-1.5 h-6 border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark rounded-md shadow-xs'>
+          <div className='w-0 grow'>
+            <div className='inline-flex h-6 items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-1 pr-1.5 shadow-xs'>
               <div className='mr-0.5 p-[1px]'>
-                <MetadataIcon type={currentMetadata?.type} className='w-3 h-3' />
+                <MetadataIcon type={currentMetadata?.type} className='h-3 w-3' />
               </div>
-              <div className='mr-0.5 system-xs-medium text-text-secondary'>{currentMetadata?.name}</div>
+              <div className='system-xs-medium mr-0.5 text-text-secondary'>{currentMetadata?.name}</div>
               <div className='system-xs-regular text-text-tertiary'>{currentMetadata?.type}</div>
             </div>
           </div>
-          <div className='mx-1 w-[1px] h-3 bg-divider-regular'></div>
+          <div className='mx-1 h-3 w-[1px] bg-divider-regular'></div>
           <ConditionOperator
             disabled={!canChooseOperator}
             variableType={currentMetadata?.type || MetadataFilteringVariableType.string}
@@ -178,12 +178,12 @@ const ConditionItem = ({
         </div>
       </div>
       <div
-        className='shrink-0 flex items-center justify-center ml-1 mt-1 w-6 h-6 rounded-lg cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
+        className='ml-1 mt-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
       >
-        <RiDeleteBinLine className='w-4 h-4' />
+        <RiDeleteBinLine className='h-4 w-4' />
       </div>
     </div>
   )

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx

@@ -40,12 +40,12 @@ const ConditionNumber = ({
   }, [onChange])
 
   return (
-    <div className='flex items-center pl-1 pr-2 h-8'>
+    <div className='flex h-8 items-center pl-1 pr-2'>
       <ConditionValueMethod
         valueMethod={valueMethod}
         onValueMethodChange={onValueMethodChange}
       />
-      <div className='ml-1 mr-1.5 w-[1px] h-4 bg-divider-regular'></div>
+      <div className='ml-1 mr-1.5 h-4 w-[1px] bg-divider-regular'></div>
       {
         valueMethod === 'variable' && !isCommonVariable && (
           <ConditionVariableSelector
@@ -70,7 +70,7 @@ const ConditionNumber = ({
       {
         valueMethod === 'constant' && (
           <Input
-            className='bg-transparent hover:bg-transparent outline-none border-none focus:shadow-none focus:bg-transparent'
+            className='border-none bg-transparent outline-none hover:bg-transparent focus:bg-transparent focus:shadow-none'
             value={value}
             onChange={(e) => {
               const v = e.target.value

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx

@@ -70,16 +70,16 @@ const ConditionOperator = ({
               ? selectedOption.label
               : t(`${i18nPrefix}.select`)
           }
-          <RiArrowDownSLine className='ml-1 w-3.5 h-3.5' />
+          <RiArrowDownSLine className='ml-1 h-3.5 w-3.5' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
           {
             options.map(option => (
               <div
                 key={option.value}
-                className='flex items-center px-3 py-1.5 h-7 text-[13px] font-medium text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
+                className='flex h-7 cursor-pointer items-center rounded-lg px-3 py-1.5 text-[13px] font-medium text-text-secondary hover:bg-state-base-hover'
                 onClick={() => {
                   onSelect(option.value)
                   setOpen(false)

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx

@@ -40,12 +40,12 @@ const ConditionString = ({
   }, [onChange])
 
   return (
-    <div className='flex items-center pl-1 pr-2 h-8'>
+    <div className='flex h-8 items-center pl-1 pr-2'>
       <ConditionValueMethod
         valueMethod={valueMethod}
         onValueMethodChange={onValueMethodChange}
       />
-      <div className='ml-1 mr-1.5 w-[1px] h-4 bg-divider-regular'></div>
+      <div className='ml-1 mr-1.5 h-4 w-[1px] bg-divider-regular'></div>
       {
         valueMethod === 'variable' && !isCommonVariable && (
           <ConditionVariableSelector
@@ -70,7 +70,7 @@ const ConditionString = ({
       {
         valueMethod === 'constant' && (
           <Input
-            className='bg-transparent hover:bg-transparent outline-none border-none focus:shadow-none focus:bg-transparent'
+            className='border-none bg-transparent outline-none hover:bg-transparent focus:bg-transparent focus:shadow-none'
             value={value}
             onChange={e => onChange(e.target.value)}
             placeholder={t('workflow.nodes.knowledgeRetrieval.metadata.panel.placeholder')}

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx

@@ -37,17 +37,17 @@ const ConditionValueMethod = ({
           size='small'
         >
           {capitalize(valueMethod)}
-          <RiArrowDownSLine className='ml-[1px] w-3.5 h-3.5' />
+          <RiArrowDownSLine className='ml-[1px] h-3.5 w-3.5' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className='p-1 w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
+        <div className='w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
           {
             options.map(option => (
               <div
                 key={option}
                 className={cn(
-                  'flex items-center px-3 h-7 rounded-md hover:bg-state-base-hover cursor-pointer',
+                  'flex h-7 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover',
                   'text-[13px] font-medium text-text-secondary',
                   valueMethod === option && 'bg-state-base-hover',
                 )}

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-variable-selector.tsx

@@ -50,7 +50,7 @@ const ConditionVariableSelector = ({
       }}
     >
       <PortalToFollowElemTrigger asChild onClick={() => setOpen(!open)}>
-        <div className="grow flex items-center cursor-pointer h-6">
+        <div className="flex h-6 grow cursor-pointer items-center">
           {
             !!valueSelector.length && (
               <VariableTag
@@ -64,11 +64,11 @@ const ConditionVariableSelector = ({
           {
             !valueSelector.length && (
               <>
-                <div className='grow flex items-center text-components-input-text-placeholder system-sm-regular'>
-                  <Variable02 className='mr-1 w-4 h-4' />
+                <div className='system-sm-regular flex grow items-center text-components-input-text-placeholder'>
+                  <Variable02 className='mr-1 h-4 w-4' />
                   {t('workflow.nodes.knowledgeRetrieval.metadata.panel.select')}
                 </div>
-                <div className='shrink-0 flex items-center px-[5px] h-5 border border-divider-deep rounded-[5px] system-2xs-medium text-text-tertiary'>
+                <div className='system-2xs-medium flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-[5px] text-text-tertiary'>
                   {varType}
                 </div>
               </>
@@ -77,7 +77,7 @@ const ConditionVariableSelector = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
           <VarReferenceVars
             vars={nodesOutputVars}
             isSupportFileVar

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx

@@ -33,16 +33,16 @@ const ConditionList = ({
       {
         conditions.length > 1 && (
           <div className={cn(
-            'absolute top-0 bottom-0 left-0 w-[44px]',
+            'absolute bottom-0 left-0 top-0 w-[44px]',
           )}>
-            <div className='absolute top-4 bottom-4 right-1 w-2.5 border border-divider-deep rounded-l-[8px] border-r-0'></div>
-            <div className='absolute top-1/2 -translate-y-1/2 right-0 w-4 h-[29px] bg-components-panel-bg'></div>
+            <div className='absolute bottom-4 right-1 top-4 w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep'></div>
+            <div className='absolute right-0 top-1/2 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg'></div>
             <div
-              className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer select-none'
+              className='absolute right-1 top-1/2 flex h-[21px] -translate-y-1/2 cursor-pointer select-none items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs'
               onClick={() => handleToggleConditionLogicalOperator()}
             >
               {logical_operator.toUpperCase()}
-              <RiLoopLeftLine className='ml-0.5 w-3 h-3' />
+              <RiLoopLeftLine className='ml-0.5 h-3 w-3' />
             </div>
           </div>
         )

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx

@@ -39,9 +39,9 @@ const MetadataFilter = ({
       collapsed={collapsed}
       onCollapse={setCollapsed}
       trigger={
-        <div className='grow flex items-center justify-between pr-4'>
+        <div className='flex grow items-center justify-between pr-4'>
           <div className='flex items-center'>
-            <div className='mr-0.5 system-sm-semibold-uppercase text-text-secondary'>
+            <div className='system-sm-semibold-uppercase mr-0.5 text-text-secondary'>
               {t('workflow.nodes.knowledgeRetrieval.metadata.title')}
             </div>
             <Tooltip
@@ -72,11 +72,12 @@ const MetadataFilter = ({
         {
           metadataFilterMode === MetadataFilteringModeEnum.automatic && (
             <>
-              <div className='px-4 body-xs-regular text-text-tertiary'>
+              <div className='body-xs-regular px-4 text-text-tertiary'>
                 {t('workflow.nodes.knowledgeRetrieval.metadata.options.automatic.desc')}
               </div>
               <div className='mt-1 px-4'>
                 <ModelParameterModal
+                  portalToFollowElemContentClassName='z-[50]'
                   popupClassName='!w-[387px]'
                   isInWorkflow
                   isAdvancedMode={true}

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx

@@ -64,25 +64,25 @@ const MetadataFilterSelector = ({
           size='small'
         >
           {selectedOption.value}
-          <RiArrowDownSLine className='w-3.5 h-3.5' />
+          <RiArrowDownSLine className='h-3.5 w-3.5' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='p-1 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
+        <div className='w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
           {
             options.map(option => (
               <div
                 key={option.key}
-                className='flex p-2 pr-3 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                className='flex cursor-pointer rounded-lg p-2 pr-3 hover:bg-state-base-hover'
                 onClick={() => {
                   onSelect(option.key)
                   setOpen(false)
                 }}
               >
-                <div className='shrink-0 w-4'>
+                <div className='w-4 shrink-0'>
                   {
                     option.key === value && (
-                      <RiCheckLine className='w-4 h-4 text-text-accent' />
+                      <RiCheckLine className='h-4 w-4 text-text-accent' />
                     )
                   }
                 </div>

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx

@@ -19,17 +19,17 @@ const MetadataIcon = ({
     <>
       {
         type === MetadataFilteringVariableType.string && (
-          <RiTextSnippet className={cn('w-3.5 h-3.5', className)} />
+          <RiTextSnippet className={cn('h-3.5 w-3.5', className)} />
         )
       }
       {
         type === MetadataFilteringVariableType.number && (
-          <RiHashtag className={cn('w-3.5 h-3.5', className)} />
+          <RiHashtag className={cn('h-3.5 w-3.5', className)} />
         )
       }
       {
         type === MetadataFilteringVariableType.time && (
-          <RiTimeLine className={cn('w-3.5 h-3.5', className)} />
+          <RiTimeLine className={cn('h-3.5 w-3.5', className)} />
         )
       }
     </>

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-panel.tsx

@@ -17,16 +17,16 @@ const MetadataPanel = ({
   const { t } = useTranslation()
 
   return (
-    <div className='w-[420px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-2xl shadow-2xl'>
+    <div className='w-[420px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl'>
       <div className='relative px-3 pt-3.5'>
         <div className='system-xl-semibold text-text-primary'>
           {t('workflow.nodes.knowledgeRetrieval.metadata.panel.title')}
         </div>
         <div
-          className='absolute right-2.5 bottom-0 flex items-center justify-center w-8 h-8 cursor-pointer'
+          className='absolute bottom-0 right-2.5 flex h-8 w-8 cursor-pointer items-center justify-center'
           onClick={onCancel}
         >
-          <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          <RiCloseLine className='h-4 w-4 text-text-tertiary' />
         </div>
       </div>
       <div className='px-1 py-2'>

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx

@@ -46,9 +46,9 @@ const MetadataTrigger = ({
           variant='secondary-accent'
           size='small'
         >
-          <RiFilter3Line className='mr-1 w-3.5 h-3.5' />
+          <RiFilter3Line className='mr-1 h-3.5 w-3.5' />
           {t('workflow.nodes.knowledgeRetrieval.metadata.panel.conditions')}
-          <div className='flex items-center ml-1 px-1 rounded-[5px] border border-divider-deep system-2xs-medium-uppercase text-text-tertiary'>
+          <div className='system-2xs-medium-uppercase ml-1 flex items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary'>
             {metadataFilteringConditions?.conditions.length || 0}
           </div>
         </Button>

web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx

@@ -111,12 +111,12 @@ const RetrievalConfig: FC<Props> = ({
           disabled={readonly}
           className={cn(open && 'bg-components-button-ghost-bg-hover')}
         >
-          <RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
+          <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
           {t('dataset.retrievalSettings')}
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div className='w-[404px] pt-3 pb-4 px-4 shadow-xl  rounded-2xl border border-gray-200  bg-white'>
+        <div className='w-[404px] rounded-2xl border border-gray-200 bg-white  px-4 pb-4 pt-3  shadow-xl'>
           <ConfigRetrievalContent
             datasetConfigs={
               {

web/app/components/workflow/nodes/knowledge-retrieval/node.tsx

@@ -36,11 +36,11 @@ const Node: FC<NodeProps<KnowledgeRetrievalNodeType>> = ({
     <div className='mb-1 px-3 py-1'>
       <div className='space-y-0.5'>
         {selectedDatasets.map(({ id, name }) => (
-          <div key={id} className='flex items-center h-[26px] bg-workflow-block-parma-bg rounded-md  px-1 text-xs font-normal text-gray-700'>
-            <div className='mr-1 shrink-0 p-1 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'>
-              <Folder className='w-3 h-3 text-[#444CE7]' />
+          <div key={id} className='flex h-[26px] items-center rounded-md bg-workflow-block-parma-bg  px-1 text-xs font-normal text-gray-700'>
+            <div className='mr-1 shrink-0 rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-1'>
+              <Folder className='h-3 w-3 text-[#444CE7]' />
             </div>
-            <div className='grow w-0 text-text-secondary system-xs-regular truncate'>
+            <div className='system-xs-regular w-0 grow truncate text-text-secondary'>
               {name}
             </div>
           </div>

web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx

@@ -77,7 +77,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      <div className='px-4 pb-2 space-y-4'>
+      <div className='space-y-4 px-4 pb-2'>
         {/* {JSON.stringify(inputs, null, 2)} */}
         <Field
           title={t(`${i18nPrefix}.queryVariable`)}
@@ -112,7 +112,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
                 onOpenFromPropsChange={handleOpenFromPropsChange}
                 selectedDatasets={selectedDatasets}
               />
-              {!readOnly && (<div className='w-px h-3 bg-gray-200'></div>)}
+              {!readOnly && (<div className='h-3 w-px bg-gray-200'></div>)}
               {!readOnly && (
                 <AddKnowledge
                   selectedIds={inputs.dataset_ids}