From e418cf30f5334e836f3da1e9726ca9356a9f2ce3 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 16 Dec 2024 18:04:53 +0800
Subject: [PATCH] chore: hiting test header ui

---
 .../common/retrieval-method-info/index.tsx    | 20 ++++++-------
 .../datasets/hit-testing/style.module.css     |  4 ---
 .../datasets/hit-testing/textarea.tsx         | 30 +++++++++----------
 3 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/web/app/components/datasets/common/retrieval-method-info/index.tsx b/web/app/components/datasets/common/retrieval-method-info/index.tsx
index 5b30675652..fc3020d4a9 100644
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -2,12 +2,11 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import Image from 'next/image'
+import { retrievalIcon } from '../../create/icons'
 import type { RetrievalConfig } from '@/types/app'
 import { RETRIEVE_METHOD } from '@/types/app'
 import RadioCard from '@/app/components/base/radio-card'
-import { HighPriority } from '@/app/components/base/icons/src/vender/solid/arrows'
-import { PatternRecognition, Semantic } from '@/app/components/base/icons/src/vender/solid/development'
-import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
 
 type Props = {
   value: RetrievalConfig
@@ -15,11 +14,12 @@ type Props = {
 
 export const getIcon = (type: RETRIEVE_METHOD) => {
   return ({
-    [RETRIEVE_METHOD.semantic]: Semantic,
-    [RETRIEVE_METHOD.fullText]: FileSearch02,
-    [RETRIEVE_METHOD.hybrid]: PatternRecognition,
-    [RETRIEVE_METHOD.invertedIndex]: HighPriority,
-  })[type] || FileSearch02
+    [RETRIEVE_METHOD.semantic]: retrievalIcon.vector,
+    [RETRIEVE_METHOD.fullText]: retrievalIcon.fullText,
+    [RETRIEVE_METHOD.hybrid]: retrievalIcon.hybrid,
+    [RETRIEVE_METHOD.invertedIndex]: retrievalIcon.vector,
+    [RETRIEVE_METHOD.keywordSearch]: retrievalIcon.vector,
+  })[type] || retrievalIcon.vector
 }
 
 const EconomicalRetrievalMethodConfig: FC<Props> = ({
@@ -28,11 +28,11 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const type = value.search_method
-  const Icon = getIcon(type)
+  const icon = <Image className='size-3.5 text-util-colors-purple-purple-600' src={getIcon(type)} alt='' />
   return (
     <div className='space-y-2'>
       <RadioCard
-        icon={<Icon className='w-4 h-4 text-util-colors-purple-purple-600' />}
+        icon={icon}
         title={t(`dataset.retrieval.${type}.title`)}
         description={t(`dataset.retrieval.${type}.description`)}
         noRadio
diff --git a/web/app/components/datasets/hit-testing/style.module.css b/web/app/components/datasets/hit-testing/style.module.css
index 94a70305c6..83b0099a99 100644
--- a/web/app/components/datasets/hit-testing/style.module.css
+++ b/web/app/components/datasets/hit-testing/style.module.css
@@ -29,10 +29,6 @@
   background-image: url(./assets/plugin.svg);
 }
 
-.wrapper {
-  @apply relative border border-primary-600 rounded-xl;
-}
-
 .cardWrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(284px, auto));
diff --git a/web/app/components/datasets/hit-testing/textarea.tsx b/web/app/components/datasets/hit-testing/textarea.tsx
index 9589a2e835..ac448cc493 100644
--- a/web/app/components/datasets/hit-testing/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/textarea.tsx
@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next'
 import {
   RiEqualizer2Line,
 } from '@remixicon/react'
+import Image from 'next/image'
 import Button from '../../base/button'
 import Tag from '../../base/tag'
 import { getIcon } from '../common/retrieval-method-info'
-import s from './style.module.css'
 import ModifyExternalRetrievalModal from './modify-external-retrieval-modal'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
@@ -14,6 +14,7 @@ import type { ExternalKnowledgeBaseHitTestingResponse, HitTestingResponse } from
 import { externalKnowledgeBaseHitTesting, hitTesting } from '@/service/datasets'
 import { asyncRunSafe } from '@/utils'
 import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
+import promptS from '@/app/components/app/configuration/config-prompt/style.module.css'
 
 type TextAreaWithButtonIProps = {
   datasetId: string
@@ -103,13 +104,13 @@ const TextAreaWithButton = ({
   }
 
   const retrievalMethod = isEconomy ? RETRIEVE_METHOD.invertedIndex : retrievalConfig.search_method
-  const Icon = getIcon(retrievalMethod)
+  const icon = <Image className='size-3.5 text-util-colors-purple-purple-600' src={getIcon(retrievalMethod)} alt='' />
   return (
     <>
-      <div className={s.wrapper}>
-        <div className='relative 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">
+      <div className={cn('relative rounded-xl', promptS.gradientBorder)}>
+        <div className='relative pt-1.5 rounded-tl-xl rounded-tr-xl bg-background-section-burn'>
+          <div className="pl-4 pr-1.5 pb-1 flex justify-between h-8 items-center">
+            <span className="text-text-secondary font-semibold text-[13px] leading-4 uppercase">
               {t('datasetHitTesting.input.title')}
             </span>
             {isExternal
@@ -123,17 +124,14 @@ const TextAreaWithButton = ({
                   <span className='text-components-button-secondary-text system-xs-medium'>{t('datasetHitTesting.settingTitle')}</span>
                 </div>
               </Button>
-              : <Tooltip
-                popupContent={t('dataset.retrieval.changeRetrievalMethod')}
+              : <div
+                onClick={onClickRetrievalMethod}
+                className='flex px-1.5 h-7 items-center bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover rounded-lg border-[0.5px] border-components-button-secondary-bg shadow-xs backdrop-blur-[5px] cursor-pointer space-x-0.5'
               >
-                <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>
+                {icon}
+                <div className='text-text-secondary text-xs font-medium uppercase'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
+                <RiEqualizer2Line className='size-4 text-components-menu-item-text'></RiEqualizer2Line>
+              </div>
             }
           </div>
           {