diff --git a/web/src/pages/agent/form/iteration-form/dynamic-output.tsx b/web/src/pages/agent/form/iteration-form/dynamic-output.tsx index 6b7e39e33..89a341a37 100644 --- a/web/src/pages/agent/form/iteration-form/dynamic-output.tsx +++ b/web/src/pages/agent/form/iteration-form/dynamic-output.tsx @@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input'; import { Separator } from '@/components/ui/separator'; import { RAGFlowNodeType } from '@/interfaces/database/flow'; import { X } from 'lucide-react'; -import { ReactNode } from 'react'; +import { ReactNode, useCallback, useMemo } from 'react'; import { useFieldArray, useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useBuildSubNodeOutputOptions } from './use-build-options'; @@ -28,6 +28,26 @@ export function DynamicOutputForm({ node }: IProps) { const options = useBuildSubNodeOutputOptions(node?.id); const name = 'outputs'; + const flatOptions = useMemo(() => { + return options.reduce<{ label: string; value: string; type: string }[]>( + (pre, cur) => { + pre.push(...cur.options); + return pre; + }, + [], + ); + }, [options]); + + const findType = useCallback( + (val: string) => { + const type = flatOptions.find((x) => x.value === val)?.type; + if (type) { + return `Array<${type}>`; + } + }, + [flatOptions], + ); + const { fields, remove, append } = useFieldArray({ name: name, control: form.control, @@ -36,12 +56,13 @@ export function DynamicOutputForm({ node }: IProps) { return (
{fields.map((field, index) => { - const typeField = `${name}.${index}.name`; + const nameField = `${name}.${index}.name`; + const typeField = `${name}.${index}.type`; return (
( @@ -64,12 +85,21 @@ export function DynamicOutputForm({ node }: IProps) { { + form.setValue(typeField, findType(val)); + field.onChange(val); + }} > )} /> +
} + /> diff --git a/web/src/pages/agent/form/iteration-form/interface.ts b/web/src/pages/agent/form/iteration-form/interface.ts index 1a23c0a2e..25f22aab0 100644 --- a/web/src/pages/agent/form/iteration-form/interface.ts +++ b/web/src/pages/agent/form/iteration-form/interface.ts @@ -1,2 +1,2 @@ export type OutputArray = Array<{ name: string; ref: string; type?: string }>; -export type OutputObject = Record; +export type OutputObject = Record; diff --git a/web/src/pages/agent/form/iteration-form/use-values.ts b/web/src/pages/agent/form/iteration-form/use-values.ts index 7c686255d..29cd06324 100644 --- a/web/src/pages/agent/form/iteration-form/use-values.ts +++ b/web/src/pages/agent/form/iteration-form/use-values.ts @@ -8,6 +8,7 @@ function convertToArray(outputObject: OutputObject) { return Object.entries(outputObject).map(([key, value]) => ({ name: key, ref: value.ref, + type: value.type, })); } diff --git a/web/src/pages/agent/form/iteration-form/use-watch-form-change.ts b/web/src/pages/agent/form/iteration-form/use-watch-form-change.ts index b5d3d6264..be6f3fa0d 100644 --- a/web/src/pages/agent/form/iteration-form/use-watch-form-change.ts +++ b/web/src/pages/agent/form/iteration-form/use-watch-form-change.ts @@ -5,7 +5,7 @@ import { OutputArray, OutputObject } from './interface'; function transferToObject(list: OutputArray) { return list.reduce((pre, cur) => { - pre[cur.name] = { ref: cur.ref }; + pre[cur.name] = { ref: cur.ref, type: cur.type }; return pre; }, {}); } @@ -18,6 +18,7 @@ export function useWatchFormChange(id?: string, form?: UseFormReturn) { // Manually triggered form updates are synchronized to the canvas if (id && form?.formState.isDirty) { values = form?.getValues(); + console.log('🚀 ~ useEffect ~ values:', values); let nextValues: any = { ...values, outputs: transferToObject(values.outputs), diff --git a/web/src/pages/agent/index.tsx b/web/src/pages/agent/index.tsx index 7a195289a..bdf51fcc1 100644 --- a/web/src/pages/agent/index.tsx +++ b/web/src/pages/agent/index.tsx @@ -7,14 +7,13 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; -import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'; +import { SidebarProvider } from '@/components/ui/sidebar'; import { useSetModalState } from '@/hooks/common-hooks'; import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks'; import { ReactFlowProvider } from '@xyflow/react'; import { CodeXml, EllipsisVertical, Forward, Import, Key } from 'lucide-react'; import { ComponentPropsWithoutRef, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { AgentSidebar } from './agent-sidebar'; import AgentCanvas from './canvas'; import { useHandleExportOrImportJsonFile } from './hooks/use-export-json'; import { useFetchDataOnMount } from './hooks/use-fetch-data'; @@ -119,9 +118,7 @@ export default function Agent() {
-
-