From 6a99fab92f8686becaec1c2d4ddeab77077b1c71 Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Thu, 7 Nov 2024 15:06:55 +0800 Subject: [PATCH 1/3] fix: marketplace --- .../components/plugins/marketplace/index.tsx | 54 +++++++++++++++++++ .../marketplace/intersection-line/hooks.ts | 9 ++-- .../components/plugins/plugin-page/index.tsx | 1 + 3 files changed, 59 insertions(+), 5 deletions(-) diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx index 742df86ea0..2cd77dc038 100644 --- a/web/app/components/plugins/marketplace/index.tsx +++ b/web/app/components/plugins/marketplace/index.tsx @@ -28,6 +28,60 @@ const Marketplace = async ({ marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap} showInstallButton={showInstallButton} /> + + + + + + + + + ) } diff --git a/web/app/components/plugins/marketplace/intersection-line/hooks.ts b/web/app/components/plugins/marketplace/intersection-line/hooks.ts index 2ebc7842df..79ee764edf 100644 --- a/web/app/components/plugins/marketplace/intersection-line/hooks.ts +++ b/web/app/components/plugins/marketplace/intersection-line/hooks.ts @@ -1,17 +1,16 @@ import { useEffect } from 'react' -import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context' import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context' export const useScrollIntersection = ( anchorRef: React.RefObject, ) => { - const containerRef = usePluginPageContext(v => v.containerRef) const intersected = useMarketplaceContext(v => v.intersected) const setIntersected = useMarketplaceContext(v => v.setIntersected) useEffect(() => { + const container = document.getElementById('marketplace-container') let observer: IntersectionObserver | undefined - if (containerRef?.current && anchorRef.current) { + if (container && anchorRef.current) { observer = new IntersectionObserver((entries) => { const isIntersecting = entries[0].isIntersecting @@ -21,10 +20,10 @@ export const useScrollIntersection = ( if (!isIntersecting && intersected) setIntersected(false) }, { - root: containerRef.current, + root: container, }) observer.observe(anchorRef.current) } return () => observer?.disconnect() - }, [containerRef, anchorRef, intersected, setIntersected]) + }, [anchorRef, intersected, setIntersected]) } diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx index 50723b580b..f7b4f4ef74 100644 --- a/web/app/components/plugins/plugin-page/index.tsx +++ b/web/app/components/plugins/plugin-page/index.tsx @@ -121,6 +121,7 @@ const PluginPage = ({ return (
Date: Thu, 7 Nov 2024 15:22:00 +0800 Subject: [PATCH 2/3] build: update `@floating-ui/react` --- web/package.json | 2 +- web/pnpm-lock.yaml | 17 ++++++----------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/web/package.json b/web/package.json index b7b521c1dd..350db63944 100644 --- a/web/package.json +++ b/web/package.json @@ -27,7 +27,7 @@ "@babel/runtime": "^7.22.3", "@dagrejs/dagre": "^1.1.4", "@emoji-mart/data": "^1.2.1", - "@floating-ui/react": "^0.25.2", + "@floating-ui/react": "^0.26.25", "@formatjs/intl-localematcher": "^0.5.6", "@headlessui/react": "^1.7.13", "@heroicons/react": "^2.0.16", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 77c285856c..6c8df6e203 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -23,8 +23,8 @@ importers: specifier: ^1.2.1 version: 1.2.1 '@floating-ui/react': - specifier: ^0.25.2 - version: 0.25.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + specifier: ^0.26.25 + version: 0.26.27(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@formatjs/intl-localematcher': specifier: ^0.5.6 version: 0.5.6 @@ -1445,15 +1445,12 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' - '@floating-ui/react@0.25.4': - resolution: {integrity: sha512-lWRQ/UiTvSIBxohn0/2HFHEmnmOVRjl7j6XcRJuLH0ls6f/9AyHMWVzkAJFuwx0n9gaEeCmg9VccCSCJzbEJig==} + '@floating-ui/react@0.26.27': + resolution: {integrity: sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' - '@floating-ui/utils@0.1.6': - resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} - '@floating-ui/utils@0.2.8': resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} @@ -9353,16 +9350,14 @@ snapshots: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - '@floating-ui/react@0.25.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + '@floating-ui/react@0.26.27(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@floating-ui/react-dom': 2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0) - '@floating-ui/utils': 0.1.6 + '@floating-ui/utils': 0.2.8 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) tabbable: 6.2.0 - '@floating-ui/utils@0.1.6': {} - '@floating-ui/utils@0.2.8': {} '@formatjs/intl-localematcher@0.5.6': From 91b3aec292f40eb282f5911d3c8a5268551cbe50 Mon Sep 17 00:00:00 2001 From: Joel Date: Thu, 7 Nov 2024 15:24:02 +0800 Subject: [PATCH 3/3] feat: add use tools --- .../workflow/block-selector/tool-picker.tsx | 39 ++++--------- web/context/query-client.tsx | 2 +- web/service/use-tools.ts | 55 +++++++++++++++++++ 3 files changed, 67 insertions(+), 29 deletions(-) create mode 100644 web/service/use-tools.ts diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx index 95e2685943..3f1ffe4630 100644 --- a/web/app/components/workflow/block-selector/tool-picker.tsx +++ b/web/app/components/workflow/block-selector/tool-picker.tsx @@ -1,7 +1,7 @@ 'use client' import type { FC } from 'react' import React from 'react' -import { useEffect, useState } from 'react' +import { useState } from 'react' import { PortalToFollowElem, PortalToFollowElemContent, @@ -13,12 +13,7 @@ import type { } from '@floating-ui/react' import AllTools from '@/app/components/workflow/block-selector/all-tools' import type { ToolDefaultValue } from './types' -import { - fetchAllBuiltInTools, - fetchAllCustomTools, - fetchAllWorkflowTools, -} from '@/service/tools' -import type { BlockEnum, ToolWithProvider } from '@/app/components/workflow/types' +import type { BlockEnum } from '@/app/components/workflow/types' import SearchBox from '@/app/components/plugins/marketplace/search-box' import { useTranslation } from 'react-i18next' import { useBoolean } from 'ahooks' @@ -28,6 +23,7 @@ import { } from '@/service/tools' import type { CustomCollectionBackend } from '@/app/components/tools/types' import Toast from '@/app/components/base/toast' +import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools, useInvalidateAllCustomTools } from '@/service/use-tools' type Props = { disabled: boolean @@ -53,25 +49,12 @@ const ToolPicker: FC = ({ const { t } = useTranslation() const [searchText, setSearchText] = useState('') - const [buildInTools, setBuildInTools] = useState([]) - const [customTools, setCustomTools] = useState([]) - const [workflowTools, setWorkflowTools] = useState([]) + const { data: buildInTools } = useAllBuiltInTools() + const { data: customTools } = useAllCustomTools() + const { invalidate: invalidateCustomTools } = useInvalidateAllCustomTools() + const { data: workflowTools } = useAllWorkflowTools() - useEffect(() => { - (async () => { - const buildInTools = await fetchAllBuiltInTools() - const customTools = await fetchAllCustomTools() - const workflowTools = await fetchAllWorkflowTools() - setBuildInTools(buildInTools) - setCustomTools(customTools) - setWorkflowTools(workflowTools) - })() - }, []) - - const handleAddedCustomTool = async () => { - const customTools = await fetchAllCustomTools() - setCustomTools(customTools) - } + const handleAddedCustomTool = invalidateCustomTools const handleTriggerClick = () => { if (disabled) return @@ -138,9 +121,9 @@ const ToolPicker: FC = ({ className='mt-1' searchText={searchText} onSelect={handleSelect} - buildInTools={buildInTools} - customTools={customTools} - workflowTools={workflowTools} + buildInTools={buildInTools || []} + customTools={customTools || []} + workflowTools={workflowTools || []} supportAddCustomTool={supportAddCustomTool} onAddedCustomTool={handleAddedCustomTool} onShowAddCustomCollectionModal={showEditCustomCollectionModal} diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx index 4cb66eb826..1adb8af653 100644 --- a/web/context/query-client.tsx +++ b/web/context/query-client.tsx @@ -6,7 +6,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools' const client = new QueryClient() -export const TanstackQueryIniter: FC = (props) => { +export const TanstackQueryIniter: FC = (props) => { const { children } = props return {children} diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts new file mode 100644 index 0000000000..05e18051f6 --- /dev/null +++ b/web/service/use-tools.ts @@ -0,0 +1,55 @@ +import { get } from './base' +import type { + Tool, +} from '@/app/components/tools/types' +import type { ToolWithProvider } from '@/app/components/workflow/types' +import { + useQueryClient, +} from '@tanstack/react-query' + +import { + useQuery, +} from '@tanstack/react-query' + +const NAME_SPACE = 'tools' + +export const useAllBuiltInTools = () => { + return useQuery({ + queryKey: [NAME_SPACE, 'builtIn'], + queryFn: () => get('/workspaces/current/tools/builtin'), + }) +} + +const useAllCustomToolsKey = [NAME_SPACE, 'customTools'] +export const useAllCustomTools = () => { + return useQuery({ + queryKey: useAllCustomToolsKey, + queryFn: () => get('/workspaces/current/tools/api'), + }) +} + +export const useInvalidateAllCustomTools = () => { + const queryClient = useQueryClient() + return { + invalidate: () => { + queryClient.invalidateQueries( + { + queryKey: useAllCustomToolsKey, + }) + }, + } +} + +export const useAllWorkflowTools = () => { + return useQuery({ + queryKey: [NAME_SPACE, 'workflowTools'], + queryFn: () => get('/workspaces/current/tools/workflow'), + }) +} + +export const useBuiltInTools = (collectionName: string) => { + return useQuery({ + queryKey: [NAME_SPACE, 'builtIn', collectionName], + queryFn: () => get(`/workspaces/current/tool-provider/builtin/${collectionName}/tools`), + }) +}