61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import React from 'react'
|
|
import { useEffect, useState } from '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'
|
|
|
|
type Props = {
|
|
onSelect: (tool: ToolDefaultValue) => void
|
|
supportAddCustomTool?: boolean
|
|
}
|
|
|
|
const ToolPicker: FC<Props> = ({
|
|
onSelect,
|
|
supportAddCustomTool,
|
|
}) => {
|
|
const [searchText, setSearchText] = useState('')
|
|
|
|
const [buildInTools, setBuildInTools] = useState<ToolWithProvider[]>([])
|
|
const [customTools, setCustomTools] = useState<ToolWithProvider[]>([])
|
|
const [workflowTools, setWorkflowTools] = useState<ToolWithProvider[]>([])
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const buildInTools = await fetchAllBuiltInTools()
|
|
const customTools = await fetchAllCustomTools()
|
|
const workflowTools = await fetchAllWorkflowTools()
|
|
setBuildInTools(buildInTools)
|
|
setCustomTools(customTools)
|
|
setWorkflowTools(workflowTools)
|
|
})()
|
|
}, [])
|
|
|
|
const handleSelect = (_type: BlockEnum, tool?: ToolDefaultValue) => {
|
|
onSelect(tool!)
|
|
}
|
|
|
|
return (
|
|
<div className="relative mt-5 mx-auto w-[320px] bg-white">
|
|
<input placeholder='search holder' value={searchText} onChange={e => setSearchText(e.target.value)} />
|
|
<AllTools
|
|
className='mt-1'
|
|
searchText={searchText}
|
|
onSelect={handleSelect}
|
|
buildInTools={buildInTools}
|
|
customTools={customTools}
|
|
workflowTools={workflowTools}
|
|
supportAddCustomTool={supportAddCustomTool}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(ToolPicker)
|