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/datasets/hit-testing/components/child-chunks-item.tsx

@@ -19,11 +19,11 @@ const ChildChunks: FC<Props> = ({
     <div
       className={!isShowAll ? 'line-clamp-2 break-all' : ''}
     >
-      <div className='inline-flex items-center relative top-[-2px]'>
-        <div className='flex items-center h-[20.5px] bg-state-accent-solid  system-2xs-semibold-uppercase text-text-primary-on-surface px-1'>C-{position}</div>
+      <div className='relative top-[-2px] inline-flex items-center'>
+        <div className='system-2xs-semibold-uppercase flex h-[20.5px] items-center  bg-state-accent-solid px-1 text-text-primary-on-surface'>C-{position}</div>
         <Score value={score} besideChunkName />
       </div>
-      <SliceContent className='py-0.5 bg-state-accent-hover group-hover:bg-state-accent-hover text-sm text-text-secondary font-normal'>{content}</SliceContent>
+      <SliceContent className='bg-state-accent-hover py-0.5 text-sm font-normal text-text-secondary group-hover:bg-state-accent-hover'>{content}</SliceContent>
     </div>
   )
 }

web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx

@@ -42,17 +42,17 @@ const ChunkDetailModal: FC<Props> = ({
       <div className='mt-4 flex'>
         <div className={cn('flex-1', isParentChildRetrieval && 'pr-6')}>
           {/* Meta info */}
-          <div className='flex justify-between items-center'>
-            <div className='grow flex items-center space-x-2'>
+          <div className='flex items-center justify-between'>
+            <div className='flex grow items-center space-x-2'>
               <SegmentIndexTag
                 labelPrefix={`${isParentChildRetrieval ? 'Parent-' : ''}Chunk`}
                 positionId={position}
                 className={cn('w-fit group-hover:opacity-100')}
               />
               <Dot />
-              <div className='grow flex items-center space-x-1'>
+              <div className='flex grow items-center space-x-1'>
                 <FileIcon type={extension} size='sm' />
-                <span className='grow w-0 truncate text-text-secondary text-[13px] font-normal'>{document.name}</span>
+                <span className='w-0 grow truncate text-[13px] font-normal text-text-secondary'>{document.name}</span>
               </div>
             </div>
             <Score value={score} />
@@ -64,7 +64,7 @@ const ChunkDetailModal: FC<Props> = ({
           />
           {!isParentChildRetrieval && keywords && keywords.length > 0 && (
             <div className='mt-6'>
-              <div className='font-medium text-xs text-text-tertiary uppercase'>{t(`${i18nPrefix}.keyword`)}</div>
+              <div className='text-xs font-medium uppercase text-text-tertiary'>{t(`${i18nPrefix}.keyword`)}</div>
               <div className='mt-1 flex flex-wrap'>
                 {keywords.map(keyword => (
                   <Tag key={keyword} text={keyword} className='mr-2' />
@@ -75,7 +75,7 @@ const ChunkDetailModal: FC<Props> = ({
         </div>
 
         {isParentChildRetrieval && (
-          <div className='flex-1 pl-6 pb-6'>
+          <div className='flex-1 pb-6 pl-6'>
             <div className='system-xs-semibold-uppercase text-text-secondary'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
             <div className={cn('mt-1 space-y-2', heighClassName)}>
               {child_chunks.map(item => (

web/app/components/datasets/hit-testing/components/result-item-external.tsx

@@ -25,13 +25,13 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
   ] = useBoolean(false)
 
   return (
-    <div className={cn('pt-3 bg-chat-bubble-bg rounded-xl hover:shadow-lg cursor-pointer')} onClick={showDetailModal}>
+    <div className={cn('cursor-pointer rounded-xl bg-chat-bubble-bg pt-3 hover:shadow-lg')} onClick={showDetailModal}>
       {/* Meta info */}
       <ResultItemMeta className='px-3' labelPrefix={'Chunk'} positionId={positionId} wordCount={content.length} score={score} />
 
       {/* Main */}
       <div className='mt-1 px-3'>
-        <div className='line-clamp-2 body-md-regular break-all'>{content}</div>
+        <div className='body-md-regular line-clamp-2 break-all'>{content}</div>
       </div>
 
       {/* Foot */}
@@ -47,7 +47,7 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
         >
           <div className='mt-4 flex-1'>
             <ResultItemMeta labelPrefix={'Chunk'} positionId={positionId} wordCount={content.length} score={score} />
-            <div className={cn('mt-2 body-md-regular text-text-secondary break-all', 'h-[min(539px,_80vh)] overflow-y-auto')}>
+            <div className={cn('body-md-regular mt-2 break-all text-text-secondary', 'h-[min(539px,_80vh)] overflow-y-auto')}>
               {content}
             </div>
           </div>

web/app/components/datasets/hit-testing/components/result-item-footer.tsx

@@ -21,15 +21,15 @@ const ResultItemFooter: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className="mt-3 flex justify-between items-center h-10 pl-3 pr-2 border-t border-divider-subtle">
-      <div className="grow flex items-center space-x-1">
+    <div className="mt-3 flex h-10 items-center justify-between border-t border-divider-subtle pl-3 pr-2">
+      <div className="flex grow items-center space-x-1">
         <FileIcon type={docType} size="sm" />
-        <span className="grow w-0 truncate text-text-secondary text-[13px] font-normal">
+        <span className="w-0 grow truncate text-[13px] font-normal text-text-secondary">
           {docTitle}
         </span>
       </div>
       <div
-        className="flex items-center space-x-1 cursor-pointer text-text-tertiary"
+        className="flex cursor-pointer items-center space-x-1 text-text-tertiary"
         onClick={showDetailModal}
       >
         <div className="text-xs uppercase">{t(`${i18nPrefix}.open`)}</div>

web/app/components/datasets/hit-testing/components/result-item-meta.tsx

@@ -25,7 +25,7 @@ const ResultItemMeta: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn('flex justify-between items-center', className)}>
+    <div className={cn('flex items-center justify-between', className)}>
       <div className="flex items-center space-x-2">
         <SegmentIndexTag
           labelPrefix={labelPrefix}

web/app/components/datasets/hit-testing/components/result-item.tsx

@@ -41,7 +41,7 @@ const ResultItem: FC<Props> = ({
   }] = useBoolean(false)
 
   return (
-    <div className={cn('pt-3 bg-chat-bubble-bg rounded-xl hover:shadow-lg cursor-pointer')} onClick={showDetailModal}>
+    <div className={cn('cursor-pointer rounded-xl bg-chat-bubble-bg pt-3 hover:shadow-lg')} onClick={showDetailModal}>
       {/* Meta info */}
       <ResultItemMeta className='px-3' labelPrefix={`${isParentChildRetrieval ? 'Parent-' : ''}Chunk`} positionId={position} wordCount={word_count} score={score} />
 
@@ -55,19 +55,19 @@ const ResultItem: FC<Props> = ({
         {isParentChildRetrieval && (
           <div className='mt-1'>
             <div
-              className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-workflow-process-bg')}
+              className={cn('inline-flex h-6 cursor-pointer select-none items-center space-x-0.5 rounded-lg text-text-secondary', isFold && 'bg-workflow-process-bg pl-1')}
               onClick={(e) => {
                 e.stopPropagation()
                 toggleFold()
               }}
             >
-              <Icon className={cn('w-4 h-4', isFold && 'opacity-50')} />
+              <Icon className={cn('h-4 w-4', isFold && 'opacity-50')} />
               <div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
             </div>
             {!isFold && (
               <div className='space-y-2'>
                 {child_chunks.map(item => (
-                  <div key={item.id} className='ml-[7px] pl-[7px] border-l-[2px] border-text-accent-secondary'>
+                  <div key={item.id} className='ml-[7px] border-l-[2px] border-text-accent-secondary pl-[7px]'>
                     <ChildChunkItem payload={item} isShowAll={false} />
                   </div>
                 ))}

web/app/components/datasets/hit-testing/components/score.tsx

@@ -15,10 +15,10 @@ const Score: FC<Props> = ({
   if (!value || isNaN(value))
     return null
   return (
-    <div className={cn('relative items-center px-[5px] border border-components-progress-bar-border overflow-hidden',
-      besideChunkName ? 'border-l-0 h-[20.5px]' : 'h-[20px] rounded-md')}>
-      <div className={cn('absolute top-0 left-0 h-full bg-util-colors-blue-brand-blue-brand-100 border-r-[1.5px] border-components-progress-brand-progress', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
-      <div className={cn('relative flex items-center h-full space-x-0.5 text-util-colors-blue-brand-blue-brand-700')}>
+    <div className={cn('relative items-center overflow-hidden border border-components-progress-bar-border px-[5px]',
+      besideChunkName ? 'h-[20.5px] border-l-0' : 'h-[20px] rounded-md')}>
+      <div className={cn('absolute left-0 top-0 h-full border-r-[1.5px] border-components-progress-brand-progress bg-util-colors-blue-brand-blue-brand-100', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
+      <div className={cn('relative flex h-full items-center space-x-0.5 text-util-colors-blue-brand-blue-brand-700')}>
         <div className='system-2xs-medium-uppercase'>score</div>
         <div className='system-xs-semibold'>{value?.toFixed(2)}</div>
       </div>