Feat: Add a form for variable aggregation operators #10427 (#11095)

### What problem does this PR solve?

Feat: Add a form for variable aggregation operators #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/form/agent-form/index.tsx

@@ -26,7 +26,6 @@ import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import {
   AgentExceptionMethod,
-  JsonSchemaDataType,
   NodeHandleId,
   VariableType,
   initialAgentValues,
@@ -158,7 +157,6 @@ function AgentForm({ node }: INextOperatorForm) {
                     placeholder={t('flow.messagePlaceholder')}
                     showToolbar={true}
                     extraOptions={extraOptions}
-                    types={[JsonSchemaDataType.String]}
                   ></PromptEditor>
                 </FormControl>
               </FormItem>
@@ -176,7 +174,6 @@ function AgentForm({ node }: INextOperatorForm) {
                       <PromptEditor
                         {...field}
                         showToolbar={true}
-                        types={[JsonSchemaDataType.String]}
                       ></PromptEditor>
                     </section>
                   </FormControl>

web/src/pages/agent/form/components/structured-output-secondary-menu.tsx

@@ -53,10 +53,13 @@ export function StructuredOutputSecondaryMenu({
 
   const renderAgentStructuredOutput = useCallback(
     (values: any, option: { label: ReactNode; value: string }) => {
-      if (isPlainObject(values) && 'properties' in values) {
+      const properties =
+        get(values, 'properties') || get(values, 'items.properties');
+
+      if (isPlainObject(values) && properties) {
         return (
           <ul className="border-l">
-            {Object.entries(values.properties).map(([key, value]) => {
+            {Object.entries(properties).map(([key, value]) => {
               const nextOption = {
                 label: option.label + `.${key}`,
                 value: option.value + `.${key}`,
@@ -79,8 +82,9 @@ export function StructuredOutputSecondaryMenu({
                       {key}
                       <span className="text-text-secondary">{dataType}</span>
                     </div>
-                    {dataType === JsonSchemaDataType.Object &&
-                      renderAgentStructuredOutput(value, nextOption)}
+                    {[JsonSchemaDataType.Object, JsonSchemaDataType.Array].some(
+                      (x) => x === dataType,
+                    ) && renderAgentStructuredOutput(value, nextOption)}
                   </li>
                 );
               }

web/src/pages/agent/form/invoke-form/variable-table.tsx

@@ -32,7 +32,7 @@ import {
 } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import { useTranslation } from 'react-i18next';
-import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
 import { VariableFormSchemaType } from './schema';
 
 interface IProps {
@@ -49,7 +49,7 @@ export function VariableTable({
   nodeId,
 }: IProps) {
   const { t } = useTranslation();
-  const getLabel = useGetVariableLabelByValue(nodeId!);
+  const { getLabel } = useGetVariableLabelOrTypeByValue(nodeId!);
 
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(

web/src/pages/agent/form/message-form/index.tsx

@@ -14,7 +14,6 @@ import { memo } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { JsonSchemaDataType } from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import { FormWrapper } from '../components/form-wrapper';
 import { PromptEditor } from '../components/prompt-editor';
@@ -63,11 +62,9 @@ function MessageForm({ node }: INextOperatorForm) {
                     render={({ field }) => (
                       <FormItem className="flex-1">
                         <FormControl>
-                          {/* <Textarea {...field}> </Textarea> */}
                           <PromptEditor
                             {...field}
                             placeholder={t('flow.messagePlaceholder')}
-                            types={[JsonSchemaDataType.String]}
                           ></PromptEditor>
                         </FormControl>
                       </FormItem>

web/src/pages/agent/form/variable-aggregator-form/dynamic-group-variable.tsx

@@ -0,0 +1,88 @@
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Plus, Trash2 } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
+import { QueryVariable } from '../components/query-variable';
+
+type DynamicGroupVariableProps = {
+  name: string;
+  parentIndex: number;
+  removeParent: (index: number) => void;
+};
+
+export function DynamicGroupVariable({
+  name,
+  parentIndex,
+  removeParent,
+}: DynamicGroupVariableProps) {
+  const form = useFormContext();
+
+  const variableFieldName = `${name}.variables`;
+
+  const { getType } = useGetVariableLabelOrTypeByValue();
+
+  const { fields, remove, append } = useFieldArray({
+    name: variableFieldName,
+    control: form.control,
+  });
+
+  const firstValue = form.getValues(`${variableFieldName}.0.value`);
+  const firstType = getType(firstValue);
+
+  return (
+    <section className="py-3 group space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <RAGFlowFormItem name={`${name}.group_name`} className="w-32">
+            <Input></Input>
+          </RAGFlowFormItem>
+
+          <Button
+            variant={'ghost'}
+            type="button"
+            className="hidden group-hover:block"
+            onClick={() => removeParent(parentIndex)}
+          >
+            <Trash2 />
+          </Button>
+        </div>
+        <div className="flex gap-2 items-center">
+          {firstType && (
+            <span className="text-text-secondary border px-1 rounded-md">
+              {firstType}
+            </span>
+          )}
+          <Button
+            variant={'ghost'}
+            type="button"
+            onClick={() => append({ value: '' })}
+          >
+            <Plus />
+          </Button>
+        </div>
+      </div>
+
+      <section className="space-y-3">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex gap-2 items-center">
+            <QueryVariable
+              name={`${variableFieldName}.${index}.value`}
+              className="flex-1 min-w-0"
+              hideLabel
+              types={firstType && fields.length > 1 ? [firstType] : []}
+            ></QueryVariable>
+            <Button
+              variant={'ghost'}
+              type="button"
+              onClick={() => remove(index)}
+            >
+              <Trash2 />
+            </Button>
+          </div>
+        ))}
+      </section>
+    </section>
+  );
+}

web/src/pages/agent/form/variable-aggregator-form/index.tsx

@@ -0,0 +1,81 @@
+import { BlockButton } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { Separator } from '@/components/ui/separator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { initialDataOperationsValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { DynamicGroupVariable } from './dynamic-group-variable';
+
+export const RetrievalPartialSchema = {
+  groups: z.array(
+    z.object({
+      group_name: z.string(),
+      variables: z.array(z.object({ value: z.string().optional() })),
+    }),
+  ),
+  operations: z.string(),
+};
+
+export const FormSchema = z.object(RetrievalPartialSchema);
+
+export type DataOperationsFormSchemaType = z.infer<typeof FormSchema>;
+
+const outputList = buildOutputList(initialDataOperationsValues.outputs);
+
+function VariableAggregatorForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+
+  const defaultValues = useFormValues(initialDataOperationsValues, node);
+
+  const form = useForm<DataOperationsFormSchemaType>({
+    defaultValues: defaultValues,
+    mode: 'onChange',
+    resolver: zodResolver(FormSchema),
+    shouldUnregister: true,
+  });
+
+  const { fields, remove, append } = useFieldArray({
+    name: 'groups',
+    control: form.control,
+  });
+
+  useWatchFormChange(node?.id, form, true);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <section className="divide-y">
+          {fields.map((field, idx) => (
+            <DynamicGroupVariable
+              key={field.id}
+              name={`groups.${idx}`}
+              parentIndex={idx}
+              removeParent={remove}
+            ></DynamicGroupVariable>
+          ))}
+        </section>
+        <BlockButton
+          onClick={() =>
+            append({ group_name: `Group ${fields.length}`, variables: [] })
+          }
+        >
+          {t('common.add')}
+        </BlockButton>
+        <Separator />
+
+        <Output list={outputList} isFormRequired></Output>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(VariableAggregatorForm);