From 6733cf70bb80d59cda6ad36f3a38e4f5322c67b3 Mon Sep 17 00:00:00 2001
From: zhuxinliang <zhuxinliang@didiglobal.com>
Date: Fri, 10 Jan 2025 16:49:08 +0800
Subject: [PATCH] fix: external dataset hit test display issue(#12564)

---
 .../components/result-item-external.tsx       | 65 +++++++++++++++++++
 .../hit-testing/components/result-item.tsx    |  6 +-
 .../components/datasets/hit-testing/index.tsx | 33 ++++++----
 3 files changed, 87 insertions(+), 17 deletions(-)
 create mode 100644 web/app/components/datasets/hit-testing/components/result-item-external.tsx

diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
new file mode 100644
index 00000000000000..96d590c63a68b3
--- /dev/null
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -0,0 +1,65 @@
+"use client";
+import type { FC } from "react"
+import React from "react"
+import { useBoolean } from "ahooks"
+import SegmentCard from "@/app/components/datasets/documents/detail/completed/SegmentCard"
+import type { ExternalKnowledgeBaseHitTesting } from "@/models/datasets"
+import cn from "@/utils/classnames"
+import Modal from "@/app/components/base/modal"
+import s from "@/app/components/datasets/documents/detail/completed/style.module.css"
+
+type Props = {
+  payload: ExternalKnowledgeBaseHitTesting;
+};
+
+const ResultItemExternal: FC<Props> = ({ payload }) => {
+  const record = payload;
+  const [
+    isShowDetailModal,
+    { setTrue: showDetailModal, setFalse: hideDetailModal },
+  ] = useBoolean(false);
+
+  return (
+    <div
+      className={cn(
+        "pt-3 bg-chat-bubble-bg rounded-xl hover:shadow-lg cursor-pointer"
+      )}
+      onClick={showDetailModal}
+    >
+      <SegmentCard
+        loading={false}
+        refSource={{
+          title: record.title,
+          uri: record.metadata
+            ? record.metadata["x-amz-bedrock-kb-source-uri"]
+            : "",
+        }}
+        isExternal
+        contentExternal={record.content}
+        score={record.score}
+        scene="hitTesting"
+        className="h-[216px] mb-4"
+      />
+
+      {isShowDetailModal && (
+        <Modal
+          className={"py-10 px-8"}
+          closable
+          onClose={hideDetailModal}
+          isShow={isShowDetailModal}
+        >
+          <div className="w-full overflow-x-auto px-2">
+            <div className={s.segModalContent}>
+              <div className="mb-4 text-md text-gray-800 h-full">
+                {record.content}
+              </div>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+};
+
+
+export default React.memo(ResultItemExternal);
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 3c8c146d530356..7a8d65800003e0 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -18,17 +18,15 @@ import { extensionToFileType } from '@/app/components/datasets/hit-testing/utils
 
 const i18nPrefix = 'datasetHitTesting'
 type Props = {
-  isExternal: boolean
   payload: HitTesting
 }
 
 const ResultItem: FC<Props> = ({
-  isExternal,
   payload,
 }) => {
   const { t } = useTranslation()
-  const { segment, content: externalContent, score, child_chunks } = payload
-  const data = isExternal ? externalContent : segment
+  const { segment, score, child_chunks } = payload
+  const data = segment
   const { position, word_count, content, keywords, document } = data
   const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0)
   const extension = document.name.split('.').slice(-1)[0] as FileAppearanceTypeEnum
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index ccc200bbe6be87..c3689070ebb27c 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -12,6 +12,7 @@ import Textarea from './textarea'
 import s from './style.module.css'
 import ModifyRetrievalModal from './modify-retrieval-modal'
 import ResultItem from './components/result-item'
+import ResultItemExternal from "./components/result-item-external"
 import cn from '@/utils/classnames'
 import type { ExternalKnowledgeBaseHitTestingResponse, HitTestingResponse } from '@/models/datasets'
 import Loading from '@/app/components/base/loading'
@@ -24,6 +25,7 @@ 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'
+import type { HitTesting, ExternalKnowledgeBaseHitTesting } from "@/models/datasets"
 
 const limit = 10
 
@@ -68,22 +70,27 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
   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[]) => (
-    <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 })}
+  const renderHitResults = (
+    results: HitTesting[] | ExternalKnowledgeBaseHitTesting[]
+  ) => (
+    <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 className="grow overflow-y-auto space-y-2">
+        {results.map((record, idx) =>
+          isExternal ? (
+            <ResultItemExternal
+              key={idx}
+              payload={record as ExternalKnowledgeBaseHitTesting}
+            />
+          ) : (
+            <ResultItem key={idx} payload={record as HitTesting} />
+          )
+        )}
       </div>
     </div>
-  )
+  );
 
   const renderEmptyState = () => (
     <div className='h-full flex flex-col justify-center items-center py-3 px-4 rounded-t-2xl bg-background-body'>