lint: fix tailwind lint issues (#23367)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/account/account-page/AvatarWithEdit.tsx

           <Avatar {...props} />
           <div
             onClick={() => { setIsShowAvatarPicker(true) }}
-            className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-50 opacity-0 transition-opacity group-hover:opacity-100"
+            className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
           >
             <span className="text-xs text-white">
               <RiPencilLine />

web/app/components/app/app-access-control/access-control-dialog.tsx

           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-background-overlay bg-opacity-25" />
+          <div className="bg-background-overlay/25 fixed inset-0" />
         </Transition.Child>
 
         <div className="fixed inset-0 flex items-center justify-center">

web/app/components/app/app-access-control/add-member-or-group-pop.tsx

     setSelectedGroupsForBreadcrumb([])
   }, [setSelectedGroupsForBreadcrumb])
   return <div className='flex h-7 items-center gap-x-0.5 px-2 py-0.5'>
-    <span className={classNames('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'text-text-accent cursor-pointer')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span>
+    <span className={classNames('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span>
     {selectedGroupsForBreadcrumb.map((group, index) => {
       return <div key={index} className='system-xs-regular flex items-center gap-x-0.5 text-text-tertiary'>
         <span>/</span>
   children: React.ReactNode
 }
 function BaseItem({ children, className }: BaseItemProps) {
-  return <div className={classNames('p-1 pl-2 flex items-center space-x-2 hover:rounded-lg hover:bg-state-base-hover cursor-pointer', className)}>
+  return <div className={classNames('flex cursor-pointer items-center space-x-2 p-1 pl-2 hover:rounded-lg hover:bg-state-base-hover', className)}>
     {children}
   </div>
 }

web/app/components/app/create-app-dialog/app-list/sidebar.tsx

 }
 function CategoryItem({ category, active, onClick }: CategoryItemProps) {
   return <li
-    className={classNames('p-1 pl-3 h-8 rounded-lg flex items-center gap-2 group cursor-pointer hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
+    className={classNames('group flex h-8 cursor-pointer items-center gap-2 rounded-lg p-1 pl-3 hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
     onClick={() => { onClick?.(category) }}>
     {category === AppCategories.RECOMMENDED && <div className='inline-flex h-5 w-5 items-center justify-center rounded-md'>
       <RiThumbUpLine className='h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active' />
     </div>}
     <AppCategoryLabel category={category}
-      className={classNames('system-sm-medium text-components-menu-item-text group-[.active]:text-components-menu-item-text-active group-hover:text-components-menu-item-text-hover', active && 'system-sm-semibold')} />
+      className={classNames('system-sm-medium text-components-menu-item-text group-hover:text-components-menu-item-text-hover group-[.active]:text-components-menu-item-text-active', active && 'system-sm-semibold')} />
   </li >
 }
 

web/app/components/base/app-icon-picker/ImageInput.tsx

       <div
         className={classNames(
           isDragActive && 'border-primary-600',
-          'relative aspect-square border-[1.5px] border-dashed rounded-lg flex flex-col justify-center items-center text-gray-500')}
+          'relative flex aspect-square flex-col items-center justify-center rounded-lg border-[1.5px] border-dashed text-gray-500')}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}

web/app/components/base/block-input/index.tsx

         ? <div className='h-full px-4 py-2'>
           <textarea
             ref={contentEditableRef}
-            className={classNames(editAreaClassName, 'block w-full h-full resize-none')}
+            className={classNames(editAreaClassName, 'block h-full w-full resize-none')}
             placeholder={placeholder}
             onChange={onValueChange}
             value={currentValue}
     </div>)
 
   return (
-    <div className={classNames('block-input w-full overflow-y-auto bg-white border-none rounded-xl')}>
+    <div className={classNames('block-input w-full overflow-y-auto rounded-xl border-none bg-white')}>
       {textAreaContent}
       {/* footer */}
       {!readonly && (

web/app/components/base/button/index.tsx

         {...props}
       >
         {children}
-        {loading && <Spinner loading={loading} className={classNames('!text-white !h-3 !w-3 !border-2 !ml-1', spinnerClassName)} />}
+        {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
       </button>
     )
   },

web/app/components/base/content-dialog/index.tsx

       <TransitionChild>
         <div
           className={classNames(
-            'absolute left-0 inset-0 w-full bg-app-detail-overlay-bg',
+            'absolute inset-0 left-0 w-full bg-app-detail-overlay-bg',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
             'data-[leave]:opacity-0',
 
       <TransitionChild>
         <div className={classNames(
-          'absolute left-0 w-full bg-app-detail-bg border-r border-divider-burn',
+          'absolute left-0 w-full border-r border-divider-burn bg-app-detail-bg',
           'duration-100 ease-in data-[closed]:-translate-x-full',
-          'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:translate-x-0',
-          'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:-translate-x-full',
+          'data-[enter]:translate-x-0 data-[enter]:duration-300 data-[enter]:ease-out',
+          'data-[leave]:-translate-x-full data-[leave]:duration-200 data-[leave]:ease-in',
           className,
         )}>
           {children}

web/app/components/base/dialog/index.tsx

           <div className="flex min-h-full items-center justify-center">
             <TransitionChild>
               <DialogPanel className={classNames(
-                'w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl',
-                'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95',
-                'data-[enter]:opacity-100 data-[enter]:scale-100',
-                'data-[leave]:opacity-0 data-[enter]:scale-95',
+                'w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all',
+                'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
+                'data-[enter]:scale-100 data-[enter]:opacity-100',
+                'data-[enter]:scale-95 data-[leave]:opacity-0',
                 className,
               )}>
                 {Boolean(title) && (
                   <DialogTitle
                     as={titleAs || 'h3'}
-                    className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
+                    className={classNames('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)}
                   >
                     {title}
                   </DialogTitle>

web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx

       <Dialog as="div" className="relative z-40" onClose={close}>
         <TransitionChild>
           <div className={cn(
-            'fixed inset-0 bg-black bg-opacity-25',
+            'fixed inset-0 bg-black/25',
             'data-[closed]:opacity-0',
             'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
             'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',

web/app/components/base/fullscreen-modal/index.tsx

               <DialogPanel className={classNames(
                 'h-full',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
-                'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95',
-                'data-[enter]:opacity-100 data-[enter]:scale-100',
-                'data-[leave]:opacity-0 data-[enter]:scale-95',
+                'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
+                'data-[enter]:scale-100 data-[enter]:opacity-100',
+                'data-[enter]:scale-95 data-[leave]:opacity-0',
                 className,
               )}>
                 {closable

web/app/components/base/grid-mask/index.tsx

 }) => {
   return (
     <div className={classNames('relative bg-saas-background', wrapperClassName)}>
-      <div className={classNames('absolute inset-0 w-full h-full z-0 opacity-70', canvasClassName, Style.gridBg)} />
-      <div className={classNames('absolute w-full h-full z-[1] bg-grid-mask-background rounded-lg', gradientClassName)} />
+      <div className={classNames('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} />
+      <div className={classNames('absolute z-[1] h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} />
       <div className='relative z-[2]'>{children}</div>
     </div>
   )

web/app/components/base/logo/logo-site.tsx

   return (
     <img
       src={`${basePath}/logo/logo.png`}
-      className={classNames('block w-[22.651px] h-[24.5px]', className)}
+      className={classNames('block h-[24.5px] w-[22.651px]', className)}
       alt='logo'
     />
   )

web/app/components/base/modal/index.tsx

           <div className="flex min-h-full items-center justify-center p-4 text-center">
             <TransitionChild>
               <DialogPanel className={classNames(
-                'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
+                'w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
-                'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95',
-                'data-[enter]:opacity-100 data-[enter]:scale-100',
-                'data-[leave]:opacity-0 data-[enter]:scale-95',
+                'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
+                'data-[enter]:scale-100 data-[enter]:opacity-100',
+                'data-[enter]:scale-95 data-[leave]:opacity-0',
                 className,
               )}>
                 {title && <DialogTitle

web/app/components/base/premium-badge/index.tsx

       {children}
       <Highlight
         className={classNames(
-          'absolute top-0 opacity-50 right-1/2 translate-x-[20%] transition-all duration-100 ease-out hover:opacity-80 hover:translate-x-[30%]',
+          'absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80',
           size === 's' ? 'h-[18px] w-12' : 'h-6 w-12',
         )}
       />

web/app/components/base/segmented-control/index.tsx

 
   return (
     <div className={classNames(
-      'flex items-center rounded-lg bg-components-segmented-control-bg-normal gap-x-[1px] p-0.5',
+      'flex items-center gap-x-[1px] rounded-lg bg-components-segmented-control-bg-normal p-0.5',
       className,
     )}>
       {options.map((option, index) => {
             type='button'
             key={String(option.value)}
             className={classNames(
-              'flex items-center justify-center relative px-2 py-1 rounded-lg gap-x-0.5 group border-0.5 border-transparent',
+              'border-0.5 group relative flex items-center justify-center gap-x-0.5 rounded-lg border-transparent px-2 py-1',
               isSelected
                 ? 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3'
                 : 'hover:bg-state-base-hover',
           >
             <span className='flex h-5 w-5 items-center justify-center'>
               <Icon className={classNames(
-                'w-4 h-4 text-text-tertiary',
+                'h-4 w-4 text-text-tertiary',
                 isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
               )} />
             </span>
             <span className={classNames(
-              'p-0.5 text-text-tertiary system-sm-medium',
+              'system-sm-medium p-0.5 text-text-tertiary',
               isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
             )}>
               {option.text}

web/app/components/base/skeleton/index.tsx

 export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
-    <div className={classNames('h-2 rounded-sm opacity-20 bg-text-quaternary my-1', className)} {...rest}>
+    <div className={classNames('my-1 h-2 rounded-sm bg-text-quaternary opacity-20', className)} {...rest}>
       {children}
     </div>
   )
 export const SkeletonPoint: FC<SkeletonProps> = (props) => {
   const { className, ...rest } = props
   return (
-    <div className={classNames('text-text-quaternary text-xs font-medium', className)} {...rest}>·</div>
+    <div className={classNames('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div>
   )
 }
 /** Usage

web/app/components/base/switch/index.tsx

       className={classNames(
         wrapStyle[size],
         enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
-        'relative inline-flex  flex-shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
-        disabled ? '!opacity-50 !cursor-not-allowed' : '',
+        'relative inline-flex  shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
+        disabled ? '!cursor-not-allowed !opacity-50' : '',
         size === 'xs' && 'rounded-sm',
         className,
       )}
           circleStyle[size],
           enabled ? translateLeft[size] : 'translate-x-0',
           size === 'xs' && 'rounded-[1px]',
-          'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
+          'pointer-events-none inline-block rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
         )}
       />
     </OriginalSwitch>

web/app/components/base/tag/index.tsx

 export default function Tag({ children, color = 'green', className = '', bordered = false, hideBg = false }: ITagProps) {
   return (
     <div className={
-      classNames('px-2.5 py-px text-xs leading-5 rounded-md inline-flex items-center flex-shrink-0',
+      classNames('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs leading-5',
         COLOR_MAP[color] ? `${COLOR_MAP[color].text} ${COLOR_MAP[color].bg}` : '',
         bordered ? 'border-[1px]' : '',
-        hideBg ? 'bg-opacity-0' : '',
+        hideBg ? 'bg-transparent' : '',
         className)} >
       {children}
     </div>

web/app/components/billing/pricing/index.tsx

                   {
                     value: 'cloud',
                     text: <div className={
-                      classNames('inline-flex items-center system-md-semibold-uppercase text-text-secondary',
+                      classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary',
                         currentPlan === 'cloud' && 'text-text-accent-light-mode-only')} >
                       <RiCloudFill className='mr-2 size-4' />{t('billing.plansCommon.cloud')}</div>,
                   },
                   {
                     value: 'self',
                     text: <div className={
-                      classNames('inline-flex items-center system-md-semibold-uppercase text-text-secondary',
+                      classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary',
                         currentPlan === 'self' && 'text-text-accent-light-mode-only')}>
                       <RiTerminalBoxFill className='mr-2 size-4' />{t('billing.plansCommon.self')}</div>,
                   }]}

web/app/components/billing/pricing/self-hosted-plan-item.tsx

     priceTip: 'text-text-primary-on-surface',
     description: 'text-text-primary-on-surface',
     bg: 'border-effects-highlight bg-[#155AEF] text-text-primary-on-surface',
-    btnStyle: 'bg-white bg-opacity-96 hover:opacity-85 border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs',
+    btnStyle: 'bg-white/96 hover:opacity-85 border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs',
     values: 'text-text-primary-on-surface',
     tooltipIconColor: 'text-text-primary-on-surface',
   },

web/app/components/datasets/create/step-two/option-card.tsx

 export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props
   return <div className={classNames(
-    'flex h-full overflow-hidden rounded-t-xl relative',
+    'relative flex h-full overflow-hidden rounded-t-xl',
     isActive && activeClassName,
     !disabled && 'cursor-pointer',
   )}>
       </div>
     </div>
     <TriangleArrow
-      className={classNames('absolute left-4 -bottom-1.5 text-transparent', isActive && 'text-components-panel-bg')}
+      className={classNames('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
     />
     <div className='flex-1 space-y-0.5 py-3 pr-4'>
       <div className='system-md-semibold text-text-secondary'>{title}</div>
       (isActive && !noHighlight)
         ? 'border-[1.5px] border-components-option-card-option-selected-border'
         : 'border border-components-option-card-option-border',
-      disabled && 'opacity-50 pointer-events-none',
+      disabled && 'pointer-events-none opacity-50',
       className,
     )}
     style={{

web/app/components/datasets/create/stepper/step.tsx

   const label = isActive ? `STEP ${index + 1}` : `${index + 1}`
   return <div className='flex items-center gap-2'>
     <div className={classNames(
-      'h-5 py-1 rounded-3xl flex-col justify-center items-center gap-2 inline-flex',
+      'inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1',
       isActive
-        ? 'px-2 bg-state-accent-solid'
+        ? 'bg-state-accent-solid px-2'
         : !isDisabled
           ? 'w-5 border border-text-quaternary'
           : 'w-5 border border-divider-deep',
     )}>
       <div className={classNames(
-        'text-center system-2xs-semibold-uppercase',
+        'system-2xs-semibold-uppercase text-center',
         isActive
           ? 'text-text-primary-on-surface'
           : !isDisabled
     </div>
     <div className={classNames('system-xs-medium-uppercase',
       isActive
-        ? 'text-text-accent system-xs-semibold-uppercase'
+        ? 'system-xs-semibold-uppercase text-text-accent'
         : !isDisabled
           ? 'text-text-tertiary'
           : 'text-text-quaternary',

web/app/components/datasets/create/top-bar/index.tsx

     return datasetId ? `/datasets/${datasetId}/documents` : '/datasets'
   }, [datasetId])
 
-  return <div className={classNames('flex shrink-0 h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
+  return <div className={classNames('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
     <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
       <div className='p-2'>
         <RiArrowLeftLine className='size-4 text-text-primary' />

web/app/components/datasets/documents/detail/completed/child-segment-list.tsx

       const count = text === '--' ? 0 : total
       return `${count} ${t('datasetDocuments.segment.searchResults', { count })}`
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFullDocMode, total, childChunks.length, inputValue])
 
   return (
     <div className={classNames(
       'flex flex-col',
       contentOpacity,
-      isParagraphMode ? 'pt-1 pb-2' : 'px-3 grow',
+      isParagraphMode ? 'pb-2 pt-1' : 'grow px-3',
       (isFullDocMode && isLoading) && 'overflow-y-hidden',
     )}>
       {isFullDocMode ? <Divider type='horizontal' className='my-1 h-[1px] bg-divider-subtle' /> : null}
-      <div className={classNames('flex items-center justify-between', isFullDocMode ? 'pt-2 pb-3 sticky -top-2 left-0 bg-background-default' : '')}>
+      <div className={classNames('flex items-center justify-between', isFullDocMode ? 'sticky -top-2 left-0 bg-background-default pb-3 pt-2' : '')}>
         <div className={classNames(
-          'h-7 flex items-center pl-1 pr-3 rounded-lg',
+          'flex h-7 items-center rounded-lg pl-1 pr-3',
           isParagraphMode && 'cursor-pointer',
           (isParagraphMode && collapsed) && 'bg-dataset-child-chunk-expand-btn-bg',
           isFullDocMode && 'pl-0',
               : null
           }
           <span className='system-sm-semibold-uppercase text-text-secondary'>{totalText}</span>
-          <span className={classNames('text-text-quaternary text-xs font-medium pl-1.5', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span>
+          <span className={classNames('pl-1.5 text-xs font-medium text-text-quaternary', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span>
           <button
             type='button'
             className={classNames(
-              'px-1.5 py-1 text-components-button-secondary-accent-text system-xs-semibold-uppercase',
+              'system-xs-semibold-uppercase px-1.5 py-1 text-components-button-secondary-accent-text',
               isParagraphMode ? 'hidden group-hover/card:inline-block' : '',
               (isFullDocMode && isLoading) ? 'text-components-button-secondary-accent-text-disabled' : '',
             )}
       </div>
       {isLoading ? <FullDocListSkeleton /> : null}
       {((isFullDocMode && !isLoading) || !collapsed)
-        ? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'grow mb-6' : 'items-center')}>
+        ? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'mb-6 grow' : 'items-center')}>
           {isParagraphMode && (
             <div className='self-stretch'>
               <Divider type='vertical' className='mx-[7px] w-[2px] bg-text-accent-secondary' />
             </div>
           )}
           {childChunks.length > 0
-            ? <FormattedText className={classNames('w-full !leading-6 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
+            ? <FormattedText className={classNames('flex w-full flex-col !leading-6', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
               {childChunks.map((childChunk) => {
                 const edited = childChunk.updated_at !== childChunk.created_at
                 const focused = currChildChunk?.childChunkInfo?.id === childChunk.id

web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx

   return (
     <textarea
       className={classNames(
-        'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full overflow-y-auto',
+        'inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
         className,
       )}
       placeholder={placeholder}
     <textarea
       ref={textareaRef}
       className={classNames(
-        'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full',
+        'inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
         className,
       )}
       style={{

web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx

     <Drawer
       isOpen={isOpen}
       onClose={onClose}
-      panelClassName={classNames('!p-0 bg-components-panel-bg',
+      panelClassName={classNames('bg-components-panel-bg !p-0',
         fullScreen
-          ? '!max-w-full !w-full'
-          : 'mt-16 mr-2 mb-2 !max-w-[560px] !w-[560px] border-[0.5px] border-components-panel-border rounded-xl',
+          ? '!w-full !max-w-full'
+          : 'mb-2 mr-2 mt-16 !w-[560px] !max-w-[560px] rounded-xl border-[0.5px] border-components-panel-border',
       )}
       mask={false}
       unmount

web/app/components/datasets/documents/detail/completed/new-child-segment.tsx

   const wordCountText = useMemo(() => {
     const count = content.length
     return `${formatNumber(count)} ${t('datasetDocuments.segment.characters', { count })}`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [content.length])
 
   return (
     <div className={'flex h-full flex-col'}>
-      <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
+      <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.addChildChunk')}</div>
           <div className='flex items-center gap-x-2'>
           </div>
         </div>
       </div>
-      <div className={classNames('flex grow w-full', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'py-3 px-4')}>
-        <div className={classNames('break-all overflow-hidden whitespace-pre-line h-full', fullScreen ? 'w-1/2' : 'w-full')}>
+      <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
+        <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={ChunkingMode.parentChild}
             question={content}

web/app/components/datasets/documents/detail/embedding/index.tsx

         break
     }
     return value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sourceData])
 
   return <div className='py-3'>
       await sleep(2500)
       await startQueryStatus()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stopQueryStatus])
 
   useEffect(() => {
         {/* progress bar */}
         <div className={cn(
           'flex h-2 w-full items-center overflow-hidden rounded-md border border-components-progress-bar-border',
-          isEmbedding ? 'bg-components-progress-bar-bg bg-opacity-50' : 'bg-components-progress-bar-bg',
+          isEmbedding ? 'bg-components-progress-bar-bg/50' : 'bg-components-progress-bar-bg',
         )}>
           <div
             className={cn(

web/app/components/datasets/formatted-text/flavours/edit-slice.tsx

   return (
     <>
       <SliceContainer {...rest}
-        className={classNames('block mr-0', className)}
+        className={classNames('mr-0 block', className)}
         ref={(ref) => {
           refs.setReference(ref)
           if (ref)

web/app/components/datasets/formatted-text/flavours/shared.tsx

 ) => {
   const { className, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
-    'group align-bottom mr-1 select-none text-sm',
+    'group mr-1 select-none align-bottom text-sm',
     className,
   )} />
 }
   const { className, children, labelInnerClassName, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
     baseStyle,
-    'px-1 bg-state-base-hover-alt group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface uppercase text-text-tertiary',
+    'bg-state-base-hover-alt px-1 uppercase text-text-tertiary group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface',
     className,
   )}>
     <span className={classNames('text-nowrap', labelInnerClassName)}>
   const { className, children, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
     baseStyle,
-    'px-1 bg-state-base-hover group-hover:bg-state-accent-hover-alt group-hover:text-text-primary leading-7 whitespace-pre-line break-all',
+    'whitespace-pre-line break-all bg-state-base-hover px-1 leading-7 group-hover:bg-state-accent-hover-alt group-hover:text-text-primary',
     className,
   )}>
     {children}
   const { className, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
     baseStyle,
-    'bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]',
+    'bg-state-base-active px-[1px] text-sm group-hover:bg-state-accent-solid',
     className,
   )}>
     {/* use a zero-width space to make the hover area bigger */}

web/app/components/datasets/preview/container.tsx

       {...rest}
       ref={ref}
       className={classNames(
-        'flex flex-col w-full h-full overflow-y-auto rounded-l-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
+        'flex h-full w-full flex-col overflow-y-auto rounded-l-xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
       )}
     >
       <header className='border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4'>
         {header}
       </header>
-      <main className={classNames('py-5 px-6 w-full h-full', mainClassName)}>
+      <main className={classNames('h-full w-full px-6 py-5', mainClassName)}>
         {children}
       </main>
     </div>

web/app/components/datasets/settings/index-method-radio/index.tsx

   ]
 
   return (
-    <div className={classNames('flex justify-between w-full gap-2')}>
+    <div className={classNames('flex w-full justify-between gap-2')}>
       {
         options.map((option) => {
           const isParentChild = docForm === ChunkingMode.parentChild

web/app/components/develop/code.tsx

     <button
       type="button"
       className={classNames(
-        'group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
+        'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
         copied
           ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
-          : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5',
+          : 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5',
       )}
       onClick={() => {
         writeTextToClipboard(code).then(() => {

web/app/components/header/account-setting/Integrations-page/index.tsx

         {
           integrates.map(integrate => (
             <div key={integrate.provider} className='mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2'>
-              <div className={classNames('w-8 h-8 mr-3 bg-white rounded-lg border border-gray-100', s[`${integrate.provider}-icon`])} />
+              <div className={classNames('mr-3 h-8 w-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
               <div className='grow'>
                 <div className='text-sm font-medium leading-[21px] text-gray-800'>{integrateMap[integrate.provider].name}</div>
                 <div className='text-xs font-normal leading-[18px] text-gray-500'>{integrateMap[integrate.provider].description}</div>

web/app/components/header/account-setting/collapse/index.tsx

   const toggle = () => setOpen(!open)
 
   return (
-    <div className={classNames('bg-background-section-burn rounded-xl overflow-hidden', wrapperClassName)}>
+    <div className={classNames('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}>
       <div className='flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-medium leading-[18px] text-text-secondary' onClick={toggle}>
         {title}
         {

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

 }) => {
   return (
     <div className={classNames(
-      'flex items-center px-1 h-[18px] rounded-[5px] border border-divider-deep system-2xs-medium-uppercase text-text-tertiary cursor-default',
+      'system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary',
       className,
     )}>
       {children}

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx

     <>
       <div
         className={classNames(
-          'min-h-16 bg-components-panel-bg border rounded-xl transition-colors',
+          'min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
           (withSwitch || !draftConfig.enabled) ? 'border-components-panel-border' : 'border-util-colors-blue-blue-600',
           (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer',
           className,
         <GridMask canvasClassName='!rounded-xl'>
           <div className='mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-components-panel-border px-4 shadow-md'>
             <div
-              className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)}
+              className={classNames('text-gradient text-sm font-semibold leading-tight', s.textGradient)}
             >
               {t('common.modelProvider.upgradeForLoadBalancing')}
             </div>

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx

             <div className='py-2'>
               <div
                 className={classNames(
-                  'min-h-16 bg-components-panel-bg border rounded-xl transition-colors',
-                  draftConfig.enabled ? 'border-components-panel-border cursor-pointer' : 'border-util-colors-blue-blue-600 cursor-default',
+                  'min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
+                  draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600',
                 )}
                 onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
               >

web/app/components/header/app-back/index.tsx

   return (
     <div
       className={classNames(`
-        flex items-center h-7 pl-2.5 pr-2
-        text-[#1C64F2] font-semibold cursor-pointer
-        rounded-[10px]
+        flex h-7 cursor-pointer items-center rounded-[10px]
+        pl-2.5 pr-2 font-semibold
+        text-[#1C64F2]
         ${curApp && 'hover:bg-[#EBF5FF]'}
       `)}
       onMouseEnter={() => setHovered(true)}

web/app/components/header/indicator/index.tsx

 }: IndicatorProps) {
   return (
     <div className={classNames(
-      'w-2 h-2 border border-solid rounded-[3px]',
+      'h-2 w-2 rounded-[3px] border border-solid',
       BACKGROUND_MAP[color],
       BORDER_MAP[color],
       SHADOW_MAP[color],

web/app/components/workflow/header/undo-redo.tsx

         <div
           data-tooltip-id='workflow.undo'
           className={
-            classNames('flex items-center px-1.5 w-8 h-8 rounded-md system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer select-none',
+            classNames('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
               (nodesReadOnly || buttonsDisabled.undo)
-              && 'hover:bg-transparent text-text-disabled hover:text-text-disabled cursor-not-allowed')}
+              && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
           onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
         >
           <RiArrowGoBackLine className='h-4 w-4' />
         <div
           data-tooltip-id='workflow.redo'
           className={
-            classNames('flex items-center px-1.5 w-8 h-8 rounded-md system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer select-none',
+            classNames('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
               (nodesReadOnly || buttonsDisabled.redo)
-              && 'hover:bg-transparent text-text-disabled hover:text-text-disabled cursor-not-allowed',
+              && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
             )}
           onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}
         >

web/app/components/workflow/header/view-workflow-history.tsx

           >
             <div
               className={
-                classNames('flex items-center justify-center w-8 h-8 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
+                classNames('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                   open && 'bg-state-accent-active text-text-accent',
                   nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
                 )}

web/app/components/workflow/nodes/_base/components/group.tsx

 
 export const GroupLabel: FC<GroupLabelProps> = (props) => {
   const { children, className, ...rest } = props
-  return <div {...rest} className={classNames('mb-1 system-2xs-medium-uppercase text-text-tertiary', className)}>
+  return <div {...rest} className={classNames('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
     {children}
   </div>
 }

web/app/components/workflow/nodes/assigner/components/operation-selector.tsx

       >
         <div
           className={classNames(
-            'flex items-center px-2 py-1 gap-0.5 rounded-lg bg-components-input-bg-normal',
+            'flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1',
             disabled ? 'cursor-not-allowed !bg-components-input-bg-disabled' : 'cursor-pointer hover:bg-state-base-hover-alt',
             open && 'bg-state-base-hover-alt',
             className,
                   <div
                     key={item.value}
                     className={classNames(
-                      'flex items-center px-2 py-1 gap-1 self-stretch rounded-lg',
+                      'flex items-center gap-1 self-stretch rounded-lg px-2 py-1',
                       'cursor-pointer hover:bg-state-base-hover',
                     )}
                     onClick={() => {

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx

 }) => {
   return (
     <div className={classNames(
-      'flex gap-x-1 mt-1 p-2 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg',
+      'mt-1 flex gap-x-1 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg p-2',
       className,
     )}>
       <RiErrorWarningFill className='h-4 w-4 shrink-0 text-text-destructive' />