Merge pull request #882 from getmaxun/rm-actions

feat: discard captured action tab data

src/components/run/InterpretationLog.tsx

@@ -21,6 +21,7 @@ import { useThemeMode } from '../../context/theme-provider';
 import { useTranslation } from 'react-i18next';
 import { useBrowserSteps } from '../../context/browserSteps';
 import { useActionContext } from '../../context/browserActions';
+import { useSocketStore } from '../../context/socket';
 
 interface InterpretationLogProps {
   isOpen: boolean;
@@ -57,8 +58,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
   const previousGetText = useRef<boolean>(false);
   const autoFocusedScreenshotIndices = useRef<Set<number>>(new Set());
 
-  const { browserSteps, updateListTextFieldLabel, removeListTextField, updateListStepName, updateScreenshotStepName, updateBrowserTextStepLabel, deleteBrowserStep, emitForStepId } = useBrowserSteps();
+  const { browserSteps, updateListTextFieldLabel, removeListTextField, updateListStepName, updateScreenshotStepName, updateBrowserTextStepLabel, deleteBrowserStep, deleteStepsByActionId, emitForStepId } = useBrowserSteps();
   const { captureStage, getText } = useActionContext();
+  const { socket } = useSocketStore();
 
   const { browserWidth, outputPreviewHeight, outputPreviewWidth } = useBrowserDimensionsStore();
   const { currentWorkflowActionsState, shouldResetInterpretationLog, currentTextGroupName, setCurrentTextGroupName, notify } = useGlobalInfoStore();
@@ -154,6 +156,76 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     }
   };
 
+  const handleRemoveListAction = (listId: number, actionId: string | undefined) => {
+    if (!actionId) return;
+
+    const listIndex = captureListData.findIndex(list => list.id === listId);
+    const listItem = captureListData[listIndex];
+    const listName = listItem?.name || `List Data ${listIndex + 1}`;
+    const isActiveList = listIndex === activeListTab;
+
+    deleteStepsByActionId(actionId);
+
+    if (socket) {
+      socket.emit('removeAction', { actionId });
+    }
+
+    if (isActiveList && captureListData.length > 1) {
+      if (listIndex === captureListData.length - 1) {
+        setActiveListTab(listIndex - 1);
+      }
+    } else if (listIndex < activeListTab) {
+      setActiveListTab(activeListTab - 1);
+    }
+
+    notify('error', `List "${listName}" discarded`);
+  };
+
+  const handleRemoveScreenshotAction = (screenshotId: number, actionId: string | undefined) => {
+    if (!actionId) return;
+
+    const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot' && step.screenshotData);
+    const screenshotIndex = screenshotSteps.findIndex(step => step.id === screenshotId);
+    const screenshotStep = screenshotSteps[screenshotIndex];
+    const screenshotName = screenshotStep?.name || `Screenshot ${screenshotIndex + 1}`;
+    const isActiveScreenshot = screenshotIndex === activeScreenshotTab;
+
+    deleteStepsByActionId(actionId);
+
+    if (socket) {
+      socket.emit('removeAction', { actionId });
+    }
+
+    if (isActiveScreenshot && screenshotData.length > 1) {
+      if (screenshotIndex === screenshotData.length - 1) {
+        setActiveScreenshotTab(screenshotIndex - 1);
+      }
+    } else if (screenshotIndex < activeScreenshotTab) {
+      setActiveScreenshotTab(activeScreenshotTab - 1);
+    }
+
+    notify('error', `Screenshot "${screenshotName}" discarded`);
+  };
+
+  const handleRemoveAllTextActions = () => {
+    const uniqueActionIds = new Set<string>();
+    captureTextData.forEach(textStep => {
+      if (textStep.actionId) {
+        uniqueActionIds.add(textStep.actionId);
+      }
+    });
+
+    uniqueActionIds.forEach(actionId => {
+      deleteStepsByActionId(actionId);
+
+      if (socket) {
+        socket.emit('removeAction', { actionId });
+      }
+    });
+
+    notify('error', `Text data "${currentTextGroupName}" discarded`);
+  };
+  
   const checkForDuplicateName = (stepId: number, type: 'list' | 'text' | 'screenshot', newName: string): boolean => {
     const trimmedName = newName.trim();
 
@@ -174,7 +246,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     }
 
     return false;
-  };
+  }
 
   const startEdit = (stepId: number, type: 'list' | 'text' | 'screenshot', currentValue: string) => {
     setEditing({ stepId, type, value: currentValue });
@@ -609,6 +681,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                       : '2px solid #ffffff'
                                     : '2px solid transparent',
                                   transition: 'all 0.2s ease',
+                                  position: 'relative',
                                   '&:hover': {
                                     backgroundColor: isActive
                                       ? undefined
@@ -616,6 +689,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                         ? '#161616'
                                         : '#e9ecef',
                                   },
+                                  '&:hover .delete-icon': {
+                                    opacity: 1
+                                  },
                                 }}
                               >
                                 {isEditing ? (
@@ -644,7 +720,33 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                     }}
                                   />
                                 ) : (
-                                  listItem.name || `List Data ${index + 1}`
+                                  <>
+                                    {listItem.name || `List Data ${index + 1}`}
+                                    <IconButton
+                                      className="delete-icon"
+                                      size="small"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleRemoveListAction(listItem.id, listItem.actionId);
+                                      }}
+                                      sx={{
+                                        position: 'absolute',
+                                        right: 4,
+                                        top: '50%',
+                                        transform: 'translateY(-50%)',
+                                        opacity: 0,
+                                        transition: 'opacity 0.2s',
+                                        color: darkMode ? '#999' : '#666',
+                                        padding: '2px',
+                                        '&:hover': {
+                                          color: '#f44336',
+                                          backgroundColor: darkMode ? 'rgba(244, 67, 54, 0.1)' : 'rgba(244, 67, 54, 0.05)'
+                                        }
+                                      }}
+                                    >
+                                      <CloseIcon sx={{ fontSize: '14px' }} />
+                                    </IconButton>
+                                  </>
                                 )}
                               </Box>
                             </Tooltip>
@@ -815,7 +917,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                       }}
                     >
                       {(() => {
-                        const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot' && step.screenshotData) as Array<{ id: number; name?: string; type: 'screenshot'; screenshotData?: string }>;
+                        const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot' && step.screenshotData) as Array<{ id: number; name?: string; type: 'screenshot'; fullPage: boolean; actionId?: string; screenshotData?: string }>;
                         return screenshotData.map((screenshot, index) => {
                           const screenshotStep = screenshotSteps[index];
                           if (!screenshotStep) return null;
@@ -861,6 +963,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                     : '2px solid #ffffff'
                                   : '2px solid transparent',
                                 transition: 'all 0.2s ease',
+                                position: 'relative',
                                 '&:hover': {
                                   backgroundColor: isActive
                                     ? undefined
@@ -868,6 +971,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                       ? '#161616'
                                       : '#e9ecef',
                                 },
+                                '&:hover .delete-icon': {
+                                  opacity: 1
+                                },
                               }}
                             >
                               {isEditing ? (
@@ -896,7 +1002,33 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                   }}
                                 />
                               ) : (
-                                screenshotName
+                                <>
+                                  {screenshotName}
+                                  <IconButton
+                                    className="delete-icon"
+                                    size="small"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleRemoveScreenshotAction(screenshotStep.id, screenshotStep.actionId);
+                                    }}
+                                    sx={{
+                                      position: 'absolute',
+                                      right: 4,
+                                      top: '50%',
+                                      transform: 'translateY(-50%)',
+                                      opacity: 0,
+                                      transition: 'opacity 0.2s',
+                                      color: darkMode ? '#999' : '#666',
+                                      padding: '2px',
+                                      '&:hover': {
+                                        color: '#f44336',
+                                        backgroundColor: darkMode ? 'rgba(244, 67, 54, 0.1)' : 'rgba(244, 67, 54, 0.05)'
+                                      }
+                                    }}
+                                  >
+                                    <CloseIcon sx={{ fontSize: '14px' }} />
+                                  </IconButton>
+                                </>
                               )}
                             </Box>
                           </Tooltip>
@@ -953,6 +1085,10 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                             borderColor: darkMode ? '#2a2a2a' : '#d0d0d0',
                             borderBottom: darkMode ? '2px solid #1c1c1c' : '2px solid #ffffff',
                             transition: 'all 0.2s ease',
+                            position: 'relative',
+                            '&:hover .delete-icon': {
+                              opacity: 1
+                            },
                           }}
                         >
                           {editingTextGroupName ? (
@@ -984,7 +1120,33 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                               }}
                             />
                           ) : (
-                            currentTextGroupName
+                            <>
+                              {currentTextGroupName}
+                              <IconButton
+                                className="delete-icon"
+                                size="small"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleRemoveAllTextActions();
+                                }}
+                                sx={{
+                                  position: 'absolute',
+                                  right: 4,
+                                  top: '50%',
+                                  transform: 'translateY(-50%)',
+                                  opacity: 0,
+                                  transition: 'opacity 0.2s',
+                                  color: darkMode ? '#999' : '#666',
+                                  padding: '2px',
+                                  '&:hover': {
+                                    color: '#f44336',
+                                    backgroundColor: darkMode ? 'rgba(244, 67, 54, 0.1)' : 'rgba(244, 67, 54, 0.05)'
+                                  }
+                                }}
+                              >
+                                <CloseIcon sx={{ fontSize: '14px' }} />
+                              </IconButton>
+                            </>
                           )}
                         </Box>
                       </Tooltip>