feat: create browser ui directory

src/components/browser/BrowserContent.tsx

@@ -0,0 +1,162 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styled from "styled-components";
+import BrowserNavBar from "./BrowserNavBar";
+import { BrowserWindow } from "./BrowserWindow";
+import { useBrowserDimensionsStore } from "../../context/browserDimensions";
+import { BrowserTabs } from "./BrowserTabs";
+import { useSocketStore } from "../../context/socket";
+import {
+  getCurrentTabs,
+  getCurrentUrl,
+  interpretCurrentRecording,
+} from "../../api/recording";
+import { Box } from "@mui/material";
+import { InterpretationLog } from "../run/InterpretationLog";
+
+// TODO: Tab !show currentUrl after recordingUrl global state
+export const BrowserContent = () => {
+  const { width } = useBrowserDimensionsStore();
+  const { socket } = useSocketStore();
+
+  const [tabs, setTabs] = useState<string[]>(["current"]);
+  const [tabIndex, setTabIndex] = React.useState(0);
+  const [showOutputData, setShowOutputData] = useState(false);
+
+  const handleChangeIndex = useCallback(
+    (index: number) => {
+      setTabIndex(index);
+    },
+    [tabIndex]
+  );
+
+  const handleCloseTab = useCallback(
+    (index: number) => {
+      // the tab needs to be closed on the backend
+      socket?.emit("closeTab", {
+        index,
+        isCurrent: tabIndex === index,
+      });
+      // change the current index as current tab gets closed
+      if (tabIndex === index) {
+        if (tabs.length > index + 1) {
+          handleChangeIndex(index);
+        } else {
+          handleChangeIndex(index - 1);
+        }
+      } else {
+        handleChangeIndex(tabIndex - 1);
+      }
+      // update client tabs
+      setTabs((prevState) => [
+        ...prevState.slice(0, index),
+        ...prevState.slice(index + 1),
+      ]);
+    },
+    [tabs, socket, tabIndex]
+  );
+
+  const handleAddNewTab = useCallback(() => {
+    // Adds new tab by pressing the plus button
+    socket?.emit("addTab");
+    // Adds a new tab to the end of the tabs array and shifts focus
+    setTabs((prevState) => [...prevState, "new tab"]);
+    handleChangeIndex(tabs.length);
+  }, [socket, tabs]);
+
+  const handleNewTab = useCallback(
+    (tab: string) => {
+      // Adds a new tab to the end of the tabs array and shifts focus
+      setTabs((prevState) => [...prevState, tab]);
+      // changes focus on the new tab - same happens in the remote browser
+      handleChangeIndex(tabs.length);
+      handleTabChange(tabs.length);
+    },
+    [tabs]
+  );
+
+  const handleTabChange = useCallback(
+    (index: number) => {
+      // page screencast and focus needs to be changed on backend
+      socket?.emit("changeTab", index);
+    },
+    [socket]
+  );
+
+  const handleUrlChanged = (url: string) => {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.hostname) {
+      const host = parsedUrl.hostname
+        .match(/\b(?!www\.)[a-zA-Z0-9]+/g)
+        ?.join(".");
+      if (host && host !== tabs[tabIndex]) {
+        setTabs((prevState) => [
+          ...prevState.slice(0, tabIndex),
+          host,
+          ...prevState.slice(tabIndex + 1),
+        ]);
+      }
+    } else {
+      if (tabs[tabIndex] !== "new tab") {
+        setTabs((prevState) => [
+          ...prevState.slice(0, tabIndex),
+          "new tab",
+          ...prevState.slice(tabIndex + 1),
+        ]);
+      }
+    }
+  };
+
+  const tabHasBeenClosedHandler = useCallback(
+    (index: number) => {
+      handleCloseTab(index);
+    },
+    [handleCloseTab]
+  );
+
+  useEffect(() => {
+    if (socket) {
+      socket.on("newTab", handleNewTab);
+      socket.on("tabHasBeenClosed", tabHasBeenClosedHandler);
+    }
+    return () => {
+      if (socket) {
+        socket.off("newTab", handleNewTab);
+        socket.off("tabHasBeenClosed", tabHasBeenClosedHandler);
+      }
+    };
+  }, [socket, handleNewTab]);
+
+  useEffect(() => {
+    getCurrentTabs()
+      .then((response) => {
+        if (response) {
+          setTabs(response);
+        }
+      })
+      .catch((error) => {
+        console.log("Fetching current url failed");
+      });
+  }, [handleUrlChanged]);
+
+  return (
+    <div id="browser">
+      <BrowserTabs
+        tabs={tabs}
+        handleTabChange={handleTabChange}
+        handleAddNewTab={handleAddNewTab}
+        handleCloseTab={handleCloseTab}
+        handleChangeIndex={handleChangeIndex}
+        tabIndex={tabIndex}
+      />
+      <BrowserNavBar
+        // todo: use width from browser dimension once fixed
+        browserWidth={900}
+        handleUrlChanged={handleUrlChanged}
+
+      />
+      <BrowserWindow />
+    </div>
+  );
+};
+
+const BrowserContentWrapper = styled.div``;

src/components/browser/BrowserNavBar.tsx

@@ -0,0 +1,136 @@
+import type { FC } from 'react';
+import styled from 'styled-components';
+
+import ReplayIcon from '@mui/icons-material/Replay';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+import { NavBarButton } from '../ui/buttons/buttons';
+import { UrlForm } from './UrlForm';
+import { useCallback, useEffect, useState } from "react";
+import { useSocketStore } from "../../context/socket";
+import { getCurrentUrl } from "../../api/recording";
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { useThemeMode } from '../../context/theme-provider';
+
+const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
+    display: flex;
+    padding: 12px 0px;
+    background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#f6f6f6')};
+    width: ${({ browserWidth }) => browserWidth}px;
+    border-radius: 0px 5px 0px 0px;
+`;
+
+const IconButton = styled(NavBarButton) <{ mode: string }>`
+  background-color: ${({ mode }) => (mode === 'dark' ? '#2C2F33' : '#f6f6f6')};
+  transition: background-color 0.3s ease, transform 0.1s ease;
+  color: ${({ mode }) => (mode === 'dark' ? '#FFFFFF' : '#333')};
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ mode }) => (mode === 'dark' ? '#586069' : '#D0D0D0')};
+  }
+`;
+
+interface NavBarProps {
+  browserWidth: number;
+  handleUrlChanged: (url: string) => void;
+};
+
+const BrowserNavBar: FC<NavBarProps> = ({
+  browserWidth,
+  handleUrlChanged,
+}) => {
+  const isDarkMode = useThemeMode().darkMode;
+
+  const { socket } = useSocketStore();
+  const { recordingUrl, setRecordingUrl } = useGlobalInfoStore();
+
+  const handleRefresh = useCallback((): void => {
+    socket?.emit('input:refresh');
+  }, [socket]);
+
+  const handleGoTo = useCallback((address: string): void => {
+    socket?.emit('input:url', address);
+  }, [socket]);
+
+  const handleCurrentUrlChange = useCallback((url: string) => {
+    handleUrlChanged(url);
+    setRecordingUrl(url);
+  }, [handleUrlChanged, recordingUrl]);
+
+  useEffect(() => {
+    getCurrentUrl().then((response) => {
+      if (response) {
+        handleUrlChanged(response);
+      }
+    }).catch((error) => {
+      console.log("Fetching current url failed");
+    })
+  }, []);
+
+  useEffect(() => {
+    if (socket) {
+      socket.on('urlChanged', handleCurrentUrlChange);
+    }
+    return () => {
+      if (socket) {
+        socket.off('urlChanged', handleCurrentUrlChange);
+      }
+    }
+  }, [socket, handleCurrentUrlChange]);
+
+  const addAddress = (address: string) => {
+    if (socket) {
+      handleUrlChanged(address);
+      setRecordingUrl(address);
+      handleGoTo(address);
+    }
+  };
+
+  return (
+    <StyledNavBar browserWidth={browserWidth} isDarkMode={isDarkMode}>
+      <IconButton
+        type="button"
+        onClick={() => {
+          socket?.emit('input:back');
+        }}
+        disabled={false}
+        mode={isDarkMode ? 'dark' : 'light'}
+      >
+        <ArrowBackIcon />
+      </IconButton>
+
+      <IconButton
+        type="button"
+        onClick={() => {
+          socket?.emit('input:forward');
+        }}
+        disabled={false}
+        mode={isDarkMode ? 'dark' : 'light'}
+      >
+        <ArrowForwardIcon />
+      </IconButton>
+
+      <IconButton
+        type="button"
+        onClick={() => {
+          if (socket) {
+            handleRefresh();
+          }
+        }}
+        disabled={false}
+        mode={isDarkMode ? 'dark' : 'light'}
+      >
+        <ReplayIcon />
+      </IconButton>
+
+      <UrlForm
+        currentAddress={recordingUrl}
+        handleRefresh={handleRefresh}
+        setCurrentAddress={addAddress}
+      />
+    </StyledNavBar>
+  );
+}
+
+export default BrowserNavBar;

src/components/browser/BrowserRecordingSave.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { Grid, Button, Box, Typography } from '@mui/material';
+import { SaveRecording } from "../recorder/SaveRecording";
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { stopRecording } from "../../api/recording";
+import { useNavigate } from 'react-router-dom';
+import { GenericModal } from "../ui/GenericModal";
+import { useTranslation } from 'react-i18next';
+
+const BrowserRecordingSave = () => {
+  const { t } = useTranslation();
+  const [openModal, setOpenModal] = useState<boolean>(false);
+  const { recordingName, browserId, setBrowserId, notify } = useGlobalInfoStore();
+  const navigate = useNavigate();
+
+  const goToMainMenu = async () => {
+    if (browserId) {
+      await stopRecording(browserId);
+      notify('warning', t('browser_recording.notifications.terminated'));
+      setBrowserId(null);
+    }
+    navigate('/');
+  };
+
+  return (
+    <Grid container>
+      <Grid item xs={12} md={3} lg={3}>
+        <div style={{
+          marginTop: '12px',
+          color: 'white',
+          position: 'absolute',
+          background: '#ff00c3',
+          border: 'none',
+          borderRadius: '0px 0px 8px 8px',
+          padding: '7.5px',
+          width: 'calc(100% - 20px)',
+          overflow: 'hidden',
+          display: 'flex',
+          justifyContent: 'space-between',
+          height: "48px"
+        }}>
+          <Button
+            onClick={() => setOpenModal(true)}
+            variant="outlined"
+            color="error"
+            sx={{
+              marginLeft: '25px',
+              color: 'red !important',
+              borderColor: 'red !important',
+              backgroundColor: 'whitesmoke !important',
+            }}
+            size="small"
+          >
+            {t('right_panel.buttons.discard')}
+          </Button>
+          <GenericModal isOpen={openModal} onClose={() => setOpenModal(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"
+                  sx={{
+                    color: '#ff00c3 !important',
+                    borderColor: '#ff00c3 !important',
+                    backgroundColor: 'whitesmoke !important',
+                  }} >
+                  {t('right_panel.buttons.cancel')}
+                </Button>
+              </Box>
+            </Box>
+          </GenericModal>
+          <SaveRecording fileName={recordingName} />
+        </div>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default BrowserRecordingSave;
+
+const modalStyle = {
+  top: '25%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '30%',
+  backgroundColor: 'background.paper',
+  p: 4,
+  height: 'fit-content',
+  display: 'block',
+  padding: '20px',
+};

src/components/browser/BrowserTabs.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Box, IconButton, Tab, Tabs } from "@mui/material";
+import { useBrowserDimensionsStore } from "../../context/browserDimensions";
+import { Close } from "@mui/icons-material";
+import { useThemeMode } from '../../context/theme-provider';
+
+interface BrowserTabsProp {
+  tabs: string[],
+  handleTabChange: (index: number) => void,
+  handleAddNewTab: () => void,
+  handleCloseTab: (index: number) => void,
+  handleChangeIndex: (index: number) => void;
+  tabIndex: number
+}
+
+export const BrowserTabs = (
+  {
+    tabs, handleTabChange, handleAddNewTab,
+    handleCloseTab, handleChangeIndex, tabIndex
+  }: BrowserTabsProp) => {
+
+  let tabWasClosed = false;
+
+  const { width } = useBrowserDimensionsStore();
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    if (!tabWasClosed) {
+      handleChangeIndex(newValue);
+    }
+  };
+  const isDarkMode = useThemeMode().darkMode;
+
+  return (
+    <Box sx={{
+      width: 800, // Fixed width
+      display: 'flex',
+      overflow: 'auto',
+      alignItems: 'center',
+    }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> {/* Synced border color */}
+        <Tabs
+          value={tabIndex}
+          onChange={handleChange}
+        >
+          {tabs.map((tab, index) => {
+            return (
+              <Tab
+                key={`tab-${index}`}
+                id={`tab-${index}`}
+                sx={{
+                  background: 'white',
+                  borderRadius: '5px 5px 0px 0px',
+                  '&.Mui-selected': {
+                    backgroundColor: ` ${isDarkMode ? "#2a2a2a" : "#f5f5f5"}`, // Synced selected tab color
+                    color: '#ff00c3', // Slightly lighter text when selected
+                  },
+                }}
+                icon={<CloseButton closeTab={() => {
+                  tabWasClosed = true;
+                  handleCloseTab(index);
+                }} disabled={tabs.length === 1}
+                />}
+                iconPosition="end"
+                onClick={() => {
+                  if (!tabWasClosed) {
+                    handleTabChange(index)
+                  }
+                }}
+                label={tab}
+              />
+            );
+          })}
+        </Tabs>
+      </Box>
+      {/* <AddButton handleClick={handleAddNewTab} style={{ background: 'white' }} /> */}
+    </Box>
+  );
+}
+
+interface CloseButtonProps {
+  closeTab: () => void;
+  disabled: boolean;
+}
+
+const CloseButton = ({ closeTab, disabled }: CloseButtonProps) => {
+  return (
+    <IconButton
+      aria-label="close"
+      size={"small"}
+      onClick={closeTab}
+      disabled={disabled}
+      sx={{
+        height: '34px',
+        '&:hover': { color: 'white', backgroundColor: '#1976d2' }
+      }}
+      component="span"
+    >
+      <Close />
+    </IconButton>
+  );
+}

src/components/browser/BrowserWindow.tsx

@@ -0,0 +1,472 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSocketStore } from '../../context/socket';
+import { Button } from '@mui/material';
+import Canvas from "../recorder/canvas";
+import { Highlighter } from "../recorder/Highlighter";
+import { GenericModal } from '../ui/GenericModal';
+import { useActionContext } from '../../context/browserActions';
+import { useBrowserSteps, TextStep } from '../../context/browserSteps';
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { useTranslation } from 'react-i18next';
+
+interface ElementInfo {
+    tagName: string;
+    hasOnlyText?: boolean;
+    isIframeContent?: boolean;
+    isShadowRoot?: boolean;
+    innerText?: string;
+    url?: string;
+    imageUrl?: string;
+    attributes?: Record<string, string>;
+    innerHTML?: string;
+    outerHTML?: string;
+}
+
+interface AttributeOption {
+    label: string;
+    value: string;
+}
+
+const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null): AttributeOption[] => {
+    if (!elementInfo) return [];
+    switch (tagName.toLowerCase()) {
+        case 'a':
+            const anchorOptions: AttributeOption[] = [];
+            if (elementInfo.innerText) {
+                anchorOptions.push({ label: `Text: ${elementInfo.innerText}`, value: 'innerText' });
+            }
+            if (elementInfo.url) {
+                anchorOptions.push({ label: `URL: ${elementInfo.url}`, value: 'href' });
+            }
+            return anchorOptions;
+        case 'img':
+            const imgOptions: AttributeOption[] = [];
+            if (elementInfo.innerText) {
+                imgOptions.push({ label: `Alt Text: ${elementInfo.innerText}`, value: 'alt' });
+            }
+            if (elementInfo.imageUrl) {
+                imgOptions.push({ label: `Image URL: ${elementInfo.imageUrl}`, value: 'src' });
+            }
+            return imgOptions;
+        default:
+            return [{ label: `Text: ${elementInfo.innerText}`, value: 'innerText' }];
+    }
+};
+
+export const BrowserWindow = () => {
+    const { t } = useTranslation();
+    const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
+    const [screenShot, setScreenShot] = useState<string>("");
+    const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] } | null>(null);
+    const [showAttributeModal, setShowAttributeModal] = useState(false);
+    const [attributeOptions, setAttributeOptions] = useState<AttributeOption[]>([]);
+    const [selectedElement, setSelectedElement] = useState<{ selector: string, info: ElementInfo | null } | null>(null);
+    const [currentListId, setCurrentListId] = useState<number | null>(null);
+
+    const [listSelector, setListSelector] = useState<string | null>(null);
+    const [fields, setFields] = useState<Record<string, TextStep>>({});
+    const [paginationSelector, setPaginationSelector] = useState<string>('');
+
+    const { socket } = useSocketStore();
+    const { notify } = useGlobalInfoStore();
+    const { getText, getList, paginationMode, paginationType, limitMode, captureStage } = useActionContext();
+    const { addTextStep, addListStep } = useBrowserSteps();
+
+    const onMouseMove = (e: MouseEvent) => {
+        if (canvasRef && canvasRef.current && highlighterData) {
+            const canvasRect = canvasRef.current.getBoundingClientRect();
+            // mousemove outside the browser window
+            if (
+                e.pageX < canvasRect.left
+                || e.pageX > canvasRect.right
+                || e.pageY < canvasRect.top
+                || e.pageY > canvasRect.bottom
+            ) {
+                setHighlighterData(null);
+            }
+        }
+    };
+
+    const resetListState = useCallback(() => {
+        setListSelector(null);
+        setFields({});
+        setCurrentListId(null);
+    }, []);
+
+    useEffect(() => {
+        if (!getList) {
+            resetListState();
+        }
+    }, [getList, resetListState]);
+
+    const screencastHandler = useCallback((data: string) => {
+        setScreenShot(data);
+    }, [screenShot]);
+
+    useEffect(() => {
+        if (socket) {
+            socket.on("screencast", screencastHandler);
+        }
+        if (canvasRef?.current) {
+            drawImage(screenShot, canvasRef.current);
+        } else {
+            console.log('Canvas is not initialized');
+        }
+        return () => {
+            socket?.off("screencast", screencastHandler);
+        }
+    }, [screenShot, canvasRef, socket, screencastHandler]);
+
+    const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] }) => {
+        console.log("LIST SELECTOR", listSelector);
+        console.log("DATA SELECTOR", data.selector);
+        console.log("CHILD SELECTORS", data.childSelectors);
+        if (getList === true) {
+            if (listSelector) {
+                socket?.emit('listSelector', { selector: listSelector });
+                const hasValidChildSelectors = Array.isArray(data.childSelectors) && data.childSelectors.length > 0;
+
+                if (limitMode) {
+                    setHighlighterData(null);
+                } else if (paginationMode) {
+                    // Only set highlighterData if type is not empty, 'none', 'scrollDown', or 'scrollUp'
+                    if (paginationType !== '' && !['none', 'scrollDown', 'scrollUp'].includes(paginationType)) {
+                        setHighlighterData(data);
+                    } else {
+                        setHighlighterData(null);
+                    }
+                } else if (data.childSelectors && data.childSelectors.includes(data.selector)) {
+                    // Highlight only valid child elements within the listSelector
+                    setHighlighterData(data);
+                } else if (data.elementInfo?.isIframeContent && data.childSelectors) {
+                    // Handle pure iframe elements - similar to previous shadow DOM logic but using iframe syntax
+                    // Check if the selector matches any iframe child selectors
+                    const isIframeChild = data.childSelectors.some(childSelector =>
+                        data.selector.includes(':>>') && // Iframe uses :>> for traversal
+                        childSelector.split(':>>').some(part =>
+                            data.selector.includes(part.trim())
+                        )
+                    );
+                    setHighlighterData(isIframeChild ? data : null);
+                } else if (data.selector.includes(':>>') && hasValidChildSelectors) {
+                    // Handle mixed DOM cases with iframes
+                    // Split the selector into parts and check each against child selectors
+                    const selectorParts = data.selector.split(':>>').map(part => part.trim());
+                    const isValidMixedSelector = selectorParts.some(part =>
+                        // We know data.childSelectors is defined due to hasValidChildSelectors check
+                        data.childSelectors!.some(childSelector =>
+                            childSelector.includes(part)
+                        )
+                    );
+                    setHighlighterData(isValidMixedSelector ? data : null);
+                } else if (data.elementInfo?.isShadowRoot && data.childSelectors) {
+                    // New case: Handle pure Shadow DOM elements
+                    // Check if the selector matches any shadow root child selectors
+                    const isShadowChild = data.childSelectors.some(childSelector =>
+                        data.selector.includes('>>') && // Shadow DOM uses >> for piercing
+                        childSelector.split('>>').some(part =>
+                            data.selector.includes(part.trim())
+                        )
+                    );
+                    setHighlighterData(isShadowChild ? data : null);
+                } else if (data.selector.includes('>>') && hasValidChildSelectors) {
+                    // New case: Handle mixed DOM cases
+                    // Split the selector into parts and check each against child selectors
+                    const selectorParts = data.selector.split('>>').map(part => part.trim());
+                    const isValidMixedSelector = selectorParts.some(part =>
+                        // Now we know data.childSelectors is defined
+                        data.childSelectors!.some(childSelector =>
+                            childSelector.includes(part)
+                        )
+                    );
+                    setHighlighterData(isValidMixedSelector ? data : null);
+                } else {
+                    // if !valid child in normal mode, clear the highlighter
+                    setHighlighterData(null);
+                }
+            } else {
+                // Set highlighterData for the initial listSelector selection
+                setHighlighterData(data);
+            }
+        } else {
+            // For non-list steps
+            setHighlighterData(data);
+        }
+    }, [highlighterData, getList, socket, listSelector, paginationMode, paginationType, captureStage]);
+
+
+    useEffect(() => {
+        document.addEventListener('mousemove', onMouseMove, false);
+        if (socket) {
+            socket.on("highlighter", highlighterHandler);
+        }
+        return () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            socket?.off("highlighter", highlighterHandler);
+        };
+    }, [socket, onMouseMove]);
+
+    useEffect(() => {
+        if (captureStage === 'initial' && listSelector) {
+            socket?.emit('setGetList', { getList: true });
+            socket?.emit('listSelector', { selector: listSelector });
+        }
+    }, [captureStage, listSelector, socket]);
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (highlighterData && canvasRef?.current) {
+            const canvasRect = canvasRef.current.getBoundingClientRect();
+            const clickX = e.clientX - canvasRect.left;
+            const clickY = e.clientY - canvasRect.top;
+
+            const highlightRect = highlighterData.rect;
+            if (
+                clickX >= highlightRect.left &&
+                clickX <= highlightRect.right &&
+                clickY >= highlightRect.top &&
+                clickY <= highlightRect.bottom
+            ) {
+
+                const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
+
+                if (getText === true) {
+                    if (options.length === 1) {
+                        // Directly use the available attribute if only one option is present
+                        const attribute = options[0].value;
+                        const data = attribute === 'href' ? highlighterData.elementInfo?.url || '' :
+                            attribute === 'src' ? highlighterData.elementInfo?.imageUrl || '' :
+                                highlighterData.elementInfo?.innerText || '';
+
+                        addTextStep('', data, {
+                            selector: highlighterData.selector,
+                            tag: highlighterData.elementInfo?.tagName,
+                            shadow: highlighterData.elementInfo?.isShadowRoot,
+                            attribute
+                        });
+                    } else {
+                        // Show the modal if there are multiple options
+                        setAttributeOptions(options);
+                        setSelectedElement({
+                            selector: highlighterData.selector,
+                            info: highlighterData.elementInfo,
+                        });
+                        setShowAttributeModal(true);
+                    }
+                }
+
+                if (paginationMode && getList) {
+                    // Only allow selection in pagination mode if type is not empty, 'scrollDown', or 'scrollUp'
+                    if (paginationType !== '' && paginationType !== 'scrollDown' && paginationType !== 'scrollUp' && paginationType !== 'none') {
+                        setPaginationSelector(highlighterData.selector);
+                        notify(`info`, t('browser_window.attribute_modal.notifications.pagination_select_success'));
+                        addListStep(listSelector!, fields, currentListId || 0, { type: paginationType, selector: highlighterData.selector });
+                    }
+                    return;
+                }
+
+                if (getList === true && !listSelector) {
+                    setListSelector(highlighterData.selector);
+                    notify(`info`, t('browser_window.attribute_modal.notifications.list_select_success'));
+                    setCurrentListId(Date.now());
+                    setFields({});
+                } else if (getList === true && listSelector && currentListId) {
+                    const attribute = options[0].value;
+                    const data = attribute === 'href' ? highlighterData.elementInfo?.url || '' :
+                        attribute === 'src' ? highlighterData.elementInfo?.imageUrl || '' :
+                            highlighterData.elementInfo?.innerText || '';
+                    // Add fields to the list
+                    if (options.length === 1) {
+                        const attribute = options[0].value;
+                        const newField: TextStep = {
+                            id: Date.now(),
+                            type: 'text',
+                            label: `Label ${Object.keys(fields).length + 1}`,
+                            data: data,
+                            selectorObj: {
+                                selector: highlighterData.selector,
+                                tag: highlighterData.elementInfo?.tagName,
+                                shadow: highlighterData.elementInfo?.isShadowRoot,
+                                attribute
+                            }
+                        };
+
+                        setFields(prevFields => {
+                            const updatedFields = {
+                                ...prevFields,
+                                [newField.id]: newField
+                            };
+                            return updatedFields;
+                        });
+
+                        if (listSelector) {
+                            addListStep(listSelector, { ...fields, [newField.id]: newField }, currentListId, { type: '', selector: paginationSelector });
+                        }
+
+                    } else {
+                        setAttributeOptions(options);
+                        setSelectedElement({
+                            selector: highlighterData.selector,
+                            info: highlighterData.elementInfo
+                        });
+                        setShowAttributeModal(true);
+                    }
+                }
+            }
+        }
+    };
+
+    const handleAttributeSelection = (attribute: string) => {
+        if (selectedElement) {
+            let data = '';
+            switch (attribute) {
+                case 'href':
+                    data = selectedElement.info?.url || '';
+                    break;
+                case 'src':
+                    data = selectedElement.info?.imageUrl || '';
+                    break;
+                default:
+                    data = selectedElement.info?.innerText || '';
+            }
+            {
+                if (getText === true) {
+                    addTextStep('', data, {
+                        selector: selectedElement.selector,
+                        tag: selectedElement.info?.tagName,
+                        shadow: selectedElement.info?.isShadowRoot,
+                        attribute: attribute
+                    });
+                }
+                if (getList === true && listSelector && currentListId) {
+                    const newField: TextStep = {
+                        id: Date.now(),
+                        type: 'text',
+                        label: `Label ${Object.keys(fields).length + 1}`,
+                        data: data,
+                        selectorObj: {
+                            selector: selectedElement.selector,
+                            tag: selectedElement.info?.tagName,
+                            shadow: selectedElement.info?.isShadowRoot,
+                            attribute: attribute
+                        }
+                    };
+
+                    setFields(prevFields => {
+                        const updatedFields = {
+                            ...prevFields,
+                            [newField.id]: newField
+                        };
+                        return updatedFields;
+                    });
+
+                    if (listSelector) {
+                        addListStep(listSelector, { ...fields, [newField.id]: newField }, currentListId, { type: '', selector: paginationSelector });
+                    }
+                }
+            }
+        }
+        setShowAttributeModal(false);
+    };
+
+    const resetPaginationSelector = useCallback(() => {
+        setPaginationSelector('');
+    }, []);
+
+    useEffect(() => {
+        if (!paginationMode) {
+            resetPaginationSelector();
+        }
+    }, [paginationMode, resetPaginationSelector]);
+
+    return (
+        <div onClick={handleClick} style={{ width: '900px' }} id="browser-window">
+            {
+                getText === true || getList === true ? (
+                    <GenericModal
+                        isOpen={showAttributeModal}
+                        onClose={() => { }}
+                        canBeClosed={false}
+                        modalStyle={modalStyle}
+                    >
+                        <div>
+                            <h2>Select Attribute</h2>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginTop: '30px' }}>
+                                {attributeOptions.map((option) => (
+                                    <Button
+                                        variant="outlined"
+                                        size="medium"
+                                        key={option.value}
+                                        onClick={() => handleAttributeSelection(option.value)}
+                                        style={{
+                                            justifyContent: 'flex-start',
+                                            maxWidth: '80%',
+                                            overflow: 'hidden',
+                                            padding: '5px 10px',
+                                        }}
+                                        sx={{
+                                            color: '#ff00c3 !important',
+                                            borderColor: '#ff00c3 !important',
+                                            backgroundColor: 'whitesmoke !important',
+                                        }}
+                                    >
+                                        <span style={{
+                                            display: 'block',
+                                            whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            maxWidth: '100%'
+                                        }}>
+                                            {option.label}
+                                        </span>
+                                    </Button>
+                                ))}
+                            </div>
+                        </div>
+                    </GenericModal>
+                ) : null
+            }
+            <div style={{ height: '400px', overflow: 'hidden' }}>
+                {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
+                    <Highlighter
+                        unmodifiedRect={highlighterData?.rect}
+                        displayedSelector={highlighterData?.selector}
+                        width={900}
+                        height={400}
+                        canvasRect={canvasRef.current.getBoundingClientRect()}
+                    />
+                    : null}
+                <Canvas
+                    onCreateRef={setCanvasReference}
+                    width={900}
+                    height={400}
+                />
+            </div>
+        </div>
+    );
+};
+
+const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
+
+    const ctx = canvas.getContext('2d');
+
+    const img = new Image();
+
+    img.src = image;
+    img.onload = () => {
+        URL.revokeObjectURL(img.src);
+        ctx?.drawImage(img, 0, 0, 900, 400);
+    };
+
+};
+
+const modalStyle = {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '30%',
+    backgroundColor: 'background.paper',
+    p: 4,
+    height: 'fit-content',
+    display: 'block',
+    padding: '20px',
+};

src/components/browser/UrlForm.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import type { SyntheticEvent } from 'react';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { NavBarForm, NavBarInput } from "../ui/form";
+import { UrlFormButton } from "../ui/buttons/buttons";
+import { useSocketStore } from '../../context/socket';
+import { Socket } from "socket.io-client";
+
+// TODO: Bring back REFRESHHHHHHH
+type Props = {
+    currentAddress: string;
+    handleRefresh: (socket: Socket) => void;
+    setCurrentAddress: (address: string) => void;
+};
+
+export const UrlForm = ({
+    currentAddress,
+    handleRefresh,
+    setCurrentAddress,
+}: Props) => {
+    const [address, setAddress] = useState<string>(currentAddress);
+    const { socket } = useSocketStore();
+    const lastSubmittedRef = useRef<string>('');
+
+    const onChange = useCallback((event: SyntheticEvent): void => {
+        setAddress((event.target as HTMLInputElement).value);
+    }, []);
+
+    const submitForm = useCallback((url: string): void => {
+        // Add protocol if missing
+        if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
+            url = "https://" + url;
+            setAddress(url);  // Update the input field to reflect protocol addition
+        }
+
+        try {
+            // Validate the URL
+            new URL(url);
+            setCurrentAddress(url);
+            lastSubmittedRef.current = url;  // Update the last submitted URL
+        } catch (e) {
+            //alert(`ERROR: ${url} is not a valid url!`);
+            console.log(e)
+        }
+    }, [setCurrentAddress]);
+
+    const onSubmit = (event: SyntheticEvent): void => {
+        event.preventDefault();
+        submitForm(address);
+    };
+
+    // Sync internal state with currentAddress prop when it changes and auto-submit once
+    useEffect(() => {
+        setAddress(currentAddress);
+        if (currentAddress !== '' && currentAddress !== lastSubmittedRef.current) {
+            submitForm(currentAddress);
+        }
+    }, [currentAddress, submitForm]);
+
+    return (
+        <NavBarForm onSubmit={onSubmit}>
+            <NavBarInput
+                type="text"
+                value={address}
+                onChange={onChange}
+                readOnly
+            />
+            <UrlFormButton type="submit">
+                <KeyboardArrowRightIcon />
+            </UrlFormButton>
+        </NavBarForm>
+    );
+};