feat(chrome-recorder): support export all event to document (#973)

* feat(chrome-extension): add export all events functionality and update dependencies

- Implemented the ability to export all recorded events to a ZIP file, including screenshots and event details.
- Added new utility functions for generating markdown reports and Mermaid mindmaps.
- Updated package dependencies: added , , and  to handle file exports.
- Enhanced the recorder component to include an export button for all events.

* feat(chrome-extension): implement AI-powered mindmap generation and enhance export functionality

- Added a new function to generate AI-powered mindmaps based on recorded session events, improving visualization of user journeys.
- Updated the export functionality to include the AI-generated mindmap in the test report.
- Refactored existing mindmap generation logic for better organization and clarity.
- Enhanced error handling during the export process to provide user feedback on success or failure.
- Improved UI layout for the export button in the RecordList component.

* chore(ci): fix unit ai test

* fix(tests): change export from 'export const' to 'const' in playwright-generator test files

* refactor(chrome-extension): update export button UI in RecordList component

- Replaced the existing export button with a more user-friendly design, featuring a bold label and an icon for exporting events.
- Improved layout and styling for better visibility and interaction.

* refactor(chrome-extension): remove static mindmap generation and enhance event report formatting

- Removed the outdated static mindmap generation function to streamline code.
- Updated the event report markdown table to include separate columns for before and after screenshots.
- Improved the structure of the element description guidelines in the AI model prompt for clarity and precision.

* refactor(chrome-extension): improve code formatting in RecordList component

- Enhanced code readability by adjusting formatting and indentation in the RecordList component.
- Standardized class attribute quotes and improved the layout of JSX elements for better maintainability.

* chore: optimize refresh or open new tab click event

* refactor(recorder): enhance label click handling and add XPath support

- Updated the EventRecorder to include XPath information for label elements, improving the accuracy of event tracking.
- Modified the checkLabelClick method to utilize the new XPath feature, allowing for more precise event handling.
- Improved the structure of the element description guidelines in the snapshot tests for clarity and consistency.

* chore: merge main branch

* chore: merge main branch

* feat(ai): add callAiFnWithStringResponse for string responses (#989)

---------

Co-authored-by: zhouxiao.shaw <[email protected]>

* refactor(recorder): streamline ProgressModal code and improve download success messages

- Refactored the streaming callback handler for better readability and consistency.
- Updated success messages for downloaded Playwright and YAML scripts to clarify the content type.

* chore: merge main branch

* chore: fix lint error

---------

Co-authored-by: yuyutaotao <[email protected]>

Author: zhoushaw

apps/chrome-extension/package.json

@@ -17,10 +17,13 @@
     "@midscene/shared": "workspace:*",
     "@midscene/visualizer": "workspace:*",
     "@midscene/web": "workspace:*",
+    "@types/file-saver": "2.0.7",
     "antd": "^5.21.6",
     "canvas-confetti": "1.9.3",
     "dayjs": "^1.11.11",
+    "file-saver": "2.0.5",
     "highlight.js": "11.11.1",
+    "jszip": "3.10.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-highlight": "0.15.0",

apps/chrome-extension/src/extension/recorder/components/ProgressModal.tsx

@@ -612,7 +612,7 @@ export const ProgressModal: React.FC<ProgressModalProps> = ({
 
     URL.revokeObjectURL(url);
     message.success(
-      `Playwright test for "${downloadSessionName}" downloaded successfully`,
+      `Playwright script for "${downloadSessionName}" downloaded successfully`,
     );
   };
 
@@ -632,7 +632,7 @@ export const ProgressModal: React.FC<ProgressModalProps> = ({
 
     URL.revokeObjectURL(url);
     message.success(
-      `YAML test for "${downloadSessionName}" downloaded successfully`,
+      `YAML script for "${downloadSessionName}" downloaded successfully`,
     );
   };
 

apps/chrome-extension/src/extension/recorder/components/RecordList.tsx

@@ -31,6 +31,7 @@ interface RecordListProps {
   onEditSession: (session: RecordingSession) => void;
   onDeleteSession: (sessionId: string) => void;
   onExportSession: (session: RecordingSession) => void;
+  onExportAllEvents: () => void;
   onViewDetail: (session: RecordingSession) => void;
   isExtensionMode: boolean;
   handleCreateNewSession: () => void;
@@ -42,19 +43,34 @@ export const RecordList: React.FC<RecordListProps> = ({
   onEditSession,
   onDeleteSession,
   onExportSession,
+  onExportAllEvents,
   onViewDetail,
   isExtensionMode,
   handleCreateNewSession,
 }) => {
   const { config } = useEnvConfig();
 
   const runButtonEnabled = Object.keys(config || {}).length >= 1;
+  const hasEventsToExport = sessions.some(
+    (session) => session.events.length > 0,
+  );
 
   return (
     <div className="record-list-view relative">
       {/* Environment setup reminder */}
       <EnvConfigReminder />
 
+      {/* Export All Events Button */}
+      {hasEventsToExport && (
+        <div className="h-[30px] font-bold text-[14px] p-[5px]">
+          <span>Record All</span>
+          <DownloadOutlined
+            onClick={onExportAllEvents}
+            className="cursor-pointer float-right"
+          />
+        </div>
+      )}
+
       {!isExtensionMode && (
         <Alert
           message="Limited Functionality"

apps/chrome-extension/src/extension/recorder/hooks/useRecordingSession.ts

@@ -6,7 +6,11 @@ import {
   useRecordingSessionStore,
 } from '../../../store';
 import { recordLogger } from '../logger';
-import { exportEventsToFile, generateDefaultSessionName } from '../utils';
+import {
+  exportAllEventsToZip,
+  exportEventsToFile,
+  generateDefaultSessionName,
+} from '../utils';
 
 export const useRecordingSession = (currentTab: chrome.tabs.Tab | null) => {
   const {
@@ -173,6 +177,26 @@ export const useRecordingSession = (currentTab: chrome.tabs.Tab | null) => {
     exportEventsToFile(session.events, session.name);
   }, []);
 
+  // Export all sessions events to ZIP
+  const handleExportAllEvents = useCallback(async () => {
+    recordLogger.info('Exporting all events', {
+      sessionsCount: sessions.length,
+    });
+    const hideLoading = message.loading(
+      'Exporting all events to ZIP file...',
+      0,
+    );
+    try {
+      await exportAllEventsToZip(sessions);
+      message.success('Export all events to ZIP file successfully');
+    } catch (error) {
+      message.error('Failed to export all events to ZIP file');
+      throw error;
+    } finally {
+      hideLoading();
+    }
+  }, [sessions]);
+
   return {
     // State
     sessions,
@@ -187,5 +211,6 @@ export const useRecordingSession = (currentTab: chrome.tabs.Tab | null) => {
     handleDeleteSession,
     handleSelectSession,
     handleExportSession,
+    handleExportAllEvents,
   };
 };

apps/chrome-extension/src/extension/recorder/index.tsx

@@ -88,6 +88,7 @@ export default function Recorder() {
     handleUpdateSession,
     handleDeleteSession,
     handleExportSession,
+    handleExportAllEvents,
   } = sessionHooks;
 
   // Initialize recording control with currentTab
@@ -235,6 +236,7 @@ export default function Recorder() {
         onEditSession={handleEditSession}
         onDeleteSession={handleDeleteSessionWrapper}
         onExportSession={handleExportSession}
+        onExportAllEvents={handleExportAllEvents}
         onViewDetail={handleViewDetail}
         isExtensionMode={isExtensionMode}
         handleCreateNewSession={handleCreateNewSession}