From e206866908351bed16ad33d06c775373b089e129 Mon Sep 17 00:00:00 2001
From: nite-knite <nkCoding@gmail.com>
Date: Mon, 16 Dec 2024 17:15:47 +0800
Subject: [PATCH 1/3] feat: update UI for dataset creation step three

---
 .../billing/priority-label/index.tsx          | 11 ++++++++---
 .../create/embedding-process/index.tsx        |  2 +-
 .../datasets/create/step-three/index.tsx      | 19 +++++++++++--------
 .../documents/detail/metadata/index.tsx       |  2 +-
 web/i18n/en-US/dataset-creation.ts            |  2 +-
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index 75237e632a..6ecac4a79e 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -4,6 +4,7 @@ import {
   DocumentProcessingPriority,
   Plan,
 } from '../type'
+import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import {
   ZapFast,
@@ -11,7 +12,11 @@ import {
 } from '@/app/components/base/icons/src/vender/solid/general'
 import Tooltip from '@/app/components/base/tooltip'
 
-const PriorityLabel = () => {
+type PriorityLabelProps = {
+  className?: string
+}
+
+const PriorityLabel = ({ className }: PriorityLabelProps) => {
   const { t } = useTranslation()
   const { plan } = useProviderContext()
 
@@ -37,10 +42,10 @@ const PriorityLabel = () => {
         }
       </div>
     }>
-      <span className={`
+      <span className={cn(`
         shrink-0 flex items-center ml-1 px-1 h-[18px] rounded-[5px] border border-text-accent-secondary
         text-2xs font-medium text-text-accent-secondary
-      `}>
+      `, className)}>
         {
           plan.type === Plan.professional && (
             <ZapNarrow className='mr-0.5 size-3' />
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index b3ee0dc739..aca9fa502b 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -287,7 +287,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                 </div>
                 {
                   enableBilling && (
-                    <PriorityLabel />
+                    <PriorityLabel className='ml-0' />
                   )
                 }
               </div>
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index e2bc7f5881..9be35b2730 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -1,10 +1,9 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiBookOpenLine } from '@remixicon/react'
 import EmbeddingProcess from '../embedding-process'
 
-import s from './index.module.css'
-import cn from '@/utils/classnames'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import type { FullDocumentDetail, createDocumentResponse } from '@/models/datasets'
 import AppIcon from '@/app/components/base/app-icon'
@@ -58,13 +57,17 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
           />
         </div>
       </div>
-      {!isMobile && <div className={cn(s.sideTip)}>
-        <div className={s.tipCard}>
-          <span className={s.icon} />
-          <div className={s.title}>{t('datasetCreation.stepThree.sideTipTitle')}</div>
-          <div className={s.content}>{t('datasetCreation.stepThree.sideTipContent')}</div>
+      {!isMobile && (
+        <div className="shrink-0 pt-[88px] pr-8 text-xs">
+          <div className="flex flex-col gap-3 w-[328px] p-6 text-text-tertiary bg-background-section rounded-xl">
+            <div className="flex justify-center items-center size-10 bg-components-card-bg rounded-[10px] shadow-lg">
+              <RiBookOpenLine className="size-5 text-text-accent" />
+            </div>
+            <div className="text-base text-text-secondary">{t('datasetCreation.stepThree.sideTipTitle')}</div>
+            <div className="text-text-tertiary">{t('datasetCreation.stepThree.sideTipContent')}</div>
+          </div>
         </div>
-      </div>}
+      )}
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index b0599a8dbe..87e5a8bc8a 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -59,7 +59,7 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
 
   return (
     <div className={cn('flex items-center gap-1 py-0.5 min-h-5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
-      <div className={cn('w-[200px] text-text-tertiary font-medium overflow-hidden text-ellipsis whitespace-nowrap', editAlignTop && 'pt-1')}>{label}</div>
+      <div className={cn('w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap', editAlignTop && 'pt-1')}>{label}</div>
       <div className="grow flex items-center gap-1 text-text-secondary">
         {valueIcon}
         {!showEdit
diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index a05a683d0f..7c2220acb6 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -175,7 +175,7 @@ const translation = {
   },
   stepThree: {
     creationTitle: '🎉 Knowledge created',
-    creationContent: 'We automatically named the Knowledge, you can modify it at any time',
+    creationContent: 'We automatically named the Knowledge, you can modify it at any time.',
     label: 'Knowledge name',
     additionTitle: '🎉 Document uploaded',
     additionP1: 'The document has been uploaded to the Knowledge',

From 6da7efaa1df17fb946984e298b7e57361582262b Mon Sep 17 00:00:00 2001
From: nite-knite <nkCoding@gmail.com>
Date: Mon, 16 Dec 2024 18:04:20 +0800
Subject: [PATCH 2/3] feat: update dataset embedding error message display

---
 .../datasets/create/embedding-process/index.tsx    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index aca9fa502b..98f0ebc6fd 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -29,6 +29,7 @@ import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useProviderContext } from '@/context/provider-context'
 import { sleep } from '@/utils'
 import { RETRIEVE_METHOD } from '@/types/app'
+import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
   datasetId: string
@@ -295,12 +296,15 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                 <div className="shrink-0 text-xs">{`${getSourcePercent(indexingStatusDetail)}%`}</div>
               )}
               {indexingStatusDetail.indexing_status === 'error' && (
-                <>
-                  <span className="flex items-center max-w-[200px] text-xs text-text-destructive truncate" title={indexingStatusDetail.error || ''}>
-                    {indexingStatusDetail.error || 'Error'}
+                <Tooltip
+                  popupClassName='px-4 py-[14px] max-w-60 text-sm leading-4 text-text-secondary border-[0.5px] border-components-panel-border rounded-xl'
+                  offset={4}
+                  popupContent={indexingStatusDetail.error}
+                >
+                  <span>
+                    <RiErrorWarningFill className='shrink-0 size-4 text-text-destructive' />
                   </span>
-                  <RiErrorWarningFill className='shrink-0 size-4 text-text-destructive' />
-                </>
+                </Tooltip>
               )}
               {indexingStatusDetail.indexing_status === 'completed' && (
                 <RiCheckboxCircleFill className='shrink-0 size-4 text-text-success' />

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 3/3] 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>
           {