gmakstutis/ragflow
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feat: Install react-hook-form devtools

Browse source
This commit is contained in:
bill 2025-11-17 19:16:22 +08:00
parent 60ca0959b4
commit a885c9d4bd
9 changed files with 988 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/.umirc.ts
View file

@ -47,7 +47,7 @@ export default defineConfig({
},
{
context: ['/api', '/v1'],
target: 'http://127.0.0.1:9380/',
target: 'http://192.168.1.24:9380/',
changeOrigin: true,
ws: true,
logger: console,

1077
web/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
web/package.json
View file

@ -119,6 +119,7 @@
"zustand": "^4.5.2"
},
"devDependencies": {
"@hookform/devtools": "^4.4.0",
"@react-dev-inspector/umi4-plugin": "^2.0.1",
"@redux-devtools/extension": "^3.3.0",
"@storybook/addon-docs": "^9.1.4",

37
web/src/pages/agent/form/components/query-variable.tsx
View file

@ -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,
) => (
<GroupedSelectWithSecondaryMenu
options={finalOptions}
value={value}
onChange={(val) => {
handleChange?.(val);
onChange?.(val);
}}
// allowClear
types={types}
></GroupedSelectWithSecondaryMenu>
);
if (pureQuery) {
renderWidget(value, onChange);
}
return (
<FormField
control={form.control}
@ -45,18 +69,7 @@ export function QueryVariable({
{t('flow.query')}
</FormLabel>
)}
<FormControl>
<GroupedSelectWithSecondaryMenu
options={finalOptions}
value={field.value}
onChange={(val) => {
field.onChange(val);
onChange?.(val);
}}
// allowClear
types={types}
></GroupedSelectWithSecondaryMenu>
</FormControl>
<FormControl>{renderWidget(field.value, field.onChange)}</FormControl>
<FormMessage />
</FormItem>
)}

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

@ -1,8 +1,8 @@
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 { 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';
@ -66,6 +66,14 @@ const EmptyFields = [
VariableAssignerLogicalArrayOperator.RemoveLast,
];
const EmptyValueMap = {
[JsonSchemaDataType.String]: '',
[JsonSchemaDataType.Number]: 0,
[JsonSchemaDataType.Boolean]: 'yes',
[JsonSchemaDataType.Object]: {},
[JsonSchemaDataType.Array]: [],
};
export function DynamicVariables({
name,
label,
@ -78,7 +86,7 @@ export function DynamicVariables({
const { getType } = useGetVariableLabelOrTypeByValue();
const isDarkTheme = useIsDarkTheme();
const { fields, remove, append } = useFieldArray({
const { fields, remove, append, update } = useFieldArray({
name: name,
control: form.control,
});
@ -94,7 +102,15 @@ export function DynamicVariables({
);
const renderParameter = useCallback(
(keyFieldName: string, operatorFieldName: string) => {
(
keyFieldName: string,
operatorFieldName: string,
valueFieldAlias: string,
) => {
console.log(
'🚀 ~ DynamicVariables ~ valueFieldAlias:',
form.getValues(valueFieldAlias),
);
const logicalOperator = form.getValues(operatorFieldName);
const type = getVariableType(keyFieldName);
@ -104,14 +120,16 @@ export function DynamicVariables({
logicalOperator === VariableAssignerLogicalOperator.Overwrite ||
VariableAssignerLogicalArrayOperator.Extend === logicalOperator
) {
return <QueryVariable types={[type]} hideLabel></QueryVariable>;
return (
<QueryVariable types={[type]} hideLabel pureQuery></QueryVariable>
);
} else if (logicalOperator === VariableAssignerLogicalOperator.Set) {
if (type === JsonSchemaDataType.Boolean) {
return <RadioButton></RadioButton>;
}
if (type === JsonSchemaDataType.Number) {
return <NumberInput className="w-full"></NumberInput>;
return <Input className="w-full" type="number"></Input>;
}
if (type === JsonSchemaDataType.Object) {
@ -136,37 +154,69 @@ export function DynamicVariables({
(x) => logicalOperator === x,
)
) {
return <NumberInput className="w-full"></NumberInput>;
return <Input className="w-full" type="number"></Input>;
} else if (
logicalOperator === VariableAssignerLogicalArrayOperator.Append
) {
const subType = type.match(/<([^>]+)>/).at(1);
return <QueryVariable types={[subType]} hideLabel></QueryVariable>;
return (
<QueryVariable types={[subType]} hideLabel pureQuery></QueryVariable>
);
}
},
[form, getVariableType, isDarkTheme],
);
const handleVariableChange = useCallback(
(operatorFieldAlias: string, valueFieldAlias: string) => () => {
form.setValue(
(operatorFieldAlias: string, valueFieldAlias: string) => {
console.log(
'🚀 ~ DynamicVariables ~ operatorFieldAlias:',
operatorFieldAlias,
VariableAssignerLogicalOperator.Overwrite,
{ shouldDirty: true, shouldValidate: true },
);
form.setValue(valueFieldAlias, undefined);
return () => {
form.setValue(
operatorFieldAlias,
VariableAssignerLogicalOperator.Overwrite,
{ shouldDirty: true, shouldValidate: true },
);
form.setValue(valueFieldAlias, '', {
shouldDirty: true,
shouldValidate: true,
});
};
},
[form],
);
const handleOperatorChange = useCallback(
(valueFieldAlias: string) => {
form.setValue(valueFieldAlias, undefined, {
shouldDirty: true,
shouldValidate: true,
});
(
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],
[form, getVariableType],
);
return (
@ -204,7 +254,12 @@ export function DynamicVariables({
<SelectWithSearch
value={value}
onChange={(val) => {
handleOperatorChange(valueFieldAlias);
handleOperatorChange(
valueFieldAlias,
keyFieldAlias,
val,
index,
);
onChange(val);
}}
options={buildLogicalOptions(
@ -215,7 +270,11 @@ export function DynamicVariables({
</RAGFlowFormItem>
</div>
<RAGFlowFormItem name={valueFieldAlias} className="w-full">
{renderParameter(keyFieldAlias, operatorFieldAlias)}
{renderParameter(
keyFieldAlias,
operatorFieldAlias,
valueFieldAlias,
)}
</RAGFlowFormItem>
</div>

4
web/src/pages/agent/form/variable-assigner-form/index.tsx
View file

@ -15,7 +15,7 @@ export const VariableAssignerSchema = {
z.object({
variable: z.string().optional(),
operator: z.string().optional(),
parameter: z.string().or(z.number()).optional(),
parameter: z.string().or(z.number()).or(z.boolean()).optional(),
}),
),
};
@ -44,6 +44,8 @@ function VariableAssignerForm({ node }: INextOperatorForm) {
<DynamicVariables name="variables" label="Variables"></DynamicVariables>
{/* <Output list={outputList} isFormRequired></Output> */}
</FormWrapper>
{/* <DevTool control={form.control} placement="top-left" /> */}
{/* set up the dev tool */}
</Form>
);
}

11
web/src/pages/agent/hooks/use-build-structured-output.ts
View file

@ -7,8 +7,11 @@ import {
} from '../constant';
import useGraphStore from '../store';
function splitValue(value?: string) {
return typeof value === 'string' ? value?.split('@') : [];
}
function getNodeId(value: string) {
return value.split('@').at(0);
return splitValue(value).at(0);
}
export function useShowSecondaryMenu() {
@ -63,7 +66,7 @@ export function useFindAgentStructuredOutputLabel() {
}>,
) => {
// agent structured output
const fields = value.split('@');
const fields = splitValue(value);
if (
getOperatorTypeFromId(fields.at(0)) === Operator.Agent &&
fields.at(1)?.startsWith(AgentStructuredOutputField)
@ -130,7 +133,7 @@ export function useFindAgentStructuredOutputTypeByValue() {
if (!value) {
return;
}
const fields = value.split('@');
const fields = splitValue(value);
const nodeId = fields.at(0);
const jsonSchema = filterStructuredOutput(value);
@ -163,7 +166,7 @@ export function useFindAgentStructuredOutputLabelByValue() {
const operatorName = getNode(getNodeId(value ?? ''))?.data.name;
if (operatorName) {
return operatorName + ' / ' + value?.split('@').at(1);
return operatorName + ' / ' + splitValue(value).at(1);
}
}

7
web/src/pages/agent/hooks/use-get-begin-query.tsx
View file

@ -232,8 +232,11 @@ export function useFilterQueryVariableOptionsByTypes(
...x,
options: x.options.filter(
(y) =>
types?.some((x) => toLower(y.type).includes(x)) ||
y.type === undefined, // agent structured output
types?.some((x) =>
toLower(x).startsWith('array')
? toLower(y.type).includes(toLower(x))
: toLower(y.type) === toLower(x),
) || y.type === undefined, // agent structured output
),
};
})

10
web/src/pages/agent/utils/filter-agent-structured-output.ts
View file

@ -1,14 +1,18 @@
import { JSONSchema } from '@/components/jsonjoy-builder';
import { get, isPlainObject } from 'lodash';
import { get, isPlainObject, toLower } from 'lodash';
import { JsonSchemaDataType } from '../constant';
function predicate(types: string[], type: string) {
return types.some((x) => toLower(x) === toLower(type));
}
export function hasSpecificTypeChild(
data: Record<string, any> | Array<any>,
types: string[] = [],
) {
if (Array.isArray(data)) {
for (const value of data) {
if (isPlainObject(value) && types.some((x) => x === value.type)) {
if (isPlainObject(value) && predicate(types, value.type)) {
return true;
}
if (hasSpecificTypeChild(value, types)) {
@ -19,7 +23,7 @@ export function hasSpecificTypeChild(
if (isPlainObject(data)) {
for (const value of Object.values(data)) {
if (isPlainObject(value) && types.some((x) => x === value.type)) {
if (isPlainObject(value) && predicate(types, value.type)) {
return true;
}