From e2fec587f8bdaf44eda913d7d3b6fe8e899ce026 Mon Sep 17 00:00:00 2001 From: Joel Date: Mon, 14 Oct 2024 18:35:01 +0800 Subject: [PATCH] feat: from marketplace --- .../workflow/block-selector/all-tools.tsx | 3 + .../market-place-plugin/action.tsx | 56 +++++++++++++++++++ .../market-place-plugin/item.tsx | 54 ++++++++++++++++++ .../market-place-plugin/list.tsx | 35 ++++++++++++ .../workflow/block-selector/tool-item.tsx | 4 +- web/i18n/en-US/plugin.ts | 3 + web/i18n/en-US/workflow.ts | 2 +- web/i18n/zh-Hans/plugin.ts | 3 + 8 files changed, 157 insertions(+), 3 deletions(-) create mode 100644 web/app/components/workflow/block-selector/market-place-plugin/action.tsx create mode 100644 web/app/components/workflow/block-selector/market-place-plugin/item.tsx create mode 100644 web/app/components/workflow/block-selector/market-place-plugin/list.tsx diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx index f8947ad52a..2f75f90fc3 100644 --- a/web/app/components/workflow/block-selector/all-tools.tsx +++ b/web/app/components/workflow/block-selector/all-tools.tsx @@ -12,6 +12,8 @@ import { useToolTabs } from './hooks' import ViewTypeSelect, { ViewType } from './view-type-select' import cn from '@/utils/classnames' import { useGetLanguage } from '@/context/i18n' +import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list' +import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock' type AllToolsProps = { searchText: string @@ -71,6 +73,7 @@ const AllTools = ({ + = () => { + const { t } = useTranslation() + const [open, doSetOpen] = useState(false) + const openRef = useRef(open) + const setOpen = useCallback((v: boolean) => { + doSetOpen(v) + openRef.current = v + }, [doSetOpen]) + + const handleTrigger = useCallback(() => { + setOpen(!openRef.current) + }, [setOpen]) + + return ( + + + + + + + +
+
{t('common.operation.download')}
+ {/* Wait marketplace */} + {/*
{t('common.operation.viewDetail')}
*/} +
+ + + ) +} +export default React.memo(OperationDropdown) diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx new file mode 100644 index 0000000000..385cdbfd56 --- /dev/null +++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx @@ -0,0 +1,54 @@ +'use client' +import type { FC } from 'react' +import React from 'react' +import { useContext } from 'use-context-selector' +import { useTranslation } from 'react-i18next' +import Action from './action' +import type { Plugin } from '@/app/components/plugins/types.ts' +import I18n from '@/context/i18n' + +import { formatNumber } from '@/utils/format' + +enum ActionType { + install = 'install', + download = 'download', + // viewDetail = 'viewDetail', // wait for marketplace api +} +type Props = { + payload: Plugin + onAction: (type: ActionType) => void +} + +const Item: FC = ({ + payload, +}) => { + const { t } = useTranslation() + const { locale } = useContext(I18n) + + return ( +
+
+
+
+
{payload.label[locale]}
+
{payload.brief[locale]}
+
+
{payload.org}
+
·
+
{t('plugin.install', { num: formatNumber(payload.install_count || 0) })}
+
+
+ {/* Action */} +
+
{t('plugin.installAction')}
+ +
+
+ +
+ ) +} +export default React.memo(Item) diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx new file mode 100644 index 0000000000..33c00081c6 --- /dev/null +++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx @@ -0,0 +1,35 @@ +'use client' +import type { FC } from 'react' +import React from 'react' +import { useTranslation } from 'react-i18next' +import Item from './item' +import type { Plugin } from '@/app/components/plugins/types.ts' + +type Props = { + list: Plugin[] + // onInstall: () => +} + +const List: FC = ({ + list, +}) => { + const { t } = useTranslation() + + return ( +
+
+ {t('plugin.fromMarketplace')} +
+
+ {list.map((item, index) => ( + { }} + /> + ))} +
+
+ ) +} +export default React.memo(List) diff --git a/web/app/components/workflow/block-selector/tool-item.tsx b/web/app/components/workflow/block-selector/tool-item.tsx index 5ee3b399a5..7b004d6198 100644 --- a/web/app/components/workflow/block-selector/tool-item.tsx +++ b/web/app/components/workflow/block-selector/tool-item.tsx @@ -75,13 +75,13 @@ const ToolItem: FC = ({ }) }} > -
+
-
{payload.label[language]}
+
{payload.label[language]}
{isToolPlugin && ( diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts index c73c6a448e..a82cdf6707 100644 --- a/web/i18n/en-US/plugin.ts +++ b/web/i18n/en-US/plugin.ts @@ -1,5 +1,6 @@ const translation = { from: 'From', + fromMarketplace: 'From Marketplace', endpointsEnabled: '{{num}} sets of endpoints enabled', detailPanel: { operation: { @@ -18,6 +19,8 @@ const translation = { disabled: 'Disabled', modelNum: '{{num}} MODELS INCLUDED', }, + install: '{{num}} installs', + installAction: 'Install', } export default translation diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index d5ab6eb728..2e3576b5b8 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -198,7 +198,7 @@ const translation = { 'searchTool': 'Search tool', 'tools': 'Tools', 'allTool': 'All', - 'builtInTool': 'Built-in', + 'plugin': 'Plugin', 'customTool': 'Custom', 'workflowTool': 'Workflow', 'question-understand': 'Question Understand', diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts index 9bf3fdeea8..5166ddedc3 100644 --- a/web/i18n/zh-Hans/plugin.ts +++ b/web/i18n/zh-Hans/plugin.ts @@ -1,5 +1,6 @@ const translation = { from: '来自', + fromMarketplace: '来自市场', endpointsEnabled: '{{num}} 组端点已启用', detailPanel: { operation: { @@ -18,6 +19,8 @@ const translation = { disabled: '停用', modelNum: '{{num}} 模型已包含', }, + install: '{{num}} 次安装', + installAction: '安装', } export default translation