From e00da7a1d87b3f8ce4d1320203f4b4b0d74145c9 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Dec 2024 17:02:29 +0800
Subject: [PATCH] tool setting form

---
 .../plugins/plugin-detail-panel/index.tsx     |  14 ++-
 .../tool-selector/index.tsx                   | 114 +++++++++++++-----
 .../block-selector/tool/action-item.tsx       |   1 +
 .../workflow/block-selector/types.ts          |   1 +
 4 files changed, 97 insertions(+), 33 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 3378d75b5b..3e746741cc 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -59,12 +59,14 @@ const PluginDetailPanel: FC<Props> = ({
             {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
             {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
             {!!detail.declaration.model && <ModelList detail={detail} />}
-            <div className='px-4 py-2'>
-              <ToolSelector
-                value={value}
-                onSelect={item => testChange(item)}
-              />
-            </div>
+            {false && (
+              <div className='px-4 py-2'>
+                <ToolSelector
+                  value={value}
+                  onSelect={item => testChange(item)}
+                />
+              </div>
+            )}
           </div>
         </>
       )}
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 54e3fdba59..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,
@@ -14,6 +17,9 @@ 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 {
@@ -69,19 +75,22 @@ const ToolSelector: FC<Props> = ({
   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: {},
+      parameters: paramValues,
     }
     onSelect(toolValue)
     setIsShowChooseTool(false)
@@ -96,6 +105,21 @@ const ToolSelector: FC<Props> = ({
     } 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<string, any>) => {
+    const toolValue = {
+      ...value,
+      parameters: v,
+    }
+    onSelect(toolValue as any)
+  }
+
   // authorization
   const { isCurrentWorkspaceManager } = useAppContext()
   const [isShowSettingAuth, setShowSettingAuth] = useState(false)
@@ -133,8 +157,9 @@ const ToolSelector: FC<Props> = ({
           />
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <div className="relative w-[361px] min-h-20 pb-2 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+          <div className="relative w-[361px] min-h-20 max-h-[642px] overflow-y-auto pb-2 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
             <div className='px-4 pt-3.5 pb-1 text-text-primary system-xl-semibold'>{t('plugin.detailPanel.toolSelector.title')}</div>
+            {/* base form */}
             <div className='px-4 py-2 flex flex-col gap-3'>
               <div className='flex flex-col gap-1'>
                 <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
@@ -166,6 +191,38 @@ const ToolSelector: FC<Props> = ({
                 />
               </div>
             </div>
+            {/* authorization */}
+            {!isShowSettingAuth && currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
+              <div className='px-4 pt-3 flex flex-col'>
+                <div className='flex items-center gap-2'>
+                  <div className='text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.auth')}</div>
+                  <Divider bgStyle='gradient' className='grow' />
+                </div>
+                <div className='py-2'>
+                  {!currentProvider.is_team_authorization && (
+                    <Button
+                      variant='primary'
+                      className={cn('shrink-0 w-full')}
+                      onClick={() => setShowSettingAuth(true)}
+                      disabled={!isCurrentWorkspaceManager}
+                    >
+                      {t('tools.auth.unauthorized')}
+                    </Button>
+                  )}
+                  {currentProvider.is_team_authorization && (
+                    <Button
+                      variant='secondary'
+                      className={cn('shrink-0 w-full')}
+                      onClick={() => setShowSettingAuth(true)}
+                      disabled={!isCurrentWorkspaceManager}
+                    >
+                      <Indicator className='mr-2' color={'green'} />
+                      {t('tools.auth.authorized')}
+                    </Button>
+                  )}
+                </div>
+              </div>
+            )}
             {/* authorization panel */}
             {isShowSettingAuth && currentProvider && (
               <div className='px-4 pb-4 border-t border-divider-subtle'>
@@ -179,31 +236,34 @@ const ToolSelector: FC<Props> = ({
                 />
               </div>
             )}
-            {!isShowSettingAuth && 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('plugin.detailPanel.toolSelector.auth')}</div>
-                {isCurrentWorkspaceManager && (
-                  <Button
-                    variant='secondary'
-                    size='small'
-                    onClick={() => {}}
-                  >
-                    <Indicator className='mr-2' color={'green'} />
-                    {t('tools.auth.authorized')}
-                  </Button>
-                )}
-              </div>
-            )}
-            {!isShowSettingAuth && 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={() => setShowSettingAuth(true)}
-                  disabled={!isCurrentWorkspaceManager}
-                >
-                  {t('tools.auth.unauthorized')}
-                </Button>
+            {/* tool settings */}
+            {currentToolParams.length > 0 && currentProvider?.is_team_authorization && (
+              <div className='px-4 pt-3'>
+                <div className='flex items-center gap-2'>
+                  <div className='text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.settings')}</div>
+                  <Divider bgStyle='gradient' className='grow' />
+                </div>
+                <div className='py-2'>
+                  <Form
+                    value={value?.parameters || {}}
+                    onChange={handleFormChange}
+                    formSchemas={formSchemas as any}
+                    isEditMode={true}
+                    showOnVariableMap={{}}
+                    validating={false}
+                    inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
+                    fieldMoreInfo={item => item.url
+                      ? (<a
+                        href={item.url}
+                        target='_blank' rel='noopener noreferrer'
+                        className='inline-flex items-center text-xs text-text-accent'
+                      >
+                        {t('tools.howToGet')}
+                        <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                      </a>)
+                      : null}
+                  />
+                </div>
               </div>
             )}
           </div>
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index bc8db404a0..46c1917e39 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -59,6 +59,7 @@ const ToolItem: FC<Props> = ({
             title: payload.label[language],
             is_team_authorization: provider.is_team_authorization,
             output_schema: payload.output_schema,
+            paramSchemas: payload.parameters,
             params,
           })
         }}
diff --git a/web/app/components/workflow/block-selector/types.ts b/web/app/components/workflow/block-selector/types.ts
index d0fc7782f9..c02a74e3a4 100644
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -27,5 +27,6 @@ export type ToolDefaultValue = {
   title: string
   is_team_authorization: boolean
   params: Record<string, any>
+  paramSchemas: Record<string, any>
   output_schema: Record<string, any>
 }