From 60a2ecbd1795cd59cea5b2557a8d0c3f8895e876 Mon Sep 17 00:00:00 2001 From: Joel Date: Fri, 26 Jan 2024 12:48:26 +0800 Subject: [PATCH] chore: no custom tool placeholder ui (#2222) --- .../icons/assets/public/other/Icon-3-dots.svg | 3 ++ .../icons/src/public/other/Icon3Dots.json | 29 +++++++++++++++++++ .../base/icons/src/public/other/Icon3Dots.tsx | 16 ++++++++++ .../base/icons/src/public/other/index.ts | 1 + web/app/components/tools/index.tsx | 5 ++++ .../components/tools/info/no-custom-tool.tsx | 4 +-- .../tools/no-custom-tool-placeholder.tsx | 26 +++++++++++++++++ web/i18n/lang/tools.en.ts | 2 +- web/i18n/lang/tools.pt.ts | 2 +- web/i18n/lang/tools.zh.ts | 2 +- 10 files changed, 85 insertions(+), 5 deletions(-) create mode 100644 web/app/components/base/icons/assets/public/other/Icon-3-dots.svg create mode 100644 web/app/components/base/icons/src/public/other/Icon3Dots.json create mode 100644 web/app/components/base/icons/src/public/other/Icon3Dots.tsx create mode 100644 web/app/components/tools/no-custom-tool-placeholder.tsx diff --git a/web/app/components/base/icons/assets/public/other/Icon-3-dots.svg b/web/app/components/base/icons/assets/public/other/Icon-3-dots.svg new file mode 100644 index 000000000..fee9b18ca --- /dev/null +++ b/web/app/components/base/icons/assets/public/other/Icon-3-dots.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/src/public/other/Icon3Dots.json b/web/app/components/base/icons/src/public/other/Icon3Dots.json new file mode 100644 index 000000000..9c6d23283 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/other/Icon3Dots.tsx b/web/app/components/base/icons/src/public/other/Icon3Dots.tsx new file mode 100644 index 000000000..1f9eb767a --- /dev/null +++ b/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, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'Icon3Dots' + +export default Icon diff --git a/web/app/components/base/icons/src/public/other/index.ts b/web/app/components/base/icons/src/public/other/index.ts index 51878085f..adf723edb 100644 --- a/web/app/components/base/icons/src/public/other/index.ts +++ b/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' diff --git a/web/app/components/tools/index.tsx b/web/app/components/tools/index.tsx index d65c323d0..0c9cedf6b 100644 --- a/web/app/components/tools/index.tsx +++ b/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 = ({ isLoading={isDetailLoading} /> )} + + {collectionType === CollectionType.custom && hasNoCustomCollection && ( + + )} diff --git a/web/app/components/tools/info/no-custom-tool.tsx b/web/app/components/tools/info/no-custom-tool.tsx index dd49ee2e7..91c09253c 100644 --- a/web/app/components/tools/info/no-custom-tool.tsx +++ b/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 = ({
- {t('tools.noCustomTool.title')} + {t('tools.noCustomTool.title')}
{t('tools.noCustomTool.content')} diff --git a/web/app/components/tools/no-custom-tool-placeholder.tsx b/web/app/components/tools/no-custom-tool-placeholder.tsx new file mode 100644 index 000000000..7fda72140 --- /dev/null +++ b/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 ( +
+
+
+ +
+
+ {t('tools.noCustomTool.title')} + +
+
{t('tools.noCustomTool.content')}
+
+
+ ) +} +export default React.memo(NoCustomToolPlaceHolder) diff --git a/web/i18n/lang/tools.en.ts b/web/i18n/lang/tools.en.ts index ce9c17f04..7b8314f18 100644 --- a/web/i18n/lang/tools.en.ts +++ b/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', }, diff --git a/web/i18n/lang/tools.pt.ts b/web/i18n/lang/tools.pt.ts index a46bbb961..99892ce78 100644 --- a/web/i18n/lang/tools.pt.ts +++ b/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', }, diff --git a/web/i18n/lang/tools.zh.ts b/web/i18n/lang/tools.zh.ts index 2fa518317..40753ddc9 100644 --- a/web/i18n/lang/tools.zh.ts +++ b/web/i18n/lang/tools.zh.ts @@ -78,7 +78,7 @@ const translation = { infoAndSetting: '信息和设置', }, noCustomTool: { - title: '没有自定义工具', + title: '没有自定义工具!', content: '在此统一添加和管理你的自定义工具，方便构建应用时使用。', createTool: '创建工具', },