feat: tooltip (#7634)

This commit is contained in:
Yi Xiao
2024-08-26 13:00:02 +08:00
committed by GitHub
parent 1ba3d3acd6
commit 3be756eaed
93 changed files with 640 additions and 758 deletions

View File

@@ -39,10 +39,9 @@ const CardItem: FC<ICardItemProps> = ({
<div className={cn('text-[13px] leading-[18px] font-medium text-gray-800 overflow-hidden text-ellipsis whitespace-nowrap', !config.embedding_available && 'opacity-50')}>{config.name}</div>
{!config.embedding_available && (
<Tooltip
selector={`unavailable-tag-${config.id}`}
htmlContent={t('dataset.unavailableTip')}
popupContent={t('dataset.unavailableTip')}
>
<span className='shrink-0 inline-flex whitespace-nowrap px-1 border boder-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
<span className='shrink-0 inline-flex whitespace-nowrap px-1 border border-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
</Tooltip>
)}
</div>

View File

@@ -2,9 +2,6 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import {
RiQuestionLine,
} from '@remixicon/react'
import type { Props } from './var-picker'
import VarPicker from './var-picker'
import cn from '@/utils/classnames'
@@ -24,13 +21,12 @@ const ContextVar: FC<Props> = (props) => {
</div>
<div className='mr-1 text-sm font-medium text-gray-800'>{t('appDebug.feature.dataSet.queryVariable.title')}</div>
<Tooltip
htmlContent={<div className='w-[180px]'>
{t('appDebug.feature.dataSet.queryVariable.tip')}
</div>}
selector='context-var-tooltip'
>
<RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
</Tooltip>
popupContent={
<div className='w-[180px]'>
{t('appDebug.feature.dataSet.queryVariable.tip')}
</div>
}
/>
</div>
<VarPicker {...props} />

View File

@@ -5,7 +5,6 @@ import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiAlertFill,
RiQuestionLine,
} from '@remixicon/react'
import WeightedScore from './weighted-score'
import TopKItem from '@/app/components/base/param-item/top-k-item'
@@ -23,7 +22,7 @@ import ModelSelector from '@/app/components/header/account-setting/model-provide
import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
import type { ModelConfig } from '@/app/components/workflow/types'
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import type {
DataSet,
@@ -173,7 +172,7 @@ const ConfigContent: FC<Props> = ({
title={(
<div className='flex items-center'>
{t('appDebug.datasetConfig.retrieveOneWay.title')}
<TooltipPlus
<Tooltip
popupContent={(
<div className='w-[320px]'>
{t('dataset.nTo1RetrievalLegacy')}
@@ -181,7 +180,7 @@ const ConfigContent: FC<Props> = ({
)}
>
<div className='ml-1 flex items-center px-[5px] h-[18px] rounded-[5px] border border-text-accent-secondary system-2xs-medium-uppercase text-text-accent-secondary'>legacy</div>
</TooltipPlus>
</Tooltip>
</div>
)}
description={t('appDebug.datasetConfig.retrieveOneWay.description')}
@@ -250,12 +249,15 @@ const ConfigContent: FC<Props> = ({
onClick={() => handleRerankModeChange(option.value)}
>
<div className='truncate'>{option.label}</div>
<TooltipPlus
popupContent={<div className='w-[200px]'>{option.tips}</div>}
hideArrow
>
<RiQuestionLine className='ml-0.5 w-3.5 h-4.5 text-text-quaternary' />
</TooltipPlus>
<Tooltip
popupContent={
<div className='w-[200px]'>
{option.tips}
</div>
}
popupClassName='ml-0.5'
triggerClassName='ml-0.5 w-3.5 h-3.5'
/>
</div>
))
}
@@ -281,9 +283,15 @@ const ConfigContent: FC<Props> = ({
)
}
<div className='ml-2 leading-[32px] text-[13px] font-medium text-gray-900'>{t('common.modelProvider.rerankModel.key')}</div>
<TooltipPlus popupContent={<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>}>
<RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
</TooltipPlus>
<Tooltip
popupContent={
<div className="w-[200px]">
{t('common.modelProvider.rerankModel.tip')}
</div>
}
popupClassName='ml-0.5'
triggerClassName='ml-0.5 w-3.5 h-3.5'
/>
</div>
<div>
<ModelSelector
@@ -361,11 +369,9 @@ const ConfigContent: FC<Props> = ({
<div className='mt-4'>
<div className='flex items-center space-x-0.5'>
<div className='leading-[32px] text-[13px] font-medium text-gray-900'>{t('common.modelProvider.systemReasoningModel.key')}</div>
<TooltipPlus
<Tooltip
popupContent={t('common.modelProvider.systemReasoningModel.tip')}
>
<RiQuestionLine className='w-3.5 h-4.5 text-gray-400' />
</TooltipPlus>
/>
</div>
<ModelParameterModal
isInWorkflow={isInWorkflow}