chore(web): new lint setup (#30020)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

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

@@ -1,28 +1,28 @@
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useContext } from 'use-context-selector'
-import { useTranslation } from 'react-i18next'
+import type { CommonResponse } from '@/models/common'
+import type { IndexingStatusResponse, ProcessRuleResponse } from '@/models/datasets'
 import { RiLoader2Line, RiPauseCircleLine, RiPlayCircleLine } from '@remixicon/react'
 import Image from 'next/image'
-import { FieldInfo } from '../metadata'
-import { useDocumentContext } from '../context'
-import { IndexingType } from '../../../create/step-two'
-import { indexMethodIcon, retrievalIcon } from '../../../create/icons'
-import EmbeddingSkeleton from './skeleton'
-import { RETRIEVE_METHOD } from '@/types/app'
-import { cn } from '@/utils/classnames'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
 import Divider from '@/app/components/base/divider'
 import { ToastContext } from '@/app/components/base/toast'
-import type { IndexingStatusResponse } from '@/models/datasets'
-import { ProcessMode, type ProcessRuleResponse } from '@/models/datasets'
-import type { CommonResponse } from '@/models/common'
-import { asyncRunSafe, sleep } from '@/utils'
+import { ProcessMode } from '@/models/datasets'
 import {
   fetchIndexingStatus as doFetchIndexingStatus,
   pauseDocIndexing,
   resumeDocIndexing,
 } from '@/service/datasets'
 import { useProcessRule } from '@/service/knowledge/use-dataset'
+import { RETRIEVE_METHOD } from '@/types/app'
+import { asyncRunSafe, sleep } from '@/utils'
+import { cn } from '@/utils/classnames'
+import { indexMethodIcon, retrievalIcon } from '../../../create/icons'
+import { IndexingType } from '../../../create/step-two'
+import { useDocumentContext } from '../context'
+import { FieldInfo } from '../metadata'
+import EmbeddingSkeleton from './skeleton'
 
 type IEmbeddingDetailProps = {
   datasetId?: string
@@ -95,56 +95,60 @@ const RuleDetail: FC<IRuleDetailProps> = React.memo(({
         value = !sourceData?.mode
           ? value
           : sourceData?.rules?.pre_processing_rules?.filter(rule =>
-            rule.enabled).map(rule => getRuleName(rule.id)).join(',')
+              rule.enabled).map(rule => getRuleName(rule.id)).join(',')
         break
     }
     return value
   }, [sourceData])
 
-  return <div className='py-3'>
-    <div className='flex flex-col gap-y-1'>
-      {Object.keys(segmentationRuleMap).map((field) => {
-        return <FieldInfo
-          key={field}
-          label={segmentationRuleMap[field as keyof typeof segmentationRuleMap]}
-          displayedValue={String(getValue(field))}
-        />
-      })}
+  return (
+    <div className="py-3">
+      <div className="flex flex-col gap-y-1">
+        {Object.keys(segmentationRuleMap).map((field) => {
+          return (
+            <FieldInfo
+              key={field}
+              label={segmentationRuleMap[field as keyof typeof segmentationRuleMap]}
+              displayedValue={String(getValue(field))}
+            />
+          )
+        })}
+      </div>
+      <Divider type="horizontal" className="bg-divider-subtle" />
+      <FieldInfo
+        label={t('datasetCreation.stepTwo.indexMode')}
+        displayedValue={t(`datasetCreation.stepTwo.${indexingType === IndexingType.ECONOMICAL ? 'economical' : 'qualified'}`) as string}
+        valueIcon={(
+          <Image
+            className="size-4"
+            src={
+              indexingType === IndexingType.ECONOMICAL
+                ? indexMethodIcon.economical
+                : indexMethodIcon.high_quality
+            }
+            alt=""
+          />
+        )}
+      />
+      <FieldInfo
+        label={t('datasetSettings.form.retrievalSetting.title')}
+        displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'keyword_search' : retrievalMethod}.title`) as string}
+        valueIcon={(
+          <Image
+            className="size-4"
+            src={
+              retrievalMethod === RETRIEVE_METHOD.fullText
+                ? retrievalIcon.fullText
+                : retrievalMethod === RETRIEVE_METHOD.hybrid
+                  ? retrievalIcon.hybrid
+                  : retrievalIcon.vector
+            }
+            alt=""
+          />
+        )}
+      />
     </div>
-    <Divider type='horizontal' className='bg-divider-subtle' />
-    <FieldInfo
-      label={t('datasetCreation.stepTwo.indexMode')}
-      displayedValue={t(`datasetCreation.stepTwo.${indexingType === IndexingType.ECONOMICAL ? 'economical' : 'qualified'}`) as string}
-      valueIcon={
-        <Image
-          className='size-4'
-          src={
-            indexingType === IndexingType.ECONOMICAL
-              ? indexMethodIcon.economical
-              : indexMethodIcon.high_quality
-          }
-          alt=''
-        />
-      }
-    />
-    <FieldInfo
-      label={t('datasetSettings.form.retrievalSetting.title')}
-      displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'keyword_search' : retrievalMethod}.title`) as string}
-      valueIcon={
-        <Image
-          className='size-4'
-          src={
-            retrievalMethod === RETRIEVE_METHOD.fullText
-              ? retrievalIcon.fullText
-              : retrievalMethod === RETRIEVE_METHOD.hybrid
-                ? retrievalIcon.hybrid
-                : retrievalIcon.vector
-          }
-          alt=''
-        />
-      }
-    />
-  </div>
+  )
 })
 
 RuleDetail.displayName = 'RuleDetail'
@@ -240,10 +244,10 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
 
   return (
     <>
-      <div className='flex flex-col gap-y-2 px-16 py-12'>
-        <div className='flex h-6 items-center gap-x-1'>
-          {isEmbedding && <RiLoader2Line className='h-4 w-4 animate-spin text-text-secondary' />}
-          <span className='system-md-semibold-uppercase grow text-text-secondary'>
+      <div className="flex flex-col gap-y-2 px-16 py-12">
+        <div className="flex h-6 items-center gap-x-1">
+          {isEmbedding && <RiLoader2Line className="h-4 w-4 animate-spin text-text-secondary" />}
+          <span className="system-md-semibold-uppercase grow text-text-secondary">
             {isEmbedding && t('datasetDocuments.embedding.processing')}
             {isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
             {isEmbeddingPaused && t('datasetDocuments.embedding.paused')}
@@ -251,26 +255,26 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
           </span>
           {isEmbedding && (
             <button
-              type='button'
+              type="button"
               className={`flex items-center gap-x-1 rounded-md border-[0.5px]
               border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]`}
               onClick={handleSwitch}
             >
-              <RiPauseCircleLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
-              <span className='system-xs-medium pr-[3px] text-components-button-secondary-text'>
+              <RiPauseCircleLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+              <span className="system-xs-medium pr-[3px] text-components-button-secondary-text">
                 {t('datasetDocuments.embedding.pause')}
               </span>
             </button>
           )}
           {isEmbeddingPaused && (
             <button
-              type='button'
+              type="button"
               className={`flex items-center gap-x-1 rounded-md border-[0.5px]
               border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]`}
               onClick={handleSwitch}
             >
-              <RiPlayCircleLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
-              <span className='system-xs-medium pr-[3px] text-components-button-secondary-text'>
+              <RiPlayCircleLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+              <span className="system-xs-medium pr-[3px] text-components-button-secondary-text">
                 {t('datasetDocuments.embedding.resume')}
               </span>
             </button>
@@ -280,7 +284,8 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
         <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/50' : 'bg-components-progress-bar-bg',
-        )}>
+        )}
+        >
           <div
             className={cn(
               'h-full',
@@ -290,8 +295,8 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
             style={{ width: `${percent}%` }}
           />
         </div>
-        <div className={'flex w-full items-center'}>
-          <span className='system-xs-medium text-text-secondary'>
+        <div className="flex w-full items-center">
+          <span className="system-xs-medium text-text-secondary">
             {`${t('datasetDocuments.embedding.segments')} ${indexingStatusDetail?.completed_segments || '--'}/${indexingStatusDetail?.total_segments || '--'} · ${percent}%`}
           </span>
         </div>

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

@@ -1,42 +1,42 @@
 import React from 'react'
+import Divider from '@/app/components/base/divider'
 import {
   SkeletonContainer,
   SkeletonPoint,
   SkeletonRectangle,
   SkeletonRow,
 } from '@/app/components/base/skeleton'
-import Divider from '@/app/components/base/divider'
 
 const CardSkelton = React.memo(() => {
   return (
-    <SkeletonContainer className='gap-y-0 p-1 pb-2'>
-      <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
-        <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
-          <SkeletonPoint className='opacity-20' />
-          <SkeletonRectangle className='w-24 bg-text-quaternary' />
-          <SkeletonPoint className='opacity-20' />
-          <SkeletonRectangle className='w-24 bg-text-quaternary' />
-          <SkeletonRow className='grow justify-end gap-1'>
-            <SkeletonRectangle className='w-12 bg-text-quaternary' />
-            <SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
+    <SkeletonContainer className="gap-y-0 p-1 pb-2">
+      <SkeletonContainer className="gap-y-0.5 px-2 pt-1.5">
+        <SkeletonRow className="py-0.5">
+          <SkeletonRectangle className="w-[72px] bg-text-quaternary" />
+          <SkeletonPoint className="opacity-20" />
+          <SkeletonRectangle className="w-24 bg-text-quaternary" />
+          <SkeletonPoint className="opacity-20" />
+          <SkeletonRectangle className="w-24 bg-text-quaternary" />
+          <SkeletonRow className="grow justify-end gap-1">
+            <SkeletonRectangle className="w-12 bg-text-quaternary" />
+            <SkeletonRectangle className="mx-1 w-2 bg-text-quaternary" />
           </SkeletonRow>
         </SkeletonRow>
-        <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-full bg-text-quaternary' />
+        <SkeletonRow className="py-0.5">
+          <SkeletonRectangle className="w-full bg-text-quaternary" />
         </SkeletonRow>
-        <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-full bg-text-quaternary' />
+        <SkeletonRow className="py-0.5">
+          <SkeletonRectangle className="w-full bg-text-quaternary" />
         </SkeletonRow>
-        <SkeletonRow className='py-0.5'>
-          <SkeletonRectangle className='w-2/3 bg-text-quaternary' />
+        <SkeletonRow className="py-0.5">
+          <SkeletonRectangle className="w-2/3 bg-text-quaternary" />
         </SkeletonRow>
       </SkeletonContainer>
-      <SkeletonContainer className='px-2 py-1.5'>
+      <SkeletonContainer className="px-2 py-1.5">
         <SkeletonRow>
-          <SkeletonRectangle className='w-14 bg-text-quaternary' />
-          <SkeletonRectangle className='w-[88px] bg-text-quaternary' />
-          <SkeletonRectangle className='w-14 bg-text-quaternary' />
+          <SkeletonRectangle className="w-14 bg-text-quaternary" />
+          <SkeletonRectangle className="w-[88px] bg-text-quaternary" />
+          <SkeletonRectangle className="w-14 bg-text-quaternary" />
         </SkeletonRow>
       </SkeletonContainer>
     </SkeletonContainer>
@@ -47,15 +47,17 @@ CardSkelton.displayName = 'CardSkelton'
 
 const EmbeddingSkeleton = () => {
   return (
-    <div className='relative z-10 flex grow flex-col overflow-y-hidden'>
-      <div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
+    <div className="relative z-10 flex grow flex-col overflow-y-hidden">
+      <div className="absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg" />
       {Array.from({ length: 5 }).map((_, index) => {
         return (
-          <div key={index} className='w-full px-11'>
+          <div key={index} className="w-full px-11">
             <CardSkelton />
-            {index !== 9 && <div className='w-full px-3'>
-              <Divider type='horizontal' className='my-1 bg-divider-subtle' />
-            </div>}
+            {index !== 9 && (
+              <div className="w-full px-3">
+                <Divider type="horizontal" className="my-1 bg-divider-subtle" />
+              </div>
+            )}
           </div>
         )
       })}