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

@@ -18,7 +18,7 @@ import ChatWrapper from './chat-wrapper'
import cn from '@/utils/classnames'
import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
import { useStore } from '@/app/components/workflow/store'
@@ -63,31 +63,31 @@ const DebugAndPreview = () => {
<div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 text-text-primary system-xl-semibold'>
<div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
<div className='flex items-center gap-1'>
<TooltipPlus
<Tooltip
popupContent={t('common.operation.refresh')}
>
<ActionButton onClick={() => handleRestartChat()}>
<RefreshCcw01 className='w-4 h-4' />
</ActionButton>
</TooltipPlus>
</Tooltip>
{varList.length > 0 && (
<TooltipPlus
<Tooltip
popupContent={t('workflow.chatVariable.panelTitle')}
>
<ActionButton onClick={() => setShowConversationVariableModal(true)}>
<BubbleX className='w-4 h-4' />
</ActionButton>
</TooltipPlus>
</Tooltip>
)}
{variables.length > 0 && (
<div className='relative'>
<TooltipPlus
<Tooltip
popupContent={t('workflow.panel.userInputField')}
>
<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
<RiEqualizer2Line className='w-4 h-4' />
</ActionButton>
</TooltipPlus>
</Tooltip>
{expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45'/>}
</div>
)}

View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { v4 as uuid4 } from 'uuid'
import { RiCloseLine, RiQuestionLine } from '@remixicon/react'
import { RiCloseLine } from '@remixicon/react'
import { useContext } from 'use-context-selector'
import Button from '@/app/components/base/button'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import Tooltip from '@/app/components/base/tooltip'
import { ToastContext } from '@/app/components/base/toast'
import { useStore } from '@/app/components/workflow/store'
import type { EnvironmentVariable } from '@/app/components/workflow/types'
@@ -102,13 +102,14 @@ const VariableModal = ({
type === 'secret' && 'text-text-primary font-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border',
)} onClick={() => setType('secret')}>
<span>Secret</span>
<TooltipPlus popupContent={
<div className='w-[240px]'>
{t('workflow.env.modal.secretTip')}
</div>
}>
<RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-text-quaternary' />
</TooltipPlus>
<Tooltip
popupContent={
<div className='w-[240px]'>
{t('workflow.env.modal.secretTip')}
</div>
}
triggerClassName='ml-0.5 w-3.5 h-3.5'
/>
</div>
</div>
</div>