action panel tabs

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

@@ -13,6 +13,8 @@ import ActionButton from '@/app/components/base/action-button'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import OrgInfo from '@/app/components/plugins/card/base/org-info'
 import Description from '@/app/components/plugins/card/base/description'
+import TabSlider from '@/app/components/base/tab-slider-plain'
+
 import Button from '@/app/components/base/button'
 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'
@@ -20,7 +22,6 @@ import type { Collection, Tool } from '@/app/components/tools/types'
 import { CollectionType } from '@/app/components/tools/types'
 import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWorkflowToolList } from '@/service/tools'
 import I18n from '@/context/i18n'
-import { DiagonalDividingLine } from '@/app/components/base/icons/src/public/common'
 import { getLanguage } from '@/i18n/language'
 import cn from '@/utils/classnames'
 
@@ -106,30 +107,25 @@ const SettingBuiltInTool: FC<Props> = ({
   })()
 
   const infoUI = (
-    <div className='pt-2'>
+    <div className=''>
       {infoSchemas.length > 0 && (
-        <div className='my-2'>
+        <div className='py-2 space-y-1'>
-          <div className='pt-3 text-text-secondary system-sm-semibold-uppercase'>
+          {infoSchemas.map((item: any, index) => (
-            {t('tools.setBuiltInTools.parameters')}
+            <div key={index} className='py-1'>
-          </div>
+              <div className='flex items-center gap-2'>
-          <div className='py-2 space-y-3'>
+                <div className='text-text-secondary code-sm-semibold'>{item.label[language]}</div>
-            {infoSchemas.map((item: any, index) => (
+                <div className='text-text-tertiary system-xs-regular'>{item.type === 'number-input' ? t('tools.setBuiltInTools.number') : t('tools.setBuiltInTools.string')}</div>
-              <div key={index} className='py-1'>
+                {item.required && (
-                <div className='flex items-center gap-2'>
+                  <div className='text-text-warning-secondary system-xs-medium'>{t('tools.setBuiltInTools.required')}</div>
-                  <div className='text-text-secondary code-sm-semibold'>{item.label[language]}</div>
-                  <div className='text-text-tertiary system-xs-regular'>{item.type === 'number-input' ? t('tools.setBuiltInTools.number') : t('tools.setBuiltInTools.string')}</div>
-                  {item.required && (
-                    <div className='text-text-warning-secondary system-xs-medium'>{t('tools.setBuiltInTools.required')}</div>
-                  )}
-                </div>
-                {item.human_description && (
-                  <div className='mt-0.5 text-text-tertiary system-xs-regular'>
-                    {item.human_description?.[language]}
-                  </div>
                 )}
               </div>
-            ))}
+              {item.human_description && (
-          </div>
+                <div className='mt-0.5 text-text-tertiary system-xs-regular'>
+                  {item.human_description?.[language]}
+                </div>
+              )}
+            </div>
+          ))}
         </div>
       )}
     </div>
@@ -194,25 +190,24 @@ const SettingBuiltInTool: FC<Props> = ({
             {/* form */}
             <div className='h-full'>
               <div className='flex flex-col h-full'>
+                {(hasSetting && !readonly) ? (
+                  <TabSlider
+                    className='shrink-0 mt-1 px-4'
+                    itemClassName='py-3'
+                    noBorderBottom
+                    value={currType}
+                    onChange={(value) => {
+                      setCurrType(value)
+                    }}
+                    options={[
+                      { value: 'info', text: t('tools.setBuiltInTools.parameters')! },
+                      { value: 'setting', text: t('tools.setBuiltInTools.setting')! },
+                    ]}
+                  />
+                ) : (
+                  <div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>{t('tools.setBuiltInTools.parameters')}</div>
+                )}
                 <div className='grow h-0 overflow-y-auto px-4'>
-                  {(hasSetting && !readonly) && (<>
-                    <DiagonalDividingLine className='mx-4' />
-                    <div className='flex space-x-6'>
-                      <div
-                        className={cn(isInfoActive ? 'text-gray-900 font-semibold' : 'font-normal text-gray-600 cursor-pointer', 'relative text-base')}
-                        onClick={() => setCurrType('info')}
-                      >
-                        {t('tools.setBuiltInTools.parameters')}
-                        {isInfoActive && <div className='absolute left-0 bottom-[-16px] w-full h-0.5 bg-primary-600'></div>}
-                      </div>
-                      <div className={cn(!isInfoActive ? 'text-gray-900 font-semibold' : 'font-normal text-gray-600 cursor-pointer', 'relative text-base ')}
-                        onClick={() => setCurrType('setting')}
-                      >
-                        {t('tools.setBuiltInTools.setting')}
-                        {!isInfoActive && <div className='absolute left-0 bottom-[-16px] w-full h-0.5 bg-primary-600'></div>}
-                      </div>
-                    </div>
-                  </>)}
                   {isInfoActive ? infoUI : settingUI}
                 </div>
                 {!readonly && !isInfoActive && (

web/app/components/base/tab-slider-plain/index.tsx

@@ -3,12 +3,12 @@ import type { FC } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
 
-type Option = {
+interface Option {
   value: string
   text: string | JSX.Element
 }
 
-type ItemProps = {
+interface ItemProps {
   className?: string
   isActive: boolean
   onClick: (v: string) => void
@@ -23,10 +23,10 @@ const Item: FC<ItemProps> = ({
   return (
     <div
       key={option.value}
-      className={cn(className, !isActive && 'cursor-pointer', 'relative pb-2.5  leading-6 text-base font-semibold')}
+      className={cn('relative pb-2.5 text-text-tertiary system-sm-semibold-uppercase', !isActive && 'cursor-pointer', className)}
       onClick={() => !isActive && onClick(option.value)}
     >
-      <div className={cn(isActive ? 'text-gray-900' : 'text-gray-600')}>{option.text}</div>
+      <div className={cn(isActive && 'text-text-primary')}>{option.text}</div>
       {isActive && (
         <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-[#155EEF]'></div>
       )}
@@ -34,7 +34,7 @@ const Item: FC<ItemProps> = ({
   )
 }
 
-type Props = {
+interface Props {
   className?: string
   value: string
   onChange: (v: string) => void
@@ -52,7 +52,7 @@ const TabSlider: FC<Props> = ({
   itemClassName,
 }) => {
   return (
-    <div className={cn(className, !noBorderBottom && 'border-b border-[#EAECF0]', 'flex  space-x-6')}>
+    <div className={cn('flex space-x-6', !noBorderBottom && 'border-b border-[#EAECF0]', className)}>
       {options.map(option => (
         <Item
           isActive={option.value === value}