feat: has added all tools

This commit is contained in:
Joel 2025-05-09 17:30:02 +08:00
parent 9c3817a8e8
commit aaa5309ba0
3 changed files with 44 additions and 6 deletions

View File

@ -1,6 +1,6 @@
'use client' 'use client'
import type { FC } from 'react' import type { FC } from 'react'
import React, { useEffect, useMemo } from 'react' import React, { useEffect, useMemo, useRef } from 'react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react' import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
import { useGetLanguage } from '@/context/i18n' import { useGetLanguage } from '@/context/i18n'
@ -13,6 +13,7 @@ import { ViewType } from '../view-type-select'
import ActonItem from './action-item' import ActonItem from './action-item'
import BlockIcon from '../../block-icon' import BlockIcon from '../../block-icon'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useHover } from 'ahooks'
type Props = { type Props = {
className?: string className?: string
@ -39,10 +40,39 @@ const Tool: FC<Props> = ({
const actions = payload.tools const actions = payload.tools
const hasAction = true // Now always support actions const hasAction = true // Now always support actions
const [isFold, setFold] = React.useState<boolean>(true) const [isFold, setFold] = React.useState<boolean>(true)
const ref = useRef(null)
const isHovering = useHover(ref)
const getIsDisabled = (tool: ToolType) => { const getIsDisabled = (tool: ToolType) => {
if (!selectedTools || !selectedTools.length) return false if (!selectedTools || !selectedTools.length) return false
return selectedTools.some(selectedTool => selectedTool.provider_name === payload.name && selectedTool.tool_name === tool.name) return selectedTools.some(selectedTool => selectedTool.provider_name === payload.name && selectedTool.tool_name === tool.name)
} }
const totalToolsNum = actions.length
const selectedToolsNum = actions.filter(action => getIsDisabled(action)).length
const isAllSelected = selectedToolsNum === totalToolsNum
const selectedInfo = useMemo(() => {
if (isHovering && !isAllSelected) {
return (
<span className='system-xs-regular text-components-button-secondary-accent-text'>
{t('workflow.tabs.addAll')}
</span>
)
}
if (selectedToolsNum === 0)
return <></>
return (
<span className='system-xs-regular text-text-tertiary'>
{isAllSelected
? t('workflow.tabs.allAdded')
: `${selectedToolsNum} / ${totalToolsNum}`
}
</span>
)
}, [isAllSelected, isHovering, selectedToolsNum, t, totalToolsNum])
useEffect(() => { useEffect(() => {
if (hasSearchText && isFold) { if (hasSearchText && isFold) {
setFold(false) setFold(false)
@ -72,6 +102,7 @@ const Tool: FC<Props> = ({
<div <div
key={payload.id} key={payload.id}
className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')} className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')}
ref={ref}
> >
<div className={cn(className)}> <div className={cn(className)}>
<div <div
@ -103,13 +134,16 @@ const Tool: FC<Props> = ({
type={BlockEnum.Tool} type={BlockEnum.Tool}
toolIcon={payload.icon} toolIcon={payload.icon}
/> />
<div className='ml-2 w-0 flex-1 grow truncate text-sm text-text-primary'>{payload.label[language]}</div> <div className='ml-2 w-0 grow truncate text-sm text-text-primary'>
<span>{payload.label[language]}</span>
{isFlatView && (
<span className='system-xs-regular ml-2 text-text-quaternary'>{groupName}</span>
)}
</div>
</div> </div>
<div className='flex items-center'> <div className='ml-2 flex items-center'>
{isFlatView && ( {selectedInfo}
<div className='system-xs-regular text-text-tertiary'>{groupName}</div>
)}
{hasAction && ( {hasAction && (
<FoldIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary', isFold && 'text-text-tertiary')} /> <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary', isFold && 'text-text-tertiary')} />
)} )}

View File

@ -229,6 +229,8 @@ const translation = {
'utilities': 'Utilities', 'utilities': 'Utilities',
'noResult': 'No match found', 'noResult': 'No match found',
'agent': 'Agent Strategy', 'agent': 'Agent Strategy',
'allAdded': 'All added',
'addAll': 'Add all',
}, },
blocks: { blocks: {
'start': 'Start', 'start': 'Start',

View File

@ -230,6 +230,8 @@ const translation = {
'utilities': '工具', 'utilities': '工具',
'noResult': '未找到匹配项', 'noResult': '未找到匹配项',
'agent': 'Agent 策略', 'agent': 'Agent 策略',
'allAdded': '已添加全部',
'addAll': '添加全部',
}, },
blocks: { blocks: {
'start': '开始', 'start': '开始',