use base ui toast

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

@@ -4,6 +4,23 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { RETRIEVE_METHOD } from '@/types/app'
 import ModifyRetrievalModal from '../modify-retrieval-modal'
 
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 vi.mock('@/app/components/base/button', () => ({
   default: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
     <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
@@ -41,10 +58,6 @@ vi.mock('@/context/i18n', () => ({
   useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
 }))
 
-vi.mock('../../../base/toast', () => ({
-  default: { notify: vi.fn() },
-}))
-
 vi.mock('../../settings/utils', () => ({
   checkShowMultiModalTip: () => false,
 }))

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

@@ -7,13 +7,13 @@ import * as React from 'react'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDocLink } from '@/context/i18n'
-import Toast from '../../base/toast'
 import { ModelTypeEnum } from '../../header/account-setting/model-provider-page/declarations'
 import { checkShowMultiModalTip } from '../settings/utils'
 
@@ -24,43 +24,30 @@ type Props = {
   onHide: () => void
   onSave: (value: RetrievalConfig) => void
 }
-
-const ModifyRetrievalModal: FC<Props> = ({
-  indexMethod,
-  value,
-  isShow,
-  onHide,
-  onSave,
-}) => {
+const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, onSave }) => {
   const ref = useRef(null)
   const { t } = useTranslation()
   const docLink = useDocLink()
   const [retrievalConfig, setRetrievalConfig] = useState(value)
   const embeddingModel = useDatasetDetailContextWithSelector(state => state.dataset?.embedding_model)
   const embeddingModelProvider = useDatasetDetailContextWithSelector(state => state.dataset?.embedding_model_provider)
-
   // useClickAway(() => {
   //   if (ref)
   //     onHide()
   // }, ref)
-
   const { data: embeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
   const { data: rerankModelList } = useModelList(ModelTypeEnum.rerank)
-
   const handleSave = () => {
-    if (
-      !isReRankModelSelected({
-        rerankModelList,
-        retrievalConfig,
-        indexMethod,
-      })
-    ) {
-      Toast.notify({ type: 'error', message: t('datasetConfig.rerankModelRequired', { ns: 'appDebug' }) })
+    if (!isReRankModelSelected({
+      rerankModelList,
+      retrievalConfig,
+      indexMethod,
+    })) {
+      toast.error(t('datasetConfig.rerankModelRequired', { ns: 'appDebug' }))
       return
     }
     onSave(retrievalConfig)
   }
-
   const showMultiModalTip = useMemo(() => {
     return checkShowMultiModalTip({
       embeddingModel: {
@@ -77,10 +64,8 @@ const ModifyRetrievalModal: FC<Props> = ({
       rerankModelList,
     })
   }, [embeddingModelProvider, embeddingModel, retrievalConfig.reranking_enable, retrievalConfig.reranking_model, indexMethod, embeddingModelList, rerankModelList])
-
   if (!isShow)
     return null
-
   return (
     <div
       className="flex w-full flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9"
@@ -93,22 +78,14 @@ const ModifyRetrievalModal: FC<Props> = ({
         <div className="text-base font-semibold text-text-primary">
           <div>{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}</div>
           <div className="text-xs font-normal leading-[18px] text-text-tertiary">
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={docLink('/use-dify/knowledge/create-knowledge/setting-indexing-methods')}
-              className="text-text-accent"
-            >
+            <a target="_blank" rel="noopener noreferrer" href={docLink('/use-dify/knowledge/create-knowledge/setting-indexing-methods')} className="text-text-accent">
               {t('form.retrievalSetting.learnMore', { ns: 'datasetSettings' })}
             </a>
             {t('form.retrievalSetting.description', { ns: 'datasetSettings' })}
           </div>
         </div>
         <div className="flex">
-          <div
-            onClick={onHide}
-            className="flex h-8 w-8 cursor-pointer items-center justify-center"
-          >
+          <div onClick={onHide} className="flex h-8 w-8 cursor-pointer items-center justify-center">
             <RiCloseLine className="h-4 w-4 text-text-tertiary" />
           </div>
         </div>
@@ -119,19 +96,8 @@ const ModifyRetrievalModal: FC<Props> = ({
           {t('form.retrievalSetting.method', { ns: 'datasetSettings' })}
         </div>
         {indexMethod === 'high_quality'
-          ? (
-              <RetrievalMethodConfig
-                value={retrievalConfig}
-                onChange={setRetrievalConfig}
-                showMultiModalTip={showMultiModalTip}
-              />
-            )
-          : (
-              <EconomicalRetrievalMethodConfig
-                value={retrievalConfig}
-                onChange={setRetrievalConfig}
-              />
-            )}
+          ? (<RetrievalMethodConfig value={retrievalConfig} onChange={setRetrievalConfig} showMultiModalTip={showMultiModalTip} />)
+          : (<EconomicalRetrievalMethodConfig value={retrievalConfig} onChange={setRetrievalConfig} />)}
       </div>
       <div className="flex justify-end p-4 pt-2">
         <Button className="mr-2 shrink-0" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>