opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-28 11:56:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance AgentTools component with expandable provider sections and improved UI interactions

Browse Source
This commit is contained in:
zhsama 2025-11-28 18:30:55 +08:00
parent 5e96e4dda6
commit 660efda7f5
1 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import { useContext } from 'use-context-selector'
import copy from 'copy-to-clipboard' import copy from 'copy-to-clipboard'
import { produce } from 'immer' import { produce } from 'immer'
import { import {
RiArrowDownSLine,
RiDeleteBinLine, RiDeleteBinLine,
RiEqualizer2Line, RiEqualizer2Line,
RiInformation2Line, RiInformation2Line,
@ -91,6 +92,13 @@ const AgentTools: FC = () => {
} }
const [isDeleting, setIsDeleting] = useState<number>(-1) const [isDeleting, setIsDeleting] = useState<number>(-1)
const [expandedProviders, setExpandedProviders] = useState<Record<string, boolean>>({})
const toggleProviderExpand = useCallback((providerId: string) => {
setExpandedProviders(prev => ({
...prev,
[providerId]: !prev[providerId],
}))
}, [])
const getToolValue = (tool: ToolDefaultValue) => { const getToolValue = (tool: ToolDefaultValue) => {
return { return {
provider_id: tool.provider_id, provider_id: tool.provider_id,
@ -225,34 +233,44 @@ const AgentTools: FC = () => {
).map(group => ( ).map(group => (
<div <div
key={group.providerId} key={group.providerId}
className='space-y-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-2 shadow-xs' className='rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-2 shadow-xs'
onClickCapture={() => {
// 调试：查看 provider 及其工具数据
console.log('provider group', group)
}}
> >
<div className='flex items-center gap-2 px-1'> <div
className='flex cursor-pointer items-center gap-2 px-1'
onClick={() => toggleProviderExpand(group.providerId)}
>
<RiArrowDownSLine
className={cn(
'h-4 w-4 shrink-0 text-text-tertiary transition-transform',
!expandedProviders[group.providerId] && '-rotate-90',
)}
/>
{typeof group.icon === 'string' {typeof group.icon === 'string'
? <div className='h-5 w-5 rounded-md bg-cover bg-center' style={{ backgroundImage: `url(${group.icon})` }} /> ? <div className='h-5 w-5 shrink-0 rounded-md bg-cover bg-center' style={{ backgroundImage: `url(${group.icon})` }} />
: <AppIcon className='rounded-md' size='xs' icon={group.icon?.content} background={group.icon?.background} />} : <AppIcon className='shrink-0 rounded-md' size='xs' icon={group.icon?.content} background={group.icon?.background} />}
<div className='system-sm-semibold text-text-secondary'>{group.providerName}</div> <div className='system-sm-semibold truncate text-text-secondary'>{group.providerName}</div>
{group.tools.every(t => t.notAuthor) && ( <div className='ml-auto flex shrink-0 items-center gap-2'>
<Button <div className='system-xs-regular text-text-tertiary'>
variant='secondary' {group.tools.filter(tool => tool.enabled).length}/{group.tools.length}&nbsp;{t('appDebug.agent.tools.enabled')}
size='small' </div>
className='ml-2' {group.tools.every(tool => tool.notAuthor) && (
onClick={() => { <Button
const first = group.tools[0] variant='secondary'
setCurrentTool(first as any) size='small'
setIsShowSettingTool(true) onClick={(e) => {
}} e.stopPropagation()
> const first = group.tools[0]
{t('tools.notAuthorized')} setCurrentTool(first as any)
<Indicator className='ml-2' color='orange' /> setIsShowSettingTool(true)
</Button> }}
)} >
{t('tools.notAuthorized')}
<Indicator className='ml-2' color='orange' />
</Button>
)}
</div>
</div> </div>
<div className='space-y-1'> <div className={cn('space-y-1', expandedProviders[group.providerId] ? 'mt-1' : 'hidden')}>
{group.tools.map(item => ( {group.tools.map(item => (
<div <div
key={`${item.provider_id}-${item.tool_name}`} key={`${item.provider_id}-${item.tool_name}`}