Feat: Cancel a running data flow test #9869 (#10257)

### What problem does this PR solve?

Feat: Cancel a running data flow test #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/data-flow/hooks/use-cancel-dataflow.ts

@@ -0,0 +1,24 @@
+import { useCancelDataflow } from '@/hooks/use-agent-request';
+import { useCallback } from 'react';
+
+export function useCancelCurrentDataflow({
+  messageId,
+  setMessageId,
+  hideLogSheet,
+}: {
+  messageId: string;
+  setMessageId: (messageId: string) => void;
+  hideLogSheet(): void;
+}) {
+  const { cancelDataflow } = useCancelDataflow();
+
+  const handleCancel = useCallback(async () => {
+    const code = await cancelDataflow(messageId);
+    if (code === 0) {
+      setMessageId('');
+      hideLogSheet();
+    }
+  }, [cancelDataflow, hideLogSheet, messageId, setMessageId]);
+
+  return { handleCancel };
+}