feat: add retriever rank fe (#1557)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

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

@@ -6,16 +6,20 @@ import useSWR from 'swr'
 import { omit } from 'lodash-es'
 import cn from 'classnames'
 import dayjs from 'dayjs'
+import { useContext } from 'use-context-selector'
 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 type { HitTestingResponse, HitTesting as HitTestingType } from '@/models/datasets'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
 import Pagination from '@/app/components/base/pagination'
 import { fetchTestingRecords } from '@/service/datasets'
+import DatasetDetailContext from '@/context/dataset-detail'
+import type { RetrievalConfig } from '@/types/app'
 
 const limit = 10
 
@@ -55,6 +59,11 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
     setCurrParagraph({ paraInfo: detail, showModal: true })
   }
 
+  const { dataset: currentDataset } = useContext(DatasetDetailContext)
+
+  const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig)
+  const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
+
   return (
     <div className={s.container}>
       <div className={s.leftDiv}>
@@ -70,6 +79,9 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
           setLoading={setSubmitLoading}
           setText={setText}
           text={text}
+          onClickRetrievalMethod={() => setIsShowModifyRetrievalModal(true)}
+          retrievalConfig={retrievalConfig}
+          isEconomy={currentDataset?.indexing_technique === 'economy'}
         />
         <div className={cn(s.title, 'mt-8 mb-2')}>{t('datasetHitTesting.recents')}</div>
         {(!recordsRes && !error)
@@ -178,6 +190,18 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
           }}
         />}
       </Modal>
+      {isShowModifyRetrievalModal && (
+        <ModifyRetrievalModal
+          indexMethod={currentDataset?.indexing_technique || ''}
+          value={retrievalConfig}
+          isShow={isShowModifyRetrievalModal}
+          onHide={() => setIsShowModifyRetrievalModal(false)}
+          onSave={(value) => {
+            setRetrievalConfig(value)
+            setIsShowModifyRetrievalModal(false)
+          }}
+        />
+      )}
     </div>
   )
 }

web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx

@@ -0,0 +1,95 @@
+'use client'
+import type { FC } from 'react'
+import React, { useRef, useState } from 'react'
+import { useClickAway } from 'ahooks'
+import { useTranslation } from 'react-i18next'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+import type { RetrievalConfig } from '@/types/app'
+import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
+import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
+import Button from '@/app/components/base/button'
+
+type Props = {
+  indexMethod: string
+  value: RetrievalConfig
+  isShow: boolean
+  onHide: () => void
+  onSave: (value: RetrievalConfig) => void
+}
+
+const ModifyRetrievalModal: FC<Props> = ({
+  indexMethod,
+  value,
+  isShow,
+  onHide,
+  onSave,
+}) => {
+  const ref = useRef(null)
+  const { t } = useTranslation()
+  const [retrievalConfig, setRetrievalConfig] = useState(value)
+
+  useClickAway(() => {
+    if (ref)
+      onHide()
+  }, ref)
+
+  if (!isShow)
+    return null
+
+  return (
+    <div
+      className='fixed top-16 right-2 flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10'
+      style={{
+        width: 632,
+        height: 'calc(100vh - 72px)',
+      }}
+      ref={ref}
+    >
+      <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
+        <div className='text-base font-semibold text-gray-900'>
+          <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
+          <div className='leading-[18px] text-xs font-normal text-gray-500'>
+            <a target='_blank' href='https://docs.dify.ai/v/zh-hans/advanced/retrieval-augment' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+            {t('datasetSettings.form.retrievalSetting.description')}
+          </div>
+        </div>
+        <div className='flex items-center'>
+          <div
+            onClick={onHide}
+            className='flex justify-center items-center w-6 h-6 cursor-pointer'
+          >
+            <XClose className='w-4 h-4 text-gray-500' />
+          </div>
+        </div>
+      </div>
+
+      <div className='p-6 border-b' style={{
+        borderBottom: 'rgba(0, 0, 0, 0.05)',
+      }}>
+        {indexMethod === 'high_quality'
+          ? (
+            <RetrievalMethodConfig
+              value={retrievalConfig}
+              onChange={setRetrievalConfig}
+            />
+          )
+          : (
+            <EconomicalRetrievalMethodConfig
+              value={retrievalConfig}
+              onChange={setRetrievalConfig}
+            />
+          )}
+      </div>
+      <div
+        className='flex justify-end pt-6 px-6 border-t'
+        style={{
+          borderColor: 'rgba(0, 0, 0, 0.05)',
+        }}
+      >
+        <Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
+        <Button type='primary' className='flex-shrink-0' onClick={() => onSave(retrievalConfig)} >{t('common.operation.save')}</Button>
+      </div>
+    </div>
+  )
+}
+export default React.memo(ModifyRetrievalModal)

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

@@ -20,8 +20,8 @@
   @apply text-sm font-normal text-gray-500;
 }
 .textarea {
-  min-height: 96px;
-  @apply border-none resize-none font-normal caret-primary-600 text-gray-700 text-sm w-full bg-gray-25 focus-visible:outline-none placeholder:text-gray-300 placeholder:text-sm placeholder:font-normal !important;
+  height: 220px;
+  @apply border-none resize-none font-normal caret-primary-600 text-gray-700 text-sm w-full  focus-visible:outline-none placeholder:text-gray-300 placeholder:text-sm placeholder:font-normal !important;
 }
 .table {
   @apply text-[13px] text-gray-500;
@@ -46,7 +46,7 @@
 }
 
 .wrapper {
-  @apply relative border border-primary-600 min-h-[200px] rounded-xl pt-3 pb-14 px-4 bg-gray-25;
+  @apply relative border border-primary-600 rounded-xl;
 }
 
 .cardWrapper {

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

@@ -1,26 +1,30 @@
-import type { FC } from "react";
+import type { FC } from 'react'
 import { useContext } from 'use-context-selector'
-import { DocumentTextIcon } from "@heroicons/react/24/solid";
-import { useTranslation } from "react-i18next";
-import { hitTesting } from "@/service/datasets";
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import Button from '../../base/button'
+import Tag from '../../base/tag'
+import Tooltip from '../../base/tooltip'
+import { getIcon } from '../common/retrieval-method-info'
+import s from './style.module.css'
 import DatasetDetailContext from '@/context/dataset-detail'
-import { HitTestingResponse } from "@/models/datasets";
-import cn from "classnames";
-import Button from "../../base/button";
-import Tag from "../../base/tag";
-import Tooltip from "../../base/tooltip";
-import s from "./style.module.css";
-import { asyncRunSafe } from "@/utils";
+import type { HitTestingResponse } from '@/models/datasets'
+import { hitTesting } from '@/service/datasets'
+import { asyncRunSafe } from '@/utils'
+import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
 
 type Props = {
-  datasetId: string;
-  onUpdateList: () => void;
-  setHitResult: (res: HitTestingResponse) => void;
-  loading: boolean;
-  setLoading: (v: boolean) => void;
-  text: string;
-  setText: (v: string) => void;
-};
+  datasetId: string
+  onUpdateList: () => void
+  setHitResult: (res: HitTestingResponse) => void
+  loading: boolean
+  setLoading: (v: boolean) => void
+  text: string
+  setText: (v: string) => void
+  onClickRetrievalMethod: () => void
+  retrievalConfig: RetrievalConfig
+  isEconomy: boolean
+}
 
 const TextAreaWithButton: FC<Props> = ({
   datasetId,
@@ -30,87 +34,109 @@ const TextAreaWithButton: FC<Props> = ({
   loading,
   text,
   setText,
+  onClickRetrievalMethod,
+  retrievalConfig,
+  isEconomy,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation()
   const { indexingTechnique } = useContext(DatasetDetailContext)
 
-  // 处理文本框内容变化的函数
   function handleTextChange(event: any) {
-    setText(event.target.value);
+    setText(event.target.value)
   }
 
-  // 处理按钮点击的函数
   const onSubmit = async () => {
-    setLoading(true);
+    setLoading(true)
     const [e, res] = await asyncRunSafe<HitTestingResponse>(
-      hitTesting({ datasetId, queryText: text }) as Promise<HitTestingResponse>
-    );
+      hitTesting({ datasetId, queryText: text, retrieval_model: retrievalConfig }) as Promise<HitTestingResponse>,
+    )
     if (!e) {
-      setHitResult(res);
-      onUpdateList?.();
+      setHitResult(res)
+      onUpdateList?.()
     }
-    setLoading(false);
-  };
+    setLoading(false)
+  }
 
+  const retrievalMethod = isEconomy ? RETRIEVE_METHOD.invertedIndex : retrievalConfig.search_method
+  const Icon = getIcon(retrievalMethod)
   return (
     <>
       <div className={s.wrapper}>
-        <div className="flex items-center mb-3">
-          <DocumentTextIcon className="w-4 h-4 text-primary-600 mr-2" />
-          <span className="text-gray-800 font-semibold text-sm">
-            {t("datasetHitTesting.input.title")}
-          </span>
-        </div>
-        <textarea
-          value={text}
-          onChange={handleTextChange}
-          placeholder={t("datasetHitTesting.input.placeholder") as string}
-          className={s.textarea}
-        />
-        <div className="absolute inset-x-0 bottom-0 flex items-center justify-between mx-4 mt-2 mb-4">
-          {text?.length > 200 ? (
+        <div className='pt-2 rounded-tl-xl rounded-tr-xl bg-[#EEF4FF]'>
+          <div className="px-4 pb-2 flex justify-between h-8 items-center">
+            <span className="text-gray-800 font-semibold text-sm">
+              {t('datasetHitTesting.input.title')}
+            </span>
             <Tooltip
-              content={t("datasetHitTesting.input.countWarning") as string}
-              selector="hit-testing-warning"
+              selector={'change-retrieval-method'}
+              htmlContent={t('dataset.retrieval.changeRetrievalMethod')}
             >
-              <div>
-                <Tag color="red" className="!text-red-600">
-                  {text?.length}
-                  <span className="text-red-300 mx-0.5">/</span>
-                  200
-                </Tag>
+              <div
+                onClick={onClickRetrievalMethod}
+                className='flex px-2 h-7 items-center space-x-1 bg-white hover:bg-[#ECE9FE] rounded-md shadow-sm cursor-pointer text-[#6927DA]'
+              >
+                <Icon className='w-3.5 h-3.5'></Icon>
+                <div className='text-xs font-medium'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
               </div>
             </Tooltip>
-          ) : (
-            <Tag
-              color="gray"
-              className={cn("!text-gray-500", text?.length ? "" : "opacity-50")}
-            >
-              {text?.length}
-              <span className="text-gray-300 mx-0.5">/</span>
-              200
-            </Tag>
-          )}
-          <Tooltip
-            selector="hit-testing-submit"
-            disabled={indexingTechnique === 'high_quality'}
-            content={t("datasetHitTesting.input.indexWarning") as string}
-          >
-            <div>
-              <Button
-                onClick={onSubmit}
-                type="primary"
-                loading={loading}
-                disabled={indexingTechnique !== 'high_quality' ? true : (!text?.length || text?.length > 200)}
-              >
-                {t("datasetHitTesting.input.testing")}
-              </Button>
-            </div>
-          </Tooltip>
+          </div>
+          <div className='h-2 rounded-tl-xl rounded-tr-xl bg-white'></div>
         </div>
+        <div className='px-4 pb-11'>
+          <textarea
+            value={text}
+            onChange={handleTextChange}
+            placeholder={t('datasetHitTesting.input.placeholder') as string}
+            className={s.textarea}
+          />
+          <div className="absolute inset-x-0 bottom-0 flex items-center justify-between mx-4 mt-2 mb-2">
+            {text?.length > 200
+              ? (
+                <Tooltip
+                  content={t('datasetHitTesting.input.countWarning') as string}
+                  selector="hit-testing-warning"
+                >
+                  <div>
+                    <Tag color="red" className="!text-red-600">
+                      {text?.length}
+                      <span className="text-red-300 mx-0.5">/</span>
+                  200
+                    </Tag>
+                  </div>
+                </Tooltip>
+              )
+              : (
+                <Tag
+                  color="gray"
+                  className={cn('!text-gray-500', text?.length ? '' : 'opacity-50')}
+                >
+                  {text?.length}
+                  <span className="text-gray-300 mx-0.5">/</span>
+              200
+                </Tag>
+              )}
+            <Tooltip
+              selector="hit-testing-submit"
+              disabled={indexingTechnique === 'high_quality'}
+              content={t('datasetHitTesting.input.indexWarning') as string}
+            >
+              <div>
+                <Button
+                  onClick={onSubmit}
+                  type="primary"
+                  loading={loading}
+                  disabled={indexingTechnique !== 'high_quality' ? true : (!text?.length || text?.length > 200)}
+                >
+                  {t('datasetHitTesting.input.testing')}
+                </Button>
+              </div>
+            </Tooltip>
+          </div>
+        </div>
+
       </div>
     </>
-  );
-};
+  )
+}
 
-export default TextAreaWithButton;
+export default TextAreaWithButton