From 95da3a4cf196ad98592381812ba3f74cd3c8efd8 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Dec 2024 18:58:01 +0800
Subject: [PATCH] tool credential panel

---
 .../plugins/plugin-detail-panel/index.tsx     |  14 +-
 .../tool-selector/index.tsx                   | 220 ++++++++++--------
 .../tool-selector/tool-credentials-form.tsx   |  50 ++--
 .../tool-selector/tool-trigger.tsx            |   8 +-
 4 files changed, 156 insertions(+), 136 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 3e746741cc..3378d75b5b 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -59,14 +59,12 @@ const PluginDetailPanel: FC<Props> = ({
             {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
             {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
             {!!detail.declaration.model && <ModelList detail={detail} />}
-            {false && (
-              <div className='px-4 py-2'>
-                <ToolSelector
-                  value={value}
-                  onSelect={item => testChange(item)}
-                />
-              </div>
-            )}
+            <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 a1d7573c8b..732c94103f 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
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  RiArrowLeftLine,
   RiArrowRightUpLine,
 } from '@remixicon/react'
 import {
@@ -39,7 +40,7 @@ import cn from '@/utils/classnames'
 
 type Props = {
   value?: {
-    provider: string
+    provider_name: string
     tool_name: string
     parameters?: Record<string, any>
     extra?: Record<string, any>
@@ -48,7 +49,7 @@ type Props = {
   placement?: Placement
   offset?: OffsetOptions
   onSelect: (tool: {
-    provider: string
+    provider_name: string
     tool_name: string
     parameters?: Record<string, any>
     extra?: Record<string, any>
@@ -79,7 +80,7 @@ const ToolSelector: FC<Props> = ({
   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)
+      return toolWithProvider.id === value?.provider_name && toolWithProvider.tools.some(tool => tool.name === value?.tool_name)
     })
   }, [value, buildInTools, customTools, workflowTools])
 
@@ -87,10 +88,12 @@ const ToolSelector: FC<Props> = ({
   const handleSelectTool = (tool: ToolDefaultValue) => {
     const paramValues = addDefaultValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas as any))
     const toolValue = {
-      provider: tool.provider_id,
+      provider_name: tool.provider_id,
       tool_name: tool.tool_name,
-      description: '',
       parameters: paramValues,
+      extra: {
+        description: '',
+      },
     }
     onSelect(toolValue)
     setIsShowChooseTool(false)
@@ -160,75 +163,122 @@ const ToolSelector: FC<Props> = ({
           />
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <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>
-                <ToolPicker
-                  placement='bottom'
-                  offset={offset}
-                  trigger={
-                    <ToolTrigger
-                      open={isShowChooseTool}
-                      value={value}
-                      provider={currentProvider}
+          <div className={cn('relative w-[361px] min-h-20 max-h-[642px] pb-4 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
+            {!isShowSettingAuth && (
+              <>
+                <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>
+                    <ToolPicker
+                      placement='bottom'
+                      offset={offset}
+                      trigger={
+                        <ToolTrigger
+                          open={isShowChooseTool}
+                          value={value}
+                          provider={currentProvider}
+                        />
+                      }
+                      isShow={isShowChooseTool}
+                      onShowChange={setIsShowChooseTool}
+                      disabled={false}
+                      supportAddCustomTool
+                      onSelect={handleSelectTool}
+                      scope={scope}
                     />
-                  }
-                  isShow={isShowChooseTool}
-                  onShowChange={setIsShowChooseTool}
-                  disabled={false}
-                  supportAddCustomTool
-                  onSelect={handleSelectTool}
-                  scope={scope}
-                />
-              </div>
-              <div className='flex flex-col gap-1'>
-                <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
-                <Textarea
-                  className='resize-none'
-                  placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
-                  value={value?.extra?.description || ''}
-                  onChange={handleDescriptionChange}
-                />
-              </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='flex flex-col gap-1'>
+                    <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                    <Textarea
+                      className='resize-none'
+                      placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
+                      value={value?.extra?.description || ''}
+                      onChange={handleDescriptionChange}
+                      disabled={!value?.provider_name}
+                    />
+                  </div>
                 </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 */}
+                {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>
+                )}
+                {/* 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>
+                )}
+              </>
             )}
             {/* authorization panel */}
             {isShowSettingAuth && currentProvider && (
-              <div className='px-4 pb-4 border-t border-divider-subtle'>
+              <>
+                <div className='relative pt-3.5 flex flex-col gap-1'>
+                  <div className='absolute -top-2 left-2 w-[345px] pt-2 rounded-t-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'></div>
+                  <div
+                    className='px-3 h-6 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
+                    onClick={() => setShowSettingAuth(false)}
+                  >
+                    <RiArrowLeftLine className='w-4 h-4' />
+                    BACK
+                  </div>
+                  <div className='px-4 text-text-primary system-xl-semibold'>{t('tools.auth.setupModalTitle')}</div>
+                  <div className='px-4 text-text-tertiary system-xs-regular'>{t('tools.auth.setupModalTitleDescription')}</div>
+                </div>
                 <ToolCredentialForm
                   collection={currentProvider}
                   onCancel={() => setShowSettingAuth(false)}
@@ -237,37 +287,7 @@ const ToolSelector: FC<Props> = ({
                     credentials: value,
                   })}
                 />
-              </div>
-            )}
-            {/* 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>
         </PortalToFollowElemContent>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
index 327605166c..857c0678cd 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
@@ -53,33 +53,35 @@ const ToolCredentialForm: FC<Props> = ({
   }
 
   return (
-    <div className='h-full'>
+    <>
       {!credentialSchema
         ? <div className='pt-3'><Loading type='app' /></div>
         : (
           <>
-            <Form
-              value={tempCredential}
-              onChange={(v) => {
-                setTempCredential(v)
-              }}
-              formSchemas={credentialSchema}
-              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-primary-600'
-                >
-                  {t('tools.howToGet')}
-                  <RiArrowRightUpLine className='ml-1 w-3 h-3' />
-                </a>)
-                : null}
-            />
-            <div className={cn('mt-1 flex justify-end')} >
+            <div className='px-4 max-h-[464px] overflow-y-auto'>
+              <Form
+                value={tempCredential}
+                onChange={(v) => {
+                  setTempCredential(v)
+                }}
+                formSchemas={credentialSchema}
+                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 className={cn('mt-1 flex justify-end px-4')} >
               <div className='flex space-x-2'>
                 <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
                 <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
@@ -89,7 +91,7 @@ const ToolCredentialForm: FC<Props> = ({
         )
       }
 
-    </div >
+    </>
   )
 }
 export default React.memo(ToolCredentialForm)
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
index a8c333dee1..adea79adf5 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
@@ -14,7 +14,7 @@ type Props = {
   open: boolean
   provider?: ToolWithProvider
   value?: {
-    provider: string
+    provider_name: string
     tool_name: string
   }
   isConfigure?: boolean
@@ -31,9 +31,9 @@ const ToolTrigger = ({
     <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?.provider && 'pl-1.5 py-1.5',
+      value?.provider_name && 'pl-1.5 py-1.5',
     )}>
-      {value?.provider && provider && (
+      {value?.provider_name && provider && (
         <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'
@@ -45,7 +45,7 @@ const ToolTrigger = ({
       {value?.tool_name && (
         <div className='grow system-sm-medium text-components-input-text-filled'>{value.tool_name}</div>
       )}
-      {!value?.provider && (
+      {!value?.provider_name && (
         <div className='grow text-components-input-text-placeholder system-sm-regular'>
           {!isConfigure ? t('plugin.detailPanel.toolSelector.placeholder') : t('plugin.detailPanel.configureTool')}
         </div>