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

### 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)

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

@@ -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,
   };
 };

web/src/pages/agent/index.tsx

@@ -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}

web/src/pages/agent/upload-agent-dialog/index.tsx

@@ -1,36 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  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';
-import { UploadAgentForm } from './upload-agent-form';
-
-export function UploadAgentDialog({
-  hideModal,
-  onOk,
-  loading,
-}: IModalProps<any>) {
-  const { t } = useTranslation();
-
-  return (
-    <Dialog open onOpenChange={hideModal}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t('fileManager.uploadFile')}</DialogTitle>
-        </DialogHeader>
-        <UploadAgentForm hideModal={hideModal} onOk={onOk}></UploadAgentForm>
-        <DialogFooter>
-          <LoadingButton type="submit" form={TagRenameId} loading={loading}>
-            {t('common.save')}
-          </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

web/src/pages/agent/upload-agent-dialog/upload-agent-form.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { FileUploader } from '@/components/file-uploader';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { FileMimeType, Platform } from '@/constants/common';
-import { IModalProps } from '@/interfaces/common';
-import { TagRenameId } from '@/pages/add-knowledge/constant';
-import { useTranslation } from 'react-i18next';
-
-// const options = Object.values(Platform).map((x) => ({ label: x, value: x }));
-
-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 },
-  });
-
-  async function onSubmit(data: z.infer<typeof FormSchema>) {
-    console.log('🚀 ~ onSubmit ~ data:', data);
-    const ret = await onOk?.(data);
-    if (ret) {
-      hideModal?.();
-    }
-  }
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-6"
-        id={TagRenameId}
-      >
-        <FormField
-          control={form.control}
-          name="fileList"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('common.name')}</FormLabel>
-              <FormControl>
-                <FileUploader
-                  value={field.value}
-                  onValueChange={field.onChange}
-                  maxFileCount={1}
-                  accept={{ '*.json': [FileMimeType.Json] }}
-                />
-              </FormControl>
-              <FormMessage />
-            </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>
-  );
-}