feat: allow multiple capture action execution

src/components/recorder/RightSidePanel.tsx

@@ -34,9 +34,6 @@ const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) =
   ).catch((error) => { console.log(error.message) })
 };
 
-// TODO: 
-// 1. Add description for each browser step
-// 2. Handle non custom action steps
 interface RightSidePanelProps {
   onFinishCapture: () => void;
 }
@@ -46,8 +43,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const [errors, setErrors] = useState<{ [id: string]: string }>({});
   const [confirmedTextSteps, setConfirmedTextSteps] = useState<{ [id: string]: boolean }>({});
   const [confirmedListTextFields, setConfirmedListTextFields] = useState<{ [listId: string]: { [fieldKey: string]: boolean } }>({});
-  // const [showPaginationOptions, setShowPaginationOptions] = useState(false);
-  // const [showLimitOptions, setShowLimitOptions] = useState(false);
   const [showCaptureList, setShowCaptureList] = useState(true);
   const [showCaptureScreenshot, setShowCaptureScreenshot] = useState(true);
   const [showCaptureText, setShowCaptureText] = useState(true);
@@ -58,15 +53,31 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const { panelHeight } = useBrowserDimensionsStore();
 
   const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
-  const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage, showPaginationOptions, setShowPaginationOptions, showLimitOptions, setShowLimitOptions, workflow, setWorkflow } = useActionContext();
+  const { 
+    getText, startGetText, stopGetText, 
+    getList, startGetList, stopGetList, 
+    getScreenshot, startGetScreenshot, stopGetScreenshot, 
+    startPaginationMode, stopPaginationMode, 
+    paginationType, updatePaginationType, 
+    limitType, customLimit, updateLimitType, updateCustomLimit, 
+    stopLimitMode, startLimitMode, 
+    captureStage, setCaptureStage, 
+    showPaginationOptions, setShowPaginationOptions, 
+    showLimitOptions, setShowLimitOptions, 
+    workflow, setWorkflow, 
+    activeAction, setActiveAction, 
+    startAction, finishAction 
+  } = useActionContext();
+  
   const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField } = useBrowserSteps();
   const { id, socket } = useSocketStore();
   const { t } = useTranslation();
 
+  const isAnyActionActive = activeAction !== 'none';
+
   const workflowHandler = useCallback((data: WorkflowFile) => {
     setWorkflow(data);
-    //setRecordingLength(data.workflow.length);
+  }, [setWorkflow]);
-  }, [])
 
   useEffect(() => {
     if (socket) {
@@ -113,12 +124,10 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       hasScrapeSchemaAction,
     });
 
-    const shouldHideActions = hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction;
+    setShowCaptureList(true);
-
+    setShowCaptureScreenshot(true);
-    setShowCaptureList(!shouldHideActions);
+    setShowCaptureText(true);
-    setShowCaptureScreenshot(!shouldHideActions);
+  }, [workflow, setCurrentWorkflowActionsState]);
-    setShowCaptureText(!(hasScrapeListAction || hasScreenshotAction));
-  }, [workflow]);
 
   const handleMouseEnter = (id: number) => {
     setHoverStates(prev => ({ ...prev, [id]: true }));
@@ -128,8 +137,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     setHoverStates(prev => ({ ...prev, [id]: false }));
   };
 
-  const handlePairDelete = () => { }
-
   const handleStartGetText = () => {
     setIsCaptureTextConfirmed(false);
     startGetText();
@@ -140,6 +147,10 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     startGetList();
   }
 
+  const handleStartGetScreenshot = () => {
+    startGetScreenshot();
+  };
+
   const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => {
     if (listId !== undefined && fieldKey !== undefined) {
       // Prevent editing if the field is confirmed
@@ -253,7 +264,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     return settings;
   }, [browserSteps, browserStepIdList]);
 
-
   const stopCaptureAndEmitGetTextSettings = useCallback(() => {
     const hasUnconfirmedTextSteps = browserSteps.some(step => step.type === 'text' && !confirmedTextSteps[step.id]);
     if (hasUnconfirmedTextSteps) {
@@ -268,8 +278,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     }
     setIsCaptureTextConfirmed(true);
     resetInterpretationLog();
+    finishAction('text'); 
     onFinishCapture();
-  }, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps, resetInterpretationLog]);
+  }, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps, resetInterpretationLog, finishAction, notify, onFinishCapture, t]);
 
   const getListSettingsObject = useCallback(() => {
     let settings: {
@@ -311,7 +322,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     setShowLimitOptions(false);
     updateLimitType('');
     updateCustomLimit('');
-  }, [updatePaginationType, updateLimitType, updateCustomLimit]);
+  }, [setShowPaginationOptions, updatePaginationType, setShowLimitOptions, updateLimitType, updateCustomLimit]);
 
   const handleStopGetList = useCallback(() => {
     stopGetList();
@@ -326,10 +337,15 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       notify('error', t('right_panel.errors.unable_create_settings'));
     }
     handleStopGetList();
+    finishAction('list');
     onFinishCapture();
-  }, [stopGetList, getListSettingsObject, socket, notify, handleStopGetList]);
+  }, [getListSettingsObject, socket, notify, handleStopGetList, finishAction, onFinishCapture, t]);
 
-  const hasUnconfirmedListTextFields = browserSteps.some(step => step.type === 'list' && Object.values(step.fields).some(field => !confirmedListTextFields[step.id]?.[field.id]));
+  const hasUnconfirmedListTextFields = browserSteps.some(step => 
+    step.type === 'list' && Object.values(step.fields).some(field => 
+      !confirmedListTextFields[step.id]?.[field.id]
+    )
+  );
 
   const handleConfirmListCapture = useCallback(() => {
     switch (captureStage) {
@@ -378,7 +394,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
         setCaptureStage('initial');
         break;
     }
-  }, [captureStage, paginationType, limitType, customLimit, startPaginationMode, stopPaginationMode, startLimitMode, stopLimitMode, notify, stopCaptureAndEmitGetListSettings, getListSettingsObject]);
+  }, [captureStage, paginationType, limitType, customLimit, startPaginationMode, setShowPaginationOptions, setCaptureStage, getListSettingsObject, notify, stopPaginationMode, startLimitMode, setShowLimitOptions, stopLimitMode, setIsCaptureListConfirmed, stopCaptureAndEmitGetListSettings, t]);
 
   const handleBackCaptureList = useCallback(() => {
     switch (captureStage) {
@@ -395,7 +411,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
         setCaptureStage('initial');
         break;
     }
-  }, [captureStage, stopLimitMode, startPaginationMode, stopPaginationMode]);
+  }, [captureStage, stopLimitMode, setShowLimitOptions, startPaginationMode, setShowPaginationOptions, setCaptureStage, stopPaginationMode]);
 
   const handlePaginationSettingSelect = (option: PaginationType) => {
     updatePaginationType(option);
@@ -413,7 +429,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     setConfirmedTextSteps({});
     setIsCaptureTextConfirmed(false);
     notify('error', t('right_panel.errors.capture_text_discarded'));
-  }, [browserSteps, stopGetText, deleteBrowserStep]);
+  }, [browserSteps, stopGetText, deleteBrowserStep, notify, t]);
 
   const discardGetList = useCallback(() => {
     stopGetList();
@@ -429,8 +445,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     setConfirmedListTextFields({});
     setIsCaptureListConfirmed(false);
     notify('error', t('right_panel.errors.capture_list_discarded'));
-  }, [browserSteps, stopGetList, deleteBrowserStep, resetListState]);
+  }, [browserSteps, stopGetList, deleteBrowserStep, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t]);
-
 
   const captureScreenshot = (fullPage: boolean) => {
     const screenshotSettings: ScreenshotSettings = {
@@ -444,10 +459,11 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     socket?.emit('action', { action: 'screenshot', settings: screenshotSettings });
     addScreenshotStep(fullPage);
     stopGetScreenshot();
+    finishAction('screenshot');
+    onFinishCapture();
   };
 
   const isConfirmCaptureDisabled = useMemo(() => {
-    // Check if we are in the initial stage and if there are no browser steps or no valid list selectors with fields
     if (captureStage !== 'initial') return false;
 
     const hasValidListSelector = browserSteps.some(step =>
@@ -456,7 +472,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       Object.keys(step.fields).length > 0
     );
 
-    // Disable the button if there are no valid list selectors or if there are unconfirmed list text fields
     return !hasValidListSelector || hasUnconfirmedListTextFields;
   }, [captureStage, browserSteps, hasUnconfirmedListTextFields]);
 
@@ -465,15 +480,41 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
 
   return (
     <Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
-      {/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
-        <Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
-      </SimpleBox> */}
       <ActionDescriptionBox isDarkMode={isDarkMode} />
       <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
-        {!getText && !getScreenshot && !getList && showCaptureList && <Button variant="contained" onClick={startGetList}>{t('right_panel.buttons.capture_list')}</Button>}
+        {!isAnyActionActive && (
+          <>
+            {showCaptureList && (
+              <Button 
+                variant="contained" 
+                onClick={handleStartGetList}
+              >
+                {t('right_panel.buttons.capture_list')}
+              </Button>
+            )}
+
+            {showCaptureText && (
+              <Button 
+                variant="contained" 
+                onClick={handleStartGetText}
+              >
+                {t('right_panel.buttons.capture_text')}
+              </Button>
+            )}
+
+            {showCaptureScreenshot && (
+              <Button 
+                variant="contained" 
+                onClick={handleStartGetScreenshot}
+              >
+                {t('right_panel.buttons.capture_screenshot')}
+              </Button>
+            )}
+          </>
+        )}
 
         {getList && (
-          <>
+          <Box>
             <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
               {(captureStage === 'pagination' || captureStage === 'limit') && (
                 <Button
@@ -511,126 +552,125 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                   color: 'red !important',
                   borderColor: 'red !important',
                   backgroundColor: 'whitesmoke !important',
-                }} >
+                }}
+              >
                 {t('right_panel.buttons.discard')}
               </Button>
             </Box>
-          </>
+          
-        )}
+            {showPaginationOptions && (
-        {showPaginationOptions && (
+              <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
-          <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
+                <Typography>{t('right_panel.pagination.title')}</Typography>
-            <Typography>{t('right_panel.pagination.title')}</Typography>
+                <Button
-            <Button
+                  variant={paginationType === 'clickNext' ? "contained" : "outlined"}
-              variant={paginationType === 'clickNext' ? "contained" : "outlined"}
+                  onClick={() => handlePaginationSettingSelect('clickNext')}
-              onClick={() => handlePaginationSettingSelect('clickNext')}
+                  sx={{
-              sx={{
+                    color: paginationType === 'clickNext' ? 'whitesmoke !important' : '#ff00c3 !important',
-                color: paginationType === 'clickNext' ? 'whitesmoke !important' : '#ff00c3 !important',
+                    borderColor: '#ff00c3 !important',
-                borderColor: '#ff00c3 !important',
+                    backgroundColor: paginationType === 'clickNext' ? '#ff00c3 !important' : 'whitesmoke !important',
-                backgroundColor: paginationType === 'clickNext' ? '#ff00c3 !important' : 'whitesmoke !important',
+                  }}>
-              }}>
+                  {t('right_panel.pagination.click_next')}
-              {t('right_panel.pagination.click_next')}
+                </Button>
-            </Button>
+                <Button
-            <Button
+                  variant={paginationType === 'clickLoadMore' ? "contained" : "outlined"}
-              variant={paginationType === 'clickLoadMore' ? "contained" : "outlined"}
+                  onClick={() => handlePaginationSettingSelect('clickLoadMore')}
-              onClick={() => handlePaginationSettingSelect('clickLoadMore')}
+                  sx={{
-              sx={{
+                    color: paginationType === 'clickLoadMore' ? 'whitesmoke !important' : '#ff00c3 !important',
-                color: paginationType === 'clickLoadMore' ? 'whitesmoke !important' : '#ff00c3 !important',
+                    borderColor: '#ff00c3 !important',
-                borderColor: '#ff00c3 !important',
+                    backgroundColor: paginationType === 'clickLoadMore' ? '#ff00c3 !important' : 'whitesmoke !important',
-                backgroundColor: paginationType === 'clickLoadMore' ? '#ff00c3 !important' : 'whitesmoke !important',
+                  }}>
-              }}>
+                  {t('right_panel.pagination.click_load_more')}
-              {t('right_panel.pagination.click_load_more')}
+                </Button>
-            </Button>
+                <Button
-            <Button
+                  variant={paginationType === 'scrollDown' ? "contained" : "outlined"}
-              variant={paginationType === 'scrollDown' ? "contained" : "outlined"}
+                  onClick={() => handlePaginationSettingSelect('scrollDown')}
-              onClick={() => handlePaginationSettingSelect('scrollDown')}
+                  sx={{
-              sx={{
+                    color: paginationType === 'scrollDown' ? 'whitesmoke !important' : '#ff00c3 !important',
-                color: paginationType === 'scrollDown' ? 'whitesmoke !important' : '#ff00c3 !important',
+                    borderColor: '#ff00c3 !important',
-                borderColor: '#ff00c3 !important',
+                    backgroundColor: paginationType === 'scrollDown' ? '#ff00c3 !important' : 'whitesmoke !important',
-                backgroundColor: paginationType === 'scrollDown' ? '#ff00c3 !important' : 'whitesmoke !important',
+                  }}>
-              }}>
+                  {t('right_panel.pagination.scroll_down')}
-              {t('right_panel.pagination.scroll_down')}
+                </Button>
-            </Button>
+                <Button
-            <Button
+                  variant={paginationType === 'scrollUp' ? "contained" : "outlined"}
-              variant={paginationType === 'scrollUp' ? "contained" : "outlined"}
+                  onClick={() => handlePaginationSettingSelect('scrollUp')}
-              onClick={() => handlePaginationSettingSelect('scrollUp')}
+                  sx={{
-              sx={{
+                    color: paginationType === 'scrollUp' ? 'whitesmoke !important' : '#ff00c3 !important',
-                color: paginationType === 'scrollUp' ? 'whitesmoke !important' : '#ff00c3 !important',
+                    borderColor: '#ff00c3 !important',
-                borderColor: '#ff00c3 !important',
+                    backgroundColor: paginationType === 'scrollUp' ? '#ff00c3 !important' : 'whitesmoke !important',
-                backgroundColor: paginationType === 'scrollUp' ? '#ff00c3 !important' : 'whitesmoke !important',
+                  }}>
-              }}>
+                  {t('right_panel.pagination.scroll_up')}
-              {t('right_panel.pagination.scroll_up')}
+                </Button>
-            </Button>
+                <Button
-            <Button
+                  variant={paginationType === 'none' ? "contained" : "outlined"}
-              variant={paginationType === 'none' ? "contained" : "outlined"}
+                  onClick={() => handlePaginationSettingSelect('none')}
-              onClick={() => handlePaginationSettingSelect('none')}
+                  sx={{
-              sx={{
+                    color: paginationType === 'none' ? 'whitesmoke !important' : '#ff00c3 !important',
-                color: paginationType === 'none' ? 'whitesmoke !important' : '#ff00c3 !important',
+                    borderColor: '#ff00c3 !important',
-                borderColor: '#ff00c3 !important',
+                    backgroundColor: paginationType === 'none' ? '#ff00c3 !important' : 'whitesmoke !important',
-                backgroundColor: paginationType === 'none' ? '#ff00c3 !important' : 'whitesmoke !important',
+                  }}>
-              }}>
+                  {t('right_panel.pagination.none')}</Button>
-              {t('right_panel.pagination.none')}</Button>
+              </Box>
+            )}
+          
+            {showLimitOptions && (
+              <FormControl>
+                <FormLabel>
+                  <h4>{t('right_panel.limit.title')}</h4>
+                </FormLabel>
+                <RadioGroup
+                  value={limitType}
+                  onChange={(e) => updateLimitType(e.target.value as LimitType)}
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '500px'
+                  }}
+                >
+                  <FormControlLabel value="10" control={<Radio />} label="10" />
+                  <FormControlLabel value="100" control={<Radio />} label="100" />
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <FormControlLabel value="custom" control={<Radio />} label={t('right_panel.limit.custom')} />
+                    {limitType === 'custom' && (
+                      <TextField
+                        type="number"
+                        value={customLimit}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          const value = parseInt(e.target.value);
+                          if (e.target.value === '' || value >= 1) {
+                            updateCustomLimit(e.target.value);
+                          }
+                        }}
+                        inputProps={{
+                          min: 1,
+                          onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => {
+                            const value = (e.target as HTMLInputElement).value + e.key;
+                            if (parseInt(value) < 1) {
+                              e.preventDefault();
+                            }
+                          }
+                        }}
+                        placeholder={t('right_panel.limit.enter_number')}
+                        sx={{
+                          marginLeft: '10px',
+                          '& input': {
+                            padding: '10px',
+                          },
+                          width: '150px',
+                          background: isDarkMode ? "#1E2124" : 'white',
+                          color: isDarkMode ? "white" : 'black',
+                        }}
+                      />
+                    )}
+                  </div>
+                </RadioGroup>
+              </FormControl>
+            )}
           </Box>
         )}
-        {showLimitOptions && (
+        
-          <FormControl>
+        {getText && (
-            <FormLabel>
+          <Box>
-              <h4>{t('right_panel.limit.title')}</h4>
-            </FormLabel>
-            <RadioGroup
-              value={limitType}
-              onChange={(e) => updateLimitType(e.target.value as LimitType)}
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                width: '500px'
-              }}
-            >
-              <FormControlLabel value="10" control={<Radio />} label="10" />
-              <FormControlLabel value="100" control={<Radio />} label="100" />
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <FormControlLabel value="custom" control={<Radio />} label={t('right_panel.limit.custom')} />
-                {limitType === 'custom' && (
-                  <TextField
-                    type="number"
-                    value={customLimit}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      const value = parseInt(e.target.value);
-                      // Only update if the value is greater than or equal to 1 or if the field is empty
-                      if (e.target.value === '' || value >= 1) {
-                        updateCustomLimit(e.target.value);
-                      }
-                    }}
-                    inputProps={{
-                      min: 1,
-                      onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => {
-                        const value = (e.target as HTMLInputElement).value + e.key;
-                        if (parseInt(value) < 1) {
-                          e.preventDefault();
-                        }
-                      }
-                    }}
-                    placeholder={t('right_panel.limit.enter_number')}
-                    sx={{
-                      marginLeft: '10px',
-                      '& input': {
-                        padding: '10px',
-
-                      },
-                      width: '150px',
-                      background: isDarkMode ? "#1E2124" : 'white',
-                      color: isDarkMode ? "white" : 'black', // Ensure the text field does not go outside the panel
-                    }}
-                  />
-                )}
-              </div>
-            </RadioGroup>
-          </FormControl>
-        )}
-        {/* {!getText && !getScreenshot && !getList && showCaptureText && <Button variant="contained" sx={{backgroundColor:"#ff00c3",color:`${isDarkMode?'white':'black'}`}} onClick={startGetText}>{t('right_panel.buttons.capture_text')}</Button>} */}
-
-        {!getText && !getScreenshot && !getList && showCaptureText && <Button variant="contained" onClick={handleStartGetText}>{t('right_panel.buttons.capture_text')}</Button>}
-        {getText &&
-          <>
             <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
               <Button
                 variant="outlined"
@@ -639,7 +679,8 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                   color: '#ff00c3 !important',
                   borderColor: '#ff00c3 !important',
                   backgroundColor: 'whitesmoke !important',
-                }}>
+                }}
+              >
                 {t('right_panel.buttons.confirm')}
               </Button>
               <Button
@@ -650,32 +691,41 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                   color: '#ff00c3 !important',
                   borderColor: '#ff00c3 !important',
                   backgroundColor: 'whitesmoke !important',
-                }}>
+                }}
+              >
                 {t('right_panel.buttons.discard')}
               </Button>
             </Box>
-          </>
+          </Box>
-        }
+        )}
-        {/* {!getText && !getScreenshot && !getList && showCaptureScreenshot && <Button variant="contained"  sx={{backgroundColor:"#ff00c3",color:`${isDarkMode?'white':'black'}`}} onClick={startGetScreenshot}>{t('right_panel.buttons.capture_screenshot')}</Button>} */}
+        
-        {!getText && !getScreenshot && !getList && showCaptureScreenshot && <Button variant="contained" onClick={startGetScreenshot}>{t('right_panel.buttons.capture_screenshot')}</Button>}
         {getScreenshot && (
           <Box display="flex" flexDirection="column" gap={2}>
-            <Button variant="contained" onClick={() => captureScreenshot(true)}>{t('right_panel.screenshot.capture_fullpage')}</Button>
+            <Button variant="contained" onClick={() => captureScreenshot(true)}>
-            <Button variant="contained" onClick={() => captureScreenshot(false)}>{t('right_panel.screenshot.capture_visible')}</Button>
+              {t('right_panel.screenshot.capture_fullpage')}
+            </Button>
+            <Button variant="contained" onClick={() => captureScreenshot(false)}>
+              {t('right_panel.screenshot.capture_visible')}
+            </Button>
             <Button
               variant="outlined"
               color="error"
-              onClick={stopGetScreenshot}
+              onClick={() => {
+                stopGetScreenshot();
+                setActiveAction('none');
+              }}
               sx={{
                 color: '#ff00c3 !important',
                 borderColor: '#ff00c3 !important',
                 backgroundColor: 'whitesmoke !important',
-              }}>
+              }}
+            >
               {t('right_panel.buttons.discard')}
             </Button>
           </Box>
         )}
       </Box>
+      
       <Box>
         {browserSteps.map(step => (
           <Box key={step.id} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}>
@@ -714,7 +764,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                         </InputAdornment>
                       )
                     }}
-
                   />
                   {!confirmedTextSteps[step.id] ? (
                     <Box display="flex" justifyContent="space-between" gap={2}>