tool credential panel

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>
         </>
       )}

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,7 +163,9 @@ 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={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'>
@@ -191,11 +196,12 @@ const ToolSelector: FC<Props> = ({
                       placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
                       value={value?.extra?.description || ''}
                       onChange={handleDescriptionChange}
+                      disabled={!value?.provider_name}
                     />
                   </div>
                 </div>
                 {/* authorization */}
-            {!isShowSettingAuth && currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
+                {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>
@@ -226,19 +232,6 @@ const ToolSelector: FC<Props> = ({
                     </div>
                   </div>
                 )}
-            {/* authorization panel */}
-            {isShowSettingAuth && currentProvider && (
-              <div className='px-4 pb-4 border-t border-divider-subtle'>
-                <ToolCredentialForm
-                  collection={currentProvider}
-                  onCancel={() => setShowSettingAuth(false)}
-                  onSaved={async value => updatePermission({
-                    providerName: currentProvider.name,
-                    credentials: value,
-                  })}
-                />
-              </div>
-            )}
                 {/* tool settings */}
                 {currentToolParams.length > 0 && currentProvider?.is_team_authorization && (
                   <div className='px-4 pt-3'>
@@ -269,6 +262,33 @@ const ToolSelector: FC<Props> = ({
                     </div>
                   </div>
                 )}
+              </>
+            )}
+            {/* authorization panel */}
+            {isShowSettingAuth && currentProvider && (
+              <>
+                <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)}
+                  onSaved={async value => updatePermission({
+                    providerName: currentProvider.name,
+                    credentials: value,
+                  })}
+                />
+              </>
+            )}
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx

@@ -53,11 +53,12 @@ const ToolCredentialForm: FC<Props> = ({
   }
 
   return (
-    <div className='h-full'>
+    <>
       {!credentialSchema
         ? <div className='pt-3'><Loading type='app' /></div>
         : (
           <>
+            <div className='px-4 max-h-[464px] overflow-y-auto'>
               <Form
                 value={tempCredential}
                 onChange={(v) => {
@@ -72,14 +73,15 @@ const ToolCredentialForm: FC<Props> = ({
                   ? (<a
                     href={item.url}
                     target='_blank' rel='noopener noreferrer'
-                  className='inline-flex items-center text-xs text-primary-600'
+                    className='inline-flex items-center text-xs text-text-accent'
                   >
                     {t('tools.howToGet')}
                     <RiArrowRightUpLine className='ml-1 w-3 h-3' />
                   </a>)
                   : null}
               />
-            <div className={cn('mt-1 flex justify-end')} >
+            </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)

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>