Merge branch 'develop' into macset-fix
This commit is contained in:
Rohit
@@ -1169,31 +1169,36 @@ export default class Interpreter extends EventEmitter {
|
||||
return;
|
||||
}
|
||||
|
||||
let pageState = {};
|
||||
try {
|
||||
// Check if page is still valid before accessing state
|
||||
if (p.isClosed()) {
|
||||
this.log('Page was closed during execution', Level.WARN);
|
||||
return;
|
||||
}
|
||||
|
||||
pageState = await this.getState(p, workflowCopy, selectors);
|
||||
selectors = [];
|
||||
console.log("Empty selectors:", selectors)
|
||||
} catch (e: any) {
|
||||
this.log(`Failed to get page state: ${e.message}`, Level.ERROR);
|
||||
// If state access fails, attempt graceful recovery
|
||||
if (p.isClosed()) {
|
||||
this.log('Browser has been closed, terminating workflow', Level.WARN);
|
||||
return;
|
||||
}
|
||||
// For other errors, continue with empty state to avoid complete failure
|
||||
pageState = { url: p.url(), selectors: [], cookies: {} };
|
||||
if (workflowCopy.length === 0) {
|
||||
this.log('All actions completed. Workflow finished.', Level.LOG);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.options.debug) {
|
||||
this.log(`Current state is: \n${JSON.stringify(pageState, null, 2)}`, Level.WARN);
|
||||
}
|
||||
// let pageState = {};
|
||||
// try {
|
||||
// // Check if page is still valid before accessing state
|
||||
// if (p.isClosed()) {
|
||||
// this.log('Page was closed during execution', Level.WARN);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// pageState = await this.getState(p, workflowCopy, selectors);
|
||||
// selectors = [];
|
||||
// console.log("Empty selectors:", selectors)
|
||||
// } catch (e: any) {
|
||||
// this.log(`Failed to get page state: ${e.message}`, Level.ERROR);
|
||||
// // If state access fails, attempt graceful recovery
|
||||
// if (p.isClosed()) {
|
||||
// this.log('Browser has been closed, terminating workflow', Level.WARN);
|
||||
// return;
|
||||
// }
|
||||
// // For other errors, continue with empty state to avoid complete failure
|
||||
// pageState = { url: p.url(), selectors: [], cookies: {} };
|
||||
// }
|
||||
|
||||
// if (this.options.debug) {
|
||||
// this.log(`Current state is: \n${JSON.stringify(pageState, null, 2)}`, Level.WARN);
|
||||
// }
|
||||
|
||||
// const actionId = workflow.findIndex((step) => {
|
||||
// const isApplicable = this.applicable(step.where, pageState, usedActions);
|
||||
@@ -1205,8 +1210,9 @@ export default class Interpreter extends EventEmitter {
|
||||
// return isApplicable;
|
||||
// });
|
||||
|
||||
actionId = this.getMatchingActionId(workflowCopy, pageState, usedActions);
|
||||
// actionId = this.getMatchingActionId(workflowCopy, pageState, usedActions);
|
||||
|
||||
const actionId = workflowCopy.length - 1;
|
||||
const action = workflowCopy[actionId];
|
||||
|
||||
console.log("MATCHED ACTION:", action);
|
||||
@@ -1235,12 +1241,12 @@ export default class Interpreter extends EventEmitter {
|
||||
console.log(`Action with ID ${action.id} removed from the workflow copy.`);
|
||||
|
||||
// const newSelectors = this.getPreviousSelectors(workflow, actionId);
|
||||
const newSelectors = this.getSelectors(workflowCopy);
|
||||
newSelectors.forEach(selector => {
|
||||
if (!selectors.includes(selector)) {
|
||||
selectors.push(selector);
|
||||
}
|
||||
});
|
||||
// const newSelectors = this.getSelectors(workflowCopy);
|
||||
// newSelectors.forEach(selector => {
|
||||
// if (!selectors.includes(selector)) {
|
||||
// selectors.push(selector);
|
||||
// }
|
||||
// });
|
||||
|
||||
// Reset loop iteration counter on successful action
|
||||
loopIterations = 0;
|
||||
|
||||
@@ -442,6 +442,9 @@
|
||||
"created_at": "Erstellungsdatum des Roboters",
|
||||
"errors": {
|
||||
"robot_not_found": "Roboterdetails konnten nicht gefunden werden. Bitte versuchen Sie es erneut."
|
||||
},
|
||||
"buttons": {
|
||||
"close": "Schließen"
|
||||
}
|
||||
},
|
||||
"robot_edit": {
|
||||
|
||||
@@ -442,6 +442,9 @@
|
||||
"created_at": "Robot Created At",
|
||||
"errors": {
|
||||
"robot_not_found": "Could not find robot details. Please try again."
|
||||
},
|
||||
"buttons": {
|
||||
"close": "Close"
|
||||
}
|
||||
},
|
||||
"robot_edit": {
|
||||
|
||||
@@ -460,6 +460,9 @@
|
||||
"created_at": "Fecha de Creación del Robot",
|
||||
"errors": {
|
||||
"robot_not_found": "No se pudieron encontrar los detalles del robot. Inténtelo de nuevo."
|
||||
},
|
||||
"buttons": {
|
||||
"close": "Cerrar"
|
||||
}
|
||||
},
|
||||
"robot_edit": {
|
||||
|
||||
@@ -442,6 +442,9 @@
|
||||
"created_at": "作成日時",
|
||||
"errors": {
|
||||
"robot_not_found": "ロボットの詳細が見つかりませんでした。もう一度試してください。"
|
||||
},
|
||||
"buttons": {
|
||||
"close": "閉じる"
|
||||
}
|
||||
},
|
||||
"robot_edit": {
|
||||
|
||||
@@ -442,6 +442,9 @@
|
||||
"created_at": "Oluşturulma",
|
||||
"errors": {
|
||||
"robot_not_found": "Robot bulunamadı. Tekrar deneyin."
|
||||
},
|
||||
"buttons": {
|
||||
"close": "Kapat"
|
||||
}
|
||||
},
|
||||
"robot_edit": {
|
||||
|
||||
@@ -442,6 +442,9 @@
|
||||
"created_at": "机器人创建时间",
|
||||
"errors": {
|
||||
"robot_not_found": "无法找到机器人详细信息。请重试。"
|
||||
},
|
||||
"buttons": {
|
||||
"close": "关闭"
|
||||
}
|
||||
},
|
||||
"robot_edit": {
|
||||
|
||||
@@ -234,11 +234,11 @@ const handleMousemove = async (activeBrowser: RemoteBrowser, page: Page, { x, y
|
||||
|
||||
const generator = activeBrowser.generator;
|
||||
await page.mouse.move(x, y);
|
||||
throttle(async () => {
|
||||
if (!page.isClosed()) {
|
||||
await generator.generateDataForHighlighter(page, { x, y });
|
||||
}
|
||||
}, 100)();
|
||||
// throttle(async () => {
|
||||
// if (!page.isClosed()) {
|
||||
// await generator.generateDataForHighlighter(page, { x, y });
|
||||
// }
|
||||
// }, 100)();
|
||||
logger.log("debug", `Moved over position x:${x}, y:${y}`);
|
||||
} catch (e) {
|
||||
const { message } = e as Error;
|
||||
|
||||
@@ -145,6 +145,22 @@ if (require.main === module) {
|
||||
|
||||
io = new Server(server);
|
||||
|
||||
io.of('/queued-run').on('connection', (socket) => {
|
||||
const userId = socket.handshake.query.userId as string;
|
||||
|
||||
if (userId) {
|
||||
socket.join(`user-${userId}`);
|
||||
logger.log('info', `Client joined queued-run namespace for user: ${userId}, socket: ${socket.id}`);
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
logger.log('info', `Client disconnected from queued-run namespace: ${socket.id}`);
|
||||
});
|
||||
} else {
|
||||
logger.log('warn', `Client connected to queued-run namespace without userId: ${socket.id}`);
|
||||
socket.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
if (!isProduction) {
|
||||
if (process.platform === 'win32') {
|
||||
workerProcess = fork(workerPath, [], {
|
||||
|
||||
@@ -541,6 +541,10 @@ export class WorkflowGenerator {
|
||||
}
|
||||
|
||||
if ((elementInfo?.tagName === 'INPUT' || elementInfo?.tagName === 'TEXTAREA') && selector) {
|
||||
if (page.isClosed()) {
|
||||
logger.log('debug', 'Page is closed, cannot get cursor position');
|
||||
return;
|
||||
}
|
||||
const positionAndCursor = await page.evaluate(
|
||||
({ selector, coords }) => {
|
||||
const getCursorPosition = (element: any, clickX: any) => {
|
||||
@@ -1342,4 +1346,4 @@ export class WorkflowGenerator {
|
||||
public clearLastIndex = () => {
|
||||
this.generatedData.lastIndex = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,6 +21,10 @@ export const getElementInformation = async (
|
||||
) => {
|
||||
try {
|
||||
if (!getList || listSelector !== '') {
|
||||
if (page.isClosed()) {
|
||||
logger.debug('Page is closed, cannot get element information');
|
||||
return null;
|
||||
}
|
||||
const elementInfo = await page.evaluate(
|
||||
async ({ x, y }) => {
|
||||
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
|
||||
@@ -302,6 +306,10 @@ export const getElementInformation = async (
|
||||
);
|
||||
return elementInfo;
|
||||
} else {
|
||||
if (page.isClosed()) {
|
||||
logger.debug('Page is closed, cannot get element information (else branch)');
|
||||
return null;
|
||||
}
|
||||
const elementInfo = await page.evaluate(
|
||||
async ({ x, y }) => {
|
||||
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
|
||||
@@ -611,6 +619,10 @@ export const getElementInformation = async (
|
||||
export const getRect = async (page: Page, coordinates: Coordinates, listSelector: string, getList: boolean) => {
|
||||
try {
|
||||
if (!getList || listSelector !== '') {
|
||||
if (page.isClosed()) {
|
||||
logger.debug('Page is closed, cannot get element rect');
|
||||
return null;
|
||||
}
|
||||
const rect = await page.evaluate(
|
||||
async ({ x, y }) => {
|
||||
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
|
||||
@@ -834,6 +846,10 @@ export const getRect = async (page: Page, coordinates: Coordinates, listSelector
|
||||
);
|
||||
return rect;
|
||||
} else {
|
||||
if (page.isClosed()) {
|
||||
logger.debug('Page is closed, cannot get element rect (else branch)');
|
||||
return null;
|
||||
}
|
||||
const rect = await page.evaluate(
|
||||
async ({ x, y }) => {
|
||||
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
|
||||
@@ -1076,6 +1092,10 @@ export const getRect = async (page: Page, coordinates: Coordinates, listSelector
|
||||
*/
|
||||
export const getSelectors = async (page: Page, coordinates: Coordinates) => {
|
||||
try {
|
||||
if (page.isClosed()) {
|
||||
logger.debug('Page is closed, cannot get selectors');
|
||||
return null;
|
||||
}
|
||||
const selectors: any = await page.evaluate(async ({ x, y }) => {
|
||||
// version @medv/finder
|
||||
// https://github.com/antonmedv/finder/blob/master/finder.ts
|
||||
@@ -2010,6 +2030,10 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
|
||||
|
||||
try {
|
||||
if (!listSelector) {
|
||||
if (page.isClosed()) {
|
||||
logger.debug('Page is closed, cannot get non-unique selectors');
|
||||
return { generalSelector: '' };
|
||||
}
|
||||
const selectors = await page.evaluate(({ x, y }: { x: number, y: number }) => {
|
||||
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
|
||||
let elements = document.elementsFromPoint(x, y) as HTMLElement[];
|
||||
@@ -2364,6 +2388,10 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
|
||||
return selectors || { generalSelector: '' };
|
||||
} else {
|
||||
// When we have a list selector, we need special handling while maintaining shadow DOM and frame support
|
||||
if (page.isClosed()) {
|
||||
logger.debug('Page is closed, cannot get list selectors');
|
||||
return { generalSelector: '' };
|
||||
}
|
||||
const selectors = await page.evaluate(({ x, y }: { x: number, y: number }) => {
|
||||
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
|
||||
let elements = document.elementsFromPoint(x, y) as HTMLElement[];
|
||||
@@ -2725,6 +2753,10 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
|
||||
|
||||
export const getChildSelectors = async (page: Page, parentSelector: string): Promise<string[]> => {
|
||||
try {
|
||||
if (page.isClosed()) {
|
||||
logger.debug('Page is closed, cannot get child selectors');
|
||||
return [];
|
||||
}
|
||||
const childSelectors = await page.evaluate((parentSelector: string) => {
|
||||
// Function to get a non-unique selector based on tag and class (if present)
|
||||
function getNonUniqueSelector(element: HTMLElement): string {
|
||||
|
||||
@@ -2,11 +2,14 @@ import React, { useEffect, useState } from "react";
|
||||
import { RecordingsTable } from "./RecordingsTable";
|
||||
import { Grid } from "@mui/material";
|
||||
import { RunSettings, RunSettingsModal } from "../run/RunSettings";
|
||||
import { ScheduleSettings, ScheduleSettingsModal } from "./ScheduleSettings";
|
||||
import { IntegrationSettingsModal } from "../integration/IntegrationSettings";
|
||||
import { RobotSettingsModal } from "./RobotSettings";
|
||||
import { RobotEditModal } from "./RobotEdit";
|
||||
import { RobotDuplicationModal } from "./RobotDuplicate";
|
||||
import {
|
||||
ScheduleSettings,
|
||||
ScheduleSettingsPage,
|
||||
} from "./pages/ScheduleSettingsPage";
|
||||
import { RobotIntegrationPage } from "./pages/RobotIntegrationPage";
|
||||
import { RobotSettingsPage } from "./pages/RobotSettingsPage";
|
||||
import { RobotEditPage } from "./pages/RobotEditPage";
|
||||
import { RobotDuplicatePage } from "./pages/RobotDuplicatePage";
|
||||
import { useNavigate, useLocation, useParams } from "react-router-dom";
|
||||
import { useGlobalInfoStore } from "../../context/globalInfo";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -26,12 +29,16 @@ export const Recordings = ({
|
||||
}: RecordingsProps) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { selectedRecordingId } = useParams();
|
||||
const [params, setParams] = useState<string[]>([]);
|
||||
const { notify } = useGlobalInfoStore();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleNavigate = (path: string, id: string, name: string, params: string[]) => {
|
||||
const handleNavigate = (
|
||||
path: string,
|
||||
id: string,
|
||||
name: string,
|
||||
params: string[]
|
||||
) => {
|
||||
setParams(params);
|
||||
setRecordingInfo(id, name);
|
||||
navigate(path);
|
||||
@@ -47,35 +54,36 @@ export const Recordings = ({
|
||||
// Helper function to get and clear a cookie
|
||||
const getAndClearCookie = (name: string) => {
|
||||
const value = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith(`${name}=`))
|
||||
?.split('=')[1];
|
||||
|
||||
.split("; ")
|
||||
.find((row) => row.startsWith(`${name}=`))
|
||||
?.split("=")[1];
|
||||
|
||||
if (value) {
|
||||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
|
||||
}
|
||||
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
const authStatus = getAndClearCookie('robot_auth_status');
|
||||
const airtableAuthStatus = getAndClearCookie('airtable_auth_status');
|
||||
const robotId = getAndClearCookie('robot_auth_robotId');
|
||||
const authStatus = getAndClearCookie("robot_auth_status");
|
||||
const airtableAuthStatus = getAndClearCookie("airtable_auth_status");
|
||||
const robotId = getAndClearCookie("robot_auth_robotId");
|
||||
|
||||
if (airtableAuthStatus === 'success' && robotId) {
|
||||
if (airtableAuthStatus === "success" && robotId) {
|
||||
console.log("Airtable Auth Status:", airtableAuthStatus);
|
||||
notify(airtableAuthStatus, t("recordingtable.notifications.auth_success"));
|
||||
notify(
|
||||
airtableAuthStatus,
|
||||
t("recordingtable.notifications.auth_success")
|
||||
);
|
||||
handleNavigate(`/robots/${robotId}/integrate/airtable`, robotId, "", []);
|
||||
}
|
||||
else if (authStatus === 'success' && robotId) {
|
||||
} else if (authStatus === "success" && robotId) {
|
||||
console.log("Google Auth Status:", authStatus);
|
||||
notify(authStatus, t("recordingtable.notifications.auth_success"));
|
||||
handleNavigate(`/robots/${robotId}/integrate/google`, robotId, "", []);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Determine which modal to open based on the current route
|
||||
const getCurrentModal = () => {
|
||||
const getCurrentPageComponent = () => {
|
||||
const currentPath = location.pathname;
|
||||
|
||||
if (currentPath.endsWith("/run")) {
|
||||
@@ -89,79 +97,36 @@ export const Recordings = ({
|
||||
/>
|
||||
);
|
||||
} else if (currentPath.endsWith("/schedule")) {
|
||||
return <ScheduleSettingsPage handleStart={handleScheduleRecording} />;
|
||||
} else if (currentPath.includes("/integrate")) {
|
||||
return (
|
||||
<ScheduleSettingsModal
|
||||
isOpen={true}
|
||||
handleClose={handleClose}
|
||||
handleStart={handleScheduleRecording}
|
||||
/>
|
||||
);
|
||||
} else if (currentPath.endsWith("/integrate/google")) {
|
||||
return (
|
||||
<IntegrationSettingsModal
|
||||
isOpen={true}
|
||||
handleClose={handleClose}
|
||||
handleStart={() => {}}
|
||||
preSelectedIntegrationType="googleSheets"
|
||||
/>
|
||||
);
|
||||
} else if (currentPath.endsWith("/integrate/airtable")) {
|
||||
return (
|
||||
<IntegrationSettingsModal
|
||||
isOpen={true}
|
||||
handleClose={handleClose}
|
||||
handleStart={() => {}}
|
||||
preSelectedIntegrationType="airtable"
|
||||
/>
|
||||
);
|
||||
} else if (currentPath.endsWith("/integrate/webhook")) {
|
||||
return (
|
||||
<IntegrationSettingsModal
|
||||
isOpen={true}
|
||||
handleClose={handleClose}
|
||||
handleStart={() => {}}
|
||||
preSelectedIntegrationType="webhook"
|
||||
/>
|
||||
);
|
||||
} else if (currentPath.endsWith("/integrate")) {
|
||||
return (
|
||||
<IntegrationSettingsModal
|
||||
isOpen={true}
|
||||
handleClose={handleClose}
|
||||
handleStart={() => {}}
|
||||
/>
|
||||
<RobotIntegrationPage handleStart={() => {}} robotPath={"robots"} />
|
||||
);
|
||||
} else if (currentPath.endsWith("/settings")) {
|
||||
return (
|
||||
<RobotSettingsModal
|
||||
isOpen={true}
|
||||
handleClose={handleClose}
|
||||
handleStart={() => {}}
|
||||
/>
|
||||
);
|
||||
return <RobotSettingsPage handleStart={() => {}} />;
|
||||
} else if (currentPath.endsWith("/edit")) {
|
||||
return (
|
||||
<RobotEditModal
|
||||
isOpen={true}
|
||||
handleClose={handleClose}
|
||||
handleStart={() => {}}
|
||||
/>
|
||||
);
|
||||
return <RobotEditPage handleStart={() => {}} />;
|
||||
} else if (currentPath.endsWith("/duplicate")) {
|
||||
return (
|
||||
<RobotDuplicationModal
|
||||
isOpen={true}
|
||||
handleClose={handleClose}
|
||||
handleStart={() => {}}
|
||||
/>
|
||||
);
|
||||
return <RobotDuplicatePage handleStart={() => {}} />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const currentPath = location.pathname;
|
||||
const isConfigPage =
|
||||
currentPath.includes("/schedule") ||
|
||||
currentPath.includes("/integrate") ||
|
||||
currentPath.includes("/settings") ||
|
||||
currentPath.includes("/edit") ||
|
||||
currentPath.includes("/duplicate") ||
|
||||
currentPath.includes("/run");
|
||||
|
||||
if (isConfigPage) {
|
||||
return getCurrentPageComponent();
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{getCurrentModal()}
|
||||
<Grid container direction="column" sx={{ padding: "30px" }}>
|
||||
<Grid item xs>
|
||||
<RecordingsTable
|
||||
|
||||
202
src/components/robot/pages/RobotConfigPage.tsx
Normal file
202
src/components/robot/pages/RobotConfigPage.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
IconButton,
|
||||
Divider,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import { ArrowBack } from '@mui/icons-material';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface RobotConfigPageProps {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
onSave?: () => void;
|
||||
onCancel?: () => void;
|
||||
saveButtonText?: string;
|
||||
cancelButtonText?: string;
|
||||
showSaveButton?: boolean;
|
||||
showCancelButton?: boolean;
|
||||
isLoading?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
onBackToSelection?: () => void;
|
||||
backToSelectionText?: string;
|
||||
onArrowBack?: () => void; // Optional prop for custom back action
|
||||
}
|
||||
|
||||
export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
|
||||
title,
|
||||
children,
|
||||
onSave,
|
||||
onCancel,
|
||||
saveButtonText,
|
||||
cancelButtonText,
|
||||
showSaveButton = true,
|
||||
showCancelButton = true,
|
||||
isLoading = false,
|
||||
icon,
|
||||
onBackToSelection,
|
||||
backToSelectionText,
|
||||
onArrowBack,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleBack = () => {
|
||||
if (onCancel) {
|
||||
onCancel();
|
||||
} else {
|
||||
// Try to determine the correct path based on current URL
|
||||
const currentPath = location.pathname;
|
||||
const basePath = currentPath.includes('/prebuilt-robots') ? '/prebuilt-robots' : '/robots';
|
||||
navigate(basePath);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
maxWidth: 1000,
|
||||
margin: '50px auto',
|
||||
maxHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '1000px',
|
||||
height: '100%',
|
||||
overflowY: 'auto', // Allow scrolling if content exceeds height
|
||||
}}>
|
||||
{/* Header Section - Fixed Position */}
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
maxHeight: '64px',
|
||||
mb: 2,
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<IconButton
|
||||
onClick={onArrowBack ? onArrowBack : handleBack}
|
||||
sx={{
|
||||
ml: -1,
|
||||
mr: 1,
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: 'transparent !important',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent !important',
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: 'transparent !important',
|
||||
},
|
||||
'&:focus': {
|
||||
backgroundColor: 'transparent !important',
|
||||
},
|
||||
'&:focus-visible': {
|
||||
backgroundColor: 'transparent !important',
|
||||
},
|
||||
}}
|
||||
disableRipple
|
||||
>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
{icon && (
|
||||
<Box sx={{ mr: 2, color: theme.palette.text.primary }}>
|
||||
{icon}
|
||||
</Box>
|
||||
)}
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: theme.palette.text.primary,
|
||||
lineHeight: 1.2
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Divider sx={{ mb: 4, flexShrink: 0 }} />
|
||||
|
||||
{/* Content Section */}
|
||||
<Box sx={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minHeight: 0,
|
||||
mt: 2,
|
||||
mb: 3,
|
||||
}}>
|
||||
{children}
|
||||
</Box>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{(showSaveButton || showCancelButton || onBackToSelection) && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
|
||||
gap: 2,
|
||||
pt: 3, // Reduce padding top to minimize space above
|
||||
borderTop: `1px solid ${theme.palette.divider}`,
|
||||
flexShrink: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{/* Left side - Back to Selection button */}
|
||||
{onBackToSelection && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={onBackToSelection}
|
||||
disabled={isLoading}
|
||||
sx={{
|
||||
color: '#ff00c3 !important',
|
||||
borderColor: '#ff00c3 !important',
|
||||
backgroundColor: 'white !important',
|
||||
}} >
|
||||
{backToSelectionText || t("buttons.back_arrow")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Right side - Save/Cancel buttons */}
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
{showCancelButton && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleBack}
|
||||
disabled={isLoading}
|
||||
sx={{
|
||||
color: '#ff00c3 !important',
|
||||
borderColor: '#ff00c3 !important',
|
||||
backgroundColor: 'white !important',
|
||||
}} >
|
||||
{cancelButtonText || t("buttons.cancel")}
|
||||
</Button>
|
||||
)}
|
||||
{showSaveButton && onSave && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onSave}
|
||||
disabled={isLoading}
|
||||
sx={{
|
||||
bgcolor: '#ff00c3',
|
||||
'&:hover': {
|
||||
bgcolor: '#cc0099',
|
||||
boxShadow: 'none',
|
||||
},
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
px: 3,
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
>
|
||||
{isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
205
src/components/robot/pages/RobotDuplicatePage.tsx
Normal file
205
src/components/robot/pages/RobotDuplicatePage.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
TextField,
|
||||
Typography,
|
||||
Box,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import { useGlobalInfoStore } from "../../../context/globalInfo";
|
||||
import {
|
||||
duplicateRecording,
|
||||
getStoredRecording,
|
||||
getStoredRecordings,
|
||||
} from "../../../api/storage";
|
||||
import { WhereWhatPair } from "maxun-core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { RobotConfigPage } from "./RobotConfigPage";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
interface RobotMeta {
|
||||
name: string;
|
||||
id: string;
|
||||
prebuiltId?: string;
|
||||
createdAt: string;
|
||||
pairs: number;
|
||||
updatedAt: string;
|
||||
params: any[];
|
||||
type?: string;
|
||||
description?: string;
|
||||
usedByUsers?: number[];
|
||||
subscriptionLevel?: number;
|
||||
access?: string;
|
||||
sample?: any[];
|
||||
url?: string;
|
||||
}
|
||||
|
||||
interface RobotWorkflow {
|
||||
workflow: WhereWhatPair[];
|
||||
}
|
||||
|
||||
interface ScheduleConfig {
|
||||
runEvery: number;
|
||||
runEveryUnit: "MINUTES" | "HOURS" | "DAYS" | "WEEKS" | "MONTHS";
|
||||
startFrom:
|
||||
| "SUNDAY"
|
||||
| "MONDAY"
|
||||
| "TUESDAY"
|
||||
| "WEDNESDAY"
|
||||
| "THURSDAY"
|
||||
| "FRIDAY"
|
||||
| "SATURDAY";
|
||||
atTimeStart?: string;
|
||||
atTimeEnd?: string;
|
||||
timezone: string;
|
||||
lastRunAt?: Date;
|
||||
nextRunAt?: Date;
|
||||
cronExpression?: string;
|
||||
}
|
||||
|
||||
export interface RobotSettings {
|
||||
id: string;
|
||||
userId?: number;
|
||||
recording_meta: RobotMeta;
|
||||
recording: RobotWorkflow;
|
||||
google_sheet_email?: string | null;
|
||||
google_sheet_name?: string | null;
|
||||
google_sheet_id?: string | null;
|
||||
google_access_token?: string | null;
|
||||
google_refresh_token?: string | null;
|
||||
schedule?: ScheduleConfig | null;
|
||||
}
|
||||
|
||||
interface RobotSettingsProps {
|
||||
handleStart: (settings: RobotSettings) => void;
|
||||
}
|
||||
|
||||
export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [targetUrl, setTargetUrl] = useState<string | undefined>("");
|
||||
const [robot, setRobot] = useState<RobotSettings | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { recordingId, notify, setRerenderRobots} =
|
||||
useGlobalInfoStore();
|
||||
|
||||
useEffect(() => {
|
||||
getRobot();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (robot) {
|
||||
let url = robot.recording_meta.url;
|
||||
|
||||
if (!url) {
|
||||
const lastPair =
|
||||
robot?.recording.workflow[robot?.recording.workflow.length - 1];
|
||||
url = lastPair?.what.find((action) => action.action === "goto")
|
||||
?.args?.[0];
|
||||
}
|
||||
|
||||
setTargetUrl(url);
|
||||
}
|
||||
}, [robot]);
|
||||
|
||||
const getRobot = async () => {
|
||||
if (recordingId) {
|
||||
try {
|
||||
const robot = await getStoredRecording(recordingId);
|
||||
setRobot(robot);
|
||||
} catch (error) {
|
||||
notify("error", t("robot_duplication.notifications.robot_not_found"));
|
||||
}
|
||||
} else {
|
||||
notify("error", t("robot_duplication.notifications.robot_not_found"));
|
||||
}
|
||||
};
|
||||
|
||||
const handleTargetUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setTargetUrl(e.target.value);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!robot || !targetUrl) {
|
||||
notify("error", t("robot_duplication.notifications.url_required"));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const success = await duplicateRecording(
|
||||
robot.recording_meta.id,
|
||||
targetUrl
|
||||
);
|
||||
|
||||
if (success) {
|
||||
setRerenderRobots(true);
|
||||
notify(
|
||||
"success",
|
||||
t("robot_duplication.notifications.duplicate_success")
|
||||
);
|
||||
handleStart(robot);
|
||||
const basePath = location.pathname.includes("/prebuilt-robots")
|
||||
? "/prebuilt-robots"
|
||||
: "/robots";
|
||||
navigate(basePath);
|
||||
} else {
|
||||
notify("error", t("robot_duplication.notifications.duplicate_error"));
|
||||
}
|
||||
} catch (error) {
|
||||
notify("error", t("robot_duplication.notifications.unknown_error"));
|
||||
console.error("Error updating Target URL:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
const basePath = location.pathname.includes("/prebuilt-robots")
|
||||
? "/prebuilt-robots"
|
||||
: "/robots";
|
||||
navigate(basePath);
|
||||
};
|
||||
|
||||
return (
|
||||
<RobotConfigPage
|
||||
title={t("robot_duplication.title")}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
saveButtonText={t("robot_duplication.buttons.duplicate")}
|
||||
cancelButtonText={t("robot_duplication.buttons.cancel")}
|
||||
isLoading={isLoading}
|
||||
showCancelButton={false}
|
||||
>
|
||||
<>
|
||||
<Box style={{ display: "flex", flexDirection: "column" }}>
|
||||
{robot && (
|
||||
<>
|
||||
<span>{t("robot_duplication.descriptions.purpose")}</span>
|
||||
<br />
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: t("robot_duplication.descriptions.example", {
|
||||
url1: "<code>producthunt.com/topics/api</code>",
|
||||
url2: "<code>producthunt.com/topics/database</code>",
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
<span>
|
||||
<b>{t("robot_duplication.descriptions.warning")}</b>
|
||||
</span>
|
||||
<TextField
|
||||
label={t("robot_duplication.fields.target_url")}
|
||||
key={t("robot_duplication.fields.target_url")}
|
||||
value={targetUrl}
|
||||
onChange={handleTargetUrlChange}
|
||||
style={{ marginBottom: "20px", marginTop: "30px" }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
</RobotConfigPage>
|
||||
);
|
||||
};
|
||||
656
src/components/robot/pages/RobotEditPage.tsx
Normal file
656
src/components/robot/pages/RobotEditPage.tsx
Normal file
@@ -0,0 +1,656 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
TextField,
|
||||
Typography,
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
} from "@mui/material";
|
||||
import { Visibility, VisibilityOff } from "@mui/icons-material";
|
||||
import { useGlobalInfoStore } from "../../../context/globalInfo";
|
||||
import { getStoredRecording, updateRecording } from "../../../api/storage";
|
||||
import { WhereWhatPair } from "maxun-core";
|
||||
import { RobotConfigPage } from "./RobotConfigPage";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
interface RobotMeta {
|
||||
name: string;
|
||||
id: string;
|
||||
prebuiltId?: string;
|
||||
createdAt: string;
|
||||
pairs: number;
|
||||
updatedAt: string;
|
||||
params: any[];
|
||||
type?: string;
|
||||
description?: string;
|
||||
usedByUsers?: number[];
|
||||
subscriptionLevel?: number;
|
||||
access?: string;
|
||||
sample?: any[];
|
||||
url?: string;
|
||||
}
|
||||
|
||||
interface RobotWorkflow {
|
||||
workflow: WhereWhatPair[];
|
||||
}
|
||||
|
||||
interface ScheduleConfig {
|
||||
runEvery: number;
|
||||
runEveryUnit: "MINUTES" | "HOURS" | "DAYS" | "WEEKS" | "MONTHS";
|
||||
startFrom:
|
||||
| "SUNDAY"
|
||||
| "MONDAY"
|
||||
| "TUESDAY"
|
||||
| "WEDNESDAY"
|
||||
| "THURSDAY"
|
||||
| "FRIDAY"
|
||||
| "SATURDAY";
|
||||
atTimeStart?: string;
|
||||
atTimeEnd?: string;
|
||||
timezone: string;
|
||||
lastRunAt?: Date;
|
||||
nextRunAt?: Date;
|
||||
cronExpression?: string;
|
||||
}
|
||||
|
||||
export interface RobotSettings {
|
||||
id: string;
|
||||
userId?: number;
|
||||
recording_meta: RobotMeta;
|
||||
recording: RobotWorkflow;
|
||||
google_sheet_email?: string | null;
|
||||
google_sheet_name?: string | null;
|
||||
google_sheet_id?: string | null;
|
||||
google_access_token?: string | null;
|
||||
google_refresh_token?: string | null;
|
||||
schedule?: ScheduleConfig | null;
|
||||
}
|
||||
|
||||
interface RobotSettingsProps {
|
||||
handleStart: (settings: RobotSettings) => void;
|
||||
}
|
||||
|
||||
interface CredentialInfo {
|
||||
value: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface Credentials {
|
||||
[key: string]: CredentialInfo;
|
||||
}
|
||||
|
||||
interface CredentialVisibility {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
interface GroupedCredentials {
|
||||
passwords: string[];
|
||||
emails: string[];
|
||||
usernames: string[];
|
||||
others: string[];
|
||||
}
|
||||
|
||||
interface ScrapeListLimit {
|
||||
pairIndex: number;
|
||||
actionIndex: number;
|
||||
argIndex: number;
|
||||
currentLimit: number;
|
||||
}
|
||||
|
||||
export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [credentials, setCredentials] = useState<Credentials>({});
|
||||
const { recordingId, notify, setRerenderRobots } = useGlobalInfoStore();
|
||||
const [robot, setRobot] = useState<RobotSettings | null>(null);
|
||||
const [credentialGroups, setCredentialGroups] = useState<GroupedCredentials>({
|
||||
passwords: [],
|
||||
emails: [],
|
||||
usernames: [],
|
||||
others: [],
|
||||
});
|
||||
const [showPasswords, setShowPasswords] = useState<CredentialVisibility>({});
|
||||
const [scrapeListLimits, setScrapeListLimits] = useState<ScrapeListLimit[]>(
|
||||
[]
|
||||
);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const isEmailPattern = (value: string): boolean => {
|
||||
return value.includes("@");
|
||||
};
|
||||
|
||||
const isUsernameSelector = (selector: string): boolean => {
|
||||
return (
|
||||
selector.toLowerCase().includes("username") ||
|
||||
selector.toLowerCase().includes("user") ||
|
||||
selector.toLowerCase().includes("email")
|
||||
);
|
||||
};
|
||||
|
||||
const determineCredentialType = (
|
||||
selector: string,
|
||||
info: CredentialInfo
|
||||
): "password" | "email" | "username" | "other" => {
|
||||
if (
|
||||
info.type === "password" ||
|
||||
selector.toLowerCase().includes("password")
|
||||
) {
|
||||
return "password";
|
||||
}
|
||||
if (
|
||||
isEmailPattern(info.value) ||
|
||||
selector.toLowerCase().includes("email")
|
||||
) {
|
||||
return "email";
|
||||
}
|
||||
if (isUsernameSelector(selector)) {
|
||||
return "username";
|
||||
}
|
||||
return "other";
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getRobot();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (robot?.recording?.workflow) {
|
||||
const extractedCredentials = extractInitialCredentials(
|
||||
robot.recording.workflow
|
||||
);
|
||||
setCredentials(extractedCredentials);
|
||||
setCredentialGroups(groupCredentialsByType(extractedCredentials));
|
||||
|
||||
findScrapeListLimits(robot.recording.workflow);
|
||||
}
|
||||
}, [robot]);
|
||||
|
||||
const findScrapeListLimits = (workflow: WhereWhatPair[]) => {
|
||||
const limits: ScrapeListLimit[] = [];
|
||||
|
||||
workflow.forEach((pair, pairIndex) => {
|
||||
if (!pair.what) return;
|
||||
|
||||
pair.what.forEach((action, actionIndex) => {
|
||||
if (
|
||||
action.action === "scrapeList" &&
|
||||
action.args &&
|
||||
action.args.length > 0
|
||||
) {
|
||||
// Check if first argument has a limit property
|
||||
const arg = action.args[0];
|
||||
if (arg && typeof arg === "object" && "limit" in arg) {
|
||||
limits.push({
|
||||
pairIndex,
|
||||
actionIndex,
|
||||
argIndex: 0,
|
||||
currentLimit: arg.limit,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setScrapeListLimits(limits);
|
||||
};
|
||||
|
||||
function extractInitialCredentials(workflow: any[]): Credentials {
|
||||
const credentials: Credentials = {};
|
||||
|
||||
const isPrintableCharacter = (char: string): boolean => {
|
||||
return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
|
||||
};
|
||||
|
||||
workflow.forEach((step) => {
|
||||
if (!step.what) return;
|
||||
|
||||
let currentSelector = "";
|
||||
let currentValue = "";
|
||||
let currentType = "";
|
||||
let i = 0;
|
||||
|
||||
while (i < step.what.length) {
|
||||
const action = step.what[i];
|
||||
|
||||
if (!action.action || !action.args?.[0]) {
|
||||
i++;
|
||||
continue;
|
||||
}
|
||||
|
||||
const selector = action.args[0];
|
||||
|
||||
// Handle full word type actions first
|
||||
if (
|
||||
action.action === "type" &&
|
||||
action.args?.length >= 2 &&
|
||||
typeof action.args[1] === "string" &&
|
||||
action.args[1].length > 1
|
||||
) {
|
||||
if (!credentials[selector]) {
|
||||
credentials[selector] = {
|
||||
value: action.args[1],
|
||||
type: action.args[2] || "text",
|
||||
};
|
||||
}
|
||||
i++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Handle character-by-character sequences (both type and press)
|
||||
if (
|
||||
(action.action === "type" || action.action === "press") &&
|
||||
action.args?.length >= 2 &&
|
||||
typeof action.args[1] === "string"
|
||||
) {
|
||||
if (selector !== currentSelector) {
|
||||
if (currentSelector && currentValue) {
|
||||
credentials[currentSelector] = {
|
||||
value: currentValue,
|
||||
type: currentType || "text",
|
||||
};
|
||||
}
|
||||
currentSelector = selector;
|
||||
currentValue = credentials[selector]?.value || "";
|
||||
currentType =
|
||||
action.args[2] || credentials[selector]?.type || "text";
|
||||
}
|
||||
|
||||
const character = action.args[1];
|
||||
|
||||
if (isPrintableCharacter(character)) {
|
||||
currentValue += character;
|
||||
} else if (character === "Backspace") {
|
||||
currentValue = currentValue.slice(0, -1);
|
||||
}
|
||||
|
||||
if (!currentType && action.args[2]?.toLowerCase() === "password") {
|
||||
currentType = "password";
|
||||
}
|
||||
|
||||
let j = i + 1;
|
||||
while (j < step.what.length) {
|
||||
const nextAction = step.what[j];
|
||||
if (
|
||||
!nextAction.action ||
|
||||
!nextAction.args?.[0] ||
|
||||
nextAction.args[0] !== selector ||
|
||||
(nextAction.action !== "type" && nextAction.action !== "press")
|
||||
) {
|
||||
break;
|
||||
}
|
||||
if (nextAction.args[1] === "Backspace") {
|
||||
currentValue = currentValue.slice(0, -1);
|
||||
} else if (isPrintableCharacter(nextAction.args[1])) {
|
||||
currentValue += nextAction.args[1];
|
||||
}
|
||||
j++;
|
||||
}
|
||||
|
||||
credentials[currentSelector] = {
|
||||
value: currentValue,
|
||||
type: currentType,
|
||||
};
|
||||
|
||||
i = j;
|
||||
} else {
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentSelector && currentValue) {
|
||||
credentials[currentSelector] = {
|
||||
value: currentValue,
|
||||
type: currentType || "text",
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return credentials;
|
||||
}
|
||||
|
||||
const groupCredentialsByType = (
|
||||
credentials: Credentials
|
||||
): GroupedCredentials => {
|
||||
return Object.entries(credentials).reduce(
|
||||
(acc: GroupedCredentials, [selector, info]) => {
|
||||
const credentialType = determineCredentialType(selector, info);
|
||||
|
||||
switch (credentialType) {
|
||||
case "password":
|
||||
acc.passwords.push(selector);
|
||||
break;
|
||||
case "email":
|
||||
acc.emails.push(selector);
|
||||
break;
|
||||
case "username":
|
||||
acc.usernames.push(selector);
|
||||
break;
|
||||
default:
|
||||
acc.others.push(selector);
|
||||
}
|
||||
|
||||
return acc;
|
||||
},
|
||||
{ passwords: [], emails: [], usernames: [], others: [] }
|
||||
);
|
||||
};
|
||||
|
||||
const getRobot = async () => {
|
||||
if (recordingId) {
|
||||
try {
|
||||
const robot = await getStoredRecording(recordingId);
|
||||
setRobot(robot);
|
||||
} catch (error) {
|
||||
notify("error", t("robot_edit.notifications.update_failed"));
|
||||
}
|
||||
} else {
|
||||
notify("error", t("robot_edit.notifications.update_failed"));
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickShowPassword = (selector: string) => {
|
||||
setShowPasswords((prev) => ({
|
||||
...prev,
|
||||
[selector]: !prev[selector],
|
||||
}));
|
||||
};
|
||||
|
||||
const handleRobotNameChange = (newName: string) => {
|
||||
setRobot((prev) =>
|
||||
prev
|
||||
? { ...prev, recording_meta: { ...prev.recording_meta, name: newName } }
|
||||
: prev
|
||||
);
|
||||
};
|
||||
|
||||
const handleCredentialChange = (selector: string, value: string) => {
|
||||
setCredentials((prev) => ({
|
||||
...prev,
|
||||
[selector]: {
|
||||
...prev[selector],
|
||||
value,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
const handleLimitChange = (
|
||||
pairIndex: number,
|
||||
actionIndex: number,
|
||||
argIndex: number,
|
||||
newLimit: number
|
||||
) => {
|
||||
setRobot((prev) => {
|
||||
if (!prev) return prev;
|
||||
|
||||
const updatedWorkflow = [...prev.recording.workflow];
|
||||
if (
|
||||
updatedWorkflow.length > pairIndex &&
|
||||
updatedWorkflow[pairIndex]?.what &&
|
||||
updatedWorkflow[pairIndex].what.length > actionIndex &&
|
||||
updatedWorkflow[pairIndex].what[actionIndex].args &&
|
||||
updatedWorkflow[pairIndex].what[actionIndex].args.length > argIndex
|
||||
) {
|
||||
updatedWorkflow[pairIndex].what[actionIndex].args[argIndex].limit =
|
||||
newLimit;
|
||||
|
||||
setScrapeListLimits((prev) => {
|
||||
return prev.map((item) => {
|
||||
if (
|
||||
item.pairIndex === pairIndex &&
|
||||
item.actionIndex === actionIndex &&
|
||||
item.argIndex === argIndex
|
||||
) {
|
||||
return { ...item, currentLimit: newLimit };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
...prev,
|
||||
recording: { ...prev.recording, workflow: updatedWorkflow },
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const handleTargetUrlChange = (newUrl: string) => {
|
||||
setRobot((prev) => {
|
||||
if (!prev) return prev;
|
||||
|
||||
const updatedWorkflow = [...prev.recording.workflow];
|
||||
const lastPairIndex = updatedWorkflow.length - 1;
|
||||
|
||||
if (lastPairIndex >= 0) {
|
||||
const gotoAction = updatedWorkflow[lastPairIndex]?.what?.find(
|
||||
(action) => action.action === "goto"
|
||||
);
|
||||
if (gotoAction && gotoAction.args && gotoAction.args.length > 0) {
|
||||
gotoAction.args[0] = newUrl;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...prev,
|
||||
recording_meta: { ...prev.recording_meta, url: newUrl },
|
||||
recording: { ...prev.recording, workflow: updatedWorkflow },
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const renderAllCredentialFields = () => {
|
||||
return (
|
||||
<>
|
||||
{renderCredentialFields(
|
||||
credentialGroups.usernames,
|
||||
t("Username"),
|
||||
"text"
|
||||
)}
|
||||
|
||||
{renderCredentialFields(credentialGroups.emails, t("Email"), "text")}
|
||||
|
||||
{renderCredentialFields(
|
||||
credentialGroups.passwords,
|
||||
t("Password"),
|
||||
"password"
|
||||
)}
|
||||
|
||||
{renderCredentialFields(credentialGroups.others, t("Other"), "text")}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderScrapeListLimitFields = () => {
|
||||
if (scrapeListLimits.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography variant="body1" style={{ marginBottom: "20px" }}>
|
||||
{t("List Limits")}
|
||||
</Typography>
|
||||
|
||||
{scrapeListLimits.map((limitInfo, index) => (
|
||||
<TextField
|
||||
key={`limit-${limitInfo.pairIndex}-${limitInfo.actionIndex}`}
|
||||
label={`${t("List Limit")} ${index + 1}`}
|
||||
type="number"
|
||||
value={limitInfo.currentLimit || ""}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value, 10);
|
||||
if (value >= 1) {
|
||||
handleLimitChange(
|
||||
limitInfo.pairIndex,
|
||||
limitInfo.actionIndex,
|
||||
limitInfo.argIndex,
|
||||
value
|
||||
);
|
||||
}
|
||||
}}
|
||||
inputProps={{ min: 1 }}
|
||||
style={{ marginBottom: "20px" }}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderCredentialFields = (
|
||||
selectors: string[],
|
||||
headerText: string,
|
||||
defaultType: "text" | "password" = "text"
|
||||
) => {
|
||||
if (selectors.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{selectors.map((selector, index) => {
|
||||
const isVisible = showPasswords[selector];
|
||||
|
||||
return (
|
||||
<TextField
|
||||
key={selector}
|
||||
type={isVisible ? "text" : "password"}
|
||||
label={
|
||||
headerText === "Other" ? `${`Input`} ${index + 1}` : headerText
|
||||
}
|
||||
value={credentials[selector]?.value || ""}
|
||||
onChange={(e) => handleCredentialChange(selector, e.target.value)}
|
||||
fullWidth
|
||||
style={{ marginBottom: "20px" }}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="Show input"
|
||||
onClick={() => handleClickShowPassword(selector)}
|
||||
edge="end"
|
||||
disabled={!credentials[selector]?.value}
|
||||
>
|
||||
{isVisible ? <Visibility /> : <VisibilityOff />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const getTargetUrl = () => {
|
||||
let url = robot?.recording_meta.url;
|
||||
|
||||
if (!url) {
|
||||
const lastPair =
|
||||
robot?.recording.workflow[robot?.recording.workflow.length - 1];
|
||||
url = lastPair?.what.find((action) => action.action === "goto")
|
||||
?.args?.[0];
|
||||
}
|
||||
|
||||
return url;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!robot) return;
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const credentialsForPayload = Object.entries(credentials).reduce(
|
||||
(acc, [selector, info]) => {
|
||||
const enforceType = info.type === "password" ? "password" : "text";
|
||||
|
||||
acc[selector] = {
|
||||
value: info.value,
|
||||
type: enforceType,
|
||||
};
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, CredentialInfo>
|
||||
);
|
||||
|
||||
const targetUrl = getTargetUrl();
|
||||
|
||||
const payload = {
|
||||
name: robot.recording_meta.name,
|
||||
limits: scrapeListLimits.map((limit) => ({
|
||||
pairIndex: limit.pairIndex,
|
||||
actionIndex: limit.actionIndex,
|
||||
argIndex: limit.argIndex,
|
||||
limit: limit.currentLimit,
|
||||
})),
|
||||
credentials: credentialsForPayload,
|
||||
targetUrl: targetUrl,
|
||||
};
|
||||
|
||||
const success = await updateRecording(robot.recording_meta.id, payload);
|
||||
|
||||
if (success) {
|
||||
setRerenderRobots(true);
|
||||
notify("success", t("robot_edit.notifications.update_success"));
|
||||
handleStart(robot);
|
||||
const basePath = "/robots";
|
||||
navigate(basePath);
|
||||
} else {
|
||||
notify("error", t("robot_edit.notifications.update_failed"));
|
||||
}
|
||||
} catch (error) {
|
||||
notify("error", t("robot_edit.notifications.update_error"));
|
||||
console.error("Error updating robot:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
const basePath = "/robots";
|
||||
navigate(basePath);
|
||||
};
|
||||
|
||||
const lastPair =
|
||||
robot?.recording.workflow[robot?.recording.workflow.length - 1];
|
||||
const targetUrl = lastPair?.what.find((action) => action.action === "goto")
|
||||
?.args?.[0];
|
||||
|
||||
return (
|
||||
<RobotConfigPage
|
||||
title={t("robot_edit.title")}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
saveButtonText={t("robot_edit.save")}
|
||||
cancelButtonText={t("robot_edit.cancel")}
|
||||
showCancelButton={false}
|
||||
isLoading={isLoading}
|
||||
>
|
||||
<>
|
||||
<Box style={{ display: "flex", flexDirection: "column" }}>
|
||||
{robot && (
|
||||
<>
|
||||
<TextField
|
||||
label={t("robot_edit.change_name")}
|
||||
key="Robot Name"
|
||||
type="text"
|
||||
value={robot.recording_meta.name}
|
||||
onChange={(e) => handleRobotNameChange(e.target.value)}
|
||||
style={{ marginBottom: "20px" }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label={t("robot_duplication.fields.target_url")}
|
||||
key={t("robot_duplication.fields.target_url")}
|
||||
value={targetUrl || ""}
|
||||
onChange={(e) => handleTargetUrlChange(e.target.value)}
|
||||
style={{ marginBottom: "20px" }}
|
||||
/>
|
||||
|
||||
{renderScrapeListLimitFields()}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
</RobotConfigPage>
|
||||
);
|
||||
};
|
||||
868
src/components/robot/pages/RobotIntegrationPage.tsx
Normal file
868
src/components/robot/pages/RobotIntegrationPage.tsx
Normal file
@@ -0,0 +1,868 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
MenuItem,
|
||||
Typography,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
AlertTitle,
|
||||
Button,
|
||||
TextField,
|
||||
IconButton,
|
||||
Box,
|
||||
Chip,
|
||||
Card,
|
||||
CardContent,
|
||||
CardActions,
|
||||
Switch,
|
||||
FormControlLabel,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Paper,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
Add as AddIcon,
|
||||
Delete as DeleteIcon,
|
||||
Edit as EditIcon,
|
||||
Science as ScienceIcon,
|
||||
} from "@mui/icons-material";
|
||||
import axios from "axios";
|
||||
import { useGlobalInfoStore } from "../../../context/globalInfo";
|
||||
import { getStoredRecording } from "../../../api/storage";
|
||||
import { apiUrl } from "../../../apiConfig.js";
|
||||
import { v4 as uuid } from "uuid";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useParams, useLocation } from "react-router-dom";
|
||||
import {
|
||||
addWebhook,
|
||||
updateWebhook,
|
||||
removeWebhook,
|
||||
getWebhooks,
|
||||
testWebhook,
|
||||
WebhookConfig,
|
||||
} from "../../../api/webhook";
|
||||
import { RobotConfigPage } from "./RobotConfigPage";
|
||||
|
||||
interface IntegrationProps {
|
||||
handleStart: (data: IntegrationSettings) => void;
|
||||
robotPath?: string;
|
||||
preSelectedIntegrationType?: "googleSheets" | "airtable" | "webhook" | null;
|
||||
}
|
||||
|
||||
export interface IntegrationSettings {
|
||||
spreadsheetId?: string;
|
||||
spreadsheetName?: string;
|
||||
airtableBaseId?: string;
|
||||
airtableBaseName?: string;
|
||||
airtableTableName?: string;
|
||||
airtableTableId?: string;
|
||||
webhooks?: WebhookConfig[];
|
||||
data: string;
|
||||
integrationType: "googleSheets" | "airtable" | "webhook";
|
||||
}
|
||||
|
||||
export const RobotIntegrationPage = ({
|
||||
handleStart,
|
||||
robotPath = "robots",
|
||||
preSelectedIntegrationType = null,
|
||||
}: IntegrationProps) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const pathSegments = location.pathname.split('/');
|
||||
const robotsIndex = pathSegments.findIndex(segment => segment === 'robots' || segment === 'prebuilt-robots');
|
||||
const integrateIndex = pathSegments.findIndex(segment => segment === 'integrate');
|
||||
|
||||
const robotIdFromUrl = robotsIndex !== -1 && robotsIndex + 1 < pathSegments.length
|
||||
? pathSegments[robotsIndex + 1]
|
||||
: null;
|
||||
|
||||
const integrationType = integrateIndex !== -1 && integrateIndex + 1 < pathSegments.length
|
||||
? pathSegments[integrateIndex + 1] as "googleSheets" | "airtable" | "webhook"
|
||||
: preSelectedIntegrationType || null;
|
||||
|
||||
const [settings, setSettings] = useState<IntegrationSettings>({
|
||||
spreadsheetId: "",
|
||||
spreadsheetName: "",
|
||||
airtableBaseId: "",
|
||||
airtableBaseName: "",
|
||||
airtableTableName: "",
|
||||
airtableTableId: "",
|
||||
webhooks: [],
|
||||
data: "",
|
||||
integrationType: integrationType || "airtable",
|
||||
});
|
||||
|
||||
const [spreadsheets, setSpreadsheets] = useState<{ id: string; name: string }[]>([]);
|
||||
const [airtableBases, setAirtableBases] = useState<{ id: string; name: string }[]>([]);
|
||||
const [airtableTables, setAirtableTables] = useState<{ id: string; name: string }[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [showWebhookForm, setShowWebhookForm] = useState(false);
|
||||
const [editingWebhook, setEditingWebhook] = useState<string | null>(null);
|
||||
const [newWebhook, setNewWebhook] = useState<WebhookConfig>({
|
||||
id: "",
|
||||
url: "",
|
||||
events: ["run_completed"],
|
||||
active: true,
|
||||
});
|
||||
const [urlError, setUrlError] = useState<string | null>(null);
|
||||
|
||||
const { recordingId: recordingIdFromStore, notify, setRerenderRobots, setRecordingId } = useGlobalInfoStore();
|
||||
|
||||
const recordingId = robotIdFromUrl || recordingIdFromStore;
|
||||
|
||||
useEffect(() => {
|
||||
if (robotIdFromUrl && robotIdFromUrl !== recordingIdFromStore) {
|
||||
setRecordingId(robotIdFromUrl);
|
||||
}
|
||||
}, [robotIdFromUrl, recordingIdFromStore, setRecordingId]);
|
||||
|
||||
const [recording, setRecording] = useState<any>(null);
|
||||
const [selectedIntegrationType, setSelectedIntegrationType] = useState<
|
||||
"googleSheets" | "airtable" | "webhook" | null
|
||||
>(integrationType);
|
||||
|
||||
const authenticateWithGoogle = () => {
|
||||
if (!recordingId) {
|
||||
console.error("Cannot authenticate: recordingId is null");
|
||||
return;
|
||||
}
|
||||
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
||||
const redirectUrl = `${window.location.origin}${basePath}/${recordingId}/integrate/googleSheets`;
|
||||
window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}&redirectUrl=${encodeURIComponent(redirectUrl)}`;
|
||||
};
|
||||
|
||||
const authenticateWithAirtable = () => {
|
||||
if (!recordingId) {
|
||||
console.error("Cannot authenticate: recordingId is null");
|
||||
return;
|
||||
}
|
||||
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
||||
const redirectUrl = `${window.location.origin}${basePath}/${recordingId}/integrate/airtable`;
|
||||
window.location.href = `${apiUrl}/auth/airtable?robotId=${recordingId}&redirectUrl=${encodeURIComponent(redirectUrl)}`;
|
||||
};
|
||||
|
||||
const validateWebhookData = (
|
||||
url: string,
|
||||
events: string[],
|
||||
excludeId?: string
|
||||
) => {
|
||||
if (!url) {
|
||||
setUrlError("Please provide webhook URL");
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
new URL(url);
|
||||
} catch {
|
||||
setUrlError("Please provide a valid URL");
|
||||
return false;
|
||||
}
|
||||
const existingWebhook = settings.webhooks?.find(
|
||||
(webhook) => webhook.url === url && webhook.id !== excludeId
|
||||
);
|
||||
if (existingWebhook) {
|
||||
setUrlError("This webhook URL is already in use");
|
||||
return false;
|
||||
}
|
||||
if (!events || events.length === 0) {
|
||||
setUrlError("Please select at least one event");
|
||||
return false;
|
||||
}
|
||||
setUrlError(null);
|
||||
return true;
|
||||
};
|
||||
|
||||
const fetchWebhooks = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
if (!recordingId) return;
|
||||
const response = await getWebhooks(recordingId);
|
||||
if (response.ok && response.webhooks) {
|
||||
setSettings((prev) => ({ ...prev, webhooks: response.webhooks }));
|
||||
}
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
console.error("Error fetching webhooks:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const addWebhookSetting = async () => {
|
||||
if (!validateWebhookData(newWebhook.url, newWebhook.events)) {
|
||||
if (!newWebhook.url) notify("error", "Please provide webhook URL");
|
||||
else if (!newWebhook.events || newWebhook.events.length === 0) notify("error", "Please select at least one event");
|
||||
return;
|
||||
}
|
||||
if (!recordingId) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const webhookWithId = { ...newWebhook, id: uuid() };
|
||||
const response = await addWebhook(webhookWithId, recordingId);
|
||||
if (response.ok) {
|
||||
setSettings((prev) => ({ ...prev, webhooks: [...(prev.webhooks || []), webhookWithId] }));
|
||||
setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
|
||||
setShowWebhookForm(false);
|
||||
notify("success", "Webhook added successfully");
|
||||
} else {
|
||||
notify("error", response.message || "Failed to add webhook");
|
||||
}
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
notify("error", "Failed to add webhook");
|
||||
console.error("Error adding webhook:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const updateWebhookSetting = async () => {
|
||||
if (!validateWebhookData(newWebhook.url, newWebhook.events, editingWebhook || undefined)) return;
|
||||
if (!recordingId || !editingWebhook) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await updateWebhook({ ...newWebhook, id: editingWebhook }, recordingId);
|
||||
if (response.ok) {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
webhooks: (prev.webhooks || []).map((webhook) =>
|
||||
webhook.id === editingWebhook ? { ...newWebhook, id: editingWebhook } : webhook
|
||||
),
|
||||
}));
|
||||
setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
|
||||
setEditingWebhook(null);
|
||||
setShowWebhookForm(false);
|
||||
notify("success", "Webhook updated successfully");
|
||||
} else {
|
||||
notify("error", response.message || "Failed to update webhook");
|
||||
}
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
notify("error", "Failed to update webhook");
|
||||
console.error("Error updating webhook:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteWebhookSetting = async (webhookId: string) => {
|
||||
if (!recordingId) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await removeWebhook(webhookId, recordingId);
|
||||
if (response.ok) {
|
||||
setSettings((prev) => ({ ...prev, webhooks: (prev.webhooks || []).filter((webhook) => webhook.id !== webhookId) }));
|
||||
if (recordingId) {
|
||||
const updatedRecording = await getStoredRecording(recordingId);
|
||||
setRecording(updatedRecording);
|
||||
}
|
||||
setRerenderRobots(true);
|
||||
notify("success", "Webhook removed successfully");
|
||||
} else {
|
||||
notify("error", response.error || "Failed to remove webhook");
|
||||
}
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
notify("error", "Failed to remove webhook");
|
||||
console.error("Error removing webhook:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const testWebhookSetting = async (webhookId: string) => {
|
||||
if (!recordingId) return;
|
||||
const webhook = settings.webhooks?.find(w => w.id === webhookId);
|
||||
if (!webhook) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await testWebhook(webhook, recordingId);
|
||||
if (response.ok) {
|
||||
notify("success", "Test webhook sent successfully");
|
||||
} else {
|
||||
notify("error", response.message || "Failed to test webhook");
|
||||
}
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
notify("error", "Failed to test webhook");
|
||||
console.error("Error testing webhook:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedIntegrationType(integrationType);
|
||||
setSettings(prev => ({ ...prev, integrationType: integrationType || "airtable" }));
|
||||
}, [integrationType]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRecording = async () => {
|
||||
if (recordingId) {
|
||||
try {
|
||||
const recordingData = await getStoredRecording(recordingId);
|
||||
setRecording(recordingData);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch recording:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchRecording();
|
||||
if (selectedIntegrationType === "webhook") {
|
||||
fetchWebhooks();
|
||||
}
|
||||
}, [recordingId, selectedIntegrationType]);
|
||||
|
||||
const handleCancel = () => {
|
||||
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
||||
navigate(basePath);
|
||||
};
|
||||
|
||||
const fetchSpreadsheetFiles = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, { withCredentials: true });
|
||||
setSpreadsheets(response.data);
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
console.error("Error fetching spreadsheet files:", error);
|
||||
notify("error", t("integration_settings.google.errors.fetch_error", {
|
||||
message: error.response?.data?.message || error.message,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSpreadsheetSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedSheet = spreadsheets.find((sheet) => sheet.id === e.target.value);
|
||||
if (selectedSheet) {
|
||||
setSettings({ ...settings, spreadsheetId: selectedSheet.id, spreadsheetName: selectedSheet.name });
|
||||
}
|
||||
};
|
||||
|
||||
const updateGoogleSheetId = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await axios.post(`${apiUrl}/auth/gsheets/update`, {
|
||||
spreadsheetId: settings.spreadsheetId,
|
||||
spreadsheetName: settings.spreadsheetName,
|
||||
robotId: recordingId,
|
||||
}, { withCredentials: true });
|
||||
if (recordingId) {
|
||||
const updatedRecording = await getStoredRecording(recordingId);
|
||||
setRecording(updatedRecording);
|
||||
}
|
||||
setRerenderRobots(true);
|
||||
notify("success", t("integration_settings.google.notifications.sheet_selected"));
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
console.error("Error updating Google Sheet ID:", error);
|
||||
notify("error", t("integration_settings.google.errors.update_error", {
|
||||
message: error.response?.data?.message || error.message,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const removeGoogleSheetsIntegration = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await axios.post(`${apiUrl}/auth/gsheets/remove`, { robotId: recordingId }, { withCredentials: true });
|
||||
setSpreadsheets([]);
|
||||
setSettings({ ...settings, spreadsheetId: "", spreadsheetName: "" });
|
||||
if (recordingId) {
|
||||
const updatedRecording = await getStoredRecording(recordingId);
|
||||
setRecording(updatedRecording);
|
||||
}
|
||||
setRerenderRobots(true);
|
||||
notify("success", t("integration_settings.google.notifications.integration_removed"));
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
console.error("Error removing Google Sheets integration:", error);
|
||||
notify("error", t("integration_settings.google.errors.remove_error", {
|
||||
message: error.response?.data?.message || error.message,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAirtableBases = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get(`${apiUrl}/auth/airtable/bases?robotId=${recordingId}`, { withCredentials: true });
|
||||
setAirtableBases(response.data);
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
console.error("Error fetching Airtable bases:", error);
|
||||
notify("error", t("integration_settings.airtable.errors.fetch_error", {
|
||||
message: error.response?.data?.message || error.message,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAirtableTables = async (baseId: string, recordingId: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get(`${apiUrl}/auth/airtable/tables?robotId=${recordingId}&baseId=${baseId}`, { withCredentials: true });
|
||||
setAirtableTables(response.data);
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
console.error("Error fetching Airtable tables:", error);
|
||||
notify("error", t("integration_settings.airtable.errors.fetch_tables_error", {
|
||||
message: error.response?.data?.message || error.message,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleAirtableBaseSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedBase = airtableBases.find((base) => base.id === e.target.value);
|
||||
if (selectedBase) {
|
||||
setSettings((prevSettings) => ({ ...prevSettings, airtableBaseId: selectedBase.id, airtableBaseName: selectedBase.name }));
|
||||
if (recordingId) await fetchAirtableTables(selectedBase.id, recordingId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAirtabletableSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedTable = airtableTables.find((table) => table.id === e.target.value);
|
||||
if (selectedTable) {
|
||||
setSettings((prevSettings) => ({ ...prevSettings, airtableTableId: e.target.value, airtableTableName: selectedTable?.name || "" }));
|
||||
}
|
||||
};
|
||||
|
||||
const updateAirtableBase = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await axios.post(`${apiUrl}/auth/airtable/update`, {
|
||||
baseId: settings.airtableBaseId,
|
||||
baseName: settings.airtableBaseName,
|
||||
robotId: recordingId,
|
||||
tableName: settings.airtableTableName,
|
||||
tableId: settings.airtableTableId,
|
||||
}, { withCredentials: true });
|
||||
if (recordingId) {
|
||||
const updatedRecording = await getStoredRecording(recordingId);
|
||||
setRecording(updatedRecording);
|
||||
}
|
||||
setRerenderRobots(true);
|
||||
notify("success", t("integration_settings.airtable.notifications.base_selected"));
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
console.error("Error updating Airtable base:", error);
|
||||
notify("error", t("integration_settings.airtable.errors.update_error", {
|
||||
message: error.response?.data?.message || error.message,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const removeAirtableIntegration = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await axios.post(`${apiUrl}/auth/airtable/remove`, { robotId: recordingId }, { withCredentials: true });
|
||||
setAirtableBases([]);
|
||||
setAirtableTables([]);
|
||||
setSettings({ ...settings, airtableBaseId: "", airtableBaseName: "", airtableTableName: "", airtableTableId: "" });
|
||||
if (recordingId) {
|
||||
const updatedRecording = await getStoredRecording(recordingId);
|
||||
setRecording(updatedRecording);
|
||||
}
|
||||
setRerenderRobots(true);
|
||||
notify("success", t("integration_settings.airtable.notifications.integration_removed"));
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
console.error("Error removing Airtable integration:", error);
|
||||
notify("error", t("integration_settings.airtable.errors.remove_error", {
|
||||
message: error.response?.data?.message || error.message,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const renderGoogleSheetsIntegration = () => (
|
||||
<>
|
||||
<Typography variant="h6">
|
||||
{t("integration_settings.google.title")}
|
||||
</Typography>
|
||||
{recording?.google_sheet_id ? (
|
||||
<>
|
||||
<Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
|
||||
<AlertTitle>{t("integration_settings.google.alerts.success.title")}</AlertTitle>
|
||||
{t("integration_settings.google.alerts.success.content", { sheetName: recording.google_sheet_name })}
|
||||
<a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`} target="_blank" rel="noreferrer" style={{ marginLeft: "4px", fontWeight: "bold" }}>
|
||||
{t("integration_settings.google.alerts.success.here")}
|
||||
</a>
|
||||
</Alert>
|
||||
<Button variant="outlined" color="error" onClick={removeGoogleSheetsIntegration} style={{ marginTop: "15px" }} disabled={loading}>
|
||||
{loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.remove_integration")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{!recording?.google_sheet_email ? (
|
||||
<>
|
||||
<p>{t("integration_settings.google.descriptions.sync_info")}</p>
|
||||
<Button variant="contained" color="primary" onClick={authenticateWithGoogle} disabled={loading}>
|
||||
{loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.authenticate")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Typography sx={{ margin: "20px 0px 30px 0px" }}>
|
||||
{t("integration_settings.google.descriptions.authenticated_as", { email: recording.google_sheet_email })}
|
||||
</Typography>
|
||||
{loading ? (
|
||||
<CircularProgress sx={{ marginBottom: "15px" }} />
|
||||
) : error ? (
|
||||
<Typography color="error">{error}</Typography>
|
||||
) : spreadsheets.length === 0 ? (
|
||||
<Button variant="outlined" color="primary" onClick={fetchSpreadsheetFiles} disabled={loading}>
|
||||
{t("integration_settings.google.buttons.fetch_sheets")}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.google.fields.select_sheet")} required value={settings.spreadsheetId} onChange={handleSpreadsheetSelect} fullWidth>
|
||||
{spreadsheets.map((sheet) => (<MenuItem key={sheet.id} value={sheet.id}>{sheet.name}</MenuItem>))}
|
||||
</TextField>
|
||||
<Button variant="contained" color="primary" onClick={updateGoogleSheetId} style={{ marginTop: "10px" }} disabled={!settings.spreadsheetId || loading}>
|
||||
{loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.submit")}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const renderAirtableIntegration = () => (
|
||||
<>
|
||||
<Typography variant="h6">
|
||||
{t("integration_settings.airtable.title")}
|
||||
</Typography>
|
||||
{recording?.airtable_base_id ? (
|
||||
<>
|
||||
<Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
|
||||
<AlertTitle>{t("integration_settings.airtable.alerts.success.title")}</AlertTitle>
|
||||
{t("integration_settings.airtable.alerts.success.content", { baseName: recording.airtable_base_name, tableName: recording.airtable_table_name })}
|
||||
<a href={`https://airtable.com/${recording.airtable_base_id}`} target="_blank" rel="noreferrer" style={{ marginLeft: "4px", fontWeight: "bold" }}>
|
||||
{t("integration_settings.airtable.alerts.success.here")}
|
||||
</a>
|
||||
</Alert>
|
||||
<Button variant="outlined" color="error" onClick={removeAirtableIntegration} style={{ marginTop: "15px" }} disabled={loading}>
|
||||
{loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.remove_integration")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{!recording?.airtable_access_token ? (
|
||||
<>
|
||||
<p>{t("integration_settings.airtable.descriptions.sync_info")}</p>
|
||||
<Button variant="contained" color="primary" onClick={authenticateWithAirtable} disabled={loading}>
|
||||
{loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.authenticate")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Typography sx={{ margin: "20px 0px 30px 0px" }}>
|
||||
{t("integration_settings.airtable.descriptions.authenticated_as")}
|
||||
</Typography>
|
||||
{loading ? (
|
||||
<CircularProgress sx={{ marginBottom: "15px" }} />
|
||||
) : error ? (
|
||||
<Typography color="error">{error}</Typography>
|
||||
) : airtableBases.length === 0 ? (
|
||||
<Box sx={{ display: "flex", gap: "15px", alignItems: "center", marginBottom: "20px" }}>
|
||||
<Button variant="outlined" color="primary" onClick={fetchAirtableBases} disabled={loading}>
|
||||
{t("integration_settings.airtable.buttons.fetch_bases")}
|
||||
</Button>
|
||||
<Button variant="outlined" color="error" onClick={removeAirtableIntegration} disabled={loading}>
|
||||
{loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.remove_integration")}
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.airtable.fields.select_base")} required value={settings.airtableBaseId} onChange={handleAirtableBaseSelect} fullWidth>
|
||||
{airtableBases.map((base) => (<MenuItem key={base.id} value={base.id}>{base.name}</MenuItem>))}
|
||||
</TextField>
|
||||
<TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.airtable.fields.select_table")} required value={settings.airtableTableId} onChange={handleAirtabletableSelect} fullWidth>
|
||||
{airtableTables.map((table) => (<MenuItem key={table.id} value={table.id}>{table.name}</MenuItem>))}
|
||||
</TextField>
|
||||
<Button variant="contained" color="primary" onClick={updateAirtableBase} style={{ marginTop: "10px" }} disabled={!settings.airtableBaseId || loading}>
|
||||
{loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.submit")}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const getIntegrationTitle = () => {
|
||||
switch (selectedIntegrationType) {
|
||||
case "googleSheets":
|
||||
return "Google Sheets Integration";
|
||||
case "airtable":
|
||||
return "Airtable Integration";
|
||||
case "webhook":
|
||||
return "Webhook Integration";
|
||||
default:
|
||||
return "Integration";
|
||||
}
|
||||
};
|
||||
|
||||
const editWebhookSetting = (webhook: WebhookConfig) => {
|
||||
setNewWebhook(webhook);
|
||||
setEditingWebhook(webhook.id);
|
||||
setShowWebhookForm(true);
|
||||
};
|
||||
|
||||
const resetWebhookForm = () => {
|
||||
setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
|
||||
setShowWebhookForm(false);
|
||||
setEditingWebhook(null);
|
||||
setUrlError(null);
|
||||
};
|
||||
|
||||
const toggleWebhookStatusSetting = async (webhookId: string) => {
|
||||
if (!recordingId) return;
|
||||
try {
|
||||
const webhook = settings.webhooks?.find((w) => w.id === webhookId);
|
||||
if (!webhook) return;
|
||||
const updatedWebhook = { ...webhook, active: !webhook.active };
|
||||
const response = await updateWebhook(updatedWebhook, recordingId);
|
||||
if (response.ok) {
|
||||
const updatedWebhooks = (settings.webhooks || []).map((w) => w.id === webhookId ? updatedWebhook : w);
|
||||
setSettings({ ...settings, webhooks: updatedWebhooks });
|
||||
if (recordingId) {
|
||||
const updatedRecording = await getStoredRecording(recordingId);
|
||||
setRecording(updatedRecording);
|
||||
}
|
||||
setRerenderRobots(true);
|
||||
notify("success", `Webhook ${updatedWebhook.active ? "enabled" : "disabled"}`);
|
||||
} else {
|
||||
notify("error", response.message || "Failed to update webhook");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Error toggling webhook status:", error);
|
||||
notify("error", "Failed to update webhook");
|
||||
}
|
||||
};
|
||||
|
||||
const formatEventName = (event: string) => {
|
||||
switch (event) {
|
||||
case "run_completed": return "Run finished";
|
||||
case "run_failed": return "Run failed";
|
||||
default: return event;
|
||||
}
|
||||
};
|
||||
|
||||
const formatLastCalled = (lastCalledAt?: string | null) => {
|
||||
if (!lastCalledAt) return "Not called yet";
|
||||
const date = new Date(lastCalledAt);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
||||
const diffMinutes = Math.floor(diffMs / (1000 * 60));
|
||||
if (diffMinutes < 1) return "Just now";
|
||||
else if (diffMinutes < 60) return `${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} ago`;
|
||||
else if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
|
||||
else if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
|
||||
else return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (!recordingId) {
|
||||
console.error("Cannot navigate: recordingId is null");
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedIntegrationType(null);
|
||||
setSettings({ ...settings, integrationType: "airtable" });
|
||||
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
||||
navigate(`${basePath}/${recordingId}/integrate`);
|
||||
};
|
||||
|
||||
// --- MAIN RENDER ---
|
||||
if (!selectedIntegrationType && !integrationType) {
|
||||
return (
|
||||
<RobotConfigPage
|
||||
title={getIntegrationTitle()}
|
||||
// onCancel={handleCancel}
|
||||
cancelButtonText={t("buttons.cancel")}
|
||||
showSaveButton={false}
|
||||
// onBackToSelection={handleBack}
|
||||
onArrowBack={handleBack}
|
||||
showCancelButton={false}
|
||||
backToSelectionText={t("buttons.back_arrow")}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
position: "relative",
|
||||
minHeight: "400px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, minmax(160px, 1fr))",
|
||||
gap: "20px",
|
||||
justifyContent: "start",
|
||||
maxWidth: "900px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Button variant="outlined" onClick={() => {
|
||||
if (!recordingId) return;
|
||||
setSelectedIntegrationType("googleSheets");
|
||||
setSettings({ ...settings, integrationType: "googleSheets" });
|
||||
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
||||
navigate(`${basePath}/${recordingId}/integrate/googleSheets`);
|
||||
}} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
|
||||
<img src="https://ik.imagekit.io/ys1blv5kv/gsheet.svg" alt="Google Sheets" style={{ margin: "6px" }} />
|
||||
Google Sheets
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => {
|
||||
if (!recordingId) return;
|
||||
setSelectedIntegrationType("airtable");
|
||||
setSettings({ ...settings, integrationType: "airtable" });
|
||||
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
||||
navigate(`${basePath}/${recordingId}/integrate/airtable`);
|
||||
}} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
|
||||
<img src="https://ik.imagekit.io/ys1blv5kv/airtable.svg" alt="Airtable" style={{ margin: "6px" }} />
|
||||
Airtable
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => {
|
||||
if (!recordingId) return;
|
||||
setSelectedIntegrationType("webhook");
|
||||
setSettings({ ...settings, integrationType: "webhook" });
|
||||
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
||||
navigate(`${basePath}/${recordingId}/integrate/webhook`);
|
||||
}} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
|
||||
<img src="/svg/webhook.svg" alt="Webhook" style={{ margin: "6px" }} />
|
||||
Webhooks
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => { window.open("https://docs.maxun.dev/mcp/setup", "_blank", "noopener,noreferrer"); }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
|
||||
<img src="/svg/mcp.svg" alt="MCP" style={{ margin: "6px" }} />
|
||||
MCP
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</RobotConfigPage>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<RobotConfigPage
|
||||
title={getIntegrationTitle()}
|
||||
// onCancel={handleCancel}
|
||||
cancelButtonText={t("buttons.cancel")}
|
||||
showSaveButton={false}
|
||||
// onBackToSelection={handleBack}
|
||||
onArrowBack={handleBack}
|
||||
showCancelButton={false}
|
||||
backToSelectionText={t("buttons.back_arrow")}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
|
||||
<div style={{ width: "100%" }}>
|
||||
{(selectedIntegrationType === "googleSheets" || integrationType === "googleSheets") && (
|
||||
<>{renderGoogleSheetsIntegration()}</>
|
||||
)}
|
||||
|
||||
{(selectedIntegrationType === "airtable" || integrationType === "airtable") && (
|
||||
<>{renderAirtableIntegration()}</>
|
||||
)}
|
||||
|
||||
{(selectedIntegrationType === "webhook" || integrationType === "webhook") && (
|
||||
<>
|
||||
<Typography variant="h6" sx={{ marginBottom: "20px" }}>Integrate using Webhooks</Typography>
|
||||
{settings.webhooks && settings.webhooks.length > 0 && (
|
||||
<TableContainer component={Paper} sx={{ marginBottom: "30px", width: "100%" }}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell><strong>Webhook URL</strong></TableCell>
|
||||
<TableCell><strong>Call when</strong></TableCell>
|
||||
<TableCell><strong>Last called</strong></TableCell>
|
||||
<TableCell><strong>Status</strong></TableCell>
|
||||
<TableCell><strong>Actions</strong></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{settings.webhooks.map((webhook) => (
|
||||
<TableRow key={webhook.id}>
|
||||
<TableCell>{webhook.url}</TableCell>
|
||||
<TableCell><Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>{webhook.events.map((event) => (<Chip key={event} label={formatEventName(event)} size="small" variant="outlined" />))}</Box></TableCell>
|
||||
<TableCell>{formatLastCalled(webhook.lastCalledAt)}</TableCell>
|
||||
<TableCell><Switch checked={webhook.active} onChange={() => toggleWebhookStatusSetting(webhook.id)} size="small" /></TableCell>
|
||||
<TableCell><Box sx={{ display: "flex", gap: "8px" }}>
|
||||
<IconButton size="small" onClick={() => testWebhookSetting(webhook.id)} disabled={loading || !webhook.active} title="Test"><ScienceIcon fontSize="small" /></IconButton>
|
||||
<IconButton size="small" onClick={() => editWebhookSetting(webhook)} disabled={loading} title="Edit"><EditIcon fontSize="small" /></IconButton>
|
||||
<IconButton size="small" onClick={() => deleteWebhookSetting(webhook.id)} disabled={loading} title="Delete"><DeleteIcon fontSize="small" /></IconButton>
|
||||
</Box></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
{!showWebhookForm && (
|
||||
<Box sx={{ marginBottom: "20px", width: "100%" }}>
|
||||
<Box sx={{ display: "flex", gap: "15px", alignItems: "center", marginBottom: "15px" }}>
|
||||
<TextField label="Webhook URL" placeholder="https://your-api.com/webhook/endpoint" sx={{ flex: 1 }} value={newWebhook.url} onChange={(e) => { setNewWebhook({ ...newWebhook, url: e.target.value }); if (urlError) setUrlError(null); }} error={!!urlError} helperText={urlError} required aria-describedby="webhook-url-help" />
|
||||
<TextField select label="When" value={newWebhook.events[0] || "run_completed"} onChange={(e) => setNewWebhook({ ...newWebhook, events: [e.target.value] })} sx={{ minWidth: "200px" }} required>
|
||||
<MenuItem value="run_completed">Run finished</MenuItem>
|
||||
<MenuItem value="run_failed">Run failed</MenuItem>
|
||||
</TextField>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Typography variant="body2" color="textSecondary" sx={{ marginTop: "10px" }}>Refer to the <a href="https://docs.maxun.dev/api/webhooks" style={{ color: "#ff00c3", textDecoration: "none" }}>API documentation</a> for examples and details.</Typography>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={addWebhookSetting} disabled={!newWebhook.url || !newWebhook.events || newWebhook.events.length === 0 || loading || !!urlError}>Add New Webhook</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
{showWebhookForm && (
|
||||
<Card sx={{ width: "100%", marginBottom: "20px" }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" sx={{ marginBottom: "20px" }}>{editingWebhook ? "Edit Webhook" : "Add New Webhook"}</Typography>
|
||||
<TextField fullWidth label="Webhook URL" value={newWebhook.url} onChange={(e) => { setNewWebhook({ ...newWebhook, url: e.target.value }); if (urlError) setUrlError(null); }} sx={{ marginBottom: "15px" }} placeholder="https://your-api.com/webhook/endpoint" required error={!!urlError} helperText={urlError} />
|
||||
<TextField fullWidth select label="Call when" value={newWebhook.events} onChange={(e) => setNewWebhook({ ...newWebhook, events: typeof e.target.value === "string" ? [e.target.value] : e.target.value })}
|
||||
SelectProps={{ multiple: true, renderValue: (selected) => (<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>{(selected as string[]).map((value) => (<Chip key={value} label={formatEventName(value)} size="small" />))}</Box>), }} sx={{ marginBottom: "20px" }} required>
|
||||
<MenuItem value="run_completed">Run finished</MenuItem>
|
||||
<MenuItem value="run_failed">Run failed</MenuItem>
|
||||
</TextField>
|
||||
<FormControlLabel control={<Switch checked={newWebhook.active} onChange={(e) => setNewWebhook({ ...newWebhook, active: e.target.checked })} />} label="Active" sx={{ marginBottom: "10px" }} />
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button variant="contained" color="primary" onClick={editingWebhook ? updateWebhookSetting : addWebhookSetting} disabled={!newWebhook.url || !newWebhook.events || newWebhook.events.length === 0 || loading || !!urlError}>
|
||||
{loading ? (<CircularProgress size={24} />) : editingWebhook ? ("Update Webhook") : ("Add Webhook")}
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={resetWebhookForm} disabled={loading}>Cancel</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</RobotConfigPage>
|
||||
);
|
||||
};
|
||||
193
src/components/robot/pages/RobotSettingsPage.tsx
Normal file
193
src/components/robot/pages/RobotSettingsPage.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { TextField, Typography, Box, Card, CardContent } from "@mui/material";
|
||||
import { Settings, Info } from "@mui/icons-material";
|
||||
import { useGlobalInfoStore } from "../../../context/globalInfo";
|
||||
import { getStoredRecording } from "../../../api/storage";
|
||||
import { WhereWhatPair } from "maxun-core";
|
||||
import { getUserById } from "../../../api/auth";
|
||||
import { RobotConfigPage } from "./RobotConfigPage";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
interface RobotMeta {
|
||||
name: string;
|
||||
id: string;
|
||||
createdAt: string;
|
||||
pairs: number;
|
||||
updatedAt: string;
|
||||
params: any[];
|
||||
url?: string;
|
||||
}
|
||||
|
||||
interface RobotWorkflow {
|
||||
workflow: WhereWhatPair[];
|
||||
}
|
||||
|
||||
interface ScheduleConfig {
|
||||
runEvery: number;
|
||||
runEveryUnit: "MINUTES" | "HOURS" | "DAYS" | "WEEKS" | "MONTHS";
|
||||
startFrom:
|
||||
| "SUNDAY"
|
||||
| "MONDAY"
|
||||
| "TUESDAY"
|
||||
| "WEDNESDAY"
|
||||
| "THURSDAY"
|
||||
| "FRIDAY"
|
||||
| "SATURDAY";
|
||||
atTimeStart?: string;
|
||||
atTimeEnd?: string;
|
||||
timezone: string;
|
||||
lastRunAt?: Date;
|
||||
nextRunAt?: Date;
|
||||
cronExpression?: string;
|
||||
}
|
||||
|
||||
export interface RobotSettings {
|
||||
id: string;
|
||||
userId?: number;
|
||||
recording_meta: RobotMeta;
|
||||
recording: RobotWorkflow;
|
||||
google_sheet_email?: string | null;
|
||||
google_sheet_name?: string | null;
|
||||
google_sheet_id?: string | null;
|
||||
google_access_token?: string | null;
|
||||
google_refresh_token?: string | null;
|
||||
schedule?: ScheduleConfig | null;
|
||||
}
|
||||
|
||||
interface RobotSettingsProps {
|
||||
handleStart: (settings: RobotSettings) => void;
|
||||
}
|
||||
|
||||
export const RobotSettingsPage = ({ handleStart }: RobotSettingsProps) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [userEmail, setUserEmail] = useState<string | null>(null);
|
||||
const [robot, setRobot] = useState<RobotSettings | null>(null);
|
||||
const { recordingId, notify } = useGlobalInfoStore();
|
||||
|
||||
useEffect(() => {
|
||||
getRobot();
|
||||
}, []);
|
||||
|
||||
const getRobot = async () => {
|
||||
if (recordingId) {
|
||||
try {
|
||||
const robot = await getStoredRecording(recordingId);
|
||||
setRobot(robot);
|
||||
} catch (error) {
|
||||
notify("error", t("robot_settings.errors.robot_not_found"));
|
||||
}
|
||||
} else {
|
||||
notify("error", t("robot_settings.errors.robot_not_found"));
|
||||
}
|
||||
};
|
||||
|
||||
const getTargetUrl = () => {
|
||||
let url = robot?.recording_meta.url;
|
||||
|
||||
if (!url) {
|
||||
const lastPair =
|
||||
robot?.recording.workflow[robot?.recording.workflow.length - 1];
|
||||
url = lastPair?.what.find((action) => action.action === "goto")
|
||||
?.args?.[0];
|
||||
}
|
||||
|
||||
return url;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUserEmail = async () => {
|
||||
if (robot && robot.userId) {
|
||||
try {
|
||||
const userData = await getUserById(robot.userId.toString());
|
||||
if (userData && userData.user) {
|
||||
setUserEmail(userData.user.email);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch user email:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchUserEmail();
|
||||
}, [robot?.userId]);
|
||||
|
||||
const handleCancel = () => {
|
||||
const basePath = location.pathname.includes("/prebuilt-robots")
|
||||
? "/prebuilt-robots"
|
||||
: "/robots";
|
||||
navigate(basePath);
|
||||
};
|
||||
|
||||
const targetUrl = getTargetUrl();
|
||||
|
||||
return (
|
||||
<RobotConfigPage
|
||||
title={t("robot_settings.title")}
|
||||
onCancel={handleCancel}
|
||||
cancelButtonText={t("robot_settings.buttons.close")}
|
||||
showSaveButton={false}
|
||||
showCancelButton={false}
|
||||
>
|
||||
<>
|
||||
<Box style={{ display: "flex", flexDirection: "column" }}>
|
||||
{robot && (
|
||||
<>
|
||||
<TextField
|
||||
label={t("robot_settings.target_url")}
|
||||
key="Robot Target URL"
|
||||
value={targetUrl}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
style={{ marginBottom: "20px" }}
|
||||
/>
|
||||
<TextField
|
||||
label={t("robot_settings.robot_id")}
|
||||
key="Robot ID"
|
||||
value={robot.recording_meta.id}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
style={{ marginBottom: "20px" }}
|
||||
/>
|
||||
{robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !==
|
||||
undefined && (
|
||||
<TextField
|
||||
label={t("robot_settings.robot_limit")}
|
||||
type="number"
|
||||
value={
|
||||
robot.recording.workflow[0].what[0].args[0].limit || ""
|
||||
}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
style={{ marginBottom: "20px" }}
|
||||
/>
|
||||
)}
|
||||
<TextField
|
||||
label={t("robot_settings.created_by_user")}
|
||||
key="Created By User"
|
||||
value={userEmail ? userEmail : ""}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
style={{ marginBottom: "20px" }}
|
||||
/>
|
||||
<TextField
|
||||
label={t("robot_settings.created_at")}
|
||||
key="Robot Created At"
|
||||
value={robot.recording_meta.createdAt}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
style={{ marginBottom: "20px" }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
</RobotConfigPage>
|
||||
);
|
||||
};
|
||||
373
src/components/robot/pages/ScheduleSettingsPage.tsx
Normal file
373
src/components/robot/pages/ScheduleSettingsPage.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
MenuItem,
|
||||
TextField,
|
||||
Typography,
|
||||
Box,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import { Schedule } from "@mui/icons-material";
|
||||
import { Dropdown } from "../../ui/DropdownMui";
|
||||
import { validMomentTimezones } from "../../../constants/const";
|
||||
import { useGlobalInfoStore } from "../../../context/globalInfo";
|
||||
import { getSchedule, deleteSchedule } from "../../../api/storage";
|
||||
import { RobotConfigPage } from "./RobotConfigPage";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
interface ScheduleSettingsProps {
|
||||
handleStart: (settings: ScheduleSettings) => void;
|
||||
}
|
||||
|
||||
export interface ScheduleSettings {
|
||||
runEvery: number;
|
||||
runEveryUnit: string;
|
||||
startFrom: string;
|
||||
dayOfMonth?: string;
|
||||
atTimeStart?: string;
|
||||
atTimeEnd?: string;
|
||||
timezone: string;
|
||||
}
|
||||
|
||||
export const ScheduleSettingsPage = ({
|
||||
handleStart,
|
||||
}: ScheduleSettingsProps) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [schedule, setSchedule] = useState<ScheduleSettings | null>(null);
|
||||
const [settings, setSettings] = useState<ScheduleSettings>({
|
||||
runEvery: 1,
|
||||
runEveryUnit: "HOURS",
|
||||
startFrom: "MONDAY",
|
||||
dayOfMonth: "1",
|
||||
atTimeStart: "00:00",
|
||||
atTimeEnd: "01:00",
|
||||
timezone: "UTC",
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleChange = (
|
||||
field: keyof ScheduleSettings,
|
||||
value: string | number | boolean
|
||||
) => {
|
||||
setSettings((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const units = ["MINUTES", "HOURS", "DAYS", "WEEKS", "MONTHS"];
|
||||
|
||||
const days = [
|
||||
"MONDAY",
|
||||
"TUESDAY",
|
||||
"WEDNESDAY",
|
||||
"THURSDAY",
|
||||
"FRIDAY",
|
||||
"SATURDAY",
|
||||
"SUNDAY",
|
||||
];
|
||||
|
||||
const { recordingId, notify } = useGlobalInfoStore();
|
||||
|
||||
const deleteRobotSchedule = async () => {
|
||||
if (recordingId) {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await deleteSchedule(recordingId);
|
||||
setSchedule(null);
|
||||
notify("success", t("Schedule deleted successfully"));
|
||||
|
||||
setSettings({
|
||||
runEvery: 1,
|
||||
runEveryUnit: "HOURS",
|
||||
startFrom: "MONDAY",
|
||||
dayOfMonth: "",
|
||||
atTimeStart: "00:00",
|
||||
atTimeEnd: "01:00",
|
||||
timezone: "UTC",
|
||||
});
|
||||
} catch (error) {
|
||||
notify("error", "Failed to delete schedule");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
} else {
|
||||
console.error("No recording id provided");
|
||||
}
|
||||
};
|
||||
|
||||
const getRobotSchedule = async () => {
|
||||
if (recordingId) {
|
||||
try {
|
||||
const scheduleData = await getSchedule(recordingId);
|
||||
setSchedule(scheduleData);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch robot schedule:", error);
|
||||
}
|
||||
} else {
|
||||
console.error("No recording id provided");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSchedule = async () => {
|
||||
await getRobotSchedule();
|
||||
};
|
||||
fetchSchedule();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await handleStart(settings);
|
||||
const basePath = location.pathname.includes("/prebuilt-robots")
|
||||
? "/prebuilt-robots"
|
||||
: "/robots";
|
||||
navigate(basePath);
|
||||
} catch (error) {
|
||||
notify("error", "Failed to save schedule");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
const basePath = location.pathname.includes("/prebuilt-robots")
|
||||
? "/prebuilt-robots"
|
||||
: "/robots";
|
||||
navigate(basePath);
|
||||
};
|
||||
|
||||
const getDayOrdinal = (day: string | undefined) => {
|
||||
if (!day) return "";
|
||||
const lastDigit = day.slice(-1);
|
||||
const lastTwoDigits = day.slice(-2);
|
||||
|
||||
// Special cases for 11, 12, 13
|
||||
if (["11", "12", "13"].includes(lastTwoDigits)) {
|
||||
return t("schedule_settings.labels.on_day.th");
|
||||
}
|
||||
|
||||
// Other cases
|
||||
switch (lastDigit) {
|
||||
case "1":
|
||||
return t("schedule_settings.labels.on_day.st");
|
||||
case "2":
|
||||
return t("schedule_settings.labels.on_day.nd");
|
||||
case "3":
|
||||
return t("schedule_settings.labels.on_day.rd");
|
||||
default:
|
||||
return t("schedule_settings.labels.on_day.th");
|
||||
}
|
||||
};
|
||||
|
||||
const textStyle = {
|
||||
width: "150px",
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
};
|
||||
|
||||
const dropDownStyle = {
|
||||
marginTop: "2px",
|
||||
width: "150px",
|
||||
height: "59px",
|
||||
marginRight: "10px",
|
||||
};
|
||||
|
||||
return (
|
||||
<RobotConfigPage
|
||||
title={t("schedule_settings.title")}
|
||||
onSave={schedule === null ? handleSave : undefined}
|
||||
onCancel={handleCancel}
|
||||
saveButtonText={t("schedule_settings.buttons.save_schedule")}
|
||||
cancelButtonText={t("schedule_settings.buttons.cancel")}
|
||||
showSaveButton={schedule === null}
|
||||
isLoading={isLoading}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
padding: "20px",
|
||||
"& > *": { marginBottom: "20px" },
|
||||
}}
|
||||
>
|
||||
<>
|
||||
{schedule !== null ? (
|
||||
<>
|
||||
<Typography>
|
||||
{t("schedule_settings.run_every")}: {schedule.runEvery}{" "}
|
||||
{schedule.runEveryUnit.toLowerCase()}
|
||||
</Typography>
|
||||
<Typography>
|
||||
{["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
|
||||
? t("schedule_settings.start_from")
|
||||
: t("schedule_settings.start_from")}
|
||||
: {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}
|
||||
</Typography>
|
||||
{schedule.runEveryUnit === "MONTHS" && (
|
||||
<Typography>
|
||||
{t("schedule_settings.on_day")}: {schedule.dayOfMonth}
|
||||
{getDayOrdinal(schedule.dayOfMonth)} of the month
|
||||
</Typography>
|
||||
)}
|
||||
<Typography>
|
||||
{t("schedule_settings.at_around")}: {schedule.atTimeStart},{" "}
|
||||
{schedule.timezone} {t("schedule_settings.timezone")}
|
||||
</Typography>
|
||||
<Box mt={2} display="flex" justifyContent="space-between">
|
||||
<Button
|
||||
onClick={deleteRobotSchedule}
|
||||
variant="outlined"
|
||||
color="error"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading
|
||||
? "Deleting..."
|
||||
: t("schedule_settings.buttons.delete_schedule")}
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<Typography sx={{ marginRight: "10px" }}>
|
||||
{t("schedule_settings.labels.run_once_every")}
|
||||
</Typography>
|
||||
<TextField
|
||||
type="number"
|
||||
value={settings.runEvery}
|
||||
onChange={(e) =>
|
||||
handleChange("runEvery", parseInt(e.target.value))
|
||||
}
|
||||
sx={textStyle}
|
||||
inputProps={{ min: 1 }}
|
||||
/>
|
||||
<Dropdown
|
||||
label=""
|
||||
id="runEveryUnit"
|
||||
value={settings.runEveryUnit}
|
||||
handleSelect={(e) =>
|
||||
handleChange("runEveryUnit", e.target.value)
|
||||
}
|
||||
sx={dropDownStyle}
|
||||
>
|
||||
{units.map((unit) => (
|
||||
<MenuItem key={unit} value={unit}>
|
||||
{" "}
|
||||
{unit.charAt(0).toUpperCase() +
|
||||
unit.slice(1).toLowerCase()}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
|
||||
{["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
|
||||
? t("schedule_settings.labels.start_from_label")
|
||||
: t("schedule_settings.labels.start_from_label")}
|
||||
</Typography>
|
||||
<Dropdown
|
||||
label=""
|
||||
id="startFrom"
|
||||
value={settings.startFrom}
|
||||
handleSelect={(e) =>
|
||||
handleChange("startFrom", e.target.value)
|
||||
}
|
||||
sx={dropDownStyle}
|
||||
>
|
||||
{days.map((day) => (
|
||||
<MenuItem key={day} value={day}>
|
||||
{day.charAt(0).toUpperCase() +
|
||||
day.slice(1).toLowerCase()}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
</Box>
|
||||
|
||||
{settings.runEveryUnit === "MONTHS" && (
|
||||
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
|
||||
{t("schedule_settings.labels.on_day_of_month")}
|
||||
</Typography>
|
||||
<TextField
|
||||
type="number"
|
||||
value={settings.dayOfMonth}
|
||||
onChange={(e) =>
|
||||
handleChange("dayOfMonth", e.target.value)
|
||||
}
|
||||
sx={textStyle}
|
||||
inputProps={{ min: 1, max: 31 }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{["MINUTES", "HOURS"].includes(settings.runEveryUnit) ? (
|
||||
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<Box sx={{ marginRight: "20px" }}>
|
||||
<Typography sx={{ marginBottom: "5px" }}>
|
||||
{t("schedule_settings.labels.in_between")}
|
||||
</Typography>
|
||||
<TextField
|
||||
type="time"
|
||||
value={settings.atTimeStart}
|
||||
onChange={(e) =>
|
||||
handleChange("atTimeStart", e.target.value)
|
||||
}
|
||||
sx={textStyle}
|
||||
/>
|
||||
<TextField
|
||||
type="time"
|
||||
value={settings.atTimeEnd}
|
||||
onChange={(e) =>
|
||||
handleChange("atTimeEnd", e.target.value)
|
||||
}
|
||||
sx={textStyle}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<Typography sx={{ marginBottom: "5px", marginRight: "10px" }}>
|
||||
{t("schedule_settings.at_around")}
|
||||
</Typography>
|
||||
<TextField
|
||||
type="time"
|
||||
value={settings.atTimeStart}
|
||||
onChange={(e) =>
|
||||
handleChange("atTimeStart", e.target.value)
|
||||
}
|
||||
sx={textStyle}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<Typography sx={{ marginRight: "10px" }}>
|
||||
{t("schedule_settings.timezone")}
|
||||
</Typography>
|
||||
<Dropdown
|
||||
label=""
|
||||
id="timezone"
|
||||
value={settings.timezone}
|
||||
handleSelect={(e) =>
|
||||
handleChange("timezone", e.target.value)
|
||||
}
|
||||
sx={dropDownStyle}
|
||||
>
|
||||
{validMomentTimezones.map((tz) => (
|
||||
<MenuItem key={tz} value={tz}>
|
||||
{tz.charAt(0).toUpperCase() +
|
||||
tz.slice(1).toLowerCase()}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</Box>
|
||||
</RobotConfigPage>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
|
||||
import React, { createContext, useCallback, useContext, useState, useRef, useEffect } from 'react';
|
||||
import { io, Socket } from 'socket.io-client';
|
||||
import { apiUrl } from "../apiConfig";
|
||||
|
||||
@@ -6,12 +6,16 @@ const SERVER_ENDPOINT = apiUrl;
|
||||
|
||||
interface SocketState {
|
||||
socket: Socket | null;
|
||||
queueSocket: Socket | null;
|
||||
id: string;
|
||||
setId: (id: string) => void;
|
||||
connectToQueueSocket: (userId: string, onRunCompleted?: (data: any) => void) => void;
|
||||
disconnectQueueSocket: () => void;
|
||||
};
|
||||
|
||||
class SocketStore implements Partial<SocketState> {
|
||||
socket = null;
|
||||
socket: Socket | null = null;
|
||||
queueSocket: Socket | null = null;
|
||||
id = '';
|
||||
};
|
||||
|
||||
@@ -22,7 +26,9 @@ export const useSocketStore = () => useContext(socketStoreContext);
|
||||
|
||||
export const SocketProvider = ({ children }: { children: JSX.Element }) => {
|
||||
const [socket, setSocket] = useState<Socket | null>(socketStore.socket);
|
||||
const [queueSocket, setQueueSocket] = useState<Socket | null>(socketStore.queueSocket);
|
||||
const [id, setActiveId] = useState<string>(socketStore.id);
|
||||
const runCompletedCallbackRef = useRef<((data: any) => void) | null>(null);
|
||||
|
||||
const setId = useCallback((id: string) => {
|
||||
// the socket client connection is recomputed whenever id changes -> the new browser has been initialized
|
||||
@@ -39,12 +45,70 @@ export const SocketProvider = ({ children }: { children: JSX.Element }) => {
|
||||
setActiveId(id);
|
||||
}, [setSocket]);
|
||||
|
||||
const connectToQueueSocket = useCallback((userId: string, onRunCompleted?: (data: any) => void) => {
|
||||
runCompletedCallbackRef.current = onRunCompleted || null;
|
||||
|
||||
const newQueueSocket = io(`${SERVER_ENDPOINT}/queued-run`, {
|
||||
transports: ["websocket"],
|
||||
rejectUnauthorized: false,
|
||||
query: { userId }
|
||||
});
|
||||
|
||||
newQueueSocket.on('connect', () => {
|
||||
console.log('Queue socket connected for user:', userId);
|
||||
});
|
||||
|
||||
newQueueSocket.on('connect_error', (error) => {
|
||||
console.log('Queue socket connection error:', error);
|
||||
});
|
||||
|
||||
newQueueSocket.on('run-completed', (completionData) => {
|
||||
console.log('Run completed event received:', completionData);
|
||||
if (runCompletedCallbackRef.current) {
|
||||
runCompletedCallbackRef.current(completionData);
|
||||
}
|
||||
});
|
||||
|
||||
setQueueSocket(currentSocket => {
|
||||
if (currentSocket) {
|
||||
currentSocket.disconnect();
|
||||
}
|
||||
return newQueueSocket;
|
||||
});
|
||||
|
||||
socketStore.queueSocket = newQueueSocket;
|
||||
}, []);
|
||||
|
||||
const disconnectQueueSocket = useCallback(() => {
|
||||
setQueueSocket(currentSocket => {
|
||||
if (currentSocket) {
|
||||
currentSocket.disconnect();
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
socketStore.queueSocket = null;
|
||||
runCompletedCallbackRef.current = null;
|
||||
}, []);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (queueSocket) {
|
||||
queueSocket.disconnect();
|
||||
}
|
||||
};
|
||||
}, [queueSocket]);
|
||||
|
||||
return (
|
||||
<socketStoreContext.Provider
|
||||
value={{
|
||||
socket,
|
||||
queueSocket,
|
||||
id,
|
||||
setId,
|
||||
connectToQueueSocket,
|
||||
disconnectQueueSocket,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -109,6 +109,11 @@ class ClientSelectorGenerator {
|
||||
private getList: boolean = false;
|
||||
private paginationMode: boolean = false;
|
||||
|
||||
private pathCache = new WeakMap<HTMLElement, string | null>();
|
||||
private descendantsCache = new WeakMap<HTMLElement, HTMLElement[]>();
|
||||
private meaningfulCache = new WeakMap<HTMLElement, boolean>();
|
||||
private selectorCache = new Map<string, string[]>();
|
||||
|
||||
private elementGroups: Map<HTMLElement, ElementGroup> = new Map();
|
||||
private groupedElements: Set<HTMLElement> = new Set();
|
||||
private lastAnalyzedDocument: Document | null = null;
|
||||
@@ -397,7 +402,22 @@ class ClientSelectorGenerator {
|
||||
this.lastAnalyzedDocument = iframeDoc;
|
||||
|
||||
// Get all visible elements INCLUDING shadow DOM
|
||||
const allElements = this.getAllVisibleElementsWithShadow(iframeDoc);
|
||||
let allElements = this.getAllVisibleElementsWithShadow(iframeDoc);
|
||||
|
||||
if (this.getList === true && this.listSelector === "") {
|
||||
const dialogElements = this.findAllDialogElements(iframeDoc);
|
||||
|
||||
if (dialogElements.length > 0) {
|
||||
// Check if dialogs contain significant content worth analyzing
|
||||
const dialogContentElements = this.getElementsFromDialogs(dialogElements);
|
||||
|
||||
// Only switch to dialog-focused analysis if dialogs have substantial content
|
||||
if (dialogContentElements.length > 5) {
|
||||
allElements = dialogContentElements;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const processedInTables = new Set<HTMLElement>();
|
||||
|
||||
// 1. Specifically find and group rows within each table, bypassing normal similarity checks.
|
||||
@@ -517,16 +537,42 @@ class ClientSelectorGenerator {
|
||||
return meaningfulChildren;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if element has meaningful content for extraction (cached version)
|
||||
*/
|
||||
private isMeaningfulElementCached(element: HTMLElement): boolean {
|
||||
if (this.meaningfulCache.has(element)) {
|
||||
return this.meaningfulCache.get(element)!;
|
||||
}
|
||||
|
||||
const result = this.isMeaningfulElement(element);
|
||||
this.meaningfulCache.set(element, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if element has meaningful content for extraction
|
||||
*/
|
||||
private isMeaningfulElement(element: HTMLElement): boolean {
|
||||
const tagName = element.tagName.toLowerCase();
|
||||
|
||||
// Fast path for common meaningful elements
|
||||
if (["a", "img", "input", "button", "select"].includes(tagName)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const text = (element.textContent || "").trim();
|
||||
const hasHref = element.hasAttribute("href");
|
||||
const hasSrc = element.hasAttribute("src");
|
||||
|
||||
// Quick checks first
|
||||
if (text.length > 0 || hasHref || hasSrc) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const isCustomElement = tagName.includes("-");
|
||||
|
||||
// For custom elements, be more lenient about what's considered meaningful
|
||||
if (isCustomElement) {
|
||||
const hasChildren = element.children.length > 0;
|
||||
const hasSignificantAttributes = Array.from(element.attributes).some(
|
||||
@@ -534,9 +580,6 @@ class ClientSelectorGenerator {
|
||||
);
|
||||
|
||||
return (
|
||||
text.length > 0 ||
|
||||
hasHref ||
|
||||
hasSrc ||
|
||||
hasChildren ||
|
||||
hasSignificantAttributes ||
|
||||
element.hasAttribute("role") ||
|
||||
@@ -544,12 +587,7 @@ class ClientSelectorGenerator {
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
text.length > 0 ||
|
||||
hasHref ||
|
||||
hasSrc ||
|
||||
["a", "img", "input", "button", "select"].includes(tagName)
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2457,6 +2495,13 @@ class ClientSelectorGenerator {
|
||||
parentSelector: string
|
||||
): string[] => {
|
||||
try {
|
||||
const cacheKey = `${parentSelector}_${iframeDoc.location?.href || 'doc'}`;
|
||||
if (this.selectorCache.has(cacheKey)) {
|
||||
return this.selectorCache.get(cacheKey)!;
|
||||
}
|
||||
|
||||
this.pathCache = new WeakMap<HTMLElement, string | null>();
|
||||
|
||||
// Use XPath evaluation to find parent elements
|
||||
let parentElements: HTMLElement[] = this.evaluateXPath(
|
||||
parentSelector,
|
||||
@@ -2468,9 +2513,17 @@ class ClientSelectorGenerator {
|
||||
return [];
|
||||
}
|
||||
|
||||
const allChildSelectors = new Set<string>();
|
||||
if (parentElements.length > 10) {
|
||||
parentElements = parentElements.slice(0, 10);
|
||||
}
|
||||
|
||||
const allChildSelectors = new Set<string>();
|
||||
const processedParents = new Set<HTMLElement>();
|
||||
|
||||
for (const parentElement of parentElements) {
|
||||
if (processedParents.has(parentElement)) continue;
|
||||
processedParents.add(parentElement);
|
||||
|
||||
parentElements.forEach((parentElement) => {
|
||||
const otherListElements = parentElements.filter(
|
||||
(el) => el !== parentElement
|
||||
);
|
||||
@@ -2481,12 +2534,15 @@ class ClientSelectorGenerator {
|
||||
iframeDoc,
|
||||
otherListElements
|
||||
);
|
||||
childSelectors.forEach((selector) => allChildSelectors.add(selector));
|
||||
});
|
||||
|
||||
for (const selector of childSelectors) {
|
||||
allChildSelectors.add(selector);
|
||||
}
|
||||
}
|
||||
|
||||
// Convert Set back to array and sort for consistency
|
||||
const childSelectors = Array.from(allChildSelectors).sort();
|
||||
return childSelectors;
|
||||
const result = Array.from(allChildSelectors).sort();
|
||||
this.selectorCache.set(cacheKey, result);
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error("Error in getChildSelectors:", error);
|
||||
return [];
|
||||
@@ -2494,39 +2550,81 @@ class ClientSelectorGenerator {
|
||||
};
|
||||
|
||||
private getAllDescendantsIncludingShadow(
|
||||
parentElement: HTMLElement,
|
||||
maxDepth: number = 20
|
||||
parentElement: HTMLElement
|
||||
): HTMLElement[] {
|
||||
const allDescendants: HTMLElement[] = [];
|
||||
if (this.descendantsCache.has(parentElement)) {
|
||||
return this.descendantsCache.get(parentElement)!;
|
||||
}
|
||||
|
||||
const meaningfulDescendants: HTMLElement[] = [];
|
||||
const queue: HTMLElement[] = [parentElement];
|
||||
const visited = new Set<HTMLElement>();
|
||||
visited.add(parentElement);
|
||||
|
||||
const traverse = (element: HTMLElement, currentDepth: number) => {
|
||||
if (currentDepth >= maxDepth || visited.has(element)) {
|
||||
return;
|
||||
}
|
||||
visited.add(element);
|
||||
const MAX_MEANINGFUL_ELEMENTS = 300;
|
||||
const MAX_NODES_TO_CHECK = 1200;
|
||||
const MAX_DEPTH = 12;
|
||||
let nodesChecked = 0;
|
||||
|
||||
if (element !== parentElement) {
|
||||
allDescendants.push(element);
|
||||
let adjustedMaxDepth = MAX_DEPTH;
|
||||
const elementDensityThreshold = 50;
|
||||
|
||||
const depths: number[] = [0];
|
||||
let queueIndex = 0;
|
||||
|
||||
while (queueIndex < queue.length) {
|
||||
const element = queue[queueIndex];
|
||||
const currentDepth = depths[queueIndex];
|
||||
queueIndex++;
|
||||
nodesChecked++;
|
||||
|
||||
if (currentDepth <= 3 && meaningfulDescendants.length > elementDensityThreshold) {
|
||||
adjustedMaxDepth = Math.max(6, adjustedMaxDepth - 2);
|
||||
}
|
||||
|
||||
// Traverse light DOM children
|
||||
const children = Array.from(element.children) as HTMLElement[];
|
||||
for (const child of children) {
|
||||
traverse(child, currentDepth + 1);
|
||||
if (
|
||||
nodesChecked > MAX_NODES_TO_CHECK ||
|
||||
meaningfulDescendants.length >= MAX_MEANINGFUL_ELEMENTS ||
|
||||
currentDepth > adjustedMaxDepth
|
||||
) {
|
||||
break;
|
||||
}
|
||||
|
||||
// Traverse shadow DOM if it exists
|
||||
if (element.shadowRoot) {
|
||||
const shadowChildren = Array.from(element.shadowRoot.children) as HTMLElement[];
|
||||
for (const shadowChild of shadowChildren) {
|
||||
traverse(shadowChild, currentDepth + 1);
|
||||
if (element !== parentElement && this.isMeaningfulElementCached(element)) {
|
||||
meaningfulDescendants.push(element);
|
||||
}
|
||||
|
||||
if (currentDepth >= adjustedMaxDepth) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const children = element.children;
|
||||
const childLimit = Math.min(children.length, 30);
|
||||
for (let i = 0; i < childLimit; i++) {
|
||||
const child = children[i] as HTMLElement;
|
||||
if (!visited.has(child)) {
|
||||
visited.add(child);
|
||||
queue.push(child);
|
||||
depths.push(currentDepth + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
traverse(parentElement, 0);
|
||||
return allDescendants;
|
||||
if (element.shadowRoot && currentDepth < adjustedMaxDepth - 1) {
|
||||
const shadowChildren = element.shadowRoot.children;
|
||||
const shadowLimit = Math.min(shadowChildren.length, 20);
|
||||
for (let i = 0; i < shadowLimit; i++) {
|
||||
const child = shadowChildren[i] as HTMLElement;
|
||||
if (!visited.has(child)) {
|
||||
visited.add(child);
|
||||
queue.push(child);
|
||||
depths.push(currentDepth + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.descendantsCache.set(parentElement, meaningfulDescendants);
|
||||
return meaningfulDescendants;
|
||||
}
|
||||
|
||||
private generateOptimizedChildXPaths(
|
||||
@@ -2541,24 +2639,35 @@ class ClientSelectorGenerator {
|
||||
// Get all meaningful descendants (not just direct children)
|
||||
const allDescendants = this.getAllDescendantsIncludingShadow(parentElement);
|
||||
|
||||
allDescendants.forEach((descendant, i) => {
|
||||
if (processedElements.has(descendant)) return;
|
||||
processedElements.add(descendant);
|
||||
const batchSize = 25;
|
||||
for (let i = 0; i < allDescendants.length; i += batchSize) {
|
||||
const batch = allDescendants.slice(i, i + batchSize);
|
||||
|
||||
for (const descendant of batch) {
|
||||
if (processedElements.has(descendant)) continue;
|
||||
processedElements.add(descendant);
|
||||
|
||||
if (!this.isMeaningfulElement(descendant)) return;
|
||||
const absolutePath = this.buildOptimizedAbsoluteXPath(
|
||||
descendant,
|
||||
listSelector,
|
||||
parentElement,
|
||||
document,
|
||||
otherListElements
|
||||
);
|
||||
|
||||
const absolutePath = this.buildOptimizedAbsoluteXPath(
|
||||
descendant,
|
||||
listSelector,
|
||||
parentElement,
|
||||
document,
|
||||
otherListElements
|
||||
);
|
||||
if (absolutePath) {
|
||||
selectors.push(absolutePath);
|
||||
}
|
||||
|
||||
if (absolutePath) {
|
||||
selectors.push(absolutePath);
|
||||
if (selectors.length >= 250) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (selectors.length >= 250) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return [...new Set(selectors)];
|
||||
}
|
||||
@@ -2736,6 +2845,10 @@ class ClientSelectorGenerator {
|
||||
rootElement: HTMLElement,
|
||||
otherListElements: HTMLElement[] = []
|
||||
): string | null {
|
||||
if (this.pathCache.has(targetElement)) {
|
||||
return this.pathCache.get(targetElement)!;
|
||||
}
|
||||
|
||||
if (
|
||||
!this.elementContains(rootElement, targetElement) ||
|
||||
targetElement === rootElement
|
||||
@@ -2788,45 +2901,64 @@ class ClientSelectorGenerator {
|
||||
}
|
||||
|
||||
if (current !== rootElement) {
|
||||
this.pathCache.set(targetElement, null);
|
||||
return null;
|
||||
}
|
||||
|
||||
return pathParts.length > 0 ? "/" + pathParts.join("/") : null;
|
||||
const result = pathParts.length > 0 ? "/" + pathParts.join("/") : null;
|
||||
|
||||
this.pathCache.set(targetElement, result);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private getCommonClassesAcrossLists(
|
||||
targetElement: HTMLElement,
|
||||
otherListElements: HTMLElement[]
|
||||
): string[] {
|
||||
const targetClasses = this.normalizeClasses(targetElement.classList).split(" ").filter(Boolean);
|
||||
if (otherListElements.length === 0) {
|
||||
return this.normalizeClasses(targetElement.classList).split(" ").filter(Boolean);
|
||||
}
|
||||
|
||||
const otherListsKey = otherListElements.map(el => `${el.tagName}-${el.className}`).sort().join('|');
|
||||
const cacheKey = `${targetElement.tagName}-${targetClasses.sort().join(',')}-${otherListsKey}`;
|
||||
const targetClasses = this.normalizeClasses(targetElement.classList).split(" ").filter(Boolean);
|
||||
|
||||
if (targetClasses.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const cacheKey = `${targetElement.tagName}_${targetClasses.join(',')}_${otherListElements.length}`;
|
||||
|
||||
if (this.classCache.has(cacheKey)) {
|
||||
return this.classCache.get(cacheKey)!;
|
||||
}
|
||||
|
||||
if (otherListElements.length === 0) {
|
||||
this.classCache.set(cacheKey, targetClasses);
|
||||
return targetClasses;
|
||||
}
|
||||
const maxElementsToCheck = 100;
|
||||
let checkedElements = 0;
|
||||
const similarElements: HTMLElement[] = [];
|
||||
|
||||
const similarElements = otherListElements.flatMap(listEl =>
|
||||
this.getAllDescendantsIncludingShadow(listEl).filter(child =>
|
||||
child.tagName === targetElement.tagName
|
||||
)
|
||||
);
|
||||
for (const listEl of otherListElements) {
|
||||
if (checkedElements >= maxElementsToCheck) break;
|
||||
|
||||
const descendants = this.getAllDescendantsIncludingShadow(listEl);
|
||||
for (const child of descendants) {
|
||||
if (checkedElements >= maxElementsToCheck) break;
|
||||
if (child.tagName === targetElement.tagName) {
|
||||
similarElements.push(child);
|
||||
checkedElements++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (similarElements.length === 0) {
|
||||
this.classCache.set(cacheKey, targetClasses);
|
||||
return targetClasses;
|
||||
}
|
||||
|
||||
const targetClassSet = new Set(targetClasses);
|
||||
const exactMatches = similarElements.filter(el => {
|
||||
const elClasses = this.normalizeClasses(el.classList).split(" ").filter(Boolean);
|
||||
return targetClasses.length === elClasses.length &&
|
||||
targetClasses.every(cls => elClasses.includes(cls));
|
||||
if (elClasses.length !== targetClasses.length) return false;
|
||||
return elClasses.every(cls => targetClassSet.has(cls));
|
||||
});
|
||||
|
||||
if (exactMatches.length > 0) {
|
||||
@@ -3913,6 +4045,168 @@ class ClientSelectorGenerator {
|
||||
return depth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find dialog element in the elements array
|
||||
*/
|
||||
private findDialogElement(elements: HTMLElement[]): HTMLElement | null {
|
||||
let dialogElement = elements.find((el) => el.getAttribute("role") === "dialog");
|
||||
|
||||
if (!dialogElement) {
|
||||
dialogElement = elements.find((el) => el.tagName.toLowerCase() === "dialog");
|
||||
}
|
||||
|
||||
if (!dialogElement) {
|
||||
dialogElement = elements.find((el) => {
|
||||
const classList = el.classList.toString().toLowerCase();
|
||||
const id = (el.id || "").toLowerCase();
|
||||
|
||||
return (
|
||||
classList.includes("modal") ||
|
||||
classList.includes("dialog") ||
|
||||
classList.includes("popup") ||
|
||||
classList.includes("overlay") ||
|
||||
id.includes("modal") ||
|
||||
id.includes("dialog") ||
|
||||
id.includes("popup")
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return dialogElement || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the deepest element within a dialog
|
||||
*/
|
||||
private findDeepestInDialog(
|
||||
dialogElements: HTMLElement[],
|
||||
dialogElement: HTMLElement
|
||||
): HTMLElement | null {
|
||||
if (!dialogElements.length) return null;
|
||||
if (dialogElements.length === 1) return dialogElements[0];
|
||||
|
||||
let deepestElement = dialogElements[0];
|
||||
let maxDepth = 0;
|
||||
|
||||
for (const element of dialogElements) {
|
||||
let depth = 0;
|
||||
let current = element;
|
||||
|
||||
// Calculate depth within the dialog context
|
||||
while (
|
||||
current &&
|
||||
current.parentElement &&
|
||||
current !== dialogElement.parentElement
|
||||
) {
|
||||
depth++;
|
||||
current = current.parentElement;
|
||||
}
|
||||
|
||||
if (depth > maxDepth) {
|
||||
maxDepth = depth;
|
||||
deepestElement = element;
|
||||
}
|
||||
}
|
||||
|
||||
return deepestElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find all dialog elements in the document
|
||||
*/
|
||||
private findAllDialogElements(doc: Document): HTMLElement[] {
|
||||
const dialogElements: HTMLElement[] = [];
|
||||
const allElements = Array.from(doc.querySelectorAll("*")) as HTMLElement[];
|
||||
|
||||
for (const element of allElements) {
|
||||
if (element.getAttribute("role") === "dialog") {
|
||||
dialogElements.push(element);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (element.tagName.toLowerCase() === "dialog") {
|
||||
dialogElements.push(element);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
return dialogElements;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all visible elements from within dialog elements
|
||||
*/
|
||||
private getElementsFromDialogs(dialogElements: HTMLElement[]): HTMLElement[] {
|
||||
const elements: HTMLElement[] = [];
|
||||
const visited = new Set<HTMLElement>();
|
||||
|
||||
for (const dialog of dialogElements) {
|
||||
const dialogChildren = Array.from(dialog.querySelectorAll("*")).filter(
|
||||
(el) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
return rect.width > 0 && rect.height > 0;
|
||||
}
|
||||
) as HTMLElement[];
|
||||
|
||||
// Add dialog itself if it's visible
|
||||
const dialogRect = dialog.getBoundingClientRect();
|
||||
if (dialogRect.width > 0 && dialogRect.height > 0 && !visited.has(dialog)) {
|
||||
visited.add(dialog);
|
||||
elements.push(dialog);
|
||||
}
|
||||
|
||||
// Add all visible children
|
||||
dialogChildren.forEach((element) => {
|
||||
if (!visited.has(element)) {
|
||||
visited.add(element);
|
||||
elements.push(element);
|
||||
|
||||
// Traverse shadow DOM if it exists within dialog
|
||||
if (element.shadowRoot) {
|
||||
const shadowElements = this.getElementsFromShadowRoot(element.shadowRoot);
|
||||
shadowElements.forEach(shadowEl => {
|
||||
if (!visited.has(shadowEl)) {
|
||||
visited.add(shadowEl);
|
||||
elements.push(shadowEl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get elements from shadow root (helper for dialog analysis)
|
||||
*/
|
||||
private getElementsFromShadowRoot(shadowRoot: ShadowRoot): HTMLElement[] {
|
||||
const elements: HTMLElement[] = [];
|
||||
try {
|
||||
const shadowChildren = Array.from(shadowRoot.querySelectorAll("*")).filter(
|
||||
(el) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
return rect.width > 0 && rect.height > 0;
|
||||
}
|
||||
) as HTMLElement[];
|
||||
|
||||
shadowChildren.forEach((element) => {
|
||||
elements.push(element);
|
||||
|
||||
// Recursively traverse nested shadow DOMs
|
||||
if (element.shadowRoot) {
|
||||
const nestedShadowElements = this.getElementsFromShadowRoot(element.shadowRoot);
|
||||
elements.push(...nestedShadowElements);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn("Could not access shadow root:", error);
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Clean up when component unmounts or mode changes
|
||||
@@ -3926,6 +4220,10 @@ class ClientSelectorGenerator {
|
||||
this.spatialIndex.clear();
|
||||
this.lastCachedDocument = null;
|
||||
this.classCache.clear();
|
||||
this.selectorCache.clear();
|
||||
this.pathCache = new WeakMap<HTMLElement, string | null>();
|
||||
this.descendantsCache = new WeakMap<HTMLElement, HTMLElement[]>();
|
||||
this.meaningfulCache = new WeakMap<HTMLElement, boolean>();
|
||||
}
|
||||
|
||||
// Update generateSelector to use instance variables
|
||||
|
||||
@@ -15,6 +15,7 @@ import { ScheduleSettings } from "../components/robot/ScheduleSettings";
|
||||
import { apiUrl } from "../apiConfig";
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { AuthContext } from '../context/auth';
|
||||
import { useSocketStore } from '../context/socket';
|
||||
|
||||
interface MainPageProps {
|
||||
handleEditRecording: (id: string, fileName: string) => void;
|
||||
@@ -54,6 +55,8 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
|
||||
const { state } = useContext(AuthContext);
|
||||
const { user } = state;
|
||||
|
||||
const { connectToQueueSocket, disconnectQueueSocket } = useSocketStore();
|
||||
|
||||
const abortRunHandler = (runId: string, robotName: string, browserId: string) => {
|
||||
notify('info', t('main_page.notifications.abort_initiated', { name: robotName }));
|
||||
|
||||
@@ -138,50 +141,7 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
|
||||
navigate(`/runs/${robotMetaId}/run/${runId}`);
|
||||
|
||||
if (queued) {
|
||||
console.log('Creating queue socket for queued run:', runId);
|
||||
|
||||
setQueuedRuns(prev => new Set([...prev, runId]));
|
||||
|
||||
const queueSocket = io(`${apiUrl}/queued-run`, {
|
||||
transports: ["websocket"],
|
||||
rejectUnauthorized: false,
|
||||
query: { userId: user?.id }
|
||||
});
|
||||
|
||||
queueSocket.on('connect', () => {
|
||||
console.log('Queue socket connected for user:', user?.id);
|
||||
});
|
||||
|
||||
queueSocket.on('connect_error', (error) => {
|
||||
console.log('Queue socket connection error:', error);
|
||||
});
|
||||
|
||||
queueSocket.on('run-completed', (completionData) => {
|
||||
if (completionData.runId === runId) {
|
||||
setRunningRecordingName('');
|
||||
setCurrentInterpretationLog('');
|
||||
setRerenderRuns(true);
|
||||
|
||||
setQueuedRuns(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(runId);
|
||||
return newSet;
|
||||
});
|
||||
|
||||
const robotName = completionData.robotName || runningRecordingName;
|
||||
|
||||
if (completionData.status === 'success') {
|
||||
notify('success', t('main_page.notifications.interpretation_success', { name: robotName }));
|
||||
} else {
|
||||
notify('error', t('main_page.notifications.interpretation_failed', { name: robotName }));
|
||||
}
|
||||
|
||||
queueSocket.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
setSockets(sockets => [...sockets, queueSocket]);
|
||||
|
||||
notify('info', `Run queued: ${runningRecordingName}`);
|
||||
} else {
|
||||
const socket = io(`${apiUrl}/${browserId}`, {
|
||||
@@ -245,6 +205,36 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
|
||||
return message === 'success';
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.id) {
|
||||
const handleRunCompleted = (completionData: any) => {
|
||||
setRerenderRuns(true);
|
||||
|
||||
if (queuedRuns.has(completionData.runId)) {
|
||||
setQueuedRuns(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(completionData.runId);
|
||||
return newSet;
|
||||
});
|
||||
}
|
||||
|
||||
const robotName = completionData.robotName || 'Unknown Robot';
|
||||
|
||||
if (completionData.status === 'success') {
|
||||
notify('success', t('main_page.notifications.interpretation_success', { name: robotName }));
|
||||
} else {
|
||||
notify('error', t('main_page.notifications.interpretation_failed', { name: robotName }));
|
||||
}
|
||||
};
|
||||
|
||||
connectToQueueSocket(user.id, handleRunCompleted);
|
||||
|
||||
return () => {
|
||||
disconnectQueueSocket();
|
||||
};
|
||||
}
|
||||
}, [user?.id, connectToQueueSocket, disconnectQueueSocket, t, setRerenderRuns, queuedRuns, setQueuedRuns]);
|
||||
|
||||
const DisplayContent = () => {
|
||||
switch (content) {
|
||||
case 'robots':
|
||||
|
||||
Reference in New Issue
Block a user