mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-24 15:36:50 +08:00
### What problem does this PR solve? Feat: Initialize the data pipeline canvas. #9869 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
260
web/src/pages/data-flow/debug-content/index.tsx
Normal file
260
web/src/pages/data-flow/debug-content/index.tsx
Normal file
@ -0,0 +1,260 @@
|
||||
import { ButtonLoading } from '@/components/ui/button';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { RAGFlowSelect } from '@/components/ui/select';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { IMessage } from '@/pages/chat/interface';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import React, { ReactNode, useCallback, useMemo } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
import { BeginQueryType } from '../constant';
|
||||
import { BeginQuery } from '../interface';
|
||||
import { FileUploadDirectUpload } from './uploader';
|
||||
|
||||
const StringFields = [
|
||||
BeginQueryType.Line,
|
||||
BeginQueryType.Paragraph,
|
||||
BeginQueryType.Options,
|
||||
];
|
||||
|
||||
interface IProps {
|
||||
parameters: BeginQuery[];
|
||||
message?: IMessage;
|
||||
ok(parameters: any[]): void;
|
||||
isNext?: boolean;
|
||||
loading?: boolean;
|
||||
submitButtonDisabled?: boolean;
|
||||
btnText?: ReactNode;
|
||||
}
|
||||
|
||||
const DebugContent = ({
|
||||
parameters,
|
||||
message,
|
||||
ok,
|
||||
isNext = true,
|
||||
loading = false,
|
||||
submitButtonDisabled = false,
|
||||
btnText,
|
||||
}: IProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const formSchemaValues = useMemo(() => {
|
||||
const obj = parameters.reduce<{
|
||||
schema: Record<string, z.ZodType>;
|
||||
values: Record<string, any>;
|
||||
}>(
|
||||
(pre, cur, idx) => {
|
||||
const type = cur.type;
|
||||
let fieldSchema;
|
||||
let value;
|
||||
if (StringFields.some((x) => x === type)) {
|
||||
fieldSchema = z.string().trim().min(1);
|
||||
} else if (type === BeginQueryType.Boolean) {
|
||||
fieldSchema = z.boolean();
|
||||
value = false;
|
||||
} else if (type === BeginQueryType.Integer || type === 'float') {
|
||||
fieldSchema = z.coerce.number();
|
||||
} else {
|
||||
fieldSchema = z.record(z.any());
|
||||
}
|
||||
|
||||
if (cur.optional) {
|
||||
fieldSchema = fieldSchema.optional();
|
||||
}
|
||||
|
||||
const index = idx.toString();
|
||||
|
||||
pre.schema[index] = fieldSchema;
|
||||
pre.values[index] = value;
|
||||
|
||||
return pre;
|
||||
},
|
||||
{ schema: {}, values: {} },
|
||||
);
|
||||
|
||||
return { schema: z.object(obj.schema), values: obj.values };
|
||||
}, [parameters]);
|
||||
|
||||
const form = useForm<z.infer<typeof formSchemaValues.schema>>({
|
||||
defaultValues: formSchemaValues.values,
|
||||
resolver: zodResolver(formSchemaValues.schema),
|
||||
});
|
||||
|
||||
const submittable = true;
|
||||
|
||||
const renderWidget = useCallback(
|
||||
(q: BeginQuery, idx: string) => {
|
||||
const props = {
|
||||
key: idx,
|
||||
label: q.name ?? q.key,
|
||||
name: idx,
|
||||
};
|
||||
|
||||
const BeginQueryTypeMap = {
|
||||
[BeginQueryType.Line]: (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={props.name}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{props.label}</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field}></Input>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
),
|
||||
[BeginQueryType.Paragraph]: (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={props.name}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{props.label}</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea rows={1} {...field}></Textarea>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
),
|
||||
[BeginQueryType.Options]: (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={props.name}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{props.label}</FormLabel>
|
||||
<FormControl>
|
||||
<RAGFlowSelect
|
||||
allowClear
|
||||
options={
|
||||
q.options?.map((x) => ({
|
||||
label: x,
|
||||
value: x as string,
|
||||
})) ?? []
|
||||
}
|
||||
{...field}
|
||||
></RAGFlowSelect>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
),
|
||||
[BeginQueryType.File]: (
|
||||
<React.Fragment key={idx}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={props.name}
|
||||
render={({ field }) => (
|
||||
<div className="space-y-6">
|
||||
<FormItem className="w-full">
|
||||
<FormLabel>{t('assistantAvatar')}</FormLabel>
|
||||
<FormControl>
|
||||
<FileUploadDirectUpload
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
></FileUploadDirectUpload>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
[BeginQueryType.Integer]: (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={props.name}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{props.label}</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" {...field}></Input>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
),
|
||||
[BeginQueryType.Boolean]: (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={props.name}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>{props.label}</FormLabel>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
></Switch>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
BeginQueryTypeMap[q.type as BeginQueryType] ??
|
||||
BeginQueryTypeMap[BeginQueryType.Paragraph]
|
||||
);
|
||||
},
|
||||
[form, t],
|
||||
);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(values: z.infer<typeof formSchemaValues.schema>) => {
|
||||
const nextValues = Object.entries(values).map(([key, value]) => {
|
||||
const item = parameters[Number(key)];
|
||||
return { ...item, value };
|
||||
});
|
||||
|
||||
ok(nextValues);
|
||||
},
|
||||
[formSchemaValues, ok, parameters],
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<section>
|
||||
{message?.data?.tips && <div className="mb-2">{message.data.tips}</div>}
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
{parameters.map((x, idx) => {
|
||||
return <div key={idx}>{renderWidget(x, idx.toString())}</div>;
|
||||
})}
|
||||
<div>
|
||||
<ButtonLoading
|
||||
type="submit"
|
||||
loading={loading}
|
||||
disabled={!submittable || submitButtonDisabled}
|
||||
className="w-full mt-1"
|
||||
>
|
||||
{btnText || t(isNext ? 'common.next' : 'flow.run')}
|
||||
</ButtonLoading>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DebugContent;
|
||||
103
web/src/pages/data-flow/debug-content/popover-form.tsx
Normal file
103
web/src/pages/data-flow/debug-content/popover-form.tsx
Normal file
@ -0,0 +1,103 @@
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Popover, PopoverContent } from '@/components/ui/popover';
|
||||
import { useParseDocument } from '@/hooks/document-hooks';
|
||||
import { IModalProps } from '@/interfaces/common';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { PropsWithChildren } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
|
||||
const reg =
|
||||
/^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
|
||||
|
||||
const FormSchema = z.object({
|
||||
url: z.string(),
|
||||
result: z.any(),
|
||||
});
|
||||
|
||||
const values = {
|
||||
url: '',
|
||||
result: null,
|
||||
};
|
||||
|
||||
export const PopoverForm = ({
|
||||
children,
|
||||
visible,
|
||||
switchVisible,
|
||||
}: PropsWithChildren<IModalProps<any>>) => {
|
||||
const form = useForm({
|
||||
defaultValues: values,
|
||||
resolver: zodResolver(FormSchema),
|
||||
});
|
||||
const { parseDocument, loading } = useParseDocument();
|
||||
const { t } = useTranslation();
|
||||
|
||||
// useResetFormOnCloseModal({
|
||||
// form,
|
||||
// visible,
|
||||
// });
|
||||
|
||||
async function onSubmit(values: z.infer<typeof FormSchema>) {
|
||||
const val = values.url;
|
||||
|
||||
if (reg.test(val)) {
|
||||
const ret = await parseDocument(val);
|
||||
if (ret?.data?.code === 0) {
|
||||
form.setValue('result', ret?.data?.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const content = (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`url`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
// onPressEnter={(e) => e.preventDefault()}
|
||||
placeholder={t('flow.pasteFileLink')}
|
||||
// suffix={
|
||||
// <Button
|
||||
// type="primary"
|
||||
// onClick={onOk}
|
||||
// size={'small'}
|
||||
// loading={loading}
|
||||
// >
|
||||
// {t('common.submit')}
|
||||
// </Button>
|
||||
// }
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`result`}
|
||||
render={() => <></>}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover open={visible} onOpenChange={switchVisible}>
|
||||
{children}
|
||||
<PopoverContent>{content}</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
116
web/src/pages/data-flow/debug-content/uploader.tsx
Normal file
116
web/src/pages/data-flow/debug-content/uploader.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
FileUpload,
|
||||
FileUploadDropzone,
|
||||
FileUploadItem,
|
||||
FileUploadItemDelete,
|
||||
FileUploadItemMetadata,
|
||||
FileUploadItemPreview,
|
||||
FileUploadItemProgress,
|
||||
FileUploadList,
|
||||
FileUploadTrigger,
|
||||
type FileUploadProps,
|
||||
} from '@/components/file-upload';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useUploadCanvasFile } from '@/hooks/use-agent-request';
|
||||
import { Upload, X } from 'lucide-react';
|
||||
import * as React from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
type FileUploadDirectUploadProps = {
|
||||
value: Record<string, any>;
|
||||
onChange(value: Record<string, any>): void;
|
||||
};
|
||||
|
||||
export function FileUploadDirectUpload({
|
||||
onChange,
|
||||
}: FileUploadDirectUploadProps) {
|
||||
const [files, setFiles] = React.useState<File[]>([]);
|
||||
|
||||
const { uploadCanvasFile } = useUploadCanvasFile();
|
||||
|
||||
const onUpload: NonNullable<FileUploadProps['onUpload']> = React.useCallback(
|
||||
async (files, { onSuccess, onError }) => {
|
||||
try {
|
||||
const uploadPromises = files.map(async (file) => {
|
||||
const handleError = (error?: any) => {
|
||||
onError(
|
||||
file,
|
||||
error instanceof Error ? error : new Error('Upload failed'),
|
||||
);
|
||||
};
|
||||
try {
|
||||
const ret = await uploadCanvasFile([file]);
|
||||
if (ret.code === 0) {
|
||||
onSuccess(file);
|
||||
onChange(ret.data);
|
||||
} else {
|
||||
handleError();
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error);
|
||||
}
|
||||
});
|
||||
|
||||
// Wait for all uploads to complete
|
||||
await Promise.all(uploadPromises);
|
||||
} catch (error) {
|
||||
// This handles any error that might occur outside the individual upload processes
|
||||
console.error('Unexpected error during upload:', error);
|
||||
}
|
||||
},
|
||||
[onChange, uploadCanvasFile],
|
||||
);
|
||||
|
||||
const onFileReject = React.useCallback((file: File, message: string) => {
|
||||
toast(message, {
|
||||
description: `"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}" has been rejected`,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<FileUpload
|
||||
value={files}
|
||||
onValueChange={setFiles}
|
||||
onUpload={onUpload}
|
||||
onFileReject={onFileReject}
|
||||
maxFiles={1}
|
||||
className="w-full"
|
||||
multiple={false}
|
||||
>
|
||||
<FileUploadDropzone>
|
||||
<div className="flex flex-col items-center gap-1 text-center">
|
||||
<div className="flex items-center justify-center rounded-full border p-2.5">
|
||||
<Upload className="size-6 text-muted-foreground" />
|
||||
</div>
|
||||
<p className="font-medium text-sm">Drag & drop files here</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Or click to browse (max 2 files)
|
||||
</p>
|
||||
</div>
|
||||
<FileUploadTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="mt-2 w-fit">
|
||||
Browse files
|
||||
</Button>
|
||||
</FileUploadTrigger>
|
||||
</FileUploadDropzone>
|
||||
<FileUploadList>
|
||||
{files.map((file, index) => (
|
||||
<FileUploadItem key={index} value={file} className="flex-col">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<FileUploadItemPreview />
|
||||
<FileUploadItemMetadata />
|
||||
<FileUploadItemDelete asChild>
|
||||
<Button variant="ghost" size="icon" className="size-7">
|
||||
<X />
|
||||
</Button>
|
||||
</FileUploadItemDelete>
|
||||
</div>
|
||||
<FileUploadItemProgress />
|
||||
</FileUploadItem>
|
||||
))}
|
||||
</FileUploadList>
|
||||
</FileUpload>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user