Feat: Setting parameters for array type

web/src/pages/agent/constant/index.tsx

@@ -866,7 +866,6 @@ export enum VariableAssignerLogicalNumberOperator {
 export enum VariableAssignerLogicalArrayOperator {
   Overwrite = VariableAssignerLogicalOperator.Overwrite,
   Clear = VariableAssignerLogicalOperator.Clear,
-  Set = VariableAssignerLogicalOperator.Set,
   Append = 'append',
   Extend = 'extend',
   RemoveFirst = 'remove_first',

web/src/pages/agent/form/variable-assigner-form/dynamic-variables.tsx

@@ -1,22 +1,25 @@
 import NumberInput from '@/components/originui/number-input';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { useIsDarkTheme } from '@/components/theme-provider';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { Editor } from '@monaco-editor/react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { X } from 'lucide-react';
 import { ReactNode, useCallback } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import {
   JsonSchemaDataType,
+  VariableAssignerLogicalArrayOperator,
   VariableAssignerLogicalNumberOperator,
   VariableAssignerLogicalOperator,
 } from '../../constant';
 import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
 import { DynamicFormHeader } from '../components/dynamic-fom-header';
-import { PromptEditor } from '../components/prompt-editor';
 import { QueryVariable } from '../components/query-variable';
 import { useBuildLogicalOptions } from './use-build-logical-options';
 
@@ -57,6 +60,12 @@ function RadioButton({ value, onChange }: RadioButtonProps) {
   );
 }
 
+const EmptyFields = [
+  VariableAssignerLogicalOperator.Clear,
+  VariableAssignerLogicalArrayOperator.RemoveFirst,
+  VariableAssignerLogicalArrayOperator.RemoveLast,
+];
+
 export function DynamicVariables({
   name,
   label,
@@ -67,6 +76,7 @@ export function DynamicVariables({
 }: SelectKeysProps) {
   const form = useFormContext();
   const { getType } = useGetVariableLabelOrTypeByValue();
+  const isDarkTheme = useIsDarkTheme();
 
   const { fields, remove, append } = useFieldArray({
     name: name,
@@ -86,28 +96,55 @@ export function DynamicVariables({
   const renderParameter = useCallback(
     (keyFieldName: string, operatorFieldName: string) => {
       const logicalOperator = form.getValues(operatorFieldName);
+      const type = getVariableType(keyFieldName);
 
-      if (logicalOperator === VariableAssignerLogicalOperator.Clear) {
+      if (EmptyFields.includes(logicalOperator)) {
         return null;
       } else if (
-        logicalOperator === VariableAssignerLogicalOperator.Overwrite
+        logicalOperator === VariableAssignerLogicalOperator.Overwrite ||
+        VariableAssignerLogicalArrayOperator.Extend === logicalOperator
       ) {
-        return <PromptEditor showToolbar={false} multiLine={false} />;
+        return <QueryVariable types={[type]} hideLabel></QueryVariable>;
       } else if (logicalOperator === VariableAssignerLogicalOperator.Set) {
-        const type = getVariableType(keyFieldName);
-
         if (type === JsonSchemaDataType.Boolean) {
           return <RadioButton></RadioButton>;
         }
+
+        if (type === JsonSchemaDataType.Number) {
+          return <NumberInput className="w-full"></NumberInput>;
+        }
+
+        if (type === JsonSchemaDataType.Object) {
+          return (
+            <Editor
+              height={300}
+              theme={isDarkTheme ? 'vs-dark' : 'vs'}
+              language={'json'}
+              options={{
+                minimap: { enabled: false },
+                automaticLayout: true,
+              }}
+            />
+          );
+        }
+
+        if (type === JsonSchemaDataType.String) {
+          return <Textarea></Textarea>;
+        }
       } else if (
         Object.values(VariableAssignerLogicalNumberOperator).some(
           (x) => logicalOperator === x,
         )
       ) {
         return <NumberInput className="w-full"></NumberInput>;
+      } else if (
+        logicalOperator === VariableAssignerLogicalArrayOperator.Append
+      ) {
+        const subType = type.match(/<([^>]+)>/).at(1);
+        return <QueryVariable types={[subType]} hideLabel></QueryVariable>;
       }
     },
-    [form, getVariableType],
+    [form, getVariableType, isDarkTheme],
   );
 
   const handleVariableChange = useCallback(
@@ -115,12 +152,23 @@ export function DynamicVariables({
       form.setValue(
         operatorFieldAlias,
         VariableAssignerLogicalOperator.Overwrite,
+        { shouldDirty: true, shouldValidate: true },
       );
       form.setValue(valueFieldAlias, undefined);
     },
     [form],
   );
 
+  const handleOperatorChange = useCallback(
+    (valueFieldAlias: string) => {
+      form.setValue(valueFieldAlias, undefined, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    },
+    [form],
+  );
+
   return (
     <section className="space-y-2">
       <DynamicFormHeader
@@ -152,12 +200,18 @@ export function DynamicVariables({
                   <Separator className="w-2" />
 
                   <RAGFlowFormItem name={operatorFieldAlias} className="w-1/3">
-                    <SelectWithSearch
-                      {...field}
-                      options={buildLogicalOptions(
-                        getVariableType(keyFieldAlias),
-                      )}
-                    ></SelectWithSearch>
+                    {({ onChange, value }) => (
+                      <SelectWithSearch
+                        value={value}
+                        onChange={(val) => {
+                          handleOperatorChange(valueFieldAlias);
+                          onChange(val);
+                        }}
+                        options={buildLogicalOptions(
+                          getVariableType(keyFieldAlias),
+                        )}
+                      ></SelectWithSearch>
+                    )}
                   </RAGFlowFormItem>
                 </div>
                 <RAGFlowFormItem name={valueFieldAlias} className="w-full">