chore: result main

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

@@ -38,9 +38,9 @@ const ResultItem: FC<Props> = ({
   }] = useBoolean(false)
 
   return (
-    <div>
+    <div className='pt-3 bg-chat-bubble-bg rounded-xl hover:shadow-lg'>
       {/* Meta info */}
-      <div className='flex justify-between items-center'>
+      <div className='flex justify-between items-center px-3'>
         <div className='flex items-center space-x-2'>
           <SegmentIndexTag
             isParentChildRetrieval={isParentChildRetrieval}
@@ -54,7 +54,7 @@ const ResultItem: FC<Props> = ({
       </div>
 
       {/* Main */}
-      <div>
+      <div className='px-3'>
         <div className='line-clamp-2'>{content}</div>
         {isParentChildRetrieval && (
           <div>

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

@@ -65,33 +65,26 @@ 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) => (
-            <ResultItem
-              key={idx}
-              payload={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}
+          />
+        ))}
+      </div>
+    </div>
   )
 
   const renderEmptyState = () => (
@@ -180,8 +173,8 @@ 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]')}>
-          {renderHitResults(generalResultData, onClickCard)}
+        <div className={cn(s.rightDiv, 'pt-3')}>
+          {renderHitResults(generalResultData)}
           {submitLoading
             ? <div className={s.cardWrapper}>
               <SegmentCard
@@ -201,9 +194,9 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
                   return renderEmptyState()
 
                 if (hitResult?.records.length)
-                  return renderHitResults(hitResult.records, onClickCard)
+                  return renderHitResults(hitResult.records)
 
-                return renderHitResults(externalHitResult?.records || [], onClickExternalCard)
+                return renderHitResults(externalHitResult?.records || [])
               })()
             )
           }

web/app/components/datasets/hit-testing/style.module.css

@@ -5,7 +5,7 @@
   @apply flex-1 h-full;
 }
 .leftDiv {
-  @apply border-r border-gray-100 px-6 py-3 flex flex-col;
+  @apply px-6 py-3 flex flex-col;
 }
 .rightDiv {
   @apply flex flex-col;

web/i18n/en-US/dataset-hit-testing.ts

@@ -19,7 +19,7 @@ const translation = {
     testing: 'Testing',
   },
   hit: {
-    title: 'RETRIEVAL PARAGRAPHS',
+    title: '{{num}} Retrieved Chunks',
     emptyTip: 'Retrieval Testing results will show here',
   },
   noRecentTip: 'No recent query results here',

web/i18n/zh-Hans/dataset-hit-testing.ts

@@ -19,7 +19,7 @@ const translation = {
     testing: '测试',
   },
   hit: {
-    title: '召回段落',
+    title: '{{num}} 个召回段落',
     emptyTip: '召回测试结果将展示在这里',
   },
   noRecentTip: '最近无查询结果',