chore: no custom tool placeholder ui (#2222)

web/app/components/tools/index.tsx

@@ -15,6 +15,7 @@ import ToolList from './tool-list'
 import EditCustomToolModal from './edit-custom-collection-modal'
 import NoCustomTool from './info/no-custom-tool'
 import NoSearchRes from './info/no-search-res'
+import NoCustomToolPlaceholder from './no-custom-tool-placeholder'
 import TabSlider from '@/app/components/base/tab-slider'
 import { createCustomCollection, fetchCollectionList as doFetchCollectionList, fetchBuiltInToolList, fetchCustomToolList } from '@/service/tools'
 import type { AgentTool } from '@/types/app'
@@ -216,6 +217,10 @@ const Tools: FC<Props> = ({
                 isLoading={isDetailLoading}
               />
             )}
+
+            {collectionType === CollectionType.custom && hasNoCustomCollection && (
+              <NoCustomToolPlaceholder />
+            )}
           </div>
         </div>
       </div>

web/app/components/tools/info/no-custom-tool.tsx

@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Icon3Dots } from '../../base/icons/src/public/other'
 import { Tools } from '@/app/components/base/icons/src/public/header-nav/tools'
-
 type Props = {
   onCreateTool: () => void
 }
@@ -20,7 +20,7 @@ const NoCustomTool: FC<Props> = ({
       </div>
       <div className='mt-2'>
         <div className='leading-5 text-sm font-medium text-gray-500'>
-          {t('tools.noCustomTool.title')}
+          {t('tools.noCustomTool.title')}<Icon3Dots className='inline relative -top-3 -left-1.5' />
         </div>
         <div className='mt-1 leading-[18px] text-xs font-normal text-gray-500'>
           {t('tools.noCustomTool.content')}

web/app/components/tools/no-custom-tool-placeholder.tsx

@@ -0,0 +1,26 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { BookOpen01 } from '../base/icons/src/vender/line/education'
+import { Icon3Dots } from '../base/icons/src/public/other'
+
+const NoCustomToolPlaceHolder: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='h-full flex items-center justify-center'>
+      <div className='p-6 rounded-xl bg-gray-50'>
+        <div className='inline-flex p-2 border border-gray-200 rounded-md'>
+          <BookOpen01 className='w-4 h-4 text-primary-600' />
+        </div>
+        <div className='mt-3 leading-6 text-base font-medium text-gray-700'>
+          {t('tools.noCustomTool.title')}
+          <Icon3Dots className='inline relative -top-3 -left-1.5' />
+        </div>
+        <div className='mt-2 leading-5 text-sm font-normal text-gray-700'>{t('tools.noCustomTool.content')}</div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(NoCustomToolPlaceHolder)