Feat: Agent api (#14157)

### What problem does this PR solve? 1. **List agents** **Prev API**: - `/v1/canvas/list GET` - `/api/v1/agents GET` **Current API**: `/api/v2/agents GET` 2. **Get canvas template** **Prev API**: `/v1/canvas/templates GET` **Current API**: `/api/v2/agents/templates GET` 3. **Delete an agent** **Prev API**: - `/v1/canvas/rm POST` - `/api/v1/agents/<agent_id> DELETE` **Current API**: `/api/v2/agents/<agent_id> DELETE` 4. **Update an agent** **Prev API**: - `/api/v1/agents/<agent_id> PUT` - `/v1/canvas/setting POST ` **Current API**: `/api/v2/agents/<agent_id> PATCH` 5. **Create an agent** **Prev API**: - `/v1/canvas/set POST` - `/api/v1/agents POST` **Current API**: `/api/v2/agents POST` 6. **Get an agent** **Prev API**: - `/v1/canvas/get/<canvas_id> GET ` **Current API**: `/api/v2/agents/<agent_id> GET` 7. **Reset an agent** **Prev API**: - `/v1/canvas/reset POST` **Current API**: `/api/v2/agents/<agent_id>/reset POST` 8. **Upload a file to an agent** **Prev API**: - `/v1/canvas/upload/<canvas_id> POST` **Current API**: `/api/v2/agents/<agent_id>/upload POST` 9. **Input form** **Prev API**: - `/v1/canvas/input_form GET` **Current API**: `/api/v2/agents/<agent_id>/components/<component_id>/input-form GET` 10. **Debug an agent** **Prev API**: - `/v1/canvas/debug POST` **Current API**: `/api/v2/agents/<agent_id>/components/<component_id>/debug POST` 11. **Trace an agent** **Prev API**: - `/v1/canvas/trace GET` **Current API**: `/api/v2/agents/<agent_id>/logs/<message_id> GET` 12. **Get an agent version list** **Prev API**: - `/v1/canvas/getlistversion/<canvas_id>` **Current API**: `/api/v2/agents/<agent_id>/versions GET` 13. **Get a version of agent** **Prev API**: - `/v1/canvas/getversion/<version_id>` **Current API**: `/api/v2/agents/<agent_id>/versions/<version_id> GET` 14. **Test db connection** **Prev API**: - `/v1/canvas/test_db_connect POST` **Current API**: `/api/v2/agents/test_db_connection` 15. **Rerun the agent** **Prev API**: - `/v1/canvas/rerun POST` **Current API**: `/api/v2/agents/rerun POST` 16. **Get prompts** **Prev API**: - `/v1/canvas/prompts GET` **Current API**: `/api/v2/agents/prompts GET` ### Type of change - [x] New Feature (non-breaking change which adds functionality) --------- Co-authored-by: chanx <1243304602@qq.com>
2026-07-14 00:48:26 +08:00 · 2026-04-24 10:02:22 +08:00
parent d84438fd53
commit c74aece63c
34 changed files with 1819 additions and 4671 deletions
--- a/web/src/hooks/use-agent-request.ts
+++ b/web/src/hooks/use-agent-request.ts
@@ -28,8 +28,9 @@ import agentService, {
  fetchPipeLineList,
  fetchTrace,
  fetchWebhookTrace,
+  updateAgent,
+  uploadAgentFile,
 } from '@/services/agent-service';
-import api from '@/utils/api';
 import { buildMessageListWithUuid } from '@/utils/chat';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
@@ -51,15 +52,14 @@ export const enum AgentApiAction {
  ResetAgent = 'resetAgent',
  SetAgent = 'setAgent',
  FetchAgentTemplates = 'fetchAgentTemplates',
-  UploadCanvasFile = 'uploadCanvasFile',
-  UploadCanvasFileWithProgress = 'uploadCanvasFileWithProgress',
+  UploadAgentFile = 'uploadAgentFile',
+  UploadAgentFileWithProgress = 'uploadAgentFileWithProgress',
  Trace = 'trace',
  TestDbConnect = 'testDbConnect',
  DebugSingle = 'debugSingle',
  FetchInputForm = 'fetchInputForm',
  FetchVersionList = 'fetchVersionList',
  FetchVersion = 'fetchVersion',
-  FetchAgentAvatar = 'fetchAgentAvatar',
  FetchExternalAgentInputs = 'fetchExternalAgentInputs',
  SetAgentSetting = 'setAgentSetting',
  FetchPrompt = 'fetchPrompt',
@@ -72,7 +72,7 @@ export const enum AgentApiAction {
  DeleteAgentSession = 'deleteAgentSession',
  FetchSessionByIdManually = 'fetchSessionByIdManually',
  FetchAgentLog = 'fetchAgentLog',
-  FetchFlowDetailSSE = 'flowDetailSSE',
+  FetchSharedAgent = 'fetchSharedAgent',
 }

 export const useFetchAgentTemplates = () => {
@@ -80,7 +80,7 @@ export const useFetchAgentTemplates = () => {
    queryKey: [AgentApiAction.FetchAgentTemplates],
    initialData: [],
    queryFn: async () => {
-      const { data } = await agentService.listTemplates();
+      const { data } = await agentService.listAgentTemplate();

      return data.data;
    },
@@ -89,6 +89,37 @@ export const useFetchAgentTemplates = () => {
  return data;
 };

+const buildAgentListParams = ({
+  page,
+  pageSize,
+  keywords,
+  canvasCategory,
+  ownerIds,
+}: {
+  page: number;
+  pageSize: number;
+  keywords?: string;
+  canvasCategory?: string;
+  ownerIds?: string[];
+}) => {
+  const params: Record<string, unknown> = {
+    page,
+    page_size: pageSize,
+  };
+
+  if (keywords) {
+    params.keywords = keywords;
+  }
+  if (canvasCategory) {
+    params.canvas_category = canvasCategory;
+  }
+  if (Array.isArray(ownerIds) && ownerIds.length > 0) {
+    params.owner_ids = ownerIds.join(',');
+  }
+
+  return params;
+};
+
 export const useFetchAgentListByPage = () => {
  const { searchString, handleInputChange } = useHandleSearchChange();
  const { pagination, setPagination } = useGetPaginationWithRouter();
@@ -99,17 +130,13 @@ export const useFetchAgentListByPage = () => {
    : [];
  const owner = filterValue.owner;

-  const requestParams: Record<string, any> = {
-    keywords: debouncedSearchString,
-    page_size: pagination.pageSize,
+  const requestParams = buildAgentListParams({
    page: pagination.current,
-    canvas_category:
-      canvasCategory.length === 1 ? canvasCategory[0] : undefined,
-  };
-
-  if (Array.isArray(owner) && owner.length > 0) {
-    requestParams.owner_ids = owner.join(',');
-  }
+    pageSize: pagination.pageSize,
+    keywords: debouncedSearchString,
+    canvasCategory: canvasCategory.length === 1 ? canvasCategory[0] : undefined,
+    ownerIds: Array.isArray(owner) ? owner : undefined,
+  });

  const { data, isFetching: loading } = useQuery<{
    canvas: IFlow[];
@@ -131,7 +158,7 @@ export const useFetchAgentListByPage = () => {
    },
    gcTime: 0,
    queryFn: async () => {
-      const { data } = await agentService.listCanvas(
+      const { data } = await agentService.listAgents(
        {
          params: requestParams,
        },
@@ -166,13 +193,13 @@ export function useFetchAllAgentList() {
  const { data, isFetching: loading } = useQuery<IFlow[]>({
    queryKey: [AgentApiAction.FetchAllAgentList],
    queryFn: async () => {
-      const { data } = await agentService.listCanvas(
+      const { data } = await agentService.listAgents(
        {
-          params: {
+          params: buildAgentListParams({
            page: 1,
-            page_size: 100000,
-            canvas_category: AgentCategory.AgentCanvas,
-          },
+            pageSize: 100000,
+            canvasCategory: AgentCategory.AgentCanvas,
+          }),
        },
        true,
      );
@@ -194,7 +221,12 @@ export const useUpdateAgentSetting = () => {
  } = useMutation({
    mutationKey: [AgentApiAction.UpdateAgentSetting],
    mutationFn: async (params: any) => {
-      const ret = await agentService.settingCanvas(params);
+      const ret = await updateAgent(params.id, {
+        title: params.title,
+        description: params.description,
+        permission: params.permission,
+        avatar: params.avatar,
+      });
      if (ret?.data?.code === 0) {
        message.success('success');
        queryClient.invalidateQueries({
@@ -218,14 +250,14 @@ export const useDeleteAgent = () => {
    mutateAsync,
  } = useMutation({
    mutationKey: [AgentApiAction.DeleteAgent],
-    mutationFn: async (canvasIds: string[]) => {
-      const { data } = await agentService.removeCanvas({ canvasIds });
+    mutationFn: async (agentId: string) => {
+      const { data } = await agentService.deleteAgent(agentId);
      if (data.code === 0) {
        queryClient.invalidateQueries({
          queryKey: [AgentApiAction.FetchAgentListByPage],
        });
      }
-      return data?.data ?? [];
+      return data?.data ?? false;
    },
  });

@@ -252,7 +284,7 @@ export const useFetchAgent = (): {
    refetchOnWindowFocus: false,
    gcTime: 0,
    queryFn: async () => {
-      const { data } = await agentService.fetchCanvas(sharedId || id);
+      const { data } = await agentService.getAgent(sharedId || id);

      const messageList = buildMessageListWithUuid(
        get(data, 'data.dsl.messages', []),
@@ -286,7 +318,7 @@ export const useResetAgent = () => {
  } = useMutation({
    mutationKey: [AgentApiAction.ResetAgent],
    mutationFn: async () => {
-      const { data } = await agentService.resetCanvas({ id });
+      const { data } = await agentService.resetAgent(id);
      return data;
    },
  });
@@ -295,6 +327,7 @@ export const useResetAgent = () => {
 };

 export const useSetAgent = (showMessage: boolean = true) => {
+  const { id } = useParams();
  const queryClient = useQueryClient();
  const {
    data,
@@ -309,17 +342,34 @@ export const useSetAgent = (showMessage: boolean = true) => {
      avatar?: string;
      canvas_category?: string;
      release?: string;
+      description?: string | null;
+      permission?: string;
    }) => {
-      const { data = {} } = await agentService.setCanvas(params);
+      const agentId = params.id ?? id;
+      const { data = {} } = agentId
+        ? await updateAgent(agentId, {
+            title: params.title,
+            dsl: params.dsl,
+            avatar: params.avatar,
+            description: params.description,
+            permission: params.permission,
+            release: params.release,
+          })
+        : await agentService.createAgent(params);
      if (data.code === 0) {
        if (showMessage) {
          message.success(
-            i18n.t(`message.${params?.id ? 'modified' : 'created'}`),
+            i18n.t(`message.${agentId ? 'modified' : 'created'}`),
          );
        }
        queryClient.invalidateQueries({
          queryKey: [AgentApiAction.FetchAgentListByPage],
        });
+        if (agentId) {
+          queryClient.invalidateQueries({
+            queryKey: [AgentApiAction.FetchAgentDetail],
+          });
+        }
      }
      return data;
    },
@@ -329,17 +379,17 @@ export const useSetAgent = (showMessage: boolean = true) => {
 };

 // Only one file can be uploaded at a time
-export const useUploadCanvasFile = () => {
+export const useUploadAgentFile = () => {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const shared_id = searchParams.get('shared_id');
-  const canvasId = id || shared_id;
+  const agentId = id || shared_id;
  const {
    data,
    isPending: loading,
    mutateAsync,
  } = useMutation({
-    mutationKey: [AgentApiAction.UploadCanvasFile],
+    mutationKey: [AgentApiAction.UploadAgentFile],
    mutationFn: async (body: any) => {
      let nextBody = body;
      try {
@@ -350,10 +400,7 @@ export const useUploadCanvasFile = () => {
          });
        }

-        const { data } = await agentService.uploadCanvasFile(
-          { url: api.uploadAgentFile(canvasId as string), data: nextBody },
-          true,
-        );
+        const { data } = await uploadAgentFile(agentId as string, nextBody);
        if (data?.code === 0) {
          message.success(i18n.t('message.uploaded'));
        }
@@ -364,10 +411,10 @@ export const useUploadCanvasFile = () => {
    },
  });

-  return { data, loading, uploadCanvasFile: mutateAsync };
+  return { data, loading, uploadAgentFile: mutateAsync };
 };

-export const useUploadCanvasFileWithProgress = (identifier?: string | null) => {
+export const useUploadAgentFileWithProgress = (identifier?: string | null) => {
  const { id } = useParams();

  type UploadParameters = Parameters<NonNullable<FileUploadProps['onUpload']>>;
@@ -379,7 +426,7 @@ export const useUploadCanvasFileWithProgress = (identifier?: string | null) => {
    isPending: loading,
    mutateAsync,
  } = useMutation({
-    mutationKey: [AgentApiAction.UploadCanvasFileWithProgress],
+    mutationKey: [AgentApiAction.UploadAgentFileWithProgress],
    mutationFn: async ({
      files,
      options: { onError, onSuccess, onProgress },
@@ -392,9 +439,9 @@ export const useUploadCanvasFileWithProgress = (identifier?: string | null) => {
          });
        }

-        const { data } = await agentService.uploadCanvasFile(
+        const { data } = await agentService.uploadAgentFile(
          {
-            url: api.uploadAgentFile(identifier || id),
+            agentId: identifier || id,
            data: formData,
            onUploadProgress: ({ progress }) => {
              files.forEach((file) => {
@@ -420,7 +467,7 @@ export const useUploadCanvasFileWithProgress = (identifier?: string | null) => {
    },
  });

-  return { data, loading, uploadCanvasFile: mutateAsync };
+  return { data, loading, uploadAgentFile: mutateAsync };
 };

 export const useFetchMessageTrace = (canvasId?: string) => {
@@ -490,9 +537,18 @@ export const useDebugSingle = () => {
    isPending: loading,
    mutateAsync,
  } = useMutation({
-    mutationKey: [AgentApiAction.FetchInputForm],
+    mutationKey: [AgentApiAction.DebugSingle],
    mutationFn: async (params: IDebugSingleRequestBody) => {
-      const ret = await agentService.debugSingle({ id, ...params });
+      const ret = await agentService.debugSingle(
+        {
+          agentId: id as string,
+          componentId: params.component_id,
+          data: {
+            params: params.params,
+          },
+        },
+        true,
+      );
      if (ret?.data?.code !== 0) {
        message.error(ret?.data?.message);
      }
@@ -512,12 +568,7 @@ export const useFetchInputForm = (componentId?: string) => {
    enabled: !!id && !!componentId,
    queryFn: async () => {
      const { data } = await agentService.inputForm(
-        {
-          params: {
-            id,
-            component_id: componentId,
-          },
-        },
+        { agentId: id as string, componentId: componentId as string },
        true,
      );

@@ -552,15 +603,19 @@ export const useFetchVersion = (
  data?: IFlow;
  loading: boolean;
 } => {
+  const { id } = useParams();
  const { data, isFetching: loading } = useQuery({
-    queryKey: [AgentApiAction.FetchVersion, version_id],
+    queryKey: [AgentApiAction.FetchVersion, id, version_id],
    initialData: undefined,
    gcTime: 0,
-    enabled: !!version_id, // Only call API when both values are provided
+    enabled: !!id && !!version_id,
    queryFn: async () => {
-      if (!version_id) return undefined;
+      if (!id || !version_id) return undefined;

-      const { data } = await agentService.fetchVersion(version_id);
+      const { data } = await agentService.fetchVersion({
+        agentId: id,
+        versionId: version_id,
+      });

      return data?.data ?? undefined;
    },
@@ -569,35 +624,6 @@ export const useFetchVersion = (
  return { data, loading };
 };

-export const useFetchAgentAvatar = (): {
-  data: IFlow;
-  loading: boolean;
-  refetch: () => void;
-} => {
-  const { sharedId } = useGetSharedChatSearchParams();
-
-  const {
-    data,
-    isFetching: loading,
-    refetch,
-  } = useQuery({
-    queryKey: [AgentApiAction.FetchAgentAvatar],
-    initialData: {} as IFlow,
-    refetchOnReconnect: false,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    gcTime: 0,
-    queryFn: async () => {
-      if (!sharedId) return {};
-      const { data } = await agentService.fetchAgentAvatar(sharedId);
-
-      return data?.data ?? {};
-    },
-  });
-
-  return { data, loading, refetch };
-};
-
 export const useFetchAgentLog = (searchParams: IAgentLogsRequest) => {
  const { id } = useParams();
  const { data, isFetching: loading } = useQuery<IAgentLogsResponse>({
@@ -609,7 +635,7 @@ export const useFetchAgentLog = (searchParams: IAgentLogsRequest) => {
        ...searchParams,
      });

-      return data?.data ?? [];
+      return { total: data?.total ?? 0, sessions: data?.data ?? [] };
    },
  });

@@ -636,7 +662,7 @@ export const useFetchSessionsByCanvasId = () => {
        exp_user_id: tenantInfo.tenant_id,
      });

-      return data?.data ?? { total: 0, sessions: [] };
+      return { total: data?.total ?? 0, sessions: data?.data ?? [] };
    },
  });

@@ -672,33 +698,6 @@ export const useFetchExternalAgentInputs = () => {
  return { data, loading, refetch };
 };

-export const useSetAgentSetting = () => {
-  const { id } = useParams();
-  const queryClient = useQueryClient();
-
-  const {
-    data,
-    isPending: loading,
-    mutateAsync,
-  } = useMutation({
-    mutationKey: [AgentApiAction.SetAgentSetting],
-    mutationFn: async (params: any) => {
-      const ret = await agentService.settingCanvas({ id, ...params });
-      if (ret?.data?.code === 0) {
-        message.success('success');
-        queryClient.invalidateQueries({
-          queryKey: [AgentApiAction.FetchAgentDetail],
-        });
-      } else {
-        message.error(ret?.data?.data);
-      }
-      return ret?.data?.code;
-    },
-  });
-
-  return { data, loading, setAgentSetting: mutateAsync };
-};
-
 export const useFetchPrompt = () => {
  const {
    data,
@@ -731,7 +730,9 @@ export const useFetchAgentList = ({
    initialData: { canvas: [], total: 0 },
    gcTime: 0,
    queryFn: async () => {
-      const { data } = await fetchPipeLineList({ canvas_category });
+      const { data } = await fetchPipeLineList({
+        canvas_category,
+      });

      return data?.data ?? [];
    },
@@ -767,7 +768,7 @@ export const useCancelDataflow = () => {
 //     initialData: [],
 //     gcTime: 0, // https://tanstack.com/query/latest/docs/framework/react/guides/caching?from=reactQueryV3
 //     queryFn: async () => {
-//       const { data } = await agentService.listCanvas();
+//       const { data } = await agentService.listAgents();

 //       return data?.data ?? [];
 //     },
@@ -793,7 +794,7 @@ export function useCancelConversation() {
  return { data, loading, cancelConversation: mutateAsync };
 }

-export const useFetchFlowSSE = (): {
+export const useFetchSharedAgent = (): {
  data: IFlow;
  loading: boolean;
  refetch: () => void;
@@ -805,7 +806,7 @@ export const useFetchFlowSSE = (): {
    isFetching: loading,
    refetch,
  } = useQuery({
-    queryKey: [AgentApiAction.FetchFlowDetailSSE],
+    queryKey: [AgentApiAction.FetchSharedAgent, sharedId],
    initialData: {} as IFlow,
    refetchOnReconnect: false,
    refetchOnMount: false,
@@ -813,7 +814,7 @@ export const useFetchFlowSSE = (): {
    gcTime: 0,
    queryFn: async () => {
      if (!sharedId) return {};
-      const { data } = await agentService.getCanvasSSE(sharedId);
+      const { data } = await agentService.getAgent(sharedId);

      const messageList = buildMessageListWithUuid(
        get(data, 'data.dsl.messages', []),
--- a/web/src/interfaces/database/agent.ts
+++ b/web/src/interfaces/database/agent.ts
@@ -297,6 +297,7 @@ export interface IPipeLineListRequest {
  orderby?: string;
  desc?: boolean;
  canvas_category?: AgentCategory;
+  ext?: string;
 }

 export interface GlobalVariableType {
--- a/web/src/pages/agent/chat/box.tsx
+++ b/web/src/pages/agent/chat/box.tsx
@@ -10,7 +10,7 @@ import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import {
  useFetchAgent,
-  useUploadCanvasFileWithProgress,
+  useUploadAgentFileWithProgress,
 } from '@/hooks/use-agent-request';
 import { useFetchUserInfo } from '@/hooks/use-user-setting-request';
 import { buildMessageUuidWithRole } from '@/utils/chat';
@@ -44,7 +44,7 @@ function AgentChatBox() {
  useGetFileIcon();
  const { data: userInfo } = useFetchUserInfo();
  const { id: canvasId } = useParams();
-  const { uploadCanvasFile, loading } = useUploadCanvasFileWithProgress();
+  const { uploadAgentFile, loading } = useUploadAgentFileWithProgress();

  const { buildInputList, handleOk, isWaitting } = useAwaitCompentData({
    derivedMessages,
@@ -60,10 +60,10 @@ function AgentChatBox() {
  const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
    useCallback(
      async (files, options) => {
-        const ret = await uploadCanvasFile({ files, options });
+        const ret = await uploadAgentFile({ files, options });
        appendUploadResponseList(ret.data, files);
      },
-      [appendUploadResponseList, uploadCanvasFile],
+      [appendUploadResponseList, uploadAgentFile],
    );

  return (
--- a/web/src/pages/agent/chat/use-send-agent-message.ts
+++ b/web/src/pages/agent/chat/use-send-agent-message.ts
@@ -240,7 +240,7 @@ export const useSendAgentMessage = ({
  const inputs = useSelectBeginNodeDataInputs();
  const [sessionId, setSessionId] = useState<string | null>(null);
  const { send, answerList, done, stopOutputMessage, resetAnswerList } =
-    useSendMessageBySSE(url || api.runCanvas);
+    useSendMessageBySSE(url || api.agentChatCompletion);
  const firstAnswer = answerList[0];
  const messageId = useMemo(() => {
    return firstAnswer?.message_id;
@@ -298,13 +298,12 @@ export const useSendAgentMessage = ({
      beginInputs?: BeginQuery[];
      exploreSessionId?: string;
    }) => {
-      const params: Record<string, unknown> = {
-        id: agentId,
-      };
+      const params: Record<string, unknown> = { agent_id: agentId };

      params.running_hint_text = i18n.t('flow.runningHintText', {
        defaultValue: 'is running...🕞',
      });
+      params['openai-compatible'] = false;
      if (typeof message.content === 'string') {
        const query = inputs;

@@ -361,7 +360,7 @@ export const useSendAgentMessage = ({
  );

  const sendFormMessage = useCallback(
-    async (body: { id?: string; inputs: Record<string, BeginQuery> }) => {
+    async (body: { agent_id?: string; inputs: Record<string, BeginQuery> }) => {
      addNewestOneQuestion({
        content: Object.entries(body.inputs)
          .map(([, val]) => `${val.name}: ${val.value}`)
--- a/web/src/pages/agent/debug-content/uploader.tsx
+++ b/web/src/pages/agent/debug-content/uploader.tsx
@@ -13,7 +13,7 @@ import {
  type FileUploadProps,
 } from '@/components/file-upload';
 import { Button } from '@/components/ui/button';
-import { useUploadCanvasFile } from '@/hooks/use-agent-request';
+import { useUploadAgentFile } from '@/hooks/use-agent-request';
 import { Upload, X } from 'lucide-react';
 import * as React from 'react';
 import { toast } from 'sonner';
@@ -34,7 +34,7 @@ export function FileUploadDirectUpload({
    Array.isArray(value) ? value : value ? [value] : [],
  );

-  const { uploadCanvasFile } = useUploadCanvasFile();
+  const { uploadAgentFile } = useUploadAgentFile();

  const onUpload: NonNullable<FileUploadProps['onUpload']> = React.useCallback(
    async (files, { onSuccess, onError }) => {
@@ -47,7 +47,7 @@ export function FileUploadDirectUpload({
            );
          };
          try {
-            const ret = await uploadCanvasFile([file]);
+            const ret = await uploadAgentFile([file]);
            if (ret.code === 0) {
              onSuccess(file);
              uploadedFilesRef.current = [
@@ -70,7 +70,7 @@ export function FileUploadDirectUpload({
        console.error('Unexpected error during upload:', error);
      }
    },
-    [onChange, uploadCanvasFile],
+    [onChange, uploadAgentFile],
  );

  const onFileReject = React.useCallback((file: File, message: string) => {
--- a/web/src/pages/agent/explore/components/session-chat.tsx
+++ b/web/src/pages/agent/explore/components/session-chat.tsx
@@ -4,7 +4,7 @@ import MessageItem from '@/components/next-message-item';
 import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { MessageType } from '@/constants/chat';
-import { useUploadCanvasFileWithProgress } from '@/hooks/use-agent-request';
+import { useUploadAgentFileWithProgress } from '@/hooks/use-agent-request';
 import { useFetchUserInfo } from '@/hooks/use-user-setting-request';
 import { IAgentLogResponse } from '@/interfaces/database/agent';
 import { IMessage } from '@/interfaces/database/chat';
@@ -55,16 +55,16 @@ export function SessionChat({ session }: SessionChatProps) {
    useClickDrawer();

  // File upload
-  const { uploadCanvasFile, loading: isUploading } =
-    useUploadCanvasFileWithProgress();
+  const { uploadAgentFile, loading: isUploading } =
+    useUploadAgentFileWithProgress();

  const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
    useCallback(
      async (files, options) => {
-        const ret = await uploadCanvasFile({ files, options });
+        const ret = await uploadAgentFile({ files, options });
        appendUploadResponseList(ret.data, files);
      },
-      [appendUploadResponseList, uploadCanvasFile],
+      [appendUploadResponseList, uploadAgentFile],
    );

  useEffect(() => {
--- a/web/src/pages/agent/explore/hooks/use-send-session-message.ts
+++ b/web/src/pages/agent/explore/hooks/use-send-session-message.ts
@@ -6,7 +6,6 @@ import {
 } from '@/hooks/use-agent-request';
 import { useSendAgentMessage } from '@/pages/agent/chat/use-send-agent-message';
 import { buildBeginInputListFromObject } from '@/pages/agent/form/begin-form/utils';
-import api from '@/utils/api';
 import { get, isEmpty } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
@@ -63,7 +62,6 @@ export const useSendSessionMessage = () => {
    value,
    ...chatLogic
  } = useSendAgentMessage({
-    url: api.runCanvasExplore(canvasId!),
    beginParams,
  });

--- a/web/src/pages/agent/hooks/use-chat-logic.ts
+++ b/web/src/pages/agent/hooks/use-chat-logic.ts
@@ -8,7 +8,7 @@ type IAwaitCompentData = {
  derivedMessages: IMessage[];
  sendFormMessage: (params: {
    inputs: Record<string, BeginQuery>;
-    id: string;
+    agent_id: string;
  }) => void;
  canvasId: string;
 };
@@ -37,7 +37,7 @@ const useAwaitCompentData = (props: IAwaitCompentData) => {
      const nextInputs = buildBeginQueryWithObject(inputs, values);
      sendFormMessage({
        inputs: nextInputs,
-        id: canvasId,
+        agent_id: canvasId,
      });
    },
    [getInputs, sendFormMessage, canvasId],
--- a/web/src/pages/agent/hooks/use-run-dataflow.ts
+++ b/web/src/pages/agent/hooks/use-run-dataflow.ts
@@ -13,7 +13,7 @@ export function useRunDataflow({
 }: {
  showLogSheet: () => void;
 } & Pick<UseFetchLogReturnType, 'setMessageId'>) {
-  const { send } = useSendMessageBySSE(api.runCanvas);
+  const { send } = useSendMessageBySSE(api.agentChatCompletion);
  const { id } = useParams();
  const { saveGraph, loading } = useSaveGraph();
  const [uploadedFileData, setUploadedFileData] =
@@ -27,8 +27,9 @@ export function useRunDataflow({

      showLogSheet();
      const res = await send({
-        id,
+        agent_id: id,
        query: '',
+        'openai-compatible': false,
        session_id: null,
        files: [fileResponseData.file],
      });
--- a/web/src/pages/agent/setting-dialog/index.tsx
+++ b/web/src/pages/agent/setting-dialog/index.tsx
@@ -6,7 +6,7 @@ import {
  DialogHeader,
  DialogTitle,
 } from '@/components/ui/dialog';
-import { useSetAgentSetting } from '@/hooks/use-agent-request';
+import { useSetAgent } from '@/hooks/use-agent-request';
 import { IModalProps } from '@/interfaces/common';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,16 +18,16 @@ import {

 export function SettingDialog({ hideModal }: IModalProps<any>) {
  const { t } = useTranslation();
-  const { setAgentSetting } = useSetAgentSetting();
+  const { setAgent } = useSetAgent();

  const submit = useCallback(
    async (values: SettingFormSchemaType) => {
-      const code = await setAgentSetting(values);
-      if (code === 0) {
+      const ret = await setAgent(values);
+      if (ret?.code === 0) {
        hideModal?.();
      }
    },
-    [hideModal, setAgentSetting],
+    [hideModal, setAgent],
  );

  return (
--- a/web/src/pages/agent/share/index.tsx
+++ b/web/src/pages/agent/share/index.tsx
@@ -6,7 +6,7 @@ import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { useSyncThemeFromParams } from '@/components/theme-provider';
 import { MessageType } from '@/constants/chat';
-import { useUploadCanvasFileWithProgress } from '@/hooks/use-agent-request';
+import { useUploadAgentFileWithProgress } from '@/hooks/use-agent-request';
 import { cn } from '@/lib/utils';
 import i18n, { changeLanguageAsync } from '@/locales/config';
 import DebugContent from '@/pages/agent/debug-content';
@@ -33,8 +33,8 @@ const ChatContainer = () => {
  const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
    useClickDrawer();

-  const { uploadCanvasFile, loading } =
-    useUploadCanvasFileWithProgress(conversationId);
+  const { uploadAgentFile, loading } =
+    useUploadAgentFileWithProgress(conversationId);
  const {
    addEventList,
    setCurrentMessageId,
@@ -80,10 +80,10 @@ const ChatContainer = () => {
  const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
    useCallback(
      async (files, options) => {
-        const ret = await uploadCanvasFile({ files, options });
+        const ret = await uploadAgentFile({ files, options });
        appendUploadResponseList(ret.data, files);
      },
-      [appendUploadResponseList, uploadCanvasFile],
+      [appendUploadResponseList, uploadAgentFile],
    );

  React.useEffect(() => {
--- a/web/src/pages/agents/agent-dropdown.tsx
+++ b/web/src/pages/agents/agent-dropdown.tsx
@@ -37,7 +37,7 @@ export function AgentDropdown({
    );

  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
-    deleteAgent([agent.id]);
+    deleteAgent(agent.id);
  }, [agent.id, deleteAgent]);

  return (
--- a/web/src/pages/next-chats/share/index.tsx
+++ b/web/src/pages/next-chats/share/index.tsx
@@ -5,7 +5,7 @@ import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { useSyncThemeFromParams } from '@/components/theme-provider';
 import { MessageType, SharedFrom } from '@/constants/chat';
-import { useFetchFlowSSE } from '@/hooks/use-agent-request';
+import { useFetchSharedAgent } from '@/hooks/use-agent-request';
 import { useFetchExternalChatInfo } from '@/hooks/use-chat-request';
 import i18n, { changeLanguageAsync } from '@/locales/config';
 import { buildMessageUuidWithRole } from '@/utils/chat';
@@ -44,7 +44,7 @@ const ChatContainer = () => {
  const sendDisabled = useSendButtonDisabled(value);
  const { data: chatInfo } = useFetchExternalChatInfo();

-  const { data: flowData } = useFetchFlowSSE();
+  const { data: flowData } = useFetchSharedAgent();
  React.useEffect(() => {
    if (locale && i18n.language !== locale) {
      changeLanguageAsync(locale);
--- a/web/src/services/agent-service.ts
+++ b/web/src/services/agent-service.ts
@@ -8,25 +8,20 @@ import { registerNextServer } from '@/utils/register-server';
 import request from '@/utils/request';

 const {
-  getCanvasSSE,
-  setCanvas,
-  listCanvas,
-  resetCanvas,
-  removeCanvas,
-  runCanvas,
-  listTemplates,
+  createAgent,
+  updateAgent: updateAgentApi,
+  listAgents,
+  deleteAgent,
+  agentChatCompletion,
+  resetAgent,
+  listAgentTemplate,
  testDbConnect,
  getInputElements,
-  debug,
-  settingCanvas,
-  uploadCanvasFile,
  trace,
-  inputForm,
  fetchVersionList,
  fetchVersion,
-  fetchCanvas,
-  fetchAgentAvatar,
-  fetchAgentLogs,
+  getAgent,
+  fetchAgentSessions,
  fetchExternalAgentInputs,
  prompt,
  cancelDataflow,
@@ -34,16 +29,12 @@ const {
 } = api;

 const methods = {
-  fetchCanvas: {
-    url: fetchCanvas,
+  getAgent: {
+    url: getAgent,
    method: 'get',
  },
-  getCanvasSSE: {
-    url: getCanvasSSE,
-    method: 'get',
-  },
-  setCanvas: {
-    url: setCanvas,
+  createAgent: {
+    url: createAgent,
    method: 'post',
  },
  fetchVersionList: {
@@ -51,27 +42,28 @@ const methods = {
    method: 'get',
  },
  fetchVersion: {
-    url: fetchVersion,
+    url: (config: { agentId: string; versionId: string }) =>
+      fetchVersion(config.agentId, config.versionId),
    method: 'get',
  },
-  listCanvas: {
-    url: listCanvas,
+  listAgents: {
+    url: listAgents,
    method: 'get',
  },
-  resetCanvas: {
-    url: resetCanvas,
+  resetAgent: {
+    url: resetAgent,
    method: 'post',
  },
-  removeCanvas: {
-    url: removeCanvas,
+  deleteAgent: {
+    url: deleteAgent,
+    method: 'delete',
+  },
+  agentChatCompletion: {
+    url: agentChatCompletion,
    method: 'post',
  },
-  runCanvas: {
-    url: runCanvas,
-    method: 'post',
-  },
-  listTemplates: {
-    url: listTemplates,
+  listAgentTemplate: {
+    url: listAgentTemplate,
    method: 'get',
  },
  testDbConnect: {
@@ -83,31 +75,26 @@ const methods = {
    method: 'get',
  },
  debugSingle: {
-    url: debug,
+    url: (config: { agentId: string; componentId: string }) =>
+      api.debug(config.agentId, config.componentId),
    method: 'post',
  },
-  settingCanvas: {
-    url: settingCanvas,
-    method: 'post',
-  },
-  uploadCanvasFile: {
-    url: uploadCanvasFile,
+  uploadAgentFile: {
+    url: (config: { agentId: string }) => api.uploadAgentFile(config.agentId),
    method: 'post',
  },
  trace: {
-    url: trace,
+    url: (config: { agentId: string; messageId: string }) =>
+      trace(config.agentId, config.messageId),
    method: 'get',
  },
  inputForm: {
-    url: inputForm,
-    method: 'get',
-  },
-  fetchAgentAvatar: {
-    url: fetchAgentAvatar,
+    url: (config: { agentId: string; componentId: string }) =>
+      api.inputForm(config.agentId, config.componentId),
    method: 'get',
  },
  fetchAgentLogs: {
-    url: fetchAgentLogs,
+    url: fetchAgentSessions,
    method: 'get',
  },
  fetchExternalAgentInputs: {
@@ -127,15 +114,34 @@ const methods = {
    method: 'put',
  },
  createAgentSession: {
-    url: fetchAgentLogs,
-    method: 'put',
+    url: api.createAgentSession,
+    method: 'post',
  },
 } as const;

 const agentService = registerNextServer<keyof typeof methods>(methods);

+export const updateAgent = (
+  agentId: string,
+  params: {
+    title?: string;
+    dsl?: Record<string, any>;
+    avatar?: string;
+    description?: string | null;
+    permission?: string;
+    release?: string;
+  },
+) => {
+  return request(updateAgentApi(agentId), { method: 'put', data: params });
+};
+
 export const fetchTrace = (data: { canvas_id: string; message_id: string }) => {
-  return request.get(methods.trace.url, { params: data });
+  return request.get(
+    methods.trace.url({
+      agentId: data.canvas_id,
+      messageId: data.message_id,
+    }),
+  );
 };
 export const fetchAgentLogsByCanvasId = (
  canvasId: string,
@@ -145,11 +151,11 @@ export const fetchAgentLogsByCanvasId = (
 };

 export const fetchAgentLogsById = (canvasId: string, sessionId: string) => {
-  return request.get(api.fetchAgentLogsById(canvasId, sessionId));
+  return request.get(api.fetchAgentSessionById(canvasId, sessionId));
 };

 export const fetchPipeLineList = (params: IPipeLineListRequest) => {
-  return request.get(api.listCanvas, { params: params });
+  return request.get(api.listAgents, { params: params });
 };

 export const fetchWebhookTrace = (
@@ -160,11 +166,18 @@ export const fetchWebhookTrace = (
 };

 export function createAgentSession({ id, name }: { id: string; name: string }) {
-  return request.put(api.fetchAgentLogs(id), { data: { name } });
+  return request.post(api.createAgentSession(id), { data: { name } });
 }

 export const deleteAgentSession = (canvasId: string, sessionId: string) => {
-  return request.delete(api.fetchAgentLogsById(canvasId, sessionId));
+  return request.delete(api.fetchAgentSessionById(canvasId, sessionId));
+};
+
+export const uploadAgentFile = (agentId: string, data: FormData) => {
+  return request(api.uploadAgentFile(agentId), {
+    method: 'post',
+    data,
+  });
 };

 export default agentService;
--- a/web/src/utils/api.ts
+++ b/web/src/utils/api.ts
@@ -83,7 +83,7 @@ export default {
    `${restAPIv1}/datasets/${datasetId}/trace_raptor`,
  unbindPipelineTask: ({ kb_id, type }: { kb_id: string; type: string }) =>
    `${webAPI}/kb/unbind_task?kb_id=${kb_id}&pipeline_task_type=${type}`,
-  pipelineRerun: `${webAPI}/canvas/rerun`,
+  pipelineRerun: `${restAPIv1}/agents/rerun`,
  getMetaData: (datasetId: string) =>
    `${restAPIv1}/datasets/${datasetId}/metadata/summary`,
  updateDocumentsMetadata: (datasetId: string) =>
@@ -177,46 +177,45 @@ export default {
  setLangfuseConfig: `${restAPIv1}/langfuse/api-key`,

  // flow
-  listTemplates: `${webAPI}/canvas/templates`,
-  listCanvas: `${webAPI}/canvas/list`,
-  getCanvas: `${webAPI}/canvas/get`,
-  getCanvasSSE: (canvasId: string) => `${webAPI}/canvas/getsse/${canvasId}`,
-  removeCanvas: `${webAPI}/canvas/rm`,
-  setCanvas: `${webAPI}/canvas/set`,
-  settingCanvas: `${webAPI}/canvas/setting`,
-  getListVersion: `${webAPI}/canvas/getlistversion`,
-  getVersion: `${webAPI}/canvas/getversion`,
-  resetCanvas: `${webAPI}/canvas/reset`,
-  runCanvas: `${webAPI}/canvas/completion`,
-  testDbConnect: `${webAPI}/canvas/test_db_connect`,
+  listAgentTemplate: `${restAPIv1}/agents/templates`,
+  listAgents: `${restAPIv1}/agents`,
+  createAgent: `${restAPIv1}/agents`,
+  updateAgent: (agentId: string) => `${restAPIv1}/agents/${agentId}`,
+  deleteAgent: (agentId: string) => `${restAPIv1}/agents/${agentId}`,
+  agentChatCompletion: `${restAPIv1}/agents/chat/completion`,
+  resetAgent: (agentId: string) => `${restAPIv1}/agents/${agentId}/reset`,
+  testDbConnect: `${restAPIv1}/agents/test_db_connection`,
  getInputElements: `${webAPI}/canvas/input_elements`,
-  debug: `${webAPI}/canvas/debug`,
-  uploadCanvasFile: `${webAPI}/canvas/upload`,
-  trace: `${webAPI}/canvas/trace`,
+  debug: (agentId: string, componentId: string) =>
+    `${restAPIv1}/agents/${agentId}/components/${componentId}/debug`,
+  trace: (agentId: string, messageId: string) =>
+    `${restAPIv1}/agents/${agentId}/logs/${messageId}`,
  cancelCanvas: (taskId: string) => `${webAPI}/canvas/cancel/${taskId}`, // cancel conversation
  // agent
-  inputForm: `${webAPI}/canvas/input_form`,
-  fetchVersionList: (id: string) => `${webAPI}/canvas/getlistversion/${id}`,
-  fetchVersion: (id: string) => `${webAPI}/canvas/getversion/${id}`,
-  fetchCanvas: (id: string) => `${webAPI}/canvas/get/${id}`,
-  fetchAgentAvatar: (id: string) => `${webAPI}/canvas/getsse/${id}`,
-  uploadAgentFile: (id?: string) => `${webAPI}/canvas/upload/${id}`,
+  inputForm: (agentId: string, componentId: string) =>
+    `${restAPIv1}/agents/${agentId}/components/${componentId}/input-form`,
+  fetchVersionList: (id: string) => `${restAPIv1}/agents/${id}/versions`,
+  fetchVersion: (agentId: string, versionId: string) =>
+    `${restAPIv1}/agents/${agentId}/versions/${versionId}`,
+  getAgent: (id: string) => `${restAPIv1}/agents/${id}`,
+  uploadAgentFile: (id?: string) => `${restAPIv1}/agents/${id}/upload`,
+  createAgentSession: (agentId: string) =>
+    `${restAPIv1}/agents/${agentId}/sessions`,
  fetchAgentLogs: (canvasId: string) => `${webAPI}/canvas/${canvasId}/sessions`,
-  fetchAgentLogsById: (canvasId: string, sessionId: string) =>
-    `${webAPI}/canvas/${canvasId}/sessions/${sessionId}`,
+  fetchAgentSessions: (agentId: string) =>
+    `${restAPIv1}/agents/${agentId}/sessions`,
+  fetchAgentSessionById: (agentId: string, sessionId: string) =>
+    `${restAPIv1}/agents/${agentId}/sessions/${sessionId}`,
  fetchExternalAgentInputs: (canvasId: string) =>
    `${restAPIv1}/agentbots/${canvasId}/inputs`,
-  prompt: `${webAPI}/canvas/prompts`,
+  prompt: `${restAPIv1}/agents/prompts`,
  cancelDataflow: (id: string) => `${webAPI}/canvas/cancel/${id}`,
-  downloadFile: `${webAPI}/canvas/download`,
+  downloadFile: `${restAPIv1}/agents/download`,
  testWebhook: (id: string) => `${restAPIv1}/webhook_test/${id}`,
  fetchWebhookTrace: (id: string) => `${restAPIv1}/webhook_trace/${id}`,

  // explore

-  runCanvasExplore: (canvasId: string) =>
-    `${webAPI}/canvas/${canvasId}/completion`,
-
  // mcp server
  listMcpServer: `${restAPIv1}/mcp/servers`,
  getMcpServer: (id: string) => `${restAPIv1}/mcp/servers/${id}`,