Merge branch 'develop' into ui-fix

src/components/organisms/ApiKey.tsx

@@ -36,9 +36,9 @@ const ApiKeyManager = () => {
   const [copySuccess, setCopySuccess] = useState<boolean>(false);
   const { notify } = useGlobalInfoStore();
 
-  
 
-  
+
+
 
   useEffect(() => {
     const fetchApiKey = async () => {
@@ -53,7 +53,7 @@ const ApiKeyManager = () => {
     };
 
     fetchApiKey();
-    
+
   }, []);
 
   const generateApiKey = async () => {
@@ -61,7 +61,7 @@ const ApiKeyManager = () => {
     try {
       const { data } = await axios.post(`${apiUrl}/auth/generate-api-key`);
       setApiKey(data.api_key);
-     
+
       notify('success', `Generated API Key successfully`);
     } catch (error: any) {
       notify('error', `Failed to generate API Key - ${error.message}`);
@@ -88,11 +88,25 @@ const ApiKeyManager = () => {
       navigator.clipboard.writeText(apiKey);
       setCopySuccess(true);
       setTimeout(() => setCopySuccess(false), 2000);
-      notify('info', 'Copied to clipboard');
+      notify('info', 'Copied API Key successfully');
     }
   };
 
-  if (loading) return <CircularProgress />;
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+          width: '100vw',
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
 
   return (
     <Container sx={{ alignSelf: 'flex-start' }}>

src/components/organisms/RightSidePanel.tsx

@@ -55,6 +55,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const [showCaptureScreenshot, setShowCaptureScreenshot] = useState(true);
   const [showCaptureText, setShowCaptureText] = useState(true);
   const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({});
+  const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
 
   const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState } = useGlobalInfoStore();
   const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage } = useActionContext();
@@ -196,12 +197,18 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const getTextSettingsObject = useCallback(() => {
     const settings: Record<string, { selector: string; tag?: string;[key: string]: any }> = {};
     browserSteps.forEach(step => {
+      if (browserStepIdList.includes(step.id)) {
+        return; 
+      }
+      
       if (step.type === 'text' && step.label && step.selectorObj?.selector) {
         settings[step.label] = step.selectorObj;
       }
+      setBrowserStepIdList(prevList => [...prevList, step.id]);
     });
+
     return settings;
-  }, [browserSteps]);
+  }, [browserSteps, browserStepIdList]);
 
 
   const stopCaptureAndEmitGetTextSettings = useCallback(() => {
@@ -212,6 +219,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     }
     stopGetText();
     const settings = getTextSettingsObject();
+    console.log("SETTINGS", settings);
     const hasTextSteps = browserSteps.some(step => step.type === 'text');
     if (hasTextSteps) {
       socket?.emit('action', { action: 'scrapeSchema', settings });