Feat/parent child retrieval (#12086)

Signed-off-by: yihong0618 <zouzou0208@gmail.com>
Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: AkaraChen <akarachen@outlook.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Warren Chen <warren.chen830@gmail.com>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com>
Co-authored-by: yihong <zouzou0208@gmail.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: KVOJJJin <jzongcode@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: JzoNgKVO <27049666+JzoNgKVO@users.noreply.github.com>
Co-authored-by: Charlie.Wei <luowei@cvte.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: huayaoyue6 <huayaoyue@163.com>
Co-authored-by: kurokobo <kuro664@gmail.com>
Co-authored-by: Matsuda <yiyth.fcb6@gmail.com>
Co-authored-by: shirochan <s.yusuke0711@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: Huỳnh Gia Bôi <boihuynh147@gmail.com>
Co-authored-by: Julian Huynh <julian.huynh@immersio.io>
Co-authored-by: Hash Brown <hi@xzd.me>
Co-authored-by: 非法操作 <hjlarry@163.com>
Co-authored-by: Kazuki Takamatsu <kazuki.takamatsu@chowagiken.co.jp>
Co-authored-by: Trey Dong <1346650911@qq.com>
Co-authored-by: VoidIsVoid <343750470@qq.com>
Co-authored-by: Gimling <huangjl@ruyi.ai>
Co-authored-by: xiandan-erizo <xiandan.erizo@gmail.com>
Co-authored-by: Muneyuki Noguchi <nogu.dev@gmail.com>
Co-authored-by: zhaobingshuang <1475195565@qq.com>
Co-authored-by: zhaobs <zhaobs@cailian.net>
Co-authored-by: suzuki.sh <s2terminal@users.noreply.github.com>
Co-authored-by: Yingchun Lai <laiyingchun@apache.org>
Co-authored-by: huanshare <huanshare@live.com>
Co-authored-by: huanshare <liuhuan101@longfor.com>
Co-authored-by: orangeclk <orangeclk@users.noreply.github.com>
Co-authored-by: 문정현 <120004247+JungHyunMoon@users.noreply.github.com>
Co-authored-by: barabicu <kztk533@gmail.com>
Co-authored-by: Wei Mingzhi <whistler_wmz@users.sf.net>
Co-authored-by: Paul van Oorschot <20116814+pvoo@users.noreply.github.com>
Co-authored-by: zkyTech <zhangkunyuan@hotmail.com>
Co-authored-by: zhangkunyuan <zhangkunyuan@cmhi.chinamobile.com>
Co-authored-by: Tommy <34446820+Asterovim@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Novice <857526207@qq.com>
Co-authored-by: Novice Lee <novicelee@NovicedeMacBook-Pro.local>
Co-authored-by: Novice Lee <novicelee@NoviPro.local>
Co-authored-by: zxhlyh <16177003+zxhlyh@users.noreply.github.com>
Co-authored-by: liuzhenghua <1090179900@qq.com>
Co-authored-by: Jiang <65766008+AlwaysBluer@users.noreply.github.com>
Co-authored-by: jiangzhijie <jiangzhijie.jzj@alibaba-inc.com>
Co-authored-by: Joe <79627742+ZhouhaoJiang@users.noreply.github.com>
Co-authored-by: Alok Shrivastwa <alok.shrivastwa@gmail.com>
Co-authored-by: Alok Shrivastwa <Alok.Shrivastwa@microland.com>
Co-authored-by: JasonVV <jasonwangiii@outlook.com>
Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com>
Co-authored-by: Kevin9703 <51311316+Kevin9703@users.noreply.github.com>
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: Junyan Qin <1010553892@qq.com>
Co-authored-by: IWAI, Masaharu <iwaim.sub@gmail.com>
Co-authored-by: IWAI, Masaharu <iwai_masaharu@funkit.co.jp>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: luckylhb90 <luckylhb90@gmail.com>
Co-authored-by: hobo.l <hobo.l@binance.com>
Co-authored-by: douxc <7553076+douxc@users.noreply.github.com>

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

@@ -6,16 +6,15 @@ import useSWR from 'swr'
 import { omit } from 'lodash-es'
 import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
+import { RiApps2Line, RiFocus2Line } from '@remixicon/react'
 import SegmentCard from '../documents/detail/completed/SegmentCard'
-import docStyle from '../documents/detail/completed/style.module.css'
 import Textarea from './textarea'
 import s from './style.module.css'
-import HitDetail from './hit-detail'
 import ModifyRetrievalModal from './modify-retrieval-modal'
+import ResultItem from './components/result-item'
 import cn from '@/utils/classnames'
-import type { ExternalKnowledgeBaseHitTestingResponse, ExternalKnowledgeBaseHitTesting as ExternalKnowledgeBaseHitTestingType, HitTestingResponse, HitTesting as HitTestingType } from '@/models/datasets'
+import type { ExternalKnowledgeBaseHitTestingResponse, HitTestingResponse } from '@/models/datasets'
 import Loading from '@/app/components/base/loading'
-import Modal from '@/app/components/base/modal'
 import Drawer from '@/app/components/base/drawer'
 import Pagination from '@/app/components/base/pagination'
 import FloatRightContainer from '@/app/components/base/float-right-container'
@@ -24,6 +23,7 @@ import DatasetDetailContext from '@/context/dataset-detail'
 import type { RetrievalConfig } from '@/types/app'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
+import docStyle from '@/app/components/datasets/documents/detail/completed/style.module.css'
 
 const limit = 10
 
@@ -51,8 +51,6 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
   const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>() // 初始化记录为空数组
   const [externalHitResult, setExternalHitResult] = useState<ExternalKnowledgeBaseHitTestingResponse | undefined>()
   const [submitLoading, setSubmitLoading] = useState(false)
-  const [currParagraph, setCurrParagraph] = useState<{ paraInfo?: HitTestingType; showModal: boolean }>({ showModal: false })
-  const [externalCurrParagraph, setExternalCurrParagraph] = useState<{ paraInfo?: ExternalKnowledgeBaseHitTestingType; showModal: boolean }>({ showModal: false })
   const [text, setText] = useState('')
 
   const [currPage, setCurrPage] = React.useState<number>(0)
@@ -64,51 +62,33 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
 
   const total = recordsRes?.total || 0
 
-  const onClickCard = (detail: HitTestingType) => {
-    setCurrParagraph({ paraInfo: detail, showModal: true })
-  }
-
-  const onClickExternalCard = (detail: ExternalKnowledgeBaseHitTestingType) => {
-    setExternalCurrParagraph({ paraInfo: detail, showModal: true })
-  }
   const { dataset: currentDataset } = useContext(DatasetDetailContext)
   const isExternal = currentDataset?.provider === 'external'
 
   const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig)
   const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
   const [isShowRightPanel, { setTrue: showRightPanel, setFalse: hideRightPanel, set: setShowRightPanel }] = useBoolean(!isMobile)
-
-  const renderHitResults = (results: any[], onClickCard: (record: any) => void) => (
-    <>
-      <div className='text-gray-600 font-semibold mb-4'>{t('datasetHitTesting.hit.title')}</div>
-      <div className='overflow-auto flex-1'>
-        <div className={s.cardWrapper}>
-          {results.map((record, idx) => (
-            <SegmentCard
-              key={idx}
-              loading={false}
-              refSource= {{
-                title: record.title,
-                uri: record.metadata ? record.metadata['x-amz-bedrock-kb-source-uri'] : '',
-              }}
-              isExternal={isExternal}
-              detail={record.segment}
-              contentExternal={record.content}
-              score={record.score}
-              scene='hitTesting'
-              className='h-[216px] mb-4'
-              onClick={() => onClickCard(record)}
-            />
-          ))}
-        </div>
+  const renderHitResults = (results: any[]) => (
+    <div className='h-full flex flex-col py-3 px-4 rounded-t-2xl bg-background-body'>
+      <div className='shrink-0 pl-2 text-text-primary font-semibold leading-6 mb-2'>
+        {t('datasetHitTesting.hit.title', { num: results.length })}
       </div>
-    </>
+      <div className='grow overflow-y-auto space-y-2'>
+        {results.map((record, idx) => (
+          <ResultItem
+            key={idx}
+            payload={record}
+            isExternal={isExternal}
+          />
+        ))}
+      </div>
+    </div>
   )
 
   const renderEmptyState = () => (
-    <div className='h-full flex flex-col justify-center items-center'>
-      <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-gray-200 !h-14 !w-14')} />
-      <div className='text-gray-300 text-[13px] mt-3'>
+    <div className='h-full flex flex-col justify-center items-center py-3 px-4 rounded-t-2xl bg-background-body'>
+      <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-text-quaternary !h-14 !w-14')} />
+      <div className='text-text-quaternary text-[13px] mt-3'>
         {t('datasetHitTesting.hit.emptyTip')}
       </div>
     </div>
@@ -120,10 +100,10 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
 
   return (
     <div className={s.container}>
-      <div className={s.leftDiv}>
-        <div className={s.titleWrapper}>
-          <h1 className={s.title}>{t('datasetHitTesting.title')}</h1>
-          <p className={s.desc}>{t('datasetHitTesting.desc')}</p>
+      <div className='px-6 py-3 flex flex-col'>
+        <div className='flex flex-col justify-center mb-4'>
+          <h1 className='text-base font-semibold text-text-primary'>{t('datasetHitTesting.title')}</h1>
+          <p className='mt-0.5 text-[13px] leading-4 font-normal text-text-tertiary'>{t('datasetHitTesting.desc')}</p>
         </div>
         <Textarea
           datasetId={datasetId}
@@ -140,7 +120,7 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
           retrievalConfig={retrievalConfig}
           isEconomy={currentDataset?.indexing_technique === 'economy'}
         />
-        <div className={cn(s.title, 'mt-8 mb-2')}>{t('datasetHitTesting.recents')}</div>
+        <div className='text-base font-semibold text-text-primary mt-6 mb-3'>{t('datasetHitTesting.records')}</div>
         {(!recordsRes && !error)
           ? (
             <div className='flex-1'><Loading type='app' /></div>
@@ -149,29 +129,30 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
             ? (
               <>
                 <div className='grow overflow-y-auto'>
-                  <table className={`w-full border-collapse border-0 mt-3 ${s.table}`}>
-                    <thead className="sticky top-0 h-8 bg-white leading-8 border-b border-gray-200 text-gray-500 font-bold">
+                  <table className={'w-full border-collapse border-0 text-[13px] leading-4 text-text-secondary '}>
+                    <thead className="sticky top-0 h-7 leading-7  text-xs text-text-tertiary font-medium uppercase">
                       <tr>
-                        <td className='w-28'>{t('datasetHitTesting.table.header.source')}</td>
-                        <td>{t('datasetHitTesting.table.header.text')}</td>
-                        <td className='w-48'>{t('datasetHitTesting.table.header.time')}</td>
+                        <td className='pl-3 w-[128px] rounded-l-lg bg-background-section-burn'>{t('datasetHitTesting.table.header.source')}</td>
+                        <td className='bg-background-section-burn'>{t('datasetHitTesting.table.header.text')}</td>
+                        <td className='pl-2 w-48 rounded-r-lg bg-background-section-burn'>{t('datasetHitTesting.table.header.time')}</td>
                       </tr>
                     </thead>
-                    <tbody className="text-gray-500">
+                    <tbody>
                       {recordsRes?.data?.map((record) => {
+                        const SourceIcon = record.source === 'app' ? RiApps2Line : RiFocus2Line
                         return <tr
                           key={record.id}
-                          className='group border-b border-gray-200 h-8 hover:bg-gray-50 cursor-pointer'
+                          className='group border-b border-divider-subtle h-10 hover:bg-background-default-hover cursor-pointer'
                           onClick={() => setText(record.content)}
                         >
-                          <td className='w-24'>
+                          <td className='pl-3 w-[128px]'>
                             <div className='flex items-center'>
-                              <div className={cn(s[`${record.source}_icon`], s.commonIcon, 'mr-1')} />
-                              <span className='capitalize'>{record.source.replace('_', ' ')}</span>
+                              <SourceIcon className='mr-1 size-4 text-text-tertiary' />
+                              <span className='capitalize'>{record.source.replace('_', ' ').replace('hit testing', 'retrieval test')}</span>
                             </div>
                           </td>
-                          <td className='max-w-xs group-hover:text-primary-600'>{record.content}</td>
-                          <td className='w-36'>
+                          <td className='max-w-xs py-2'>{record.content}</td>
+                          <td className='pl-2 w-36'>
                             {formatTime(record.created_at, t('datasetHitTesting.dateTimeFormat') as string)}
                           </td>
                         </tr>
@@ -189,57 +170,28 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
             )}
       </div>
       <FloatRightContainer panelClassname='!justify-start !overflow-y-auto' showClose isMobile={isMobile} isOpen={isShowRightPanel} onClose={hideRightPanel} footer={null}>
-        <div className={cn(s.rightDiv, 'p-0 sm:px-8 sm:pt-[42px] sm:pb-[26px]')}>
+        <div className='flex flex-col pt-3'>
+          {/* {renderHitResults(generalResultData)} */}
           {submitLoading
-            ? <div className={s.cardWrapper}>
-              <SegmentCard
-                loading={true}
-                scene='hitTesting'
-                className='h-[216px]'
-              />
-              <SegmentCard
-                loading={true}
-                scene='hitTesting'
-                className='h-[216px]'
-              />
-            </div>
+            ? <SegmentCard
+              loading={true}
+              scene='hitTesting'
+              className='h-[216px]'
+            />
             : (
               (() => {
                 if (!hitResult?.records.length && !externalHitResult?.records.length)
                   return renderEmptyState()
 
                 if (hitResult?.records.length)
-                  return renderHitResults(hitResult.records, onClickCard)
+                  return renderHitResults(hitResult.records)
 
-                return renderHitResults(externalHitResult?.records || [], onClickExternalCard)
+                return renderHitResults(externalHitResult?.records || [])
               })()
             )
           }
         </div>
       </FloatRightContainer>
-      <Modal
-        className={isExternal ? 'py-10 px-8' : 'w-full'}
-        closable
-        onClose={() => {
-          setCurrParagraph({ showModal: false })
-          setExternalCurrParagraph({ showModal: false })
-        }}
-        isShow={currParagraph.showModal || externalCurrParagraph.showModal}
-      >
-        {currParagraph.showModal && (
-          <HitDetail
-            segInfo={currParagraph.paraInfo?.segment}
-          />
-        )}
-        {externalCurrParagraph.showModal && (
-          <HitDetail
-            segInfo={{
-              id: 'external',
-              content: externalCurrParagraph.paraInfo?.content,
-            }}
-          />
-        )}
-      </Modal>
       <Drawer isOpen={isShowModifyRetrievalModal} onClose={() => setIsShowModifyRetrievalModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
         <ModifyRetrievalModal
           indexMethod={currentDataset?.indexing_technique || ''}