Feat: Import & export the agents. #3851 (#3894)

### What problem does this PR solve?

Feat: Import & export the agents. #3851

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2024-12-06 13:43:17 +08:00
committed by GitHub
parent c76e7b1e28
commit e64c7dfdf6
12 changed files with 340 additions and 35 deletions

View File

@ -1,8 +1,16 @@
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { useSetModalState } from '@/hooks/common-hooks';
import { FolderInput, FolderOutput } from 'lucide-react';
import { useCallback, useEffect } from 'react';
import ReactFlow, {
Background,
ConnectionMode,
ControlButton,
Controls,
NodeMouseHandler,
} from 'reactflow';
@ -13,12 +21,14 @@ import FormDrawer from '../flow-drawer';
import {
useGetBeginNodeDataQuery,
useHandleDrop,
useHandleExportOrImportJsonFile,
useSelectCanvasData,
useShowFormDrawer,
useValidateConnection,
useWatchNodeFormDataChange,
} from '../hooks';
import { BeginQuery } from '../interface';
import JsonUploadModal from '../json-upload-modal';
import RunDrawer from '../run-drawer';
import { ButtonEdge } from './edge';
import styles from './index.less';
@ -115,6 +125,14 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
const {
handleExportJson,
handleImportJson,
fileUploadVisible,
onFileUploadOk,
hideFileUploadModal,
} = useHandleExportOrImportJsonFile();
useEffect(() => {
if (drawerVisible) {
const query: BeginQuery[] = getBeginNodeDataQuery();
@ -192,7 +210,28 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
deleteKeyCode={['Delete', 'Backspace']}
>
<Background />
<Controls />
<Controls>
<ControlButton onClick={handleImportJson}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<FolderInput />
</TooltipTrigger>
<TooltipContent>Import</TooltipContent>
</Tooltip>
</TooltipProvider>
</ControlButton>
<ControlButton onClick={handleExportJson}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<FolderOutput />
</TooltipTrigger>
<TooltipContent>Export</TooltipContent>
</Tooltip>
</TooltipProvider>
</ControlButton>
</Controls>
</ReactFlow>
{formDrawerVisible && (
<FormDrawer
@ -214,6 +253,13 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
showModal={showChatModal}
></RunDrawer>
)}
{fileUploadVisible && (
<JsonUploadModal
onOk={onFileUploadOk}
visible={fileUploadVisible}
hideModal={hideFileUploadModal}
></JsonUploadModal>
)}
</div>
);
}