From 361a007f4246847309c5deffddcde1efbc197af8 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 11 Dec 2024 14:42:14 +0800
Subject: [PATCH] feat: tags

---
 .../documents/detail/completed/common/tag.tsx        |  5 +++--
 .../hit-testing/components/chunk-detail-modal.tsx    | 12 ++++++++----
 .../datasets/hit-testing/components/result-item.tsx  |  8 +++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/completed/common/tag.tsx b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
index 9517d38f1e..c88bffc736 100644
--- a/web/app/components/datasets/documents/detail/completed/common/tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
+import cn from '@/utils/classnames'
 
-const Tag = ({ text }: { text: string }) => {
+const Tag = ({ text, className }: { text: string; className?: string }) => {
   return (
-    <div className='inline-flex items-center gap-x-0.5'>
+    <div className={cn('inline-flex items-center gap-x-0.5', className)}>
       <span className='text-text-quaternary text-xs font-medium'>#</span>
       <span className='text-text-tertiary text-xs'>{text}</span>
     </div>
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index d7c5264c03..51c6ec0343 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SegmentIndexTag } from '../../documents/detail/completed'
+import Dot from '../../documents/detail/completed/common/dot'
 import Score from './score'
 import ChildChunksItem from './child-chunks-item'
 import Modal from '@/app/components/base/modal'
@@ -10,6 +11,7 @@ import type { HitTesting } from '@/models/datasets'
 import FileIcon from '@/app/components/base/file-uploader/file-type-icon'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import cn from '@/utils/classnames'
+import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 
 type Props = {
   payload: HitTesting
@@ -44,7 +46,7 @@ const ChunkDetailModal: FC<Props> = ({
                 positionId={position}
                 className={cn('w-fit group-hover:opacity-100')}
               />
-              <div className='text-xs font-medium text-text-quaternary'>·</div>
+              <Dot />
               <div className='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>
@@ -58,9 +60,11 @@ const ChunkDetailModal: FC<Props> = ({
           {!isParentChildRetrieval && keywords && keywords.length > 0 && (
             <div>
               <div>{t('dataset.keywords')}</div>
-              {keywords.map(keyword => (
-                <div key={keyword} className='inline-block px-1 py-0.5 bg-components-tag-bg text-components-tag-text text-xs rounded-md mr-1'>{keyword}</div>
-              ))}
+              <div className='flex flex-wrap'>
+                {keywords.map(keyword => (
+                  <Tag key={keyword} text={keyword} className='mr-2' />
+                ))}
+              </div>
             </div>
           )}
         </div>
diff --git a/web/app/components/datasets/hit-testing/components/result-item.tsx b/web/app/components/datasets/hit-testing/components/result-item.tsx
index 29c61e9de7..9da7206601 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine, RiArrowRightSLine, RiArrowRightUpLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { SegmentIndexTag } from '../../documents/detail/completed'
+import Dot from '../../documents/detail/completed/common/dot'
 import Score from './score'
 import ChildChunkItem from './child-chunks-item'
 import ChunkDetailModal from './chunk-detail-modal'
@@ -12,6 +13,7 @@ import type { HitTesting } from '@/models/datasets'
 import cn from '@/utils/classnames'
 import FileIcon from '@/app/components/base/file-uploader/file-type-icon'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
+import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 
 type Props = {
   payload: HitTesting
@@ -45,7 +47,7 @@ const ResultItem: FC<Props> = ({
             positionId={position}
             className={cn('w-fit group-hover:opacity-100')}
           />
-          <div className='text-xs font-medium text-text-quaternary'>·</div>
+          <Dot />
           <div className='system-xs-medium text-text-tertiary'>{word_count} {t('datasetDocuments.segment.characters')}</div>
         </div>
         <Score value={score} />
@@ -66,9 +68,9 @@ const ResultItem: FC<Props> = ({
           </div>
         )}
         {!isParentChildRetrieval && keywords && keywords.length > 0 && (
-          <div>
+          <div className='flex flex-wrap'>
             {keywords.map(keyword => (
-              <div key={keyword} className='inline-block px-1 py-0.5 bg-components-tag-bg text-components-tag-text text-xs rounded-md mr-1'>{keyword}</div>
+              <Tag key={keyword} text={keyword} className='mr-2' />
             ))}
           </div>
         )}