= ({
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/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':
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`),
+ })
+}