From aba48749da7ffb23e802ffa2cda2e1652b7756cc Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 27 Oct 2024 12:11:49 +0800
Subject: [PATCH] action panel header

---
 .../agent-tools/setting-built-in-tool.tsx     | 168 ++++++++++--------
 .../plugins/card/base/card-icon.tsx           |   4 +-
 .../plugin-detail-panel/action-list.tsx       |   1 +
 .../components/tools/provider/tool-item.tsx   |   3 +-
 4 files changed, 95 insertions(+), 81 deletions(-)

diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index 254e248c05..546e132700 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -3,21 +3,29 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from '@/utils/classnames'
-import Drawer from '@/app/components/base/drawer-plus'
+import {
+  RiArrowLeftLine,
+  RiCloseLine,
+} from '@remixicon/react'
+import Drawer from '@/app/components/base/drawer'
+import Loading from '@/app/components/base/loading'
+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 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'
 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 Button from '@/app/components/base/button'
-import Loading from '@/app/components/base/loading'
 import { DiagonalDividingLine } from '@/app/components/base/icons/src/public/common'
 import { getLanguage } from '@/i18n/language'
-import AppIcon from '@/app/components/base/app-icon'
+import cn from '@/utils/classnames'
 
-type Props = {
+interface Props {
+  showBackButton?: boolean
   collection: Collection
   isBuiltIn?: boolean
   isModel?: boolean
@@ -29,6 +37,7 @@ type Props = {
 }
 
 const SettingBuiltInTool: FC<Props> = ({
+  showBackButton = false,
   collection,
   isBuiltIn = true,
   isModel = true,
@@ -98,13 +107,6 @@ const SettingBuiltInTool: FC<Props> = ({
 
   const infoUI = (
     <div className='pt-2'>
-      <div className='leading-5 text-sm font-medium text-gray-900'>
-        {t('tools.setBuiltInTools.toolDescription')}
-      </div>
-      <div className='mt-1 leading-[18px] text-xs font-normal text-gray-600'>
-        {currTool?.description[language]}
-      </div>
-
       {infoSchemas.length > 0 && (
         <div className='my-2'>
           <div className='pt-3 text-text-secondary system-sm-semibold-uppercase'>
@@ -148,75 +150,83 @@ const SettingBuiltInTool: FC<Props> = ({
 
   return (
     <Drawer
-      isShow
-      onHide={onHide}
-      title={(
-        <div className='flex items-center'>
-          {typeof collection.icon === 'string'
-            ? (
-              <div
-                className='w-6 h-6 bg-cover bg-center rounded-md flex-shrink-0'
-                style={{
-                  backgroundImage: `url(${collection.icon})`,
-                }}
-              ></div>
-            )
-            : (
-              <AppIcon
-                className='rounded-md'
-                size='tiny'
-                icon={(collection.icon as any)?.content}
-                background={(collection.icon as any)?.background}
-              />
-            )}
-
-          <div className='ml-2 leading-6 text-base font-semibold text-gray-900'>{currTool?.label[language]}</div>
-          {(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.info')}
-                {isInfoActive && <div className='absolute left-0 bottom-[-16px] w-full h-0.5 bg-primary-600'></div>}
+      isOpen
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+    >
+      <>
+        {isLoading && <Loading type='app' />}
+        {!isLoading && (
+          <>
+            {/* header */}
+            <div className='relative p-4 pb-3 border-b border-divider-subtle'>
+              <div className='absolute top-3 right-3'>
+                <ActionButton onClick={onHide}>
+                  <RiCloseLine className='w-4 h-4' />
+                </ActionButton>
               </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>
-          </>)}
-        </div>
-      )}
-      panelClassName='mt-[64px] mb-2 !w-[420px]'
-      maxWidthClassName='!max-w-[420px]'
-      height='calc(100vh - 64px)'
-      headerClassName='!border-b-black/5'
-      body={
-        <div className='h-full pt-3'>
-          {isLoading
-            ? <div className='flex h-full items-center'>
-              <Loading type='app' />
-            </div>
-            : (<div className='flex flex-col h-full'>
-              <div className='grow h-0 overflow-y-auto px-4'>
-                {isInfoActive ? infoUI : settingUI}
-              </div>
-              {!readonly && !isInfoActive && (
-                <div className='mt-2 shrink-0 flex justify-end py-4 px-6  space-x-2 rounded-b-[10px] bg-gray-50 border-t border-black/5'>
-                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
+              {showBackButton && (
+                <div
+                  className='mb-2 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
+                  onClick={onHide}
+                >
+                  <RiArrowLeftLine className='w-4 h-4' />
+                  BACK
                 </div>
               )}
-            </div>)}
-        </div>
-      }
-      isShowMask={false}
-      clickOutsideNotOpen={false}
-    />
+              <div className='flex items-center gap-1'>
+                <Icon size='xs' className='w-5 h-5' src={collection.icon} />
+                <OrgInfo
+                  packageNameClassName='w-auto'
+                  orgName={collection.author}
+                  packageName={collection.name}
+                />
+              </div>
+              <div className='mt-1 text-text-primary system-md-semibold'>{currTool?.label[language]}</div>
+              {!!currTool?.description[language] && (
+                <Description className='mt-3' text={currTool.description[language]} descriptionLineRows={2}></Description>
+              )}
+            </div>
+            {/* form */}
+            <div className='h-full'>
+              <div className='flex flex-col h-full'>
+                <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 && (
+                  <div className='mt-2 shrink-0 flex justify-end py-4 px-6  space-x-2 rounded-b-[10px] bg-gray-50 border-t border-black/5'>
+                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
+                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+      </>
+    </Drawer>
   )
 }
 export default React.memo(SettingBuiltInTool)
diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index a30267bc43..34ff0d8fbc 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -7,6 +7,7 @@ const Icon = ({
   src,
   installed = false,
   installFailed = false,
+  size,
 }: {
   className?: string
   src: string | {
@@ -15,13 +16,14 @@ const Icon = ({
   }
   installed?: boolean
   installFailed?: boolean
+  size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
 }) => {
   const iconClassName = 'flex justify-center items-center gap-2 absolute bottom-[-4px] right-[-4px] w-[18px] h-[18px] rounded-full border-2 border-components-panel-bg'
   if (typeof src === 'object') {
     return (
       <div className={cn('relative', className)}>
         <AppIcon
-          size='large'
+          size={size || 'large'}
           iconType={'emoji'}
           icon={src.content}
           background={src.background}
diff --git a/web/app/components/plugins/plugin-detail-panel/action-list.tsx b/web/app/components/plugins/plugin-detail-panel/action-list.tsx
index 26ccfe83e0..52ebe3608f 100644
--- a/web/app/components/plugins/plugin-detail-panel/action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/action-list.tsx
@@ -14,6 +14,7 @@ const ActionCard = () => {
 
 const ActionList = () => {
   const { t } = useTranslation()
+  // TODO use tool-item add api in tool providers
   return (
     <div className='px-4 pt-2 pb-4'>
       <div className='mb-1 py-1'>
diff --git a/web/app/components/tools/provider/tool-item.tsx b/web/app/components/tools/provider/tool-item.tsx
index 537f43c1b6..897b549c38 100644
--- a/web/app/components/tools/provider/tool-item.tsx
+++ b/web/app/components/tools/provider/tool-item.tsx
@@ -7,7 +7,7 @@ import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
 
-type Props = {
+interface Props {
   disabled?: boolean
   collection: Collection
   tool: Tool
@@ -37,6 +37,7 @@ const ToolItem = ({
       </div>
       {showDetail && (
         <SettingBuiltInTool
+          showBackButton
           collection={collection}
           toolName={tool.name}
           readonly