fix: tiny css problem

web/app/components/base/file-uploader/file-type-icon.tsx

@@ -82,8 +82,8 @@ const FileTypeIcon = ({
   size = 'sm',
   className,
 }: FileTypeIconProps) => {
-  const Icon = FILE_TYPE_ICON_MAP[type]?.component || FileAppearanceTypeEnum.custom
-  const color = FILE_TYPE_ICON_MAP[type]?.color || FILE_TYPE_ICON_MAP.custom.color
+  const Icon = FILE_TYPE_ICON_MAP[type]?.component || FileAppearanceTypeEnum.document
+  const color = FILE_TYPE_ICON_MAP[type]?.color || FILE_TYPE_ICON_MAP[FileAppearanceTypeEnum.document].color
 
   return <Icon className={cn('shrink-0', SizeMap[size], color, className)} />
 }

web/app/components/datasets/hit-testing/assets/test-data.ts

@@ -54,7 +54,7 @@ export const generalResultData: HitTesting[] = [
         content: 'It is quite natural for ',
       },
     ],
-    score: 0.8771945,
+    score: 0.99,
     tsne_position: null,
   },
   {
@@ -99,7 +99,7 @@ export const generalResultData: HitTesting[] = [
       },
     },
     child_chunks: null,
-    score: 0.8642928,
+    score: 1,
     tsne_position: null,
   },
   {
@@ -144,7 +144,7 @@ export const generalResultData: HitTesting[] = [
       },
     },
     child_chunks: null,
-    score: 0.80618876,
+    score: 0.2,
     tsne_position: null,
   },
 ]

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' : ''}
     >
-      <div className='inline-flex'>
-        <div className='bg-state-accent-solid system-2xs-semibold-uppercase px-1'>C-{id}</div>
-        <Score value={score} />
+      <div className='inline-flex items-center relative top-[-3px]'>
+        <div className='flex items-center h-[24px] bg-state-accent-solid  system-2xs-semibold-uppercase text-text-primary-on-surface px-1'>C-{id}</div>
+        <Score value={score} besideChunkName />
       </div>
-      <SliceContent className='bg-state-accent-hover group-hover:bg-state-accent-hover'>{content}</SliceContent>
+      <SliceContent className='bg-state-accent-hover group-hover:bg-state-accent-hover text-text-secondary font-normal'>{content}</SliceContent>
     </div>
   )
 }

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

@@ -28,8 +28,8 @@ const ChunkDetailModal: FC<Props> = ({
   const { segment, score, child_chunks } = payload
   const { position, content, keywords, document } = segment
   const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0)
-  const extension = document.name.split('.').slice(0, -1)[0] as FileAppearanceTypeEnum
-  const maxHeighClassName = 'max-h-[752px] overflow-y-auto'
+  const extension = document.name.split('.').slice(-1)[0] as FileAppearanceTypeEnum
+  const maxHeighClassName = 'max-h-[min(752px,_80vh)] overflow-y-auto'
   return (
     <Modal
       title={t(`${i18nPrefix}.chunkDetail`)}
@@ -38,7 +38,7 @@ const ChunkDetailModal: FC<Props> = ({
       onClose={onHide}
       className={cn(isParentChildRetrieval ? '!min-w-[1200px]' : '!min-w-[720px]')}
     >
-      <div className='flex pb-6'>
+      <div className='mt-4 flex pb-6'>
         <div>
           {/* Meta info */}
           <div className='flex justify-between items-center'>
@@ -49,7 +49,7 @@ const ChunkDetailModal: FC<Props> = ({
                 className={cn('w-fit group-hover:opacity-100')}
               />
               <Dot />
-              <div className='flex items-center space-x-1'>
+              <div className='grow flex 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>
               </div>
@@ -62,7 +62,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='flex flex-wrap'>
+              <div className='mt-1 flex flex-wrap'>
                 {keywords.map(keyword => (
                   <Tag key={keyword} text={keyword} className='mr-2' />
                 ))}

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

@@ -27,7 +27,7 @@ const ResultItem: FC<Props> = ({
   const { segment, score, child_chunks } = payload
   const { position, word_count, content, keywords, document } = segment
   const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0)
-  const extension = document.name.split('.').slice(0, -1)[0] as FileAppearanceTypeEnum
+  const extension = document.name.split('.').slice(-1)[0] as FileAppearanceTypeEnum
   const [isFold, {
     toggle: toggleFold,
   }] = useBoolean(false)
@@ -61,7 +61,7 @@ const ResultItem: FC<Props> = ({
           <div className='mt-1'>
             <div className='flex items-center space-x-0.5 text-text-secondary' onClick={toggleFold}>
               <Icon className={cn('w-4 h-4', isFold && 'opacity-50')} />
-              <div>{t(`${i18nPrefix}.dataset.hitChunks`, { num: child_chunks.length })}</div>
+              <div>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
             </div>
             <div className='space-y-2'>
               {child_chunks.map(item => (
@@ -73,7 +73,7 @@ const ResultItem: FC<Props> = ({
           </div>
         )}
         {!isParentChildRetrieval && keywords && keywords.length > 0 && (
-          <div className='flex flex-wrap'>
+          <div className='mt-2 flex flex-wrap'>
             {keywords.map(keyword => (
               <Tag key={keyword} text={keyword} className='mr-2' />
             ))}
@@ -82,7 +82,7 @@ const ResultItem: FC<Props> = ({
       </div>
       {/* Foot */}
       <div className='mt-3 flex justify-between items-center h-10 pl-3 pr-2 border-t border-divider-subtle'>
-        <div className='flex items-center space-x-1'>
+        <div className='grow flex 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>
         </div>

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

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