feat: displaying the tool description when clicking on a custom tool (#2642)

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -153,7 +153,7 @@ const AgentTools: FC = () => {
                   )
                   : (
                     <div className='hidden group-hover:flex items-center'>
-                      {item.provider_type === CollectionType.builtIn && (
+                      {/* {item.provider_type === CollectionType.builtIn && ( */}
                       <TooltipPlus
                         popupContent={t('tools.setBuiltInTools.infoAndSetting')}
                       >
@@ -164,7 +164,7 @@ const AgentTools: FC = () => {
                           <InfoCircle className='w-4 h-4 text-gray-500' />
                         </div>
                       </TooltipPlus>
-                      )}
+                      {/* )} */}
 
                       <div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
                         const newModelConfig = produce(modelConfig, (draft) => {
@@ -209,6 +209,7 @@ const AgentTools: FC = () => {
             toolName={currentTool?.tool_name as string}
             setting={currentTool?.tool_parameters as any}
             collection={currentTool?.collection as Collection}
+            isBuiltIn={currentTool?.collection?.type === CollectionType.builtIn}
             onSave={handleToolSettingChange}
             onHide={() => setIsShowSettingTool(false)}
           />)

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

@@ -8,14 +8,17 @@ import Drawer from '@/app/components/base/drawer-plus'
 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 { fetchBuiltInToolList } from '@/service/tools'
+import { fetchBuiltInToolList, fetchCustomToolList } 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'
+
 type Props = {
   collection: Collection
+  isBuiltIn?: boolean
   toolName: string
   setting?: Record<string, any>
   readonly?: boolean
@@ -25,6 +28,7 @@ type Props = {
 
 const SettingBuiltInTool: FC<Props> = ({
   collection,
+  isBuiltIn = true,
   toolName,
   setting = {},
   readonly,
@@ -52,7 +56,7 @@ const SettingBuiltInTool: FC<Props> = ({
     (async () => {
       setIsLoading(true)
       try {
-        const list = await fetchBuiltInToolList(collection.name)
+        const list = isBuiltIn ? await fetchBuiltInToolList(collection.name) : await fetchCustomToolList(collection.name)
         setTools(list)
         const currTool = list.find(tool => tool.name === toolName)
         if (currTool) {
@@ -135,12 +139,24 @@ const SettingBuiltInTool: FC<Props> = ({
       onHide={onHide}
       title={(
         <div className='flex'>
+          {collection.icon === 'string'
+            ? (
               <div
                 className='w-6 h-6 bg-cover bg-center rounded-md'
                 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' />

web/app/components/tools/index.tsx

@@ -69,9 +69,22 @@ const Tools: FC<Props> = ({
   })()
 
   const [query, setQuery] = useState('')
-  const [collectionType, setCollectionType] = useTabSearchParams({
+  const [toolPageCollectionType, setToolPageCollectionType] = useTabSearchParams({
     defaultTab: collectionTypeOptions[0].value,
   })
+  const [appPageCollectionType, setAppPageCollectionType] = useState(collectionTypeOptions[0].value)
+  const { collectionType, setCollectionType } = (() => {
+    if (isInToolsPage) {
+      return {
+        collectionType: toolPageCollectionType,
+        setCollectionType: setToolPageCollectionType,
+      }
+    }
+    return {
+      collectionType: appPageCollectionType,
+      setCollectionType: setAppPageCollectionType,
+    }
+  })()
 
   const showCollectionList = (() => {
     let typeFilteredList: Collection[] = []

web/app/components/tools/tool-list/item.tsx

@@ -63,7 +63,7 @@ const Item: FC<Props> = ({
           )}
         </div>
       </div>
-      {showDetail && isBuiltIn && (
+      {showDetail && (
         <SettingBuiltInTool
           collection={collection}
           toolName={payload.name}
@@ -71,6 +71,7 @@ const Item: FC<Props> = ({
           onHide={() => {
             setShowDetail(false)
           }}
+          isBuiltIn={isBuiltIn}
         />
       )}
     </>