feat: tooltip (#7634)

2024-08-26 13:00:02 +08:00
parent 1ba3d3acd6
commit 3be756eaed
93 changed files with 640 additions and 758 deletions
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -2,15 +2,13 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
+
 import cn from '@/utils/classnames'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
 import { RETRIEVE_METHOD } from '@/types/app'
 import Switch from '@/app/components/base/switch'
-import Tooltip from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import type { RetrievalConfig } from '@/types/app'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import { useModelListAndDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -114,9 +112,11 @@ const RetrievalParamConfig: FC<Props> = ({
            )}
            <div className='flex items-center'>
              <span className='mr-0.5'>{t('common.modelProvider.rerankModel.key')}</span>
-              <Tooltip popupContent={<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>}>
-                <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
-              </Tooltip>
+              <Tooltip
+                popupContent={
+                  <div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
+                }
+              />
            </div>
          </div>
          <ModelSelector
@@ -191,10 +191,8 @@ const RetrievalParamConfig: FC<Props> = ({
                    <div className='truncate'>{option.label}</div>
                    <Tooltip
                      popupContent={<div className='w-[200px]'>{option.tips}</div>}
-                      hideArrow
-                    >
-                      <RiQuestionLine className='ml-0.5 w-3.5 h-4.5 text-text-quaternary' />
-                    </Tooltip>
+                      triggerClassName='ml-0.5 w-3.5 h-4.5'
+                    />
                  </div>
                ))
              }
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -22,7 +22,7 @@ import { Plan } from '@/app/components/billing/type'
 import { ZapFast } from '@/app/components/base/icons/src/vender/solid/general'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useProviderContext } from '@/context/provider-context'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import { sleep } from '@/utils'

 type Props = {
@@ -259,16 +259,18 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                <div className={s.percent}>{`${getSourcePercent(indexingStatusDetail)}%`}</div>
              )}
              {indexingStatusDetail.indexing_status === 'error' && indexingStatusDetail.error && (
-                <TooltipPlus popupContent={(
-                  <div className='max-w-[400px]'>
-                    {indexingStatusDetail.error}
-                  </div>
-                )}>
+                <Tooltip
+                  popupContent={(
+                    <div className='max-w-[400px]'>
+                      {indexingStatusDetail.error}
+                    </div>
+                  )}
+                >
                  <div className={cn(s.percent, s.error, 'flex items-center')}>
                    Error
                    <RiErrorWarningFill className='ml-1 w-4 h-4' />
                  </div>
-                </TooltipPlus>
+                </Tooltip>
              )}
              {indexingStatusDetail.indexing_status === 'error' && !indexingStatusDetail.error && (
                <div className={cn(s.percent, s.error, 'flex items-center')}>
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -7,7 +7,6 @@ import { XMarkIcon } from '@heroicons/react/20/solid'
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import {
  RiCloseLine,
-  RiQuestionLine,
 } from '@remixicon/react'
 import Link from 'next/link'
 import { groupBy } from 'lodash-es'
@@ -43,7 +42,6 @@ import { IS_CE_EDITION } from '@/config'
 import { RETRIEVE_METHOD } from '@/types/app'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Tooltip from '@/app/components/base/tooltip'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { LanguagesSupported } from '@/i18n/language'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -556,7 +554,7 @@ const StepTwo = ({
              className='border-[0.5px] !h-8 hover:outline hover:outline-[0.5px] hover:outline-gray-300 text-gray-700 font-medium bg-white shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]'
              onClick={setShowPreview}
            >
-              <Tooltip selector='data-preview-toggle'>
+              <Tooltip>
                <div className="flex flex-row items-center">
                  <RocketLaunchIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />
                  <span className="text-[13px]">{t('datasetCreation.stepTwo.previewTitleButton')}</span>
@@ -628,13 +626,13 @@ const StepTwo = ({
                    <div className='w-full'>
                      <div className={s.label}>
                        {t('datasetCreation.stepTwo.overlap')}
-                        <TooltipPlus popupContent={
-                          <div className='max-w-[200px]'>
-                            {t('datasetCreation.stepTwo.overlapTip')}
-                          </div>
-                        }>
-                          <RiQuestionLine className='ml-1 w-3.5 h-3.5 text-gray-400' />
-                        </TooltipPlus>
+                        <Tooltip
+                          popupContent={
+                            <div className='max-w-[200px]'>
+                              {t('datasetCreation.stepTwo.overlapTip')}
+                            </div>
+                          }
+                        />
                      </div>
                      <input
                        type="number"
--- a/web/app/components/datasets/create/website/firecrawl/base/field.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/base/field.tsx
@@ -1,12 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
 import Input from './input'
 import cn from '@/utils/classnames'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'

 type Props = {
  className?: string
@@ -37,11 +34,12 @@ const Field: FC<Props> = ({
        <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-gray-900')}>{label} </div>
        {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
        {tooltip && (
-          <TooltipPlus popupContent={
-            <div className='w-[200px]'>{tooltip}</div>
-          }>
-            <RiQuestionLine className='relative top-[3px] w-3 h-3 ml-1 text-gray-500' />
-          </TooltipPlus>
+          <Tooltip
+            popupContent={
+              <div className='w-[200px]'>{tooltip}</div>
+            }
+            popupClassName='relative top-[3px] w-3 h-3 ml-1'
+          />
        )}
      </div>
      <Input
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -102,7 +102,9 @@ const IconButton: FC<{
  const metadataMap = useMetadataMap()

  return (
-    <Tooltip content={metadataMap[type].text} selector={`doc-metadata-${type}`}>
+    <Tooltip
+      popupContent={metadataMap[type].text}
+    >
      <button className={cn(s.iconWrapper, 'group', isChecked ? s.iconCheck : '')}>
        <TypeIcon
          iconName={metadataMap[type].iconName || ''}
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -7,14 +7,12 @@ import { ArrowDownIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { pick } from 'lodash-es'
 import {
  RiMoreFill,
-  RiQuestionLine,
 } from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import dayjs from 'dayjs'
 import { Edit03 } from '../../base/icons/src/vender/solid/general'
-import TooltipPlus from '../../base/tooltip-plus'
 import { Globe01 } from '../../base/icons/src/vender/line/mapsAndTravel'
 import s from './style.module.css'
 import RenameModal from './rename-modal'
@@ -94,13 +92,11 @@ export const StatusItem: FC<{
    {
      errorMessage && (
        <Tooltip
-          selector='dataset-document-detail-item-status'
-          htmlContent={
+          popupContent={
            <div className='max-w-[260px] break-all'>{errorMessage}</div>
          }
-        >
-          <RiQuestionLine className='ml-1 w-[14px] h-[14px] text-gray-700' />
-        </Tooltip>
+          triggerClassName='ml-1 w-4 h-4'
+        />
      )
    }
  </div>
@@ -201,7 +197,11 @@ export const OperationAction: FC<{
    {isListScene && embeddingAvailable && (
      <>
        {archived
-          ? <Tooltip selector={`list-switch-${id}`} content={t('datasetDocuments.list.action.enableWarning') as string} className='!font-semibold'>
+          ? <Tooltip
+            popupContent={t('datasetDocuments.list.action.enableWarning')}
+            popupClassName='!font-semibold'
+            needsDelay
+          >
            <div>
              <Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' />
            </div>
@@ -221,9 +221,9 @@ export const OperationAction: FC<{
                  {!archived && enabled ? t('datasetDocuments.list.index.enable') : t('datasetDocuments.list.index.disable')}
                </span>
                <Tooltip
-                  selector={`detail-switch-${id}`}
-                  content={t('datasetDocuments.list.action.enableWarning') as string}
-                  className='!font-semibold'
+                  popupContent={t('datasetDocuments.list.action.enableWarning')}
+                  popupClassName='!font-semibold'
+                  needsDelay
                  disabled={!archived}
                >
                  <div>
@@ -426,7 +426,9 @@ const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents =
                    }
                  </span>
                  <div className='group-hover:flex hidden'>
-                    <TooltipPlus popupContent={t('datasetDocuments.list.table.rename')}>
+                    <Tooltip
+                      popupContent={t('datasetDocuments.list.table.rename')}
+                    >
                      <div
                        className='p-1 rounded-md cursor-pointer hover:bg-black/5'
                        onClick={(e) => {
@@ -436,7 +438,7 @@ const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents =
                      >
                        <Edit03 className='w-4 h-4 text-gray-500' />
                      </div>
-                    </TooltipPlus>
+                    </Tooltip>
                  </div>
                </div>

--- a/web/app/components/datasets/hit-testing/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/textarea.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next'
 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 Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
 import type { HitTestingResponse } from '@/models/datasets'
 import { hitTesting } from '@/service/datasets'
@@ -74,8 +74,7 @@ const TextAreaWithButton = ({
              {t('datasetHitTesting.input.title')}
            </span>
            <Tooltip
-              selector={'change-retrieval-method'}
-              htmlContent={t('dataset.retrieval.changeRetrievalMethod')}
+              popupContent={t('dataset.retrieval.changeRetrievalMethod')}
            >
              <div
                onClick={onClickRetrievalMethod}
@@ -99,8 +98,7 @@ const TextAreaWithButton = ({
            {text?.length > 200
              ? (
                <Tooltip
-                  content={t('datasetHitTesting.input.countWarning') as string}
-                  selector="hit-testing-warning"
+                  popupContent={t('datasetHitTesting.input.countWarning')}
                >
                  <div>
                    <Tag color="red" className="!text-red-600">