admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: tooltip (#7634)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
View File

@@ -9,7 +9,6 @@ import produce from 'immer'
import {
RiDeleteBinLine,
RiErrorWarningFill,
RiQuestionLine,
} from '@remixicon/react'
import s from './style.module.css'
import MessageTypeSelector from './message-type-selector'
@@ -174,12 +173,12 @@ const AdvancedPromptInput: FC<Props> = ({
<div className='text-sm font-semibold uppercase text-indigo-800'>{t('appDebug.pageTitle.line1')}
</div>
<Tooltip
htmlContent={<div className='w-[180px]'>
{t('appDebug.promptTip')}
</div>}
selector='config-prompt-tooltip'>
<RiQuestionLine className='w-[14px] h-[14px] text-indigo-400' />
</Tooltip>
popupContent={
<div className='w-[180px]'>
{t('appDebug.promptTip')}
</div>
}
/>
</div>)}
<div className={cn(s.optionWrap, 'items-center space-x-1')}>
{canDelete && (

15
web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
View File

@@ -3,9 +3,6 @@ import type { FC } from 'react'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import {
RiQuestionLine,
} from '@remixicon/react'
import produce from 'immer'
import { useContext } from 'use-context-selector'
import ConfirmAddVar from './confirm-add-var'
@@ -156,12 +153,12 @@ const Prompt: FC<ISimplePromptInput> = ({
<div className='h2'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
{!readonly && (
<Tooltip
htmlContent={<div className='w-[180px]'>
{t('appDebug.promptTip')}
</div>}
selector='config-prompt-tooltip'>
<RiQuestionLine className='w-[14px] h-[14px] text-indigo-400' />
</Tooltip>
popupContent={
<div className='w-[180px]'>
{t('appDebug.promptTip')}
</div>
}
/>
)}
</div>
<div className='flex items-center'>

13
web/app/components/app/configuration/config-var/index.tsx
View File

@@ -8,7 +8,6 @@ import { useContext } from 'use-context-selector'
import produce from 'immer'
import {
RiDeleteBinLine,
RiQuestionLine,
} from '@remixicon/react'
import Panel from '../base/feature-panel'
import EditModal from './config-modal'
@@ -282,11 +281,13 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
<div className='flex items-center'>
<div className='mr-1'>{t('appDebug.variableTitle')}</div>
{!readonly && (
<Tooltip htmlContent={<div className='w-[180px]'>
{t('appDebug.variableTip')}
</div>} selector='config-var-tooltip'>
<RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
</Tooltip>
<Tooltip
popupContent={
<div className='w-[180px]'>
{t('appDebug.variableTip')}
</div>
}
/>
)}
</div>
}

15
web/app/components/app/configuration/config-vision/index.tsx
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 { useContext } from 'use-context-selector'
import Panel from '../base/feature-panel'
import ParamConfig from './param-config'
@@ -33,11 +30,13 @@ const ConfigVision: FC = () => {
title={
<div className='flex items-center'>
<div className='mr-1'>{t('appDebug.vision.name')}</div>
<Tooltip htmlContent={<div className='w-[180px]' >
{t('appDebug.vision.description')}
</div>} selector='config-vision-tooltip'>
<RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
</Tooltip>
<Tooltip
popupContent={
<div className='w-[180px]' >
{t('appDebug.vision.description')}
</div>
}
/>
</div>
}
headerRight={

19
web/app/components/app/configuration/config-vision/param-config-content.tsx
View File

@@ -3,9 +3,6 @@ import type { FC } from 'react'
import React from 'react'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import {
RiQuestionLine,
} from '@remixicon/react'
import RadioGroup from './radio-group'
import ConfigContext from '@/context/debug-configuration'
import { Resolution, TransferMethod } from '@/types/app'
@@ -37,13 +34,15 @@ const ParamConfigContent: FC = () => {
<div>
<div className='mb-2 flex items-center space-x-1'>
<div className='leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.resolution')}</div>
<Tooltip htmlContent={<div className='w-[180px]' >
{t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
<div key={item}>{item}</div>
))}
</div>} selector='config-resolution-tooltip'>
<RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
</Tooltip>
<Tooltip
popupContent={
<div className='w-[180px]' >
{t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
<div key={item}>{item}</div>
))}
</div>
}
/>
</div>
<RadioGroup
className='space-x-3'

19
web/app/components/app/configuration/config-voice/param-config-content.tsx
View File

@@ -3,9 +3,6 @@ import useSWR from 'swr'
import type { FC } from 'react'
import { useContext } from 'use-context-selector'
import React, { Fragment } from 'react'
import {
RiQuestionLine,
} from '@remixicon/react'
import { usePathname } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { Listbox, Transition } from '@headlessui/react'
@@ -50,13 +47,15 @@ const VoiceParamConfig: FC = () => {
<div className='mb-2 flex items-center space-x-1'>
<div
className='leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.voice.voiceSettings.language')}</div>
<Tooltip htmlContent={<div className='w-[180px]'>
{t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
<div key={item}>{item}</div>
))}
</div>} selector='config-resolution-tooltip'>
<RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
</Tooltip>
<Tooltip
popupContent={
<div className='w-[180px]'>
{t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
<div key={item}>{item}</div>
))}
</div>
}
/>
</div>
<Listbox
value={languageItem}

5
web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
View File

@@ -1,7 +1,6 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import { RiQuestionLine } from '@remixicon/react'
import cn from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
type Props = {
@@ -25,14 +24,12 @@ const ItemPanel: FC<Props> = ({
{icon}
<div className='ml-3 mr-1 leading-6 text-sm font-semibold text-gray-800'>{name}</div>
<Tooltip
htmlContent={
popupContent={
<div className='w-[180px]'>
{description}
</div>
}
selector={`agent-setting-tooltip-${name}`}
>
<RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
</Tooltip>
</div>
<div>

32
web/app/components/app/configuration/config/agent/agent-tools/index.tsx
View File

@@ -7,13 +7,11 @@ import produce from 'immer'
import {
RiDeleteBinLine,
RiHammerFill,
RiQuestionLine,
} from '@remixicon/react'
import { useFormattingChangedDispatcher } from '../../../debug/hooks'
import SettingBuiltInTool from './setting-built-in-tool'
import cn from '@/utils/classnames'
import Panel from '@/app/components/app/configuration/base/feature-panel'
import Tooltip from '@/app/components/base/tooltip'
import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
import AppIcon from '@/app/components/base/app-icon'
@@ -23,7 +21,7 @@ import type { AgentTool } from '@/types/app'
import { type Collection, CollectionType } from '@/app/components/tools/types'
import { MAX_TOOLS_NUM } from '@/config'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
import AddToolModal from '@/app/components/tools/add-tool-modal'
@@ -68,11 +66,13 @@ const AgentTools: FC = () => {
title={
<div className='flex items-center'>
<div className='mr-1'>{t('appDebug.agent.tools.name')}</div>
<Tooltip htmlContent={<div className='w-[180px]'>
{t('appDebug.agent.tools.description')}
</div>} selector='config-tools-tooltip'>
<RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
</Tooltip>
<Tooltip
popupContent={
<div className='w-[180px]'>
{t('appDebug.agent.tools.description')}
</div>
}
/>
</div>
}
headerRight={
@@ -119,19 +119,20 @@ const AgentTools: FC = () => {
className={cn((item.isDeleted || item.notAuthor) ? 'line-through opacity-50' : '', 'grow w-0 ml-2 leading-[18px] text-[13px] font-medium text-gray-800 truncate')}
>
<span className='text-gray-800 pr-2'>{item.provider_type === CollectionType.builtIn ? item.provider_name : item.tool_label}</span>
<TooltipPlus
<Tooltip
popupContent={t('tools.toolNameUsageTip')}
>
<span className='text-gray-500'>{item.tool_name}</span>
</TooltipPlus>
</Tooltip>
</div>
</div>
<div className='shrink-0 ml-1 flex items-center'>
{(item.isDeleted || item.notAuthor)
? (
<div className='flex items-center'>
<TooltipPlus
<Tooltip
popupContent={t(`tools.${item.isDeleted ? 'toolRemoved' : 'notAuthorized'}`)}
needsDelay
>
<div className='mr-1 p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
if (item.notAuthor)
@@ -139,7 +140,7 @@ const AgentTools: FC = () => {
}}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</div>
</TooltipPlus>
</Tooltip>
<div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
const newModelConfig = produce(modelConfig, (draft) => {
@@ -155,16 +156,17 @@ const AgentTools: FC = () => {
)
: (
<div className='hidden group-hover:flex items-center'>
<TooltipPlus
<Tooltip
popupContent={t('tools.setBuiltInTools.infoAndSetting')}
needsDelay
>
<div className='mr-1 p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
<div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
setCurrentTool(item)
setIsShowSettingTool(true)
}}>
<InfoCircle className='w-4 h-4 text-gray-500' />
</div>
</TooltipPlus>
</Tooltip>
<div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
const newModelConfig = produce(modelConfig, (draft) => {

5
web/app/components/app/configuration/dataset-config/card-item/index.tsx
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>

16
web/app/components/app/configuration/dataset-config/context-var/index.tsx
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} />

40
web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
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}

6
web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
View File

@@ -13,7 +13,7 @@ import {
} from '@/app/components/header/account-setting/model-provider-page/declarations'
import { useDebugConfigurationContext } from '@/context/debug-configuration'
import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -111,9 +111,9 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
<RiArrowDownSLine className={`w-3 h-3 ${(currentModel && currentProvider) ? 'text-gray-800' : 'text-primary-600'}`} />
{
currentModel && currentModel.status !== ModelStatusEnum.active && (
<TooltipPlus popupContent={MODEL_STATUS_TEXT[currentModel.status][language]}>
<Tooltip popupContent={MODEL_STATUS_TEXT[currentModel.status][language]}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
</Tooltip>
)
}
</div>

17
web/app/components/app/configuration/features/chat-group/suggested-questions-after-answer/index.tsx
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 Panel from '@/app/components/app/configuration/base/feature-panel'
import SuggestedQuestionsAfterAnswerIcon from '@/app/components/app/configuration/base/icons/suggested-questions-after-answer-icon'
import Tooltip from '@/app/components/base/tooltip'
@@ -15,13 +12,15 @@ const SuggestedQuestionsAfterAnswer: FC = () => {
return (
<Panel
title={
<div className='flex items-center gap-2'>
<div className='flex items-center gap-1'>
<div>{t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}</div>
<Tooltip htmlContent={<div className='w-[180px]'>
{t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}
</div>} selector='suggestion-question-tooltip'>
<RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
</Tooltip>
<Tooltip
popupContent={
<div className='w-[180px]'>
{t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}
</div>
}
/>
</div>
}
headerIcon={<SuggestedQuestionsAfterAnswerIcon />}

3
web/app/components/app/configuration/prompt-value-panel/index.tsx
View File

@@ -16,7 +16,7 @@ import { AppType, ModelModeType } from '@/types/app'
import Select from '@/app/components/base/select'
import { DEFAULT_VALUE_MAX_LEN } from '@/config'
import Button from '@/app/components/base/button'
import Tooltip from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
import type { VisionFile, VisionSettings } from '@/types/app'
@@ -207,6 +207,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
{canNotRun
? (<Tooltip
popupContent={t('appDebug.otherError.promptNoBeEmpty')}
needsDelay
>
{renderRunButton()}
</Tooltip>)

16
web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx
View File

@@ -8,7 +8,7 @@ import { MessageCheckRemove, MessageFastPlus } from '@/app/components/base/icons
import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
import { Edit04 } from '@/app/components/base/icons/src/vender/line/general'
import RemoveAnnotationConfirmModal from '@/app/components/app/annotation/remove-annotation-confirm-modal'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { addAnnotation, delAnnotation } from '@/service/annotation'
import Toast from '@/app/components/base/toast'
import { useProviderContext } from '@/context/provider-context'
@@ -99,8 +99,9 @@ const CacheCtrlBtn: FC<Props> = ({
)
: answer
? (
<TooltipPlus
popupContent={t('appDebug.feature.annotation.add') as string}
<Tooltip
popupContent={t('appDebug.feature.annotation.add')}
needsDelay
>
<div
className='p-1 rounded-md hover:bg-[#EEF4FF] hover:text-[#444CE7] cursor-pointer'
@@ -108,12 +109,13 @@ const CacheCtrlBtn: FC<Props> = ({
>
<MessageFastPlus className='w-4 h-4' />
</div>
</TooltipPlus>
</Tooltip>
)
: null
}
<TooltipPlus
popupContent={t('appDebug.feature.annotation.edit') as string}
<Tooltip
popupContent={t('appDebug.feature.annotation.edit')}
needsDelay
>
<div
className='p-1 cursor-pointer rounded-md hover:bg-black/5'
@@ -121,7 +123,7 @@ const CacheCtrlBtn: FC<Props> = ({
>
<Edit04 className='w-4 h-4' />
</div>
</TooltipPlus>
</Tooltip>
</div>
<RemoveAnnotationConfirmModal

11
web/app/components/app/configuration/toolbox/annotation/config-param.tsx
View File

@@ -4,13 +4,10 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { usePathname, useRouter } from 'next/navigation'
import {
RiQuestionLine,
} from '@remixicon/react'
import ConfigParamModal from './config-param-modal'
import Panel from '@/app/components/app/configuration/base/feature-panel'
import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { LinkExternal02, Settings04 } from '@/app/components/base/icons/src/vender/line/general'
import ConfigContext from '@/context/debug-configuration'
import type { EmbeddingModelConfig } from '@/app/components/app/annotation/type'
@@ -31,13 +28,11 @@ export const Item: FC<{ title: string; tooltip: string; children: JSX.Element }>
<div>
<div className='flex items-center space-x-1'>
<div>{title}</div>
<TooltipPlus
<Tooltip
popupContent={
<div className='max-w-[200px] leading-[18px] text-[13px] font-medium text-gray-800'>{tooltip}</div>
}
>
<RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
</TooltipPlus>
/>
</div>
<div>{children}</div>
</div>

17
web/app/components/app/configuration/tools/index.tsx
View File

@@ -7,11 +7,10 @@ import {
RiAddLine,
RiArrowDownSLine,
RiDeleteBinLine,
RiQuestionLine,
} from '@remixicon/react'
import ConfigContext from '@/context/debug-configuration'
import Switch from '@/app/components/base/switch'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { Tool03 } from '@/app/components/base/icons/src/vender/solid/general'
import {
Settings01,
@@ -107,9 +106,13 @@ const Tools = () => {
<div className='mr-1 text-sm font-semibold text-gray-800'>
{t('appDebug.feature.tools.title')}
</div>
<TooltipPlus popupContent={<div className='max-w-[160px]'>{t('appDebug.feature.tools.tips')}</div>}>
<RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
</TooltipPlus>
<Tooltip
popupContent={
<div className='max-w-[160px]'>
{t('appDebug.feature.tools.tips')}
</div>
}
/>
</div>
{
!expanded && !!externalDataToolsConfig.length && (
@@ -143,7 +146,7 @@ const Tools = () => {
background={item.icon_background}
/>
<div className='mr-2 text-[13px] font-medium text-gray-800'>{item.label}</div>
<TooltipPlus
<Tooltip
popupContent={copied ? t('appApi.copied') : `${item.variable}, ${t('appApi.copy')}`}
>
<div
@@ -155,7 +158,7 @@ const Tools = () => {
>
{item.variable}
</div>
</TooltipPlus>
</Tooltip>
</div>
<div
className='hidden group-hover:flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'

22
web/app/components/app/create-app-modal/index.tsx
View File

@@ -23,7 +23,7 @@ import AppIcon from '@/app/components/base/app-icon'
import AppsFull from '@/app/components/billing/apps-full-in-dialog'
import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
import { getRedirection } from '@/utils/app-redirection'
@@ -100,8 +100,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
<div className='py-2 px-8'>
<div className='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.captionAppType')}</div>
<div className='flex'>
<TooltipPlus
hideArrow
<Tooltip
popupContent={
<div className='max-w-[280px] leading-[18px] text-xs text-gray-700'>{t('app.newApp.chatbotDescription')}</div>
}
@@ -120,9 +119,8 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
<ChatBot className='w-6 h-6 text-[#1570EF]' />
<div className='h-5 text-[13px] font-medium leading-[18px]'>{t('app.types.chatbot')}</div>
</div>
</TooltipPlus>
<TooltipPlus
hideArrow
</Tooltip>
<Tooltip
popupContent={
<div className='flex flex-col max-w-[320px] leading-[18px] text-xs'>
<div className='text-gray-700'>{t('app.newApp.completionDescription')}</div>
@@ -143,9 +141,8 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
<AiText className='w-6 h-6 text-[#0E9384]' />
<div className='h-5 text-[13px] font-medium leading-[18px]'>{t('app.newApp.completeApp')}</div>
</div>
</TooltipPlus>
<TooltipPlus
hideArrow
</Tooltip>
<Tooltip
popupContent={
<div className='max-w-[280px] leading-[18px] text-xs text-gray-700'>{t('app.newApp.agentDescription')}</div>
}
@@ -164,9 +161,8 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
<CuteRobote className='w-6 h-6 text-indigo-600' />
<div className='h-5 text-[13px] font-medium leading-[18px]'>{t('app.types.agent')}</div>
</div>
</TooltipPlus>
<TooltipPlus
hideArrow
</Tooltip>
<Tooltip
popupContent={
<div className='flex flex-col max-w-[320px] leading-[18px] text-xs'>
<div className='text-gray-700'>{t('app.newApp.workflowDescription')}</div>
@@ -188,7 +184,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
<div className='h-5 text-[13px] font-medium leading-[18px]'>{t('app.types.workflow')}</div>
<span className='absolute top-[-3px] right-[-3px] px-1 rounded-[5px] bg-white border border-black/8 text-gray-500 text-[10px] leading-[18px] font-medium'>BETA</span>
</div>
</TooltipPlus>
</Tooltip>
</div>
</div>
{showChatBotType && (

22
web/app/components/app/log/list.tsx
View File

@@ -5,10 +5,9 @@ import useSWR from 'swr'
import {
HandThumbDownIcon,
HandThumbUpIcon,
InformationCircleIcon,
XMarkIcon,
} from '@heroicons/react/24/outline'
import { RiEditFill } from '@remixicon/react'
import { RiEditFill, RiQuestionLine } from '@remixicon/react'
import { get } from 'lodash-es'
import InfiniteScroll from 'react-infinite-scroll-component'
import dayjs from 'dayjs'
@@ -20,7 +19,6 @@ import { useTranslation } from 'react-i18next'
import s from './style.module.css'
import VarPanel from './var-panel'
import cn from '@/utils/classnames'
import { randomString } from '@/utils'
import type { FeedbackFunc, Feedbacktype, IChatItem, SubmitAnnotationFunc } from '@/app/components/base/chat/chat/type'
import type { Annotation, ChatConversationFullDetailResponse, ChatConversationGeneralDetail, ChatConversationsResponse, ChatMessage, ChatMessagesRequest, CompletionConversationFullDetailResponse, CompletionConversationGeneralDetail, CompletionConversationsResponse, LogAnnotation } from '@/models/log'
import type { App } from '@/types/app'
@@ -28,7 +26,6 @@ import Loading from '@/app/components/base/loading'
import Drawer from '@/app/components/base/drawer'
import Popover from '@/app/components/base/popover'
import Chat from '@/app/components/base/chat/chat'
import Tooltip from '@/app/components/base/tooltip'
import { ToastContext } from '@/app/components/base/toast'
import { fetchChatConversationDetail, fetchChatMessages, fetchCompletionConversationDetail, updateLogMessageAnnotations, updateLogMessageFeedbacks } from '@/service/log'
import { TONE_LIST } from '@/config'
@@ -42,7 +39,7 @@ import MessageLogModal from '@/app/components/base/message-log-modal'
import { useStore as useAppStore } from '@/app/components/app/store'
import { useAppContext } from '@/context/app-context'
import useTimestamp from '@/hooks/use-timestamp'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { CopyIcon } from '@/app/components/base/copy-icon'
dayjs.extend(utc)
@@ -346,11 +343,11 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
<div className='text-gray-500 text-[10px] leading-[14px]'>{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')}</div>
{isChatMode && (
<div className='flex items-center text-gray-700 text-[13px] leading-[18px]'>
<TooltipPlus
hideArrow
popupContent={detail.id}>
<Tooltip
popupContent={detail.id}
>
<div className='max-w-[105px] truncate'>{detail.id}</div>
</TooltipPlus>
</Tooltip>
<CopyIcon content={detail.id} />
</div>
)}
@@ -380,7 +377,7 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
btnClassName='mr-4 !bg-gray-50 !py-1.5 !px-2.5 border-none font-normal'
btnElement={<>
<span className='text-[13px]'>{targetTone}</span>
<InformationCircleIcon className='h-4 w-4 text-gray-800 ml-1.5' />
<RiQuestionLine className='h-4 w-4 text-gray-800 ml-1.5' />
</>}
htmlContent={<div className='w-[280px]'>
<div className='flex justify-between py-2 px-4 font-medium text-sm text-gray-700'>
@@ -641,13 +638,12 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
const renderTdValue = (value: string | number | null, isEmptyStyle: boolean, isHighlight = false, annotation?: LogAnnotation) => {
return (
<Tooltip
htmlContent={
popupContent={
<span className='text-xs text-gray-500 inline-flex items-center'>
<RiEditFill className='w-3 h-3 mr-1' />{`${t('appLog.detail.annotationTip', { user: annotation?.account?.name })} ${formatTime(annotation?.created_at || dayjs().unix(), 'MM-DD hh:mm A')}`}
</span>
}
className={(isHighlight && !isChatMode) ? '' : '!hidden'}
selector={`highlight-${randomString(16)}`}
popupClassName={(isHighlight && !isChatMode) ? '' : '!hidden'}
>
<div className={cn(isEmptyStyle ? 'text-gray-400' : 'text-gray-700', !isHighlight ? '' : 'bg-orange-100', 'text-sm overflow-hidden text-ellipsis whitespace-nowrap')}>
{value || '-'}

8
web/app/components/app/overview/appCard.tsx
View File

@@ -195,8 +195,7 @@ function AppCard({
)}
{isApp && isCurrentWorkspaceManager && (
<Tooltip
content={t('appOverview.overview.appInfo.regenerate') || ''}
selector={`code-generate-${randomString(8)}`}
popupContent={t('appOverview.overview.appInfo.regenerate') || ''}
>
<div
className="w-8 h-8 ml-0.5 cursor-pointer hover:bg-gray-200 rounded-lg"
@@ -227,11 +226,10 @@ function AppCard({
disabled={disabled}
>
<Tooltip
content={
popupContent={
t('appOverview.overview.appInfo.preUseReminder') ?? ''
}
selector={`op-btn-${randomString(16)}`}
className={disabled ? 'mt-[-8px]' : '!hidden'}
popupClassName={disabled ? 'mt-[-8px]' : '!hidden'}
>
<div className="flex flex-row items-center">
<op.opIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />

3
web/app/components/app/overview/embedded/index.tsx
View File

@@ -153,8 +153,7 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
</div>
<div className="flex items-center justify-center gap-1 p-2 rounded-lg">
<Tooltip
selector={'code-copy-feedback'}
content={(isCopied[option] ? t(`${prefixEmbedded}.copied`) : t(`${prefixEmbedded}.copy`)) || ''}
popupContent={(isCopied[option] ? t(`${prefixEmbedded}.copied`) : t(`${prefixEmbedded}.copy`)) || ''}
>
<div className="w-8 h-8 rounded-lg cursor-pointer hover:bg-gray-100">
<div onClick={onClickCopy} className={`w-full h-full ${copyStyle.copyIcon} ${isCopied[option] ? copyStyle.copied : ''}`}></div>

12
web/app/components/app/overview/settings/index.tsx
View File

@@ -15,7 +15,7 @@ import type { AppDetailResponse } from '@/models/app'
import type { AppIconType, AppSSO, Language } from '@/types/app'
import { useToastContext } from '@/app/components/base/toast'
import { languages } from '@/i18n/language'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import AppContext from '@/context/app-context'
import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
import AppIconPicker from '@/app/components/base/app-icon-picker'
@@ -240,9 +240,15 @@ const SettingsModal: FC<ISettingsModalProps> = ({
<p className='system-xs-medium text-gray-500'>{t(`${prefixSettings}.sso.label`)}</p>
<div className='flex justify-between items-center'>
<div className='font-medium system-sm-semibold flex-grow text-gray-900'>{t(`${prefixSettings}.sso.title`)}</div>
<TooltipPlus disabled={systemFeatures.sso_enforced_for_web} popupContent={<div className='w-[180px]'>{t(`${prefixSettings}.sso.tooltip`)}</div>}>
<Tooltip
disabled={systemFeatures.sso_enforced_for_web}
popupContent={
<div className='w-[180px]'>{t(`${prefixSettings}.sso.tooltip`)}</div>
}
asChild={false}
>
<Switch disabled={!systemFeatures.sso_enforced_for_web} defaultValue={systemFeatures.sso_enforced_for_web && inputInfo.enable_sso} onChange={v => setInputInfo({ ...inputInfo, enable_sso: v })}></Switch>
</TooltipPlus>
</Tooltip>
</div>
<p className='body-xs-regular text-gray-500'>{t(`${prefixSettings}.sso.description`)}</p>
</div>}