feat: select strategy
This commit is contained in:
AkaraChen
parent
e1ea82475d
commit
8dcd82290c
@ -3,7 +3,6 @@ import { useMemo, useState } from 'react'
|
||||
import type { Strategy } from './agent-strategy'
|
||||
import classNames from '@/utils/classnames'
|
||||
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'
|
||||
@ -12,6 +11,10 @@ import SearchInput from '@/app/components/base/search-input'
|
||||
import { MARKETPLACE_URL_PREFIX } from '@/config'
|
||||
import Tools from '../../../block-selector/tools'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useStrategyProviders } from '@/service/use-strategy'
|
||||
import type { StrategyPluginDetail } from '@/app/components/plugins/types'
|
||||
import type { ToolWithProvider } from '../../../types'
|
||||
import { CollectionType } from '@/app/components/tools/types'
|
||||
|
||||
const ExternalNotInstallWarn = () => {
|
||||
const { t } = useTranslation()
|
||||
@ -31,6 +34,36 @@ const ExternalNotInstallWarn = () => {
|
||||
</Tooltip>
|
||||
}
|
||||
|
||||
function formatStrategy(input: StrategyPluginDetail[]): ToolWithProvider[] {
|
||||
return input.map((item) => {
|
||||
const res: ToolWithProvider = {
|
||||
id: item.provider,
|
||||
// TODO: replace this
|
||||
author: item.declaration.identity.author,
|
||||
name: item.declaration.identity.name,
|
||||
description: item.declaration.identity.description as any,
|
||||
plugin_id: item.plugin_id,
|
||||
icon: item.declaration.identity.icon,
|
||||
label: item.declaration.identity.label as any,
|
||||
type: CollectionType.all,
|
||||
tools: item.declaration.strategies.map(strategy => ({
|
||||
name: strategy.identity.name,
|
||||
author: strategy.identity.author,
|
||||
label: strategy.identity.label as any,
|
||||
description: strategy.description,
|
||||
parameters: strategy.parameters as any,
|
||||
output_schema: strategy.output_schema,
|
||||
labels: [],
|
||||
})),
|
||||
team_credentials: {},
|
||||
is_team_authorization: true,
|
||||
allow_delete: false,
|
||||
labels: [],
|
||||
}
|
||||
return res
|
||||
})
|
||||
}
|
||||
|
||||
export type AgentStrategySelectorProps = {
|
||||
value?: Strategy,
|
||||
onChange: (value?: Strategy) => void,
|
||||
@ -39,13 +72,15 @@ export type AgentStrategySelectorProps = {
|
||||
export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
|
||||
const { value, onChange } = props
|
||||
const [open, setOpen] = useState(false)
|
||||
const list = useAllBuiltInTools()
|
||||
const [viewType, setViewType] = useState<ViewType>(ViewType.flat)
|
||||
const [query, setQuery] = useState('')
|
||||
const stra = useStrategyProviders()
|
||||
const list = stra.data ? formatStrategy(stra.data) : undefined
|
||||
console.log('list', list, 'stra', stra)
|
||||
const filteredTools = useMemo(() => {
|
||||
if (!list.data) return []
|
||||
return list.data.filter(tool => tool.name.toLowerCase().includes(query.toLowerCase()))
|
||||
}, [query, list.data])
|
||||
if (!list) return []
|
||||
return list.filter(tool => tool.name.toLowerCase().includes(query.toLowerCase()))
|
||||
}, [query, list])
|
||||
// TODO: should be replaced by real data
|
||||
const isExternalInstalled = true
|
||||
const { t } = useTranslation()
|
||||
@ -53,9 +88,9 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
|
||||
<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 select-none' onClick={() => setOpen(o => !o)}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
{list.data && value && <img
|
||||
src={list.data.find(
|
||||
coll => coll,
|
||||
{list && value && <img
|
||||
src={list.find(
|
||||
coll => coll.tools?.find(tool => tool.name === value.agent_strategy_name),
|
||||
)?.icon as string}
|
||||
width={20}
|
||||
height={20}
|
||||
@ -65,7 +100,7 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
|
||||
<p
|
||||
className={classNames(value ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder', 'text-xs px-1')}
|
||||
>
|
||||
{value?.agent_strategy_name || t('workflow.nodes.agent.strategy.selectTip')}
|
||||
{value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}
|
||||
</p>
|
||||
{value && <div className='ml-auto flex items-center gap-1'>
|
||||
<InstallPluginButton onClick={e => e.stopPropagation()} size={'small'} />
|
||||
@ -85,10 +120,12 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
|
||||
viewType={viewType}
|
||||
onSelect={(_, tool) => {
|
||||
onChange({
|
||||
agent_strategy_name: tool!.title,
|
||||
agent_strategy_name: tool!.tool_name,
|
||||
agent_strategy_provider_name: tool!.provider_name,
|
||||
agent_parameters: tool!.params,
|
||||
agent_strategy_label: tool!.tool_label,
|
||||
})
|
||||
console.log(tool, 'tool')
|
||||
setOpen(false)
|
||||
}}
|
||||
hasSearchText={false}
|
||||
|
||||
@ -10,7 +10,7 @@ import { Agent } from '@/app/components/base/icons/src/vender/workflow'
|
||||
export type Strategy = {
|
||||
agent_strategy_provider_name: string
|
||||
agent_strategy_name: string
|
||||
agent_strategy_label?: string
|
||||
agent_strategy_label: string
|
||||
agent_parameters?: ToolVarInputs
|
||||
}
|
||||
|
||||
|
||||
@ -17,10 +17,10 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
|
||||
label={t('workflow.nodes.agent.strategy.shortLabel')}
|
||||
status='error'
|
||||
tooltip={t('workflow.nodes.agent.strategyNotInstallTooltip', {
|
||||
strategy: inputs.agent_strategy_name,
|
||||
strategy: inputs.agent_strategy_label,
|
||||
})}
|
||||
>
|
||||
{inputs.agent_strategy_name}
|
||||
{inputs.agent_strategy_label}
|
||||
</SettingItem>
|
||||
: <SettingItem label={t('workflow.nodes.agent.strategyNotSet')} />}
|
||||
<Group
|
||||
|
||||
@ -7,48 +7,9 @@ import Slider from '@/app/components/base/slider'
|
||||
import { AgentStrategy } from '../_base/components/agent-strategy'
|
||||
import useConfig from './use-config'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { type CredentialFormSchema, FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
|
||||
// @ts-expect-error fuck
|
||||
const mockSchema = [
|
||||
{
|
||||
name: 'format',
|
||||
label: {
|
||||
en_US: 'Format',
|
||||
zh_Hans: '格式',
|
||||
pt_BR: 'Format',
|
||||
ja_JP: 'Format',
|
||||
},
|
||||
placeholder: undefined,
|
||||
scope: undefined,
|
||||
required: false,
|
||||
default: '%Y-%m-%d %H:%M:%S',
|
||||
options: [],
|
||||
type: 'text-input',
|
||||
form: 'form',
|
||||
llm_description: null,
|
||||
variable: 'format',
|
||||
_type: 'string',
|
||||
show_on: [],
|
||||
tooltip: {
|
||||
en_US: 'Time format in strftime standard.',
|
||||
zh_Hans: 'strftime 标准的时间格式。',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'model',
|
||||
type: FormTypeEnum.modelSelector,
|
||||
label: {
|
||||
en_US: 'Model',
|
||||
zh_Hans: '模型',
|
||||
},
|
||||
variable: 'model',
|
||||
scope: 'all',
|
||||
},
|
||||
] as Array<CredentialFormSchema & { name: string }>
|
||||
|
||||
const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
|
||||
const { inputs, setInputs } = useConfig(props.id, props.data)
|
||||
const { inputs, setInputs, currentStrategy } = useConfig(props.id, props.data)
|
||||
const { t } = useTranslation()
|
||||
const [iter, setIter] = [inputs.max_iterations, (value: number) => {
|
||||
setInputs({
|
||||
@ -63,6 +24,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
|
||||
agent_strategy_provider_name: inputs.agent_strategy_provider_name!,
|
||||
agent_strategy_name: inputs.agent_strategy_name!,
|
||||
agent_parameters: inputs.agent_parameters,
|
||||
agent_strategy_label: inputs.agent_strategy_label!,
|
||||
} : undefined}
|
||||
onStrategyChange={(strategy) => {
|
||||
setInputs({
|
||||
@ -70,9 +32,10 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
|
||||
agent_strategy_provider_name: strategy?.agent_strategy_provider_name,
|
||||
agent_strategy_name: strategy?.agent_strategy_name,
|
||||
agent_parameters: strategy?.agent_parameters,
|
||||
agent_strategy_label: strategy?.agent_strategy_label,
|
||||
})
|
||||
}}
|
||||
formSchema={mockSchema as any}
|
||||
formSchema={currentStrategy?.parameters as any || []}
|
||||
formValue={inputs.agent_parameters || {}}
|
||||
onFormValueChange={value => setInputs({
|
||||
...inputs,
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { useStrategyProviderDetail } from '@/service/use-strategy'
|
||||
import useNodeCrud from '../_base/hooks/use-node-crud'
|
||||
import useVarList from '../_base/hooks/use-var-list'
|
||||
import type { AgentNodeType } from './types'
|
||||
@ -13,13 +14,20 @@ const useConfig = (id: string, payload: AgentNodeType) => {
|
||||
inputs,
|
||||
setInputs,
|
||||
})
|
||||
|
||||
const strategies = useStrategyProviderDetail(
|
||||
inputs.agent_strategy_provider_name || '',
|
||||
)
|
||||
const currentStrategy = strategies.data?.declaration.strategies.find(
|
||||
str => str.identity.name === inputs.agent_strategy_name,
|
||||
)
|
||||
console.log('currentStrategy', currentStrategy, 'strategies', strategies, 'inputs', inputs)
|
||||
return {
|
||||
readOnly,
|
||||
inputs,
|
||||
setInputs,
|
||||
handleVarListChange,
|
||||
handleAddVariable,
|
||||
currentStrategy,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,8 @@ export const useInvalidateStrategyProviders = () => {
|
||||
export const useStrategyProviderDetail = (agentProvider: string) => {
|
||||
return useQuery<StrategyPluginDetail>({
|
||||
queryKey: [NAME_SPACE, 'detail', agentProvider],
|
||||
queryFn: () => get<StrategyPluginDetail>(`/workspaces/current/agent-providers/${agentProvider}`),
|
||||
queryFn: () => get<StrategyPluginDetail>(`/workspaces/current/agent-provider/${agentProvider}`),
|
||||
enabled: !!agentProvider,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user