{label || item?.name}
diff --git a/web/src/pages/agent/constant/index.tsx b/web/src/pages/agent/constant/index.tsx
index 3a161d87d..27969e643 100644
--- a/web/src/pages/agent/constant/index.tsx
+++ b/web/src/pages/agent/constant/index.tsx
@@ -847,6 +847,31 @@ export enum JsonSchemaDataType {
Object = 'object',
}
+export enum VariableAssignerLogicalOperator {
+ Overwrite = 'overwrite',
+ Clear = 'clear',
+ Set = 'set',
+}
+
+export enum VariableAssignerLogicalNumberOperator {
+ Overwrite = VariableAssignerLogicalOperator.Overwrite,
+ Clear = VariableAssignerLogicalOperator.Clear,
+ Set = VariableAssignerLogicalOperator.Set,
+ Add = '+=',
+ Subtract = '-=',
+ Multiply = '*=',
+ Divide = '/=',
+}
+
+export enum VariableAssignerLogicalArrayOperator {
+ Overwrite = VariableAssignerLogicalOperator.Overwrite,
+ Clear = VariableAssignerLogicalOperator.Clear,
+ Append = 'append',
+ Extend = 'extend',
+ RemoveFirst = 'remove_first',
+ RemoveLast = 'remove_last',
+}
+
export enum ExportFileType {
PDF = 'pdf',
HTML = 'html',
diff --git a/web/src/pages/agent/form/components/query-variable.tsx b/web/src/pages/agent/form/components/query-variable.tsx
index 92b1c82d4..fc76c2554 100644
--- a/web/src/pages/agent/form/components/query-variable.tsx
+++ b/web/src/pages/agent/form/components/query-variable.tsx
@@ -19,6 +19,8 @@ type QueryVariableProps = {
hideLabel?: boolean;
className?: string;
onChange?: (value: string) => void;
+ pureQuery?: boolean;
+ value?: string;
};
export function QueryVariable({
@@ -28,12 +30,34 @@ export function QueryVariable({
hideLabel = false,
className,
onChange,
+ pureQuery = false,
+ value,
}: QueryVariableProps) {
const { t } = useTranslation();
const form = useFormContext();
const finalOptions = useFilterQueryVariableOptionsByTypes(types);
+ const renderWidget = (
+ value?: string,
+ handleChange?: (value: string) => void,
+ ) => (
+
{
+ handleChange?.(val);
+ onChange?.(val);
+ }}
+ // allowClear
+ types={types}
+ >
+ );
+
+ if (pureQuery) {
+ renderWidget(value, onChange);
+ }
+
return (
)}
-
- {
- field.onChange(val);
- onChange?.(val);
- }}
- // allowClear
- types={types}
- >
-
+ {renderWidget(field.value, field.onChange)}
)}
diff --git a/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx b/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx
index f2ecd9191..2e7a34390 100644
--- a/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx
+++ b/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx
@@ -10,10 +10,7 @@ import { PropsWithChildren, ReactNode, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { JsonSchemaDataType } from '../../constant';
import { useGetStructuredOutputByValue } from '../../hooks/use-build-structured-output';
-import {
- hasJsonSchemaChild,
- hasSpecificTypeChild,
-} from '../../utils/filter-agent-structured-output';
+import { hasSpecificTypeChild } from '../../utils/filter-agent-structured-output';
type DataItem = { label: ReactNode; value: string; parentLabel?: ReactNode };
@@ -101,8 +98,9 @@ export function StructuredOutputSecondaryMenu({
);
if (
- !hasJsonSchemaChild(structuredOutput) ||
- (!isEmpty(types) && !hasSpecificTypeChild(structuredOutput, types))
+ !isEmpty(types) &&
+ !hasSpecificTypeChild(structuredOutput, types) &&
+ !types.some((x) => x === JsonSchemaDataType.Object)
) {
return null;
}
diff --git a/web/src/pages/agent/form/variable-assigner-form/dynamic-variables.tsx b/web/src/pages/agent/form/variable-assigner-form/dynamic-variables.tsx
new file mode 100644
index 000000000..e17aaccbc
--- /dev/null
+++ b/web/src/pages/agent/form/variable-assigner-form/dynamic-variables.tsx
@@ -0,0 +1,290 @@
+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 { 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 { 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 { QueryVariable } from '../components/query-variable';
+import { useBuildLogicalOptions } from './use-build-logical-options';
+
+type SelectKeysProps = {
+ name: string;
+ label: ReactNode;
+ tooltip?: string;
+ keyField?: string;
+ valueField?: string;
+ operatorField?: string;
+};
+
+type RadioGroupProps = React.ComponentProps;
+
+type RadioButtonProps = Partial<
+ Omit & {
+ onChange: RadioGroupProps['onValueChange'];
+ }
+>;
+
+function RadioButton({ value, onChange }: RadioButtonProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const EmptyFields = [
+ VariableAssignerLogicalOperator.Clear,
+ VariableAssignerLogicalArrayOperator.RemoveFirst,
+ VariableAssignerLogicalArrayOperator.RemoveLast,
+];
+
+const EmptyValueMap = {
+ [JsonSchemaDataType.String]: '',
+ [JsonSchemaDataType.Number]: 0,
+ [JsonSchemaDataType.Boolean]: 'yes',
+ [JsonSchemaDataType.Object]: {},
+ [JsonSchemaDataType.Array]: [],
+};
+
+export function DynamicVariables({
+ name,
+ label,
+ tooltip,
+ keyField = 'variable',
+ valueField = 'parameter',
+ operatorField = 'operator',
+}: SelectKeysProps) {
+ const form = useFormContext();
+ const { getType } = useGetVariableLabelOrTypeByValue();
+ const isDarkTheme = useIsDarkTheme();
+
+ const { fields, remove, append, update } = useFieldArray({
+ name: name,
+ control: form.control,
+ });
+
+ const { buildLogicalOptions } = useBuildLogicalOptions();
+
+ const getVariableType = useCallback(
+ (keyFieldName: string) => {
+ const key = form.getValues(keyFieldName);
+ return getType(key);
+ },
+ [form, getType],
+ );
+
+ const renderParameter = useCallback(
+ (
+ keyFieldName: string,
+ operatorFieldName: string,
+ valueFieldAlias: string,
+ ) => {
+ console.log(
+ '🚀 ~ DynamicVariables ~ valueFieldAlias:',
+ form.getValues(valueFieldAlias),
+ );
+ const logicalOperator = form.getValues(operatorFieldName);
+ const type = getVariableType(keyFieldName);
+
+ if (EmptyFields.includes(logicalOperator)) {
+ return null;
+ } else if (
+ logicalOperator === VariableAssignerLogicalOperator.Overwrite ||
+ VariableAssignerLogicalArrayOperator.Extend === logicalOperator
+ ) {
+ return (
+
+ );
+ } else if (logicalOperator === VariableAssignerLogicalOperator.Set) {
+ if (type === JsonSchemaDataType.Boolean) {
+ return ;
+ }
+
+ if (type === JsonSchemaDataType.Number) {
+ return ;
+ }
+
+ if (type === JsonSchemaDataType.Object) {
+ return (
+
+ );
+ }
+
+ if (type === JsonSchemaDataType.String) {
+ return ;
+ }
+ } else if (
+ Object.values(VariableAssignerLogicalNumberOperator).some(
+ (x) => logicalOperator === x,
+ )
+ ) {
+ return ;
+ } else if (
+ logicalOperator === VariableAssignerLogicalArrayOperator.Append
+ ) {
+ const subType = type.match(/<([^>]+)>/).at(1);
+ return (
+
+ );
+ }
+ },
+ [form, getVariableType, isDarkTheme],
+ );
+
+ const handleVariableChange = useCallback(
+ (operatorFieldAlias: string, valueFieldAlias: string) => {
+ console.log(
+ '🚀 ~ DynamicVariables ~ operatorFieldAlias:',
+ operatorFieldAlias,
+ );
+ return () => {
+ form.setValue(
+ operatorFieldAlias,
+ VariableAssignerLogicalOperator.Overwrite,
+ { shouldDirty: true, shouldValidate: true },
+ );
+
+ form.setValue(valueFieldAlias, '', {
+ shouldDirty: true,
+ shouldValidate: true,
+ });
+ };
+ },
+ [form],
+ );
+
+ const handleOperatorChange = useCallback(
+ (
+ valueFieldAlias: string,
+ keyFieldAlias: string,
+ value: string,
+ index: number,
+ ) => {
+ const type = getVariableType(keyFieldAlias);
+ console.log('🚀 ~ DynamicVariables ~ type:', type);
+
+ let parameter = EmptyValueMap[type as keyof typeof EmptyValueMap];
+
+ if (value === VariableAssignerLogicalOperator.Overwrite) {
+ parameter = '';
+ }
+
+ if (value !== VariableAssignerLogicalOperator.Clear) {
+ form.setValue(valueFieldAlias, parameter, {
+ shouldDirty: true,
+ shouldValidate: true,
+ });
+
+ // form.trigger(valueFieldAlias);
+
+ // update(index, { [valueField]: parameter });
+ }
+ },
+ [form, getVariableType],
+ );
+
+ return (
+
+ append({ [keyField]: '', [valueField]: '' })}
+ >
+
+
+ {fields.map((field, index) => {
+ const keyFieldAlias = `${name}.${index}.${keyField}`;
+ const valueFieldAlias = `${name}.${index}.${valueField}`;
+ const operatorFieldAlias = `${name}.${index}.${operatorField}`;
+
+ return (
+
+
+
+
+
+
+
+
+ {({ onChange, value }) => (
+ {
+ handleOperatorChange(
+ valueFieldAlias,
+ keyFieldAlias,
+ val,
+ index,
+ );
+ onChange(val);
+ }}
+ options={buildLogicalOptions(
+ getVariableType(keyFieldAlias),
+ )}
+ >
+ )}
+
+
+
+ {renderParameter(
+ keyFieldAlias,
+ operatorFieldAlias,
+ valueFieldAlias,
+ )}
+
+
+ );
+ })}
+