diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx index fdb7aece0f..5bd79a5cef 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx @@ -275,7 +275,10 @@ function Form< if (formSchema.type === FormTypeEnum.toolSelector) { const { - variable, label, required, + variable, + label, + required, + scope, } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput) return ( @@ -288,6 +291,7 @@ function Form< {tooltipContent} handleFormChange(variable, item as any)} /> diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx index 4d20c0877d..3e746741cc 100644 --- a/web/app/components/plugins/plugin-detail-panel/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/index.tsx @@ -7,6 +7,7 @@ import ActionList from './action-list' import ModelList from './model-list' import AgentStrategyList from './agent-strategy-list' import Drawer from '@/app/components/base/drawer' +import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector' import type { PluginDetail } from '@/app/components/plugins/types' import cn from '@/utils/classnames' @@ -27,6 +28,12 @@ const PluginDetailPanel: FC = ({ onUpdate() } + const [value, setValue] = React.useState(undefined) + const testChange = (val: any) => { + console.log('tool change', val) + setValue(val) + } + if (!detail) return null @@ -52,6 +59,14 @@ const PluginDetailPanel: FC = ({ {!!detail.declaration.agent_strategy && } {!!detail.declaration.endpoint && } {!!detail.declaration.model && } + {false && ( +
+ testChange(item)} + /> +
+ )} )} diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx index eab0dd94d2..18ff2a3707 100644 --- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx @@ -2,6 +2,9 @@ import type { FC } from 'react' import React, { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' +import { + RiArrowRightUpLine, +} from '@remixicon/react' import { PortalToFollowElem, PortalToFollowElemContent, @@ -13,6 +16,10 @@ import Button from '@/app/components/base/button' import Indicator from '@/app/components/header/indicator' import ToolCredentialForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form' import Toast from '@/app/components/base/toast' +import Textarea from '@/app/components/base/textarea' +import Divider from '@/app/components/base/divider' +import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form' +import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema' import { useAppContext } from '@/context/app-context' import { @@ -34,6 +41,8 @@ type Props = { value?: { provider: string tool_name: string + description?: string + parameters?: Record } disabled?: boolean placement?: Placement @@ -41,15 +50,19 @@ type Props = { onSelect: (tool: { provider: string tool_name: string + description?: string + parameters?: Record }) => void supportAddCustomTool?: boolean + scope?: string } const ToolSelector: FC = ({ value, disabled, - placement = 'bottom', + placement = 'left', offset = 4, onSelect, + scope, }) => { const { t } = useTranslation() const [isShow, onShowChange] = useState(false) @@ -62,23 +75,52 @@ const ToolSelector: FC = ({ const { data: customTools } = useAllCustomTools() const { data: workflowTools } = useAllWorkflowTools() const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools() + const currentProvider = useMemo(() => { const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])] return mergedTools.find((toolWithProvider) => { return toolWithProvider.id === value?.provider && toolWithProvider.tools.some(tool => tool.name === value?.tool_name) }) }, [value, buildInTools, customTools, workflowTools]) + const [isShowChooseTool, setIsShowChooseTool] = useState(false) const handleSelectTool = (tool: ToolDefaultValue) => { + const paramValues = addDefaultValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas as any)) const toolValue = { provider: tool.provider_id, tool_name: tool.tool_name, + description: '', + parameters: paramValues, } onSelect(toolValue) setIsShowChooseTool(false) - if (tool.provider_type === CollectionType.builtIn && tool.is_team_authorization) - onShowChange(false) + // if (tool.provider_type === CollectionType.builtIn && tool.is_team_authorization) + // onShowChange(false) } + + const handleDescriptionChange = (e: React.ChangeEvent) => { + onSelect({ + ...value, + description: e.target.value || '', + } as any) + } + + const currentToolParams = useMemo(() => { + if (!currentProvider) return [] + return currentProvider.tools.find(tool => tool.name === value?.tool_name)?.parameters || [] + }, [currentProvider, value]) + + const formSchemas = useMemo(() => toolParametersToFormSchemas(currentToolParams), [currentToolParams]) + + const handleFormChange = (v: Record) => { + const toolValue = { + ...value, + parameters: v, + } + onSelect(toolValue as any) + } + + // authorization const { isCurrentWorkspaceManager } = useAppContext() const [isShowSettingAuth, setShowSettingAuth] = useState(false) const handleCredentialSettingUpdate = () => { @@ -108,32 +150,79 @@ const ToolSelector: FC = ({ onClick={handleTriggerClick} > -
-
-
{t('tools.toolSelector.label')}
- - } - isShow={isShowChooseTool} - onShowChange={setIsShowChooseTool} - disabled={false} - supportAddCustomTool - onSelect={handleSelectTool} - /> +
+
{t('plugin.detailPanel.toolSelector.title')}
+ {/* base form */} +
+
+
{t('plugin.detailPanel.toolSelector.toolLabel')}
+ + } + isShow={isShowChooseTool} + onShowChange={setIsShowChooseTool} + disabled={false} + supportAddCustomTool + onSelect={handleSelectTool} + scope={scope} + /> +
+
+
{t('plugin.detailPanel.toolSelector.descriptionLabel')}
+