mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 18:08:07 +08:00
refactor(web): remove tooltip-plus and migrate to ui tooltip
This commit is contained in:
yyh
@ -15,7 +15,7 @@ import {
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
|
||||
import Tooltip from '@/app/components/base/tooltip-plus'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
|
||||
import { START_TAB_ID } from '@/app/components/workflow/skill/constants'
|
||||
import { useSkillAssetNodeMap } from '@/app/components/workflow/skill/hooks/file-tree/data/use-skill-asset-tree'
|
||||
import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
|
||||
@ -169,40 +169,48 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
|
||||
offset={4}
|
||||
>
|
||||
<PortalToFollowElemTrigger ref={ref} className="inline-flex">
|
||||
<Tooltip popupContent={tooltipContent} disabled={!tooltipContent}>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex min-w-[18px] select-none items-center gap-[2px] overflow-hidden rounded-[5px] border py-[1px] pl-[1px] pr-[4px] shadow-xs',
|
||||
isInteractive ? 'cursor-pointer' : 'cursor-default',
|
||||
isMissing ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
|
||||
isSelected && 'border-text-accent',
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
disabled={!tooltipContent}
|
||||
render={(
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex min-w-[18px] select-none items-center gap-[2px] overflow-hidden rounded-[5px] border py-[1px] pl-[1px] pr-[4px] shadow-xs',
|
||||
isInteractive ? 'cursor-pointer' : 'cursor-default',
|
||||
isMissing ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
|
||||
isSelected && 'border-text-accent',
|
||||
)}
|
||||
onMouseDown={() => {
|
||||
if (!isInteractive)
|
||||
return
|
||||
setOpen(prev => !prev)
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-center p-px">
|
||||
{isFolder
|
||||
? <span className={cn('i-ri-folder-line size-[14px]', isMissing ? 'text-text-warning' : 'text-text-accent')} aria-hidden="true" />
|
||||
: (
|
||||
<FileTypeIcon
|
||||
type={(iconType || 'document') as FileAppearanceType}
|
||||
size="sm"
|
||||
className={cn('!size-[14px]', isMissing && '!text-text-warning')}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<span className={cn('max-w-[180px] truncate text-[12px] font-medium leading-4', isMissing ? 'text-text-warning' : 'text-text-accent')}>
|
||||
{displayName}
|
||||
</span>
|
||||
{
|
||||
isMissing && (
|
||||
<span className="i-ri-alert-fill size-3 text-text-warning" />
|
||||
)
|
||||
}
|
||||
</span>
|
||||
)}
|
||||
onMouseDown={() => {
|
||||
if (!isInteractive)
|
||||
return
|
||||
setOpen(prev => !prev)
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-center p-px">
|
||||
{isFolder
|
||||
? <span className={cn('i-ri-folder-line size-[14px]', isMissing ? 'text-text-warning' : 'text-text-accent')} aria-hidden="true" />
|
||||
: (
|
||||
<FileTypeIcon
|
||||
type={(iconType || 'document') as FileAppearanceType}
|
||||
size="sm"
|
||||
className={cn('!size-[14px]', isMissing && '!text-text-warning')}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<span className={cn('max-w-[180px] truncate text-[12px] font-medium leading-4', isMissing ? 'text-text-warning' : 'text-text-accent')}>
|
||||
{displayName}
|
||||
</span>
|
||||
{
|
||||
isMissing && (
|
||||
<span className="i-ri-alert-fill size-3 text-text-warning" />
|
||||
)
|
||||
}
|
||||
</span>
|
||||
/>
|
||||
{tooltipContent && (
|
||||
<TooltipContent>{tooltipContent}</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className="z-[1000]">
|
||||
|
||||
@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
|
||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import Tooltip from '@/app/components/base/tooltip-plus'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
|
||||
import SkillEditor from '@/app/components/workflow/skill/editor/skill-editor'
|
||||
import { useFileTypeInfo } from '@/app/components/workflow/skill/hooks/use-file-type-info'
|
||||
import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
|
||||
@ -121,22 +121,29 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Tooltip
|
||||
popupContent={t('skillEditor.openInSkillEditor', { ns: 'workflow' })}
|
||||
disabled={!canOpenInEditor}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpenInEditor}
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
disabled={!canOpenInEditor}
|
||||
className={cn(
|
||||
'inline-flex size-6 items-center justify-center rounded-md text-text-tertiary transition hover:bg-state-base-hover',
|
||||
!canOpenInEditor && 'cursor-not-allowed opacity-40 hover:bg-transparent',
|
||||
render={(
|
||||
<span className="inline-flex">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpenInEditor}
|
||||
disabled={!canOpenInEditor}
|
||||
className={cn(
|
||||
'inline-flex size-6 items-center justify-center rounded-md text-text-tertiary transition hover:bg-state-base-hover',
|
||||
!canOpenInEditor && 'cursor-not-allowed opacity-40 hover:bg-transparent',
|
||||
)}
|
||||
aria-label={t('skillEditor.openInSkillEditor', { ns: 'workflow' })}
|
||||
>
|
||||
<span className="i-ri-external-link-line size-4" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
aria-label={t('skillEditor.openInSkillEditor', { ns: 'workflow' })}
|
||||
>
|
||||
<span className="i-ri-external-link-line size-4" />
|
||||
</button>
|
||||
/>
|
||||
{canOpenInEditor && (
|
||||
<TooltipContent>{t('skillEditor.openInSkillEditor', { ns: 'workflow' })}</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -14,8 +14,7 @@ import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
|
||||
|
||||
import Tooltip from '@/app/components/base/tooltip-plus'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
|
||||
import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import ToolAuthorizationSection from '@/app/components/plugins/plugin-detail-panel/tool-selector/sections/tool-authorization-section'
|
||||
import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
|
||||
@ -606,50 +605,56 @@ const ToolBlockComponent = ({
|
||||
return (
|
||||
<>
|
||||
<span ref={ref} className="inline-flex">
|
||||
<Tooltip
|
||||
disabled={!isToolMissing || isToolDisabled}
|
||||
offset={4}
|
||||
noDecoration
|
||||
popupClassName="bg-transparent p-0"
|
||||
popupContent={missingTooltipContent}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'group/tool inline-flex items-center gap-[2px] rounded-[5px] border py-px pl-px pr-[3px] shadow-xs',
|
||||
isTriggerInteractive ? 'cursor-pointer' : 'cursor-default',
|
||||
isWarningStyle ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
|
||||
isSelected && 'border-text-accent',
|
||||
)}
|
||||
title={`${provider}.${tool}`}
|
||||
data-tool-config-id={configId}
|
||||
onMouseDown={() => {
|
||||
if (!isTriggerInteractive)
|
||||
return
|
||||
if (!currentProvider || !currentTool)
|
||||
return
|
||||
if (configuredToolValue)
|
||||
setToolValue(configuredToolValue)
|
||||
setIsSettingOpen(true)
|
||||
}}
|
||||
>
|
||||
{renderIcon()}
|
||||
<span className={cn('max-w-[180px] truncate system-xs-medium', isWarningStyle ? 'text-text-warning' : 'text-text-accent')}>
|
||||
{isToolMissing ? missingDisplayLabel : displayLabel}
|
||||
</span>
|
||||
{(isToolMissing || isToolDisabled) && (
|
||||
<>
|
||||
<span className="flex h-4 items-center justify-center p-[2px] text-text-warning">
|
||||
<span className="i-ri-alert-fill h-3 w-3" />
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
disabled={!isToolMissing || isToolDisabled}
|
||||
render={(
|
||||
<span
|
||||
className={cn(
|
||||
'group/tool inline-flex items-center gap-[2px] rounded-[5px] border py-px pl-px pr-[3px] shadow-xs',
|
||||
isTriggerInteractive ? 'cursor-pointer' : 'cursor-default',
|
||||
isWarningStyle ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
|
||||
isSelected && 'border-text-accent',
|
||||
)}
|
||||
title={`${provider}.${tool}`}
|
||||
data-tool-config-id={configId}
|
||||
onMouseDown={() => {
|
||||
if (!isTriggerInteractive)
|
||||
return
|
||||
if (!currentProvider || !currentTool)
|
||||
return
|
||||
if (configuredToolValue)
|
||||
setToolValue(configuredToolValue)
|
||||
setIsSettingOpen(true)
|
||||
}}
|
||||
>
|
||||
{renderIcon()}
|
||||
<span className={cn('max-w-[180px] truncate system-xs-medium', isWarningStyle ? 'text-text-warning' : 'text-text-accent')}>
|
||||
{isToolMissing ? missingDisplayLabel : displayLabel}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{!isToolMissing && !isToolDisabled && needAuthorization && (
|
||||
<span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
|
||||
{authBadgeLabel}
|
||||
<span className="i-ri-alert-fill h-3 w-3" />
|
||||
{(isToolMissing || isToolDisabled) && (
|
||||
<span className="flex h-4 items-center justify-center p-[2px] text-text-warning">
|
||||
<span className="i-ri-alert-fill h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
{!isToolMissing && !isToolDisabled && needAuthorization && (
|
||||
<span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
|
||||
{authBadgeLabel}
|
||||
<span className="i-ri-alert-fill h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
/>
|
||||
{isToolMissing && !isToolDisabled && (
|
||||
<TooltipContent
|
||||
sideOffset={4}
|
||||
variant="plain"
|
||||
popupClassName="bg-transparent p-0"
|
||||
>
|
||||
{missingTooltipContent}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</span>
|
||||
{useModalValue && (
|
||||
|
||||
@ -14,8 +14,7 @@ import AppIcon from '@/app/components/base/app-icon'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
|
||||
import Tooltip from '@/app/components/base/tooltip-plus'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
|
||||
import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import ToolAuthorizationSection from '@/app/components/plugins/plugin-detail-panel/tool-selector/sections/tool-authorization-section'
|
||||
import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
|
||||
@ -910,35 +909,43 @@ const ToolGroupBlockComponent = ({
|
||||
return (
|
||||
<>
|
||||
<span ref={ref} className="inline-flex">
|
||||
<Tooltip
|
||||
disabled={!isToolMissing || isToolDisabled}
|
||||
offset={4}
|
||||
noDecoration
|
||||
popupClassName="bg-transparent p-0"
|
||||
popupContent={missingTooltipContent}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
|
||||
isTriggerInteractive ? 'group cursor-pointer' : 'cursor-default',
|
||||
isWarningStyle ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
|
||||
isSelected && 'border-text-accent',
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
disabled={!isToolMissing || isToolDisabled}
|
||||
render={(
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
|
||||
isTriggerInteractive ? 'group cursor-pointer' : 'cursor-default',
|
||||
isWarningStyle ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
|
||||
isSelected && 'border-text-accent',
|
||||
)}
|
||||
title={providerLabel}
|
||||
onMouseDown={() => {
|
||||
if (!isTriggerInteractive)
|
||||
return
|
||||
if (!toolItems.length)
|
||||
return
|
||||
setIsSettingOpen(true)
|
||||
}}
|
||||
>
|
||||
{renderIcon()}
|
||||
<span className={cn('max-w-[160px] truncate system-xs-medium', isWarningStyle ? 'text-text-warning' : 'text-text-accent')}>
|
||||
{isToolMissing ? missingDisplayLabel : providerLabel}
|
||||
</span>
|
||||
{toolStatusBadge}
|
||||
</span>
|
||||
)}
|
||||
title={providerLabel}
|
||||
onMouseDown={() => {
|
||||
if (!isTriggerInteractive)
|
||||
return
|
||||
if (!toolItems.length)
|
||||
return
|
||||
setIsSettingOpen(true)
|
||||
}}
|
||||
>
|
||||
{renderIcon()}
|
||||
<span className={cn('max-w-[160px] truncate system-xs-medium', isWarningStyle ? 'text-text-warning' : 'text-text-accent')}>
|
||||
{isToolMissing ? missingDisplayLabel : providerLabel}
|
||||
</span>
|
||||
{toolStatusBadge}
|
||||
</span>
|
||||
/>
|
||||
{isToolMissing && !isToolDisabled && (
|
||||
<TooltipContent
|
||||
sideOffset={4}
|
||||
variant="plain"
|
||||
popupClassName="bg-transparent p-0"
|
||||
>
|
||||
{missingTooltipContent}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</span>
|
||||
{useModalValue && (
|
||||
|
||||
Reference in New Issue
Block a user