@ -1,5 +1,5 @@
import { PortalToFollowElem , PortalToFollowElemContent , PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
import { PortalToFollowElem , PortalToFollowElemContent , PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
import { use State } from 'react'
import { use Memo, use State } from 'react'
import type { Strategy } from './agent-strategy'
import type { Strategy } from './agent-strategy'
import classNames from '@/utils/classnames'
import classNames from '@/utils/classnames'
import { RiArrowDownSLine , RiArrowRightUpLine , RiErrorWarningFill } from '@remixicon/react'
import { RiArrowDownSLine , RiArrowRightUpLine , RiErrorWarningFill } from '@remixicon/react'
@ -7,10 +7,10 @@ import { useAllBuiltInTools } from '@/service/use-tools'
import Tooltip from '@/app/components/base/tooltip'
import Tooltip from '@/app/components/base/tooltip'
import Link from 'next/link'
import Link from 'next/link'
import { InstallPluginButton } from './install-plugin-button'
import { InstallPluginButton } from './install-plugin-button'
import SearchInput from '@/app/components/base/search-input'
import ViewTypeSelect , { ViewType } from '../../../block-selector/view-type-select'
import ViewTypeSelect , { ViewType } from '../../../block-selector/view-type-select'
import Tools from '../../../block-selector/tools '
import SearchInput from '@/app/components/base/search-input '
import { MARKETPLACE_URL_PREFIX } from '@/config'
import { MARKETPLACE_URL_PREFIX } from '@/config'
import Tools from '../../../block-selector/tools'
const ExternalNotInstallWarn = ( ) = > {
const ExternalNotInstallWarn = ( ) = > {
// TODO: add i18n label
// TODO: add i18n label
@ -40,18 +40,23 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
const [ open , setOpen ] = useState ( false )
const [ open , setOpen ] = useState ( false )
const list = useAllBuiltInTools ( )
const list = useAllBuiltInTools ( )
const [ viewType , setViewType ] = useState < ViewType > ( ViewType . flat )
const [ viewType , setViewType ] = useState < ViewType > ( ViewType . flat )
const [ query , setQuery ] = useState ( '' )
const filteredTools = useMemo ( ( ) = > {
if ( ! list . data ) return [ ]
return list . data . filter ( tool = > tool . name . toLowerCase ( ) . includes ( query . toLowerCase ( ) ) )
} , [ query , list . data ] )
// TODO: should be replaced by real data
// TODO: should be replaced by real data
const isExternalInstalled = true
const isExternalInstalled = true
return < PortalToFollowElem open = { open } onOpenChange = { setOpen } placement = 'bottom' >
return < PortalToFollowElem open = { open } onOpenChange = { setOpen } placement = 'bottom' >
< PortalToFollowElemTrigger className = 'w-full' >
< 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 ) } >
< 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 select-none ' onClick = { ( ) = > setOpen ( o = > ! o ) } >
{ /* eslint-disable-next-line @next/next/no-img-element */ }
{ /* eslint-disable-next-line @next/next/no-img-element */ }
{ list . data && < img
{ list . data && value && < img
src = { list . data . find (
src = { list . data . find (
coll = > coll ,
coll = > coll ,
) ? . icon as string }
) ? . icon as string }
width = { 2 4 }
width = { 2 0 }
height = { 2 4 }
height = { 2 0 }
className = 'rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'
className = 'rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'
alt = 'icon'
alt = 'icon'
/ > }
/ > }
@ -60,21 +65,21 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
>
>
{ value ? . agent_strategy_name || 'Select agentic strategy' }
{ value ? . agent_strategy_name || 'Select agentic strategy' }
< / p >
< / p >
<div className = 'ml-auto flex items-center gap-1' >
{value && <div className = 'ml-auto flex items-center gap-1' >
< InstallPluginButton onClick = { e = > e . stopPropagation ( ) } size = { 'small' } / >
< InstallPluginButton onClick = { e = > e . stopPropagation ( ) } size = { 'small' } / >
{ isExternalInstalled ? < ExternalNotInstallWarn / > : < RiArrowDownSLine className = 'size-4 text-text-tertiary' / > }
{ isExternalInstalled ? < ExternalNotInstallWarn / > : < RiArrowDownSLine className = 'size-4 text-text-tertiary' / > }
< / div >
< / div > }
< / div >
< / div >
< / PortalToFollowElemTrigger >
< / PortalToFollowElemTrigger >
< PortalToFollowElemContent >
< PortalToFollowElemContent className = 'z-10' >
< div className = 'bg-components-panel-bg-blur border-components-panel-border border-[0.5px] rounded-md shadow overflow-hidden '>
< div className = 'bg-components-panel-bg-blur border-components-panel-border border-[0.5px] rounded-md shadow overflow-hidden w-[388px] '>
< header className = 'p-2 gap-1 flex' >
< header className = 'p-2 gap-1 flex' >
< SearchInput placeholder = 'Search agentic strategy' value = '' onChange = { console . error } / >
< SearchInput placeholder = 'Search agentic strategy' value = { query } onChange = { setQuery } className = { 'w-full' } / >
< ViewTypeSelect viewType = { viewType } onChange = { setViewType } / >
< ViewTypeSelect viewType = { viewType } onChange = { setViewType } / >
< / header >
< / header >
< main className = " h-96 relative overflow-hidden">
< main className = " md:h-[300px] xl:h-[400px] 2xl:h-[564px] relative overflow-hidden">
< Tools
< Tools
tools = { list. data || [ ] }
tools = { filteredTools }
viewType = { viewType }
viewType = { viewType }
onSelect = { ( _ , tool ) = > {
onSelect = { ( _ , tool ) = > {
onChange ( {
onChange ( {
@ -86,16 +91,20 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
} }
} }
hasSearchText = { false }
hasSearchText = { false }
showWorkflowEmpty
showWorkflowEmpty
className = 'max-w-none'
indexBarClassName = 'top-0 xl:top-36'
/ >
/ >
< 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' >
< div className = ' absolute 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
Find more in
{ /** //TODO: replace URL */ }
< Link href = { MARKETPLACE_URL_PREFIX } className = 'flex ml-1' >
< Link href = { MARKETPLACE_URL_PREFIX } className = 'flex ml-1' >
Marketplace < RiArrowRightUpLine className = 'size-3' / >
Marketplace < RiArrowRightUpLine className = 'size-3' / >
< / Link >
< / Link >
< / div >
< / div >
< / main >
< / main >
< / div >
< / div >
{ / * < d i v >
aaa
< / div > * / }
< / PortalToFollowElemContent >
< / PortalToFollowElemContent >
< / PortalToFollowElem >
< / PortalToFollowElem >
}
}