{fields.map((field, index) => {
const typeField = `${name}.${index}.key`;
diff --git a/web/src/pages/agent/constant/index.tsx b/web/src/pages/agent/constant/index.tsx
index 3c8a5c8b8..ab9969bb7 100644
--- a/web/src/pages/agent/constant/index.tsx
+++ b/web/src/pages/agent/constant/index.tsx
@@ -902,3 +902,84 @@ export const ArrayFields = [
TypesWithArray.ArrayString,
TypesWithArray.ArrayObject,
];
+
+export enum InputMode {
+ Constant = 'constant',
+ Variable = 'variable',
+}
+
+export enum LoopTerminationComparisonOperator {
+ Contains = ComparisonOperator.Contains,
+ NotContains = ComparisonOperator.NotContains,
+ StartWith = ComparisonOperator.StartWith,
+ EndWith = ComparisonOperator.EndWith,
+ IsEmpty = 'is empty',
+ IsNotEmpty = 'is not empty',
+ Is = 'is',
+ IsNot = 'is not',
+}
+
+export const LoopTerminationStringComparisonOperator = [
+ LoopTerminationComparisonOperator.Contains,
+ LoopTerminationComparisonOperator.NotContains,
+ LoopTerminationComparisonOperator.StartWith,
+ LoopTerminationComparisonOperator.EndWith,
+ LoopTerminationComparisonOperator.Is,
+ LoopTerminationComparisonOperator.IsNot,
+ LoopTerminationComparisonOperator.IsEmpty,
+ LoopTerminationComparisonOperator.IsNotEmpty,
+];
+
+export const LoopTerminationBooleanComparisonOperator = [
+ LoopTerminationComparisonOperator.Is,
+ LoopTerminationComparisonOperator.IsNot,
+ LoopTerminationComparisonOperator.IsEmpty,
+ LoopTerminationComparisonOperator.IsNotEmpty,
+];
+// object or object array
+export const LoopTerminationObjectComparisonOperator = [
+ LoopTerminationComparisonOperator.IsEmpty,
+ LoopTerminationComparisonOperator.IsNotEmpty,
+];
+
+// string array or number array
+export const LoopTerminationStringArrayComparisonOperator = [
+ LoopTerminationComparisonOperator.Contains,
+ LoopTerminationComparisonOperator.NotContains,
+ LoopTerminationComparisonOperator.IsEmpty,
+ LoopTerminationComparisonOperator.IsNotEmpty,
+];
+
+export const LoopTerminationBooleanArrayComparisonOperator = [
+ LoopTerminationComparisonOperator.Is,
+ LoopTerminationComparisonOperator.IsNot,
+ LoopTerminationComparisonOperator.IsEmpty,
+ LoopTerminationComparisonOperator.IsNotEmpty,
+];
+
+export const LoopTerminationNumberComparisonOperator = [
+ ComparisonOperator.Equal,
+ ComparisonOperator.NotEqual,
+ ComparisonOperator.GreatThan,
+ ComparisonOperator.LessThan,
+ ComparisonOperator.GreatEqual,
+ ComparisonOperator.LessEqual,
+ LoopTerminationComparisonOperator.IsEmpty,
+ LoopTerminationComparisonOperator.IsNotEmpty,
+];
+
+export const LoopTerminationStringComparisonOperatorMap = {
+ [TypesWithArray.String]: LoopTerminationStringComparisonOperator,
+ [TypesWithArray.Number]: LoopTerminationNumberComparisonOperator,
+ [TypesWithArray.Boolean]: LoopTerminationBooleanComparisonOperator,
+ [TypesWithArray.Object]: LoopTerminationObjectComparisonOperator,
+ [TypesWithArray.ArrayString]: LoopTerminationStringArrayComparisonOperator,
+ [TypesWithArray.ArrayNumber]: LoopTerminationStringArrayComparisonOperator,
+ [TypesWithArray.ArrayBoolean]: LoopTerminationBooleanArrayComparisonOperator,
+ [TypesWithArray.ArrayObject]: LoopTerminationObjectComparisonOperator,
+};
+
+export enum RadioVariable {
+ Yes = 'yes',
+ No = 'no',
+}
diff --git a/web/src/pages/agent/form/loop-form/dynamic-variables.tsx b/web/src/pages/agent/form/loop-form/dynamic-variables.tsx
index 9a9b86d90..bd544fdbf 100644
--- a/web/src/pages/agent/form/loop-form/dynamic-variables.tsx
+++ b/web/src/pages/agent/form/loop-form/dynamic-variables.tsx
@@ -8,26 +8,21 @@ 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 { buildOptions } from '@/utils/form';
import { Editor, loader } 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 { TypesWithArray } from '../../constant';
-import { buildConversationVariableSelectOptions } from '../../utils';
+import { InputMode, TypesWithArray } from '../../constant';
+import {
+ InputModeOptions,
+ buildConversationVariableSelectOptions,
+} from '../../utils';
import { DynamicFormHeader } from '../components/dynamic-fom-header';
import { QueryVariable } from '../components/query-variable';
loader.config({ paths: { vs: '/vs' } });
-enum InputMode {
- Constant = 'constant',
- Variable = 'variable',
-}
-
-const InputModeOptions = buildOptions(InputMode);
-
type SelectKeysProps = {
name: string;
label: ReactNode;
@@ -112,12 +107,6 @@ export function DynamicVariables({
(mode: string, valueFieldAlias: string, operatorFieldAlias: string) => {
const variableType = form.getValues(operatorFieldAlias);
initializeValue(mode, variableType, valueFieldAlias);
- // if (mode === InputMode.Variable) {
- // form.setValue(valueFieldAlias, '');
- // } else {
- // const val = ConstantValueMap[variableType as TypesWithArray];
- // form.setValue(valueFieldAlias, val);
- // }
},
[form, initializeValue],
);
diff --git a/web/src/pages/agent/form/loop-form/index.tsx b/web/src/pages/agent/form/loop-form/index.tsx
index ff4acfc25..a50242565 100644
--- a/web/src/pages/agent/form/loop-form/index.tsx
+++ b/web/src/pages/agent/form/loop-form/index.tsx
@@ -1,4 +1,6 @@
+import { SliderInputFormField } from '@/components/slider-input-form-field';
import { Form } from '@/components/ui/form';
+import { FormLayout } from '@/constants/form';
import { zodResolver } from '@hookform/resolvers/zod';
import { memo } from 'react';
import { useForm } from 'react-hook-form';
@@ -9,6 +11,7 @@ import { useWatchFormChange } from '../../hooks/use-watch-form-change';
import { INextOperatorForm } from '../../interface';
import { FormWrapper } from '../components/form-wrapper';
import { DynamicVariables } from './dynamic-variables';
+import { LoopTerminationCondition } from './loop-termination-condition';
const FormSchema = z.object({
loop_variables: z.array(
@@ -19,14 +22,16 @@ const FormSchema = z.object({
input_mode: z.string(),
}),
),
+ logical_operator: z.string(),
loop_termination_condition: z.array(
z.object({
variable: z.string().optional(),
operator: z.string().optional(),
value: z.string().or(z.number()).or(z.boolean()).optional(),
- input_mode: z.string(),
+ input_mode: z.string().optional(),
}),
),
+ maximum_loop_count: z.number(),
});
function LoopForm({ node }: INextOperatorForm) {
@@ -46,6 +51,17 @@ function LoopForm({ node }: INextOperatorForm) {
name="loop_variables"
label="Variables"
>
+
+
);
diff --git a/web/src/pages/agent/form/loop-form/loop-termination-condition.tsx b/web/src/pages/agent/form/loop-form/loop-termination-condition.tsx
new file mode 100644
index 000000000..358adf467
--- /dev/null
+++ b/web/src/pages/agent/form/loop-form/loop-termination-condition.tsx
@@ -0,0 +1,333 @@
+import { LogicalOperator } from '@/components/logical-operator';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Separator } from '@/components/ui/separator';
+import { SwitchLogicOperator } from '@/constants/agent';
+import { loader } from '@monaco-editor/react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { toLower } from 'lodash';
+import { X } from 'lucide-react';
+import { ReactNode, useCallback } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import {
+ InputMode,
+ JsonSchemaDataType,
+ LoopTerminationComparisonOperator,
+ RadioVariable,
+} from '../../constant';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
+import { InputModeOptions } from '../../utils';
+import { DynamicFormHeader } from '../components/dynamic-fom-header';
+import { QueryVariable } from '../components/query-variable';
+import { useBuildLogicalOptions } from './use-build-logical-options';
+
+loader.config({ paths: { vs: '/vs' } });
+
+type SelectKeysProps = {
+ name: string;
+ label: ReactNode;
+ tooltip?: string;
+ keyField?: string;
+ valueField?: string;
+ operatorField?: string;
+ modeField?: string;
+};
+
+type RadioGroupProps = React.ComponentProps
;
+
+type RadioButtonProps = Partial<
+ Omit & {
+ onChange: RadioGroupProps['onValueChange'];
+ }
+>;
+
+function RadioButton({ value, onChange }: RadioButtonProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const EmptyFields = [
+ LoopTerminationComparisonOperator.IsEmpty,
+ LoopTerminationComparisonOperator.IsNotEmpty,
+];
+
+const LogicalOperatorFieldName = 'logical_operator';
+
+export function LoopTerminationCondition({
+ name,
+ label,
+ tooltip,
+ keyField = 'variable',
+ valueField = 'value',
+ operatorField = 'operator',
+ modeField = 'input_mode',
+}: SelectKeysProps) {
+ const form = useFormContext();
+ const { getType } = useGetVariableLabelOrTypeByValue();
+
+ const { fields, remove, append } = useFieldArray({
+ name: name,
+ control: form.control,
+ });
+
+ const { buildLogicalOptions } = useBuildLogicalOptions();
+
+ const getVariableType = useCallback(
+ (keyFieldName: string) => {
+ const key = form.getValues(keyFieldName);
+ return toLower(getType(key));
+ },
+ [form, getType],
+ );
+
+ const initializeMode = useCallback(
+ (modeFieldAlias: string, keyFieldAlias: string) => {
+ const keyType = getVariableType(keyFieldAlias);
+
+ if (keyType === JsonSchemaDataType.Number) {
+ form.setValue(modeFieldAlias, InputMode.Constant, {
+ shouldDirty: true,
+ shouldValidate: true,
+ });
+ }
+ },
+ [form, getVariableType],
+ );
+
+ const initializeValue = useCallback(
+ (valueFieldAlias: string, keyFieldAlias: string) => {
+ const keyType = getVariableType(keyFieldAlias);
+ let initialValue: string | boolean | number = '';
+
+ if (keyType === JsonSchemaDataType.Number) {
+ initialValue = 0;
+ } else if (keyType === JsonSchemaDataType.Boolean) {
+ initialValue = RadioVariable.Yes;
+ }
+
+ form.setValue(valueFieldAlias, initialValue, {
+ shouldDirty: true,
+ shouldValidate: true,
+ });
+ },
+ [form, getVariableType],
+ );
+
+ const handleVariableChange = useCallback(
+ (
+ operatorFieldAlias: string,
+ valueFieldAlias: string,
+ keyFieldAlias: string,
+ modeFieldAlias: string,
+ ) => {
+ return () => {
+ const logicalOptions = buildLogicalOptions(
+ getVariableType(keyFieldAlias),
+ );
+
+ form.setValue(operatorFieldAlias, logicalOptions?.at(0)?.value, {
+ shouldDirty: true,
+ shouldValidate: true,
+ });
+
+ initializeMode(modeFieldAlias, keyFieldAlias);
+
+ initializeValue(valueFieldAlias, keyFieldAlias);
+ };
+ },
+ [
+ buildLogicalOptions,
+ form,
+ getVariableType,
+ initializeMode,
+ initializeValue,
+ ],
+ );
+
+ const handleOperatorChange = useCallback(
+ (
+ valueFieldAlias: string,
+ keyFieldAlias: string,
+ modeFieldAlias: string,
+ ) => {
+ initializeMode(modeFieldAlias, keyFieldAlias);
+ initializeValue(valueFieldAlias, keyFieldAlias);
+ },
+ [initializeMode, initializeValue],
+ );
+
+ const handleModeChange = useCallback(
+ (mode: string, valueFieldAlias: string) => {
+ form.setValue(valueFieldAlias, mode === InputMode.Constant ? 0 : '', {
+ shouldDirty: true,
+ });
+ },
+ [form],
+ );
+
+ const renderParameterPanel = useCallback(
+ (
+ keyFieldName: string,
+ valueFieldAlias: string,
+ modeFieldAlias: string,
+ operatorFieldAlias: string,
+ ) => {
+ const type = getVariableType(keyFieldName);
+ const mode = form.getValues(modeFieldAlias);
+ const operator = form.getValues(operatorFieldAlias);
+
+ if (EmptyFields.includes(operator)) {
+ return null;
+ }
+
+ if (type === JsonSchemaDataType.Number) {
+ return (
+
+ );
+ }
+
+ if (type === JsonSchemaDataType.Boolean) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+ },
+ [form, getVariableType, handleModeChange],
+ );
+
+ return (
+
+ {
+ if (fields.length === 1) {
+ form.setValue(LogicalOperatorFieldName, SwitchLogicOperator.And);
+ }
+ append({ [keyField]: '', [valueField]: '' });
+ }}
+ >
+
+ {fields.length > 1 && (
+
+ )}
+
+ {fields.map((field, index) => {
+ const keyFieldAlias = `${name}.${index}.${keyField}`;
+ const valueFieldAlias = `${name}.${index}.${valueField}`;
+ const operatorFieldAlias = `${name}.${index}.${operatorField}`;
+ const modeFieldAlias = `${name}.${index}.${modeField}`;
+
+ return (
+
+
+
+
+
+
+
+
+ {({ onChange, value }) => (
+ {
+ handleOperatorChange(
+ valueFieldAlias,
+ keyFieldAlias,
+ modeFieldAlias,
+ );
+ onChange(val);
+ }}
+ options={buildLogicalOptions(
+ getVariableType(keyFieldAlias),
+ )}
+ >
+ )}
+
+
+ {renderParameterPanel(
+ keyFieldAlias,
+ valueFieldAlias,
+ modeFieldAlias,
+ operatorFieldAlias,
+ )}
+
+ );
+ })}
+