feat: add reset functionality to reset all states

src/components/molecules/BrowserRecordingSave.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 import { Grid, Button, Box, Typography } from '@mui/material';
 import { SaveRecording } from "./SaveRecording";
 import { useGlobalInfoStore } from '../../context/globalInfo';
+import { useActionContext } from '../../context/browserActions';
+import { useBrowserSteps } from '../../context/browserSteps';
 import { stopRecording } from "../../api/recording";
 import { useNavigate } from 'react-router-dom';
 import { GenericModal } from "../atoms/GenericModal";
@@ -9,10 +11,27 @@ import { useTranslation } from 'react-i18next';
 
 const BrowserRecordingSave = () => {
   const { t } = useTranslation();
-  const [openModal, setOpenModal] = useState<boolean>(false);
+  const [openDiscardModal, setOpenDiscardModal] = useState<boolean>(false);
-  const { recordingName, browserId, setBrowserId, notify } = useGlobalInfoStore();
+  const [openResetModal, setOpenResetModal] = useState<boolean>(false);
+  const { recordingName, browserId, setBrowserId, notify, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
   const navigate = useNavigate();
 
+  const { 
+    stopGetText, 
+    stopGetList, 
+    stopGetScreenshot,
+    stopPaginationMode,
+    stopLimitMode,
+    setCaptureStage,
+    updatePaginationType,
+    updateLimitType,
+    updateCustomLimit,
+    setShowLimitOptions,
+    setShowPaginationOptions,
+  } = useActionContext();
+
+  const { browserSteps, deleteBrowserStep } = useBrowserSteps();
+
   const goToMainMenu = async () => {
     if (browserId) {
       await stopRecording(browserId);
@@ -22,6 +41,41 @@ const BrowserRecordingSave = () => {
     navigate('/');
   };
 
+  const performReset = () => {
+    stopGetText();
+    stopGetList();
+    stopGetScreenshot();
+    stopPaginationMode();
+    stopLimitMode();
+    
+    setShowLimitOptions(false);
+    setShowPaginationOptions(false);
+    setCaptureStage('initial');
+
+    updatePaginationType('');
+    updateLimitType('');
+    updateCustomLimit('');
+
+    setCurrentWorkflowActionsState({
+      hasScrapeListAction: false,
+      hasScreenshotAction: false,
+      hasScrapeSchemaAction: false
+    });
+
+    resetInterpretationLog();
+
+    // Clear all browser steps
+    browserSteps.forEach(step => {
+      deleteBrowserStep(step.id);
+    });
+
+    // Close the reset confirmation modal
+    setOpenResetModal(false);
+
+    // Notify user
+    notify('info', t('browser_recording.notifications.environment_reset'));
+  };
+
   return (
     <Grid container>
       <Grid item xs={12} md={3} lg={3}>
@@ -38,28 +92,76 @@ const BrowserRecordingSave = () => {
           display: 'flex',
           justifyContent: 'space-between',
         }}>
-          <Button onClick={() => setOpenModal(true)} variant="outlined" style={{ marginLeft: "25px" }} size="small" color="error">
+          <Button 
+            onClick={() => setOpenDiscardModal(true)} 
+            variant="outlined" 
+            style={{ marginLeft: "25px" }} 
+            size="small" 
+            color="error"
+          >
             {t('right_panel.buttons.discard')}
           </Button>
-          <GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
+
+          {/* Reset Button */}
+          <Button
+            onClick={() => setOpenResetModal(true)}
+            variant="outlined"
+            size="small"
+            style={{ 
+              backgroundColor: 'white',
+              marginLeft: '10px',
+              marginRight: '10px'
+            }}
+          >
+            {t('right_panel.buttons.reset')}
+          </Button>
+
+          <SaveRecording fileName={recordingName} />
+
+          {/* Discard Confirmation Modal */}
+          <GenericModal isOpen={openDiscardModal} onClose={() => setOpenDiscardModal(false)} modalStyle={modalStyle}>
             <Box p={2}>
               <Typography variant="h6">{t('browser_recording.modal.confirm_discard')}</Typography>
               <Box display="flex" justifyContent="space-between" mt={2}>
                 <Button onClick={goToMainMenu} variant="contained" color="error">
                   {t('right_panel.buttons.discard')}
                 </Button>
-                <Button onClick={() => setOpenModal(false)} variant="outlined">
+                <Button onClick={() => setOpenDiscardModal(false)} variant="outlined">
+                  {t('right_panel.buttons.cancel')}
+                </Button>
+              </Box>
+            </Box>
+          </GenericModal>
+
+          {/* Reset Confirmation Modal */}
+          <GenericModal isOpen={openResetModal} onClose={() => setOpenResetModal(false)} modalStyle={modalStyle}>
+            <Box p={2}>
+              <Typography variant="h6">{t('browser_recording.modal.confirm_reset')}</Typography>
+              <Typography variant="body2" sx={{ mt: 1, mb: 2 }}>
+                {t('browser_recording.modal.reset_warning')}
+              </Typography>
+              <Box display="flex" justifyContent="space-between" mt={2}>
+                <Button 
+                  onClick={performReset} 
+                  variant="contained" 
+                  color="primary"
+                >
+                  {t('right_panel.buttons.confirm_reset')}
+                </Button>
+                <Button 
+                  onClick={() => setOpenResetModal(false)} 
+                  variant="outlined"
+                >
                   {t('right_panel.buttons.cancel')}
                 </Button>
               </Box>
             </Box>
           </GenericModal>
-          <SaveRecording fileName={recordingName} />
         </div>
       </Grid>
     </Grid>
   );
-}
+};
 
 export default BrowserRecordingSave;