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

authorization of tool selector

Browse Source
This commit is contained in:
JzoNg 2024-11-13 23:28:55 +08:00
parent 926f85ce4f
commit 194a99220b
10 changed files with 107 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,7 +92,7 @@ const AgentTools: FC = () => {
tool_name: tool.tool_name,
tool_label: tool.tool_label,
tool_parameters: tool.params,
notAuthor: !(tool as ToolDefaultValue & { is_team_authorization: boolean }).is_team_authorization,
notAuthor: !tool.is_team_authorization,
enabled: true,
})
})

10
web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
View File

@ -114,7 +114,7 @@ const Form: FC<FormProps> = ({
const disabled = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-regular text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
{label[language] || label.en_US}
{
required && (
@ -155,7 +155,7 @@ const Form: FC<FormProps> = ({
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-regular text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
{label[language] || label.en_US}
{
required && (
@ -211,7 +211,7 @@ const Form: FC<FormProps> = ({
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-regular text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
{label[language] || label.en_US}
{
@ -254,7 +254,7 @@ const Form: FC<FormProps> = ({
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className='flex items-center justify-between py-2 system-sm-regular text-text-secondary'>
<div className='flex items-center justify-between py-2 system-sm-semibold text-text-secondary'>
<div className='flex items-center space-x-2'>
<span className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-regular text-text-secondary')}>{label[language] || label.en_US}</span>
{
@ -287,7 +287,7 @@ const Form: FC<FormProps> = ({
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-regular text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
{label[language] || label.en_US}
{
required && (

5
web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
View File

@ -40,7 +40,10 @@ const EndpointModal: FC<Props> = ({
onSaved(tempCredential)
}
const [mockTool, setTool] = useState<any>()
const [mockTool, setTool] = useState<any>({
provider: 'langgenius/google/google',
tool_name: 'google_search',
})
return (
<Drawer

85
web/app/components/tools/tool-selector/index.tsx
View File

@ -9,14 +9,19 @@ import {
} from '@/app/components/base/portal-to-follow-elem'
import ToolTrigger from '@/app/components/tools/tool-selector/tool-trigger'
import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
import Loading from '@/app/components/base/loading'
import Button from '@/app/components/base/button'
import Indicator from '@/app/components/header/indicator'
import { useAppContext } from '@/context/app-context'
import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
// import AddToolModal from '@/app/components/tools/add-tool-modal'
import { CollectionType } from '@/app/components/tools/types'
import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
import type {
OffsetOptions,
Placement,
} from '@floating-ui/react'
import cn from '@/utils/classnames'
type Props = {
value?: {
@ -36,7 +41,7 @@ const ToolSelector: FC<Props> = ({
value,
disabled,
placement = 'bottom',
offset = 0,
offset = 4,
onSelect,
}) => {
const { t } = useTranslation()
@ -45,6 +50,7 @@ const ToolSelector: FC<Props> = ({
if (disabled) return
onShowChange(true)
}
const { data: buildInTools } = useAllBuiltInTools()
const { data: customTools } = useAllCustomTools()
const { data: workflowTools } = useAllWorkflowTools()
@ -55,24 +61,29 @@ const ToolSelector: FC<Props> = ({
})
}, [value, buildInTools, customTools, workflowTools])
const [isShowChooseTool, setIsShowChooseTool] = useState(false)
const [isShowSettingAuth, setShowSettingAuth] = useState(false)
const handleToolAuthSetting = (value: any) => {
// const newModelConfig = produce(modelConfig, (draft) => {
// const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === value?.collection?.id && item.tool_name === value?.tool_name)
// if (tool)
// (tool as AgentTool).notAuthor = false
// })
// setModelConfig(newModelConfig)
}
const handleSelectTool = (tool: ToolDefaultValue) => {
const toolValue = {
provider: tool.provider_id,
tool_name: tool.tool_name,
}
onSelect(toolValue)
setIsShowChooseTool(false)
if (tool.provider_type === CollectionType.builtIn && tool.is_team_authorization)
onShowChange(false)
}
const { isCurrentWorkspaceManager } = useAppContext()
const [authLoading, setAuthLoading] = useState(false)
// const [isShowSettingAuth, setShowSettingAuth] = useState(false)
// const handleToolAuthSetting = (value: any) => {
// const newModelConfig = produce(modelConfig, (draft) => {
// const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === value?.collection?.id && item.tool_name === value?.tool_name)
// if (tool)
// (tool as AgentTool).notAuthor = false
// })
// setModelConfig(newModelConfig)
// }
return (
<>
@ -86,15 +97,26 @@ const ToolSelector: FC<Props> = ({
className='w-full'
onClick={handleTriggerClick}
>
<ToolTrigger open={isShow} provider={currentProvider} />
<ToolTrigger
open={isShow}
value={value}
provider={currentProvider}
/>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className="relative w-[389px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
<div className='px-4 py-3 flex flex-col gap-1'>
<div className='h-6 flex items-center system-sm-regular text-text-secondary'>Tool</div>
<div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('tools.toolSelector.label')}</div>
<ToolPicker
placement='bottom'
trigger={<ToolTrigger open={isShowChooseTool} provider={currentProvider} />}
offset={offset}
trigger={
<ToolTrigger
open={isShowChooseTool}
value={value}
provider={currentProvider}
/>
}
isShow={isShowChooseTool}
onShowChange={setIsShowChooseTool}
disabled={false}
@ -102,6 +124,37 @@ const ToolSelector: FC<Props> = ({
onSelect={handleSelectTool}
/>
</div>
{/* authorization panel */}
{authLoading && (
<div className='px-4 py-3 flex items-center justify-center'><Loading type='app' /></div>
)}
{!authLoading && currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.is_team_authorization && currentProvider.allow_delete && (
<div className='px-4 py-3 flex items-center border-t border-divider-subtle'>
<div className='grow mr-3 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('tools.toolSelector.auth')}</div>
{isCurrentWorkspaceManager && (
<Button
variant='secondary'
size='small'
onClick={() => {}}
>
<Indicator className='mr-2' color={'green'} />
{t('tools.auth.authorized')}
</Button>
)}
</div>
)}
{!authLoading && currentProvider && currentProvider.type === CollectionType.builtIn && !currentProvider.is_team_authorization && currentProvider.allow_delete && (
<div className='px-4 py-3 flex items-center border-t border-divider-subtle'>
<Button
variant='primary'
className={cn('shrink-0 w-full')}
onClick={() => {}}
disabled={!isCurrentWorkspaceManager}
>
{t('tools.auth.unauthorized')}
</Button>
</div>
)}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>

24
web/app/components/tools/tool-selector/tool-trigger.tsx
View File

@ -1,5 +1,6 @@
'use client'
import React from 'react'
import { useTranslation } from 'react-i18next'
import {
RiArrowDownSLine,
} from '@remixicon/react'
@ -22,20 +23,27 @@ const ToolTrigger = ({
provider,
value,
}: Props) => {
const { t } = useTranslation()
return (
<div className={cn('group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt')}>
<div className={cn(
'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
open && 'bg-state-base-hover-alt',
value && 'pl-1.5 py-1.5',
)}>
{value && provider && (
<BlockIcon
className='shrink-0'
type={BlockEnum.Tool}
toolIcon={provider.icon}
/>
<div className='shrink-0 mr-1 p-px rounded-lg bg-components-panel-bg border border-components-panel-border'>
<BlockIcon
className='!w-4 !h-4'
type={BlockEnum.Tool}
toolIcon={provider.icon}
/>
</div>
)}
{value && (
<div className='grow system-sm-regular text-text-secondary'>{value.tool_name}</div>
<div className='grow system-sm-regular text-components-input-text-filled'>{value.tool_name}</div>
)}
{!value && (
<div className='grow text-components-input-text-placeholder system-sm-regular'>Select a tool ...</div>
<div className='grow text-components-input-text-placeholder system-sm-regular'>{t('tools.toolSelector.placeholder')}</div>
)}
<RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
</div>

2
web/app/components/workflow/block-selector/tool-picker.tsx
View File

@ -106,7 +106,7 @@ const ToolPicker: FC<Props> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className="relative w-[320px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
<div className="relative w-[356px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
<div className='p-2 pb-1'>
<SearchBox
search={searchText}

2
web/app/components/workflow/block-selector/tool/action-item.tsx
View File

@ -12,7 +12,7 @@ import BlockIcon from '../../block-icon'
type Props = {
provider: ToolWithProvider
payload: Tool
onSelect: (type: BlockEnum, tool?: ToolDefaultValue & { is_team_authorization: boolean }) => void
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
}
const ToolItem: FC<Props> = ({

1
web/app/components/workflow/block-selector/types.ts
View File

@ -25,5 +25,6 @@ export type ToolDefaultValue = {
tool_name: string
tool_label: string
title: string
is_team_authorization: boolean
params: Record<string, any>
}

5
web/i18n/en-US/tools.ts
View File

@ -149,6 +149,11 @@ const translation = {
openInStudio: 'Open in Studio',
toolNameUsageTip: 'Tool call name for agent reasoning and prompting',
copyToolName: 'Copy Name',
toolSelector: {
label: 'TOOL',
placeholder: 'Select a tool...',
auth: 'AUTHORIZATION',
},
}
export default translation

4
web/i18n/zh-Hans/tools.ts
View File

@ -149,6 +149,10 @@ const translation = {
openInStudio: '在工作室中打开',
toolNameUsageTip: '工具调用名称，用于 Agent 推理和提示词',
copyToolName: '复制名称',
toolSelector: {
label: '工具',
placeholder: '选择一个工具...',
},
}
export default translation