diff --git a/src/components/molecules/ActionDescriptionBox.tsx b/src/components/molecules/ActionDescriptionBox.tsx
index a23ec556..86ecd693 100644
--- a/src/components/molecules/ActionDescriptionBox.tsx
+++ b/src/components/molecules/ActionDescriptionBox.tsx
@@ -1,7 +1,7 @@
import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { PaginationType, useActionContext, LimitType } from '../../context/browserActions';
-import Typography from "@mui/material/Typography";
+import { Typography, FormControlLabel, Checkbox, Box } from '@mui/material';
const CustomBoxContainer = styled.div`
position: relative;
@@ -30,7 +30,26 @@ const Content = styled.div`
`;
const ActionDescriptionBox = () => {
- const { getText, getScreenshot, getList } = useActionContext();
+ const { getText, getScreenshot, getList, captureStage } = useActionContext();
+
+ const messages = [
+ {
+ stage: 'initial' as const,
+ text: 'Choose the capture mode',
+ },
+ {
+ stage: 'pagination' as const,
+ text: 'Select how the robot can capture the rest of the list?',
+ },
+ {
+ stage: 'limit' as const,
+ text: 'Choose the number of items to extract',
+ },
+ {
+ stage: 'complete' as const,
+ text: 'Capture is complete',
+ },
+ ];
const renderActionDescription = () => {
if (getText) {
@@ -50,10 +69,33 @@ const ActionDescriptionBox = () => {
} else if (getList) {
return (
<>
- Capture List
- Hover over the list you want to extract. Once selected, you can hover over all texts inside the list you selected. Click to select them.
+ Capture Screenshot
+
+ Capture a partial or full page screenshot of the current page.
+
+
+ {messages.map(({ stage, text }, index) => (
+
+ }
+ label={
+ {text}
+ }
+ />
+ ))}
+
>
- )
+ );
} else {
return (
<>