chore: no custom tool placeholder ui (#2222)

web/app/components/base/icons/assets/public/other/Icon-3-dots.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/app/components/base/icons/src/public/other/Icon3Dots.json

@@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103",
+					"stroke": "#667085",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Icon3Dots"
+}

web/app/components/base/icons/src/public/other/Icon3Dots.tsx

@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Icon3Dots.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Icon3Dots'
+
+export default Icon

web/app/components/base/icons/src/public/other/index.ts

@@ -1 +1,2 @@
+export { default as Icon3Dots } from './Icon3Dots'
 export { default as DefaultToolIcon } from './DefaultToolIcon'

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)

web/i18n/lang/tools.en.ts

@@ -86,7 +86,7 @@ const translation = {
     infoAndSetting: 'Info & Settings',
   },
   noCustomTool: {
-    title: 'No custom tools',
+    title: 'No custom tools!',
     content: 'Add and manage your custom tools here for building AI apps.',
     createTool: 'Create Tool',
   },

web/i18n/lang/tools.pt.ts

@@ -86,7 +86,7 @@ const translation = {
     infoAndSetting: 'Informações e Configurações',
   },
   noCustomTool: {
-    title: 'Nenhuma ferramenta personalizada',
+    title: 'Nenhuma ferramenta personalizada!',
     content: 'Você não possui ferramentas personalizadas. ',
     createTool: 'Criar Ferramenta',
   },

web/i18n/lang/tools.zh.ts

@@ -78,7 +78,7 @@ const translation = {
     infoAndSetting: '信息和设置',
   },
   noCustomTool: {
-    title: '没有自定义工具',
+    title: '没有自定义工具!',
     content: '在此统一添加和管理你的自定义工具，方便构建应用时使用。',
     createTool: '创建工具',
   },