pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Import dsl from agent list page #9869 (#10033)

Browse Source 
### What problem does this PR solve?

Feat: Import dsl from agent list page #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-09-10 18:22:16 +08:00
committed by GitHub
parent fc95d113c3
commit df8d31451b
14 changed files with 213 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/hooks/use-agent-request.ts
View File

@ -24,9 +24,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useDebounce } from 'ahooks';
import { get, set } from 'lodash';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams, useSearchParams } from 'umi';
import { v4 as uuid } from 'uuid';
import {
useGetPaginationWithRouter,
useHandleSearchChange,
@ -80,7 +78,7 @@ export const EmptyDsl = {
component_name: 'Begin',
params: {},
},
downstream: ['Answer:China'], // other edge target is downstream, edge source is current node id
downstream: [], // other edge target is downstream, edge source is current node id
upstream: [], // edge source is upstream, edge target is current node id
},
},
@ -96,21 +94,11 @@ export const EmptyDsl = {
};
export const useFetchAgentTemplates = () => {
const { t } = useTranslation();
const { data } = useQuery<IFlowTemplate[]>({
queryKey: [AgentApiAction.FetchAgentTemplates],
initialData: [],
queryFn: async () => {
const { data } = await agentService.listTemplates();
if (Array.isArray(data?.data)) {
data.data.unshift({
id: uuid(),
title: t('flow.blank'),
description: t('flow.createFromNothing'),
dsl: EmptyDsl,
});
}
return data.data;
},

4
web/src/interfaces/database/agent.ts
View File

@ -41,8 +41,8 @@ export interface DSL {
path?: string[];
answer?: any[];
graph?: IGraph;
messages: Message[];
reference: IReference[];
messages?: Message[];
reference?: IReference[];
globals: Record<string, any>;
retrieval: IReference[];
}

56
web/src/pages/agent/hooks/use-export-json.ts
View File

@ -1,71 +1,17 @@
import { useToast } from '@/components/hooks/use-toast';
import { FileMimeType, Platform } from '@/constants/common';
import { useSetModalState } from '@/hooks/common-hooks';
import { useFetchAgent } from '@/hooks/use-agent-request';
import { IGraph } from '@/interfaces/database/flow';
import { downloadJsonFile } from '@/utils/file-util';
import { message } from 'antd';
import isEmpty from 'lodash/isEmpty';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useBuildDslData } from './use-build-dsl';
import { useSetGraphInfo } from './use-set-graph';
export const useHandleExportOrImportJsonFile = () => {
export const useHandleExportJsonFile = () => {
const { buildDslData } = useBuildDslData();
const {
visible: fileUploadVisible,
hideModal: hideFileUploadModal,
showModal: showFileUploadModal,
} = useSetModalState();
const setGraphInfo = useSetGraphInfo();
const { data } = useFetchAgent();
const { t } = useTranslation();
const { toast } = useToast();
const onFileUploadOk = useCallback(
async ({
fileList,
platform,
}: {
fileList: File[];
platform: Platform;
}) => {
console.log('🚀 ~ useHandleExportOrImportJsonFile ~ platform:', platform);
if (fileList.length > 0) {
const file = fileList[0];
if (file.type !== FileMimeType.Json) {
toast({ title: t('flow.jsonUploadTypeErrorMessage') });
return;
}
const graphStr = await file.text();
const errorMessage = t('flow.jsonUploadContentErrorMessage');
try {
const graph = JSON.parse(graphStr);
if (graphStr && !isEmpty(graph) && Array.isArray(graph?.nodes)) {
setGraphInfo(graph ?? ({} as IGraph));
hideFileUploadModal();
} else {
message.error(errorMessage);
}
} catch (error) {
message.error(errorMessage);
}
}
},
[hideFileUploadModal, setGraphInfo, t, toast],
);
const handleExportJson = useCallback(() => {
downloadJsonFile(buildDslData().graph, `${data.title}.json`);
}, [buildDslData, data.title]);
return {
fileUploadVisible,
handleExportJson,
handleImportJson: showFileUploadModal,
hideFileUploadModal,
onFileUploadOk,
};
};

24
web/src/pages/agent/index.tsx
View File

@ -24,7 +24,6 @@ import { ReactFlowProvider } from '@xyflow/react';
import {
ChevronDown,
CirclePlay,
Download,
History,
LaptopMinimalCheck,
Logs,
@ -37,7 +36,7 @@ import { useTranslation } from 'react-i18next';
import { useParams } from 'umi';
import AgentCanvas from './canvas';
import { DropdownProvider } from './canvas/context';
import { useHandleExportOrImportJsonFile } from './hooks/use-export-json';
import { useHandleExportJsonFile } from './hooks/use-export-json';
import { useFetchDataOnMount } from './hooks/use-fetch-data';
import { useGetBeginNodeDataInputs } from './hooks/use-get-begin-query';
import {
@ -46,7 +45,6 @@ import {
useWatchAgentChange,
} from './hooks/use-save-graph';
import { SettingDialog } from './setting-dialog';
import { UploadAgentDialog } from './upload-agent-dialog';
import { useAgentHistoryManager } from './use-agent-history-manager';
import { VersionDialog } from './version-dialog';
@ -71,13 +69,8 @@ export default function Agent() {
} = useSetModalState();
const { t } = useTranslation();
useAgentHistoryManager();
const {
handleExportJson,
handleImportJson,
fileUploadVisible,
onFileUploadOk,
hideFileUploadModal,
} = useHandleExportOrImportJsonFile();
const { handleExportJson } = useHandleExportJsonFile();
const { saveGraph, loading } = useSaveGraph();
const { flowDetail: agentDetail } = useFetchDataOnMount();
const inputs = useGetBeginNodeDataInputs();
@ -158,11 +151,6 @@ export default function Agent() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<AgentDropdownMenuItem onClick={handleImportJson}>
<Download />
{t('flow.import')}
</AgentDropdownMenuItem>
<DropdownMenuSeparator />
<AgentDropdownMenuItem onClick={handleExportJson}>
<Upload />
{t('flow.export')}
@ -193,12 +181,6 @@ export default function Agent() {
></AgentCanvas>
</DropdownProvider>
</ReactFlowProvider>
{fileUploadVisible && (
<UploadAgentDialog
hideModal={hideFileUploadModal}
onOk={onFileUploadOk}
></UploadAgentDialog>
)}
{embedVisible && (
<EmbedDialog
visible={embedVisible}

3
web/src/pages/agents/agent-templates.tsx
View File

@ -112,10 +112,9 @@ export default function AgentTemplates() {
<main className="flex-1 bg-text-title-invert/50 h-dvh">
<div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[94vh] overflow-auto px-8 pt-8">
{tempListFilter?.map((x, index) => {
{tempListFilter?.map((x) => {
return (
<TemplateCard
isCreate={index === 0}
key={x.id}
data={x}
showModal={showModal}

4
web/src/pages/agents/constant.ts Normal file
View File

@ -0,0 +1,4 @@
export enum FlowType {
Agent = 'agent',
Flow = 'flow',
}

61
web/src/pages/agents/create-agent-form.tsx
View File

@ -6,31 +6,20 @@ import { z } from 'zod';
import { RAGFlowFormItem } from '@/components/ragflow-form';
import { Card, CardContent } from '@/components/ui/card';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Form } from '@/components/ui/form';
import { IModalProps } from '@/interfaces/common';
import { cn } from '@/lib/utils';
import { TagRenameId } from '@/pages/add-knowledge/constant';
import { BrainCircuit, Check, Route } from 'lucide-react';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FlowType } from './constant';
import { NameFormField, NameFormSchema } from './name-form-field';
export type CreateAgentFormProps = IModalProps<any> & {
shouldChooseAgent?: boolean;
};
enum FlowType {
Agent = 'agent',
Flow = 'flow',
}
type FlowTypeCardProps = {
value?: FlowType;
onChange?: (value: FlowType) => void;
@ -51,7 +40,7 @@ function FlowTypeCards({ value, onChange }: FlowTypeCardProps) {
<Card
key={val}
className={cn('flex-1 rounded-lg border bg-transparent', {
'border-bg-base': isActive,
'border-text-primary': isActive,
'border-border-default': !isActive,
})}
>
@ -81,30 +70,28 @@ function FlowTypeCards({ value, onChange }: FlowTypeCardProps) {
);
}
export const FormSchema = z.object({
...NameFormSchema,
tag: z.string().trim().optional(),
description: z.string().trim().optional(),
type: z.nativeEnum(FlowType).optional(),
});
export type FormSchemaType = z.infer<typeof FormSchema>;
export function CreateAgentForm({
hideModal,
onOk,
shouldChooseAgent = false,
}: CreateAgentFormProps) {
const { t } = useTranslation();
const FormSchema = z.object({
name: z
.string()
.min(1, {
message: t('common.namePlaceholder'),
})
.trim(),
tag: z.string().trim().optional(),
description: z.string().trim().optional(),
type: z.nativeEnum(FlowType).optional(),
});
const form = useForm<z.infer<typeof FormSchema>>({
const form = useForm<FormSchemaType>({
resolver: zodResolver(FormSchema),
defaultValues: { name: '', type: FlowType.Agent },
});
async function onSubmit(data: z.infer<typeof FormSchema>) {
async function onSubmit(data: FormSchemaType) {
const ret = await onOk?.(data);
if (ret) {
hideModal?.();
@ -123,23 +110,7 @@ export function CreateAgentForm({
<FlowTypeCards></FlowTypeCards>
</RAGFlowFormItem>
)}
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('common.name')}</FormLabel>
<FormControl>
<Input
placeholder={t('common.namePlaceholder')}
{...field}
autoComplete="off"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<NameFormField></NameFormField>
</form>
</Form>
);

42
web/src/pages/agents/hooks/use-create-agent.ts Normal file
View File

@ -0,0 +1,42 @@
import { useSetModalState } from '@/hooks/common-hooks';
import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
import { DSL } from '@/interfaces/database/agent';
import { useCallback } from 'react';
import { FlowType } from '../constant';
import { FormSchemaType } from '../create-agent-form';
export function useCreateAgentOrPipeline() {
const { loading, setAgent } = useSetAgent();
const {
visible: creatingVisible,
hideModal: hideCreatingModal,
showModal: showCreatingModal,
} = useSetModalState();
const createAgent = useCallback(
async (name: string) => {
return setAgent({ title: name, dsl: EmptyDsl as DSL });
},
[setAgent],
);
const handleCreateAgentOrPipeline = useCallback(
async (data: FormSchemaType) => {
if (data.type === FlowType.Agent) {
const ret = await createAgent(data.name);
if (ret.code === 0) {
hideCreatingModal();
}
}
},
[createAgent, hideCreatingModal],
);
return {
loading,
creatingVisible,
hideCreatingModal,
showCreatingModal,
handleCreateAgentOrPipeline,
};
}

36
web/src/pages/agents/index.tsx
View File

@ -8,7 +8,6 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
import { useSetModalState } from '@/hooks/common-hooks';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
import { t } from 'i18next';
@ -17,6 +16,9 @@ import { Clipboard, ClipboardPlus, FileInput, Plus } from 'lucide-react';
import { useCallback } from 'react';
import { AgentCard } from './agent-card';
import { CreateAgentDialog } from './create-agent-dialog';
import { useCreateAgentOrPipeline } from './hooks/use-create-agent';
import { UploadAgentDialog } from './upload-agent-dialog';
import { useHandleImportJsonFile } from './use-import-json';
import { useRenameAgent } from './use-rename-agent';
export default function Agents() {
@ -34,10 +36,19 @@ export default function Agents() {
} = useRenameAgent();
const {
visible: creatingVisible,
hideModal: hideCreatingModal,
showModal: showCreatingModal,
} = useSetModalState();
creatingVisible,
hideCreatingModal,
showCreatingModal,
loading,
handleCreateAgentOrPipeline,
} = useCreateAgentOrPipeline();
const {
handleImportJson,
fileUploadVisible,
onFileUploadOk,
hideFileUploadModal,
} = useHandleImportJsonFile();
const handlePageChange = useCallback(
(page: number, pageSize?: number) => {
@ -77,7 +88,10 @@ export default function Agents() {
<ClipboardPlus />
Create from Template
</DropdownMenuItem>
<DropdownMenuItem justifyBetween={false}>
<DropdownMenuItem
justifyBetween={false}
onClick={handleImportJson}
>
<FileInput />
Import json file
</DropdownMenuItem>
@ -115,13 +129,19 @@ export default function Agents() {
)}
{creatingVisible && (
<CreateAgentDialog
loading={false}
loading={loading}
visible={creatingVisible}
hideModal={hideCreatingModal}
shouldChooseAgent
onOk={() => {}}
onOk={handleCreateAgentOrPipeline}
></CreateAgentDialog>
)}
{fileUploadVisible && (
<UploadAgentDialog
hideModal={hideFileUploadModal}
onOk={onFileUploadOk}
></UploadAgentDialog>
)}
</section>
);
}

28
web/src/pages/agents/name-form-field.tsx Normal file
View File

@ -0,0 +1,28 @@
import { RAGFlowFormItem } from '@/components/ragflow-form';
import { Input } from '@/components/ui/input';
import i18n from '@/locales/config';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';
export const NameFormSchema = {
name: z
.string()
.min(1, {
message: i18n.t('common.namePlaceholder'),
})
.trim(),
};
export function NameFormField() {
const { t } = useTranslation();
return (
<RAGFlowFormItem
name="name"
required
label={t('common.name')}
tooltip={t('flow.sqlStatementTip')}
>
<Input placeholder={t('common.namePlaceholder')} autoComplete="off" />
</RAGFlowFormItem>
);
}

52
web/src/pages/agents/template-card.tsx
View File

@ -3,7 +3,6 @@ import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { IFlowTemplate } from '@/interfaces/database/flow';
import i18n from '@/locales/config';
import { Plus } from 'lucide-react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
interface IProps {
@ -12,7 +11,7 @@ interface IProps {
showModal(record: IFlowTemplate): void;
}
export function TemplateCard({ data, showModal, isCreate = false }: IProps) {
export function TemplateCard({ data, showModal }: IProps) {
const { t } = useTranslation();
const handleClick = useCallback(() => {
@ -26,41 +25,24 @@ export function TemplateCard({ data, showModal, isCreate = false }: IProps) {
return (
<Card className="border-colors-outline-neutral-standard group relative min-h-40">
<CardContent className="p-4 ">
{isCreate && (
<div
className="flex flex-col justify-center items-center gap-4 mb-4 absolute top-0 right-0 left-0 bottom-0 cursor-pointer "
<div className="flex justify-start items-center gap-4 mb-4">
<RAGFlowAvatar
className="w-7 h-7"
avatar={data.avatar ? data.avatar : 'https://github.com/shadcn.png'}
name={data?.title[language] || 'CN'}
></RAGFlowAvatar>
<div className="text-[18px] font-bold ">{data?.title[language]}</div>
</div>
<p className="break-words">{data?.description[language]}</p>
<div className="group-hover:bg-gradient-to-t from-black/70 from-10% via-black/0 via-50% to-black/0 w-full h-full group-hover:block absolute top-0 left-0 hidden rounded-xl">
<Button
variant="default"
className="w-1/3 absolute bottom-4 right-4 left-4 justify-center text-center m-auto"
onClick={handleClick}
>
<Plus size={50} fontWeight={700} />
<div>{t('flow.createAgent')}</div>
</div>
)}
{!isCreate && (
<>
<div className="flex justify-start items-center gap-4 mb-4">
<RAGFlowAvatar
className="w-7 h-7"
avatar={
data.avatar ? data.avatar : 'https://github.com/shadcn.png'
}
name={data?.title[language] || 'CN'}
></RAGFlowAvatar>
<div className="text-[18px] font-bold ">
{data?.title[language]}
</div>
</div>
<p className="break-words">{data?.description[language]}</p>
<div className="group-hover:bg-gradient-to-t from-black/70 from-10% via-black/0 via-50% to-black/0 w-full h-full group-hover:block absolute top-0 left-0 hidden rounded-xl">
<Button
variant="default"
className="w-1/3 absolute bottom-4 right-4 left-4 justify-center text-center m-auto"
onClick={handleClick}
>
{t('flow.useTemplate')}
</Button>
</div>
</>
)}
{t('flow.useTemplate')}
</Button>
</div>
</CardContent>
</Card>
);

6
web/src/pages/agent/upload-agent-dialog/index.tsx → web/src/pages/agents/upload-agent-dialog/index.tsx
View File

@ -1,3 +1,4 @@
import { ButtonLoading } from '@/components/ui/button';
import {
Dialog,
DialogContent,
@ -5,7 +6,6 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { LoadingButton } from '@/components/ui/loading-button';
import { IModalProps } from '@/interfaces/common';
import { TagRenameId } from '@/pages/add-knowledge/constant';
import { useTranslation } from 'react-i18next';
@ -26,9 +26,9 @@ export function UploadAgentDialog({
</DialogHeader>
<UploadAgentForm hideModal={hideModal} onOk={onOk}></UploadAgentForm>
<DialogFooter>
<LoadingButton type="submit" form={TagRenameId} loading={loading}>
<ButtonLoading type="submit" form={TagRenameId} loading={loading}>
{t('common.save')}
</LoadingButton>
</ButtonLoading>
</DialogFooter>
</DialogContent>
</Dialog>

42
web/src/pages/agent/upload-agent-dialog/upload-agent-form.tsx → web/src/pages/agents/upload-agent-dialog/upload-agent-form.tsx
View File

@ -13,32 +13,24 @@ import {
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { FileMimeType, Platform } from '@/constants/common';
import { FileMimeType } from '@/constants/common';
import { IModalProps } from '@/interfaces/common';
import { TagRenameId } from '@/pages/add-knowledge/constant';
import { useTranslation } from 'react-i18next';
import { NameFormField, NameFormSchema } from '../name-form-field';
// const options = Object.values(Platform).map((x) => ({ label: x, value: x }));
export const FormSchema = z.object({
fileList: z.array(z.instanceof(File)),
...NameFormSchema,
});
export type FormSchemaType = z.infer<typeof FormSchema>;
export function UploadAgentForm({ hideModal, onOk }: IModalProps<any>) {
const { t } = useTranslation();
const FormSchema = z.object({
platform: z
.string()
.min(1, {
message: t('common.namePlaceholder'),
})
.trim(),
fileList: z.array(z.instanceof(File)),
});
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: { platform: Platform.RAGFlow },
defaultValues: { name: '' },
});
async function onSubmit(data: z.infer<typeof FormSchema>) {
console.log('🚀 ~ onSubmit ~ data:', data);
async function onSubmit(data: FormSchemaType) {
const ret = await onOk?.(data);
if (ret) {
hideModal?.();
@ -52,12 +44,13 @@ export function UploadAgentForm({ hideModal, onOk }: IModalProps<any>) {
className="space-y-6"
id={TagRenameId}
>
<NameFormField></NameFormField>
<FormField
control={form.control}
name="fileList"
render={({ field }) => (
<FormItem>
<FormLabel>{t('common.name')}</FormLabel>
<FormLabel required>DSL</FormLabel>
<FormControl>
<FileUploader
value={field.value}
@ -70,19 +63,6 @@ export function UploadAgentForm({ hideModal, onOk }: IModalProps<any>) {
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="platform"
render={({ field }) => (
<FormItem>
<FormLabel>{t('common.name')}</FormLabel>
<FormControl>
<RAGFlowSelect {...field} options={options} />
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
</form>
</Form>
);

56
web/src/pages/agents/use-import-json.ts Normal file
View File

@ -0,0 +1,56 @@
import { useToast } from '@/components/hooks/use-toast';
import { FileMimeType } from '@/constants/common';
import { useSetModalState } from '@/hooks/common-hooks';
import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
import { message } from 'antd';
import isEmpty from 'lodash/isEmpty';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FormSchemaType } from './upload-agent-dialog/upload-agent-form';
export const useHandleImportJsonFile = () => {
const {
visible: fileUploadVisible,
hideModal: hideFileUploadModal,
showModal: showFileUploadModal,
} = useSetModalState();
const { t } = useTranslation();
const { toast } = useToast();
const { loading, setAgent } = useSetAgent();
const onFileUploadOk = useCallback(
async ({ fileList, name }: FormSchemaType) => {
if (fileList.length > 0) {
const file = fileList[0];
if (file.type !== FileMimeType.Json) {
toast({ title: t('flow.jsonUploadTypeErrorMessage') });
return;
}
const graphStr = await file.text();
const errorMessage = t('flow.jsonUploadContentErrorMessage');
try {
const graph = JSON.parse(graphStr);
if (graphStr && !isEmpty(graph) && Array.isArray(graph?.nodes)) {
const dsl = { ...EmptyDsl, graph };
setAgent({ title: name, dsl });
hideFileUploadModal();
} else {
message.error(errorMessage);
}
} catch (error) {
message.error(errorMessage);
}
}
},
[hideFileUploadModal, setAgent, t, toast],
);
return {
fileUploadVisible,
handleImportJson: showFileUploadModal,
hideFileUploadModal,
onFileUploadOk,
loading,
};
};