outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: init tool select component

Browse Source
This commit is contained in:
AkaraChen 2024-12-24 15:55:45 +08:00
parent 754baf8d02
commit aa309964e5
1 changed files with 38 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
View File

@ -1,13 +1,16 @@
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
import { useState } from 'react'
import AllTools from '../../../block-selector/all-tools'
import type { Strategy } from './agent-strategy'
import classNames from '@/utils/classnames'
import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
import { RiArrowDownSLine, RiArrowRightUpLine, RiErrorWarningFill } from '@remixicon/react'
import { useAllBuiltInTools } from '@/service/use-tools'
import Tooltip from '@/app/components/base/tooltip'
import Link from 'next/link'
import { InstallPluginButton } from './install-plugin-button'
import SearchInput from '@/app/components/base/search-input'
import ViewTypeSelect, { ViewType } from '../../../block-selector/view-type-select'
import Tools from '../../../block-selector/tools'
import { MARKETPLACE_URL_PREFIX } from '@/config'
const ExternalNotInstallWarn = () => {
// TODO: add i18n label
@ -36,11 +39,13 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
const { value, onChange } = props
const [open, setOpen] = useState(false)
const list = useAllBuiltInTools()
const [viewType, setViewType] = useState<ViewType>(ViewType.flat)
// TODO: should be replaced by real data
const isExternalInstalled = true
return <PortalToFollowElem open={open} onOpenChange={setOpen}>
return <PortalToFollowElem open={open} onOpenChange={setOpen} placement='bottom' offset={0}>
<PortalToFollowElemTrigger className='w-full'>
<div className='py-2 pl-3 pr-2 flex items-center rounded-lg bg-components-input-bg-normal w-full hover:bg-state-base-hover-alt' onClick={() => setOpen(true)}>
{/* eslint-disable-next-line @next/next/no-img-element */}
{list.data && <img
src={list.data.find(
coll => coll,
@ -56,31 +61,41 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
{value?.agent_strategy_name || 'Select agentic strategy'}
</p>
<div className='ml-auto flex items-center gap-1'>
<InstallPluginButton onClick={e => e.preventDefault()} />
<InstallPluginButton onClick={e => e.stopPropagation()} size={'small'} />
{isExternalInstalled ? <ExternalNotInstallWarn /> : <RiArrowDownSLine className='size-4 text-text-tertiary' />}
</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
{list.data && <AllTools
className='border-components-panel-border bg-components-panel-bg-blur'
searchText=''
tags={[]}
buildInTools={list.data}
customTools={[]}
workflowTools={[]}
onSelect={(_e, tool) => {
if (!tool) {
// TODO: should not be called, try it
return
}
onChange({
agent_strategy_name: tool.title,
agent_strategy_provider_name: tool.provider_name,
agent_parameters: {},
})
}}
/>}
<div className='bg-components-panel-bg-blur border-components-panel-border border-[0.5px] rounded-md shadow overflow-hidden'>
<header className='p-2 gap-1 flex'>
<SearchInput placeholder='Search agentic strategy' value='' onChange={console.error} />
<ViewTypeSelect viewType={viewType} onChange={setViewType} />
</header>
<main className="h-96 relative overflow-hidden">
<Tools
tools={list.data || []}
viewType={viewType}
onSelect={(_, tool) => {
onChange({
agent_strategy_name: tool!.title,
agent_strategy_provider_name: tool!.provider_name,
agent_parameters: tool!.params,
})
setOpen(false)
}}
hasSearchText={false}
showWorkflowEmpty
/>
<div className='sticky bottom-0 px-4 py-2 flex items-center justify-center border-t border-divider-subtle text-text-accent-light-mode-only bg-components-panel-bg text-xs'>
Find more in
{/** //TODO: replace URL */}
<Link href={MARKETPLACE_URL_PREFIX} className='flex ml-1'>
Marketplace <RiArrowRightUpLine className='size-3' />
</Link>
</div>
</main>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
}