feat(agent): implement agent management UI and operations

src/hooks/agent-hooks.ts

@@ -1,8 +1,10 @@
 import { useState, useCallback, useEffect } from 'react';
 import agentService from '@/services/agent_service';
 import type { IFlow } from '@/interfaces/database/agent';
-import type { IAgentPaginationParams } from '@/interfaces/request/agent';
+import type { IAgentPaginationParams, IAgentCreateRequestBody, IAgentSettingRequestBody } from '@/interfaces/request/agent';
 import logger from '@/utils/logger';
+import { useTranslation } from 'react-i18next';
+import { useSnackbar } from '@/hooks/useSnackbar';
 
 export interface UseAgentListState {
   agents: IFlow[];
@@ -79,4 +81,80 @@ export const useAgentList = (initialParams?: IAgentPaginationParams) => {
     setPageSize,
     refresh,
   };
-};
+};
+
+
+export function useAgentOperations() {
+  const { t } = useTranslation();
+  const { showMessage } = useSnackbar();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const createAgent = useCallback(async (body: IAgentCreateRequestBody) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const res = await agentService.setCanvas(body);
+      const newId = res?.data?.data?.id || res?.data?.id;
+      showMessage.success(t('agent.createAgentSuccess'));
+      return { success: true, id: newId } as const;
+    } catch (err: any) {
+      const errorMessage = err?.response?.data?.message || err?.message || t('agent.createAgentFailed');
+      setError(errorMessage);
+      showMessage.error(errorMessage);
+      return { success: false, error: errorMessage } as const;
+    } finally {
+      setLoading(false);
+    }
+  }, [t, showMessage]);
+
+  const editAgent = useCallback(async (data: Partial<IAgentSettingRequestBody>) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const res = await agentService.settingAgent(data);
+      const code = res?.data?.code;
+      if (code === 0) {
+        showMessage.success(t('message.updated'));
+        return { success: true } as const;
+      }
+      const msg = res?.data?.message || t('common.operationFailed');
+      showMessage.error(msg);
+      return { success: false, error: msg } as const;
+    } catch (err: any) {
+      const errorMessage = err?.response?.data?.message || err?.message || t('common.operationFailed');
+      setError(errorMessage);
+      showMessage.error(errorMessage);
+      return { success: false, error: errorMessage } as const;
+    } finally {
+      setLoading(false);
+    }
+  }, [t, showMessage]);
+
+  const deleteAgents = useCallback(async (ids: string[]) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const res = await agentService.removeCanvas(ids);
+      const code = res?.data?.code;
+      if (code === 0) {
+        showMessage.success(t('message.deleted'));
+        return { success: true } as const;
+      }
+      const msg = res?.data?.message || t('common.operationFailed');
+      showMessage.error(msg);
+      return { success: false, error: msg } as const;
+    } catch (err: any) {
+      const errorMessage = err?.response?.data?.message || err?.message || t('common.operationFailed');
+      setError(errorMessage);
+      showMessage.error(errorMessage);
+      return { success: false, error: errorMessage } as const;
+    } finally {
+      setLoading(false);
+    }
+  }, [t, showMessage]);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  return { loading, error, createAgent, editAgent, deleteAgents, clearError };
+}