Merge pull request #754 from getmaxun/new-ui-fix

feat: pages ui revamp

src/components/robot/pages/RobotConfigPage.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import { 
+import {
-  Box, 
+  Box,
-  Typography, 
+  Typography,
-  Button, 
+  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;
@@ -23,6 +24,7 @@ interface RobotConfigPageProps {
   icon?: React.ReactNode;
   onBackToSelection?: () => void;
   backToSelectionText?: string;
+  onArrowBack?: () => void; // Optional prop for custom back action
 }
 
 export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
@@ -30,50 +32,72 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
   children,
   onSave,
   onCancel,
-  saveButtonText = "Save",
+  saveButtonText,
-  cancelButtonText = "Cancel",
+  cancelButtonText,
   showSaveButton = true,
   showCancelButton = true,
   isLoading = false,
   icon,
   onBackToSelection,
-  backToSelectionText = "← Back"
+  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={{ 
+    <Box sx={{
-      maxWidth: 1000, 
+      maxWidth: 1000,
-      margin: 'auto', 
+      margin: '50px auto',
-      px: 4,
+      maxHeight: '100vh',
-      py: 3,
-      minHeight: '80vh',
       display: 'flex',
       flexDirection: 'column',
       width: '1000px',
+      height: '100%',
+      overflowY: 'auto', // Allow scrolling if content exceeds height
     }}>
-      <Box sx={{ 
+      {/* Header Section - Fixed Position */}
-        display: 'flex', 
+      <Box sx={{
-        alignItems: 'center', 
+        display: 'flex',
-        minHeight: '64px',
+        alignItems: 'center',
+        maxHeight: '64px',
         mb: 2,
         flexShrink: 0
       }}>
         <IconButton
-          onClick={handleBack}
+          onClick={onArrowBack ? onArrowBack : handleBack}
           sx={{
-            mr: 2,
+            ml: -1,
+            mr: 1,
             color: theme.palette.text.primary,
+            backgroundColor: 'transparent !important',
             '&:hover': {
-              bgcolor: theme.palette.action.hover
+              backgroundColor: 'transparent !important',
-            }
+            },
+            '&:active': {
+              backgroundColor: 'transparent !important',
+            },
+            '&:focus': {
+              backgroundColor: 'transparent !important',
+            },
+            '&:focus-visible': {
+              backgroundColor: 'transparent !important',
+            },
           }}
+          disableRipple
         >
           <ArrowBack />
         </IconButton>
@@ -82,9 +106,9 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
             {icon}
           </Box>
         )}
-        <Typography 
+        <Typography
-          variant="h4" 
+          variant="h4"
-          sx={{ 
+          sx={{
             fontWeight: 600,
             color: theme.palette.text.primary,
             lineHeight: 1.2
@@ -95,29 +119,32 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
       </Box>
       <Divider sx={{ mb: 4, flexShrink: 0 }} />
 
-      <Box sx={{ 
+      {/* Content Section */}
+      <Box sx={{
         flex: 1,
         display: 'flex',
         flexDirection: 'column',
-        minHeight: 0
+        minHeight: 0,
+        mt: 2,
+        mb: 3,
       }}>
         {children}
       </Box>
 
+      {/* Action Buttons */}
       {(showSaveButton || showCancelButton || onBackToSelection) && (
         <Box
           sx={{
             display: 'flex',
-            justifyContent: onBackToSelection ? 'space-between' : 'flex-end',
+            justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
             gap: 2,
-            pt: 3,
+            pt: 3, // Reduce padding top to minimize space above
-            mt: 2,
             borderTop: `1px solid ${theme.palette.divider}`,
             flexShrink: 0,
             width: '100%',
-            px: 3
           }}
         >
+          {/* Left side - Back to Selection button */}
           {onBackToSelection && (
             <Button
               variant="outlined"
@@ -128,44 +155,45 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
                 borderColor: '#ff00c3 !important',
                 backgroundColor: 'white !important',
               }} >
-              {backToSelectionText}
+              {backToSelectionText || t("buttons.back_arrow")}
             </Button>
           )}
 
+          {/* Right side - Save/Cancel buttons */}
           <Box sx={{ display: 'flex', gap: 2 }}>
-          {showCancelButton && (
+            {showCancelButton && (
-            <Button
+              <Button
-              variant="outlined"
+                variant="outlined"
-              onClick={handleBack}
+                onClick={handleBack}
-              disabled={isLoading}
+                disabled={isLoading}
-              sx={{
+                sx={{
-                color: '#ff00c3 !important',
+                  color: '#ff00c3 !important',
-                borderColor: '#ff00c3 !important',
+                  borderColor: '#ff00c3 !important',
-                backgroundColor: 'white !important',
+                  backgroundColor: 'white !important',
-              }} >
+                }} >
-              {cancelButtonText}
+                {cancelButtonText || t("buttons.cancel")}
-            </Button>
+              </Button>
-          )}
+            )}
-          {showSaveButton && onSave && (
+            {showSaveButton && onSave && (
-            <Button
+              <Button
-              variant="contained"
+                variant="contained"
-              onClick={onSave}
+                onClick={onSave}
-              disabled={isLoading}
+                disabled={isLoading}
-              sx={{
+                sx={{
-                bgcolor: '#ff00c3',
+                  bgcolor: '#ff00c3',
-                '&:hover': {
+                  '&:hover': {
-                  bgcolor: '#cc0099',
+                    bgcolor: '#cc0099',
+                    boxShadow: 'none',
+                  },
+                  textTransform: 'none',
+                  fontWeight: 500,
+                  px: 3,
                   boxShadow: 'none',
-                },
+                }}
-                textTransform: 'none',
+              >
-                fontWeight: 500,
+                {isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
-                px: 3,
+              </Button>
-                boxShadow: 'none',
+            )}
-              }}
-            >
-              {isLoading ? 'Saving...' : saveButtonText}
-            </Button>
-          )}
           </Box>
         </Box>
       )}

src/components/robot/pages/RobotDuplicatePage.tsx

@@ -19,10 +19,17 @@ 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;
 }
 
@@ -73,7 +80,7 @@ export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
   const [targetUrl, setTargetUrl] = useState<string | undefined>("");
   const [robot, setRobot] = useState<RobotSettings | null>(null);
   const [isLoading, setIsLoading] = useState(false);
-  const { recordingId, notify, setRerenderRobots } =
+  const { recordingId, notify, setRerenderRobots} =
     useGlobalInfoStore();
 
   useEffect(() => {
@@ -132,7 +139,10 @@ export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
           t("robot_duplication.notifications.duplicate_success")
         );
         handleStart(robot);
-        navigate("/robots");
+        const basePath = location.pathname.includes("/prebuilt-robots")
+          ? "/prebuilt-robots"
+          : "/robots";
+        navigate(basePath);
       } else {
         notify("error", t("robot_duplication.notifications.duplicate_error"));
       }
@@ -145,7 +155,10 @@ export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
   };
 
   const handleCancel = () => {
-    navigate("/robots");
+    const basePath = location.pathname.includes("/prebuilt-robots")
+      ? "/prebuilt-robots"
+      : "/robots";
+    navigate(basePath);
   };
 
   return (
@@ -156,6 +169,7 @@ export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
       saveButtonText={t("robot_duplication.buttons.duplicate")}
       cancelButtonText={t("robot_duplication.buttons.cancel")}
       isLoading={isLoading}
+      showCancelButton={false}
     >
       <>
         <Box style={{ display: "flex", flexDirection: "column" }}>
@@ -188,4 +202,4 @@ export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
       </>
     </RobotConfigPage>
   );
-};
+};

src/components/robot/pages/RobotEditPage.tsx

@@ -18,10 +18,17 @@ 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;
 }
 
@@ -33,13 +40,13 @@ interface ScheduleConfig {
   runEvery: number;
   runEveryUnit: "MINUTES" | "HOURS" | "DAYS" | "WEEKS" | "MONTHS";
   startFrom:
-    | "SUNDAY"
+  | "SUNDAY"
-    | "MONDAY"
+  | "MONDAY"
-    | "TUESDAY"
+  | "TUESDAY"
-    | "WEDNESDAY"
+  | "WEDNESDAY"
-    | "THURSDAY"
+  | "THURSDAY"
-    | "FRIDAY"
+  | "FRIDAY"
-    | "SATURDAY";
+  | "SATURDAY";
   atTimeStart?: string;
   atTimeEnd?: string;
   timezone: string;
@@ -173,6 +180,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
           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({
@@ -214,6 +222,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
 
         const selector = action.args[0];
 
+        // Handle full word type actions first
         if (
           action.action === "type" &&
           action.args?.length >= 2 &&
@@ -230,6 +239,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
           continue;
         }
 
+        // Handle character-by-character sequences (both type and press)
         if (
           (action.action === "type" || action.action === "press") &&
           action.args?.length >= 2 &&
@@ -582,7 +592,8 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
         setRerenderRobots(true);
         notify("success", t("robot_edit.notifications.update_success"));
         handleStart(robot);
-        navigate("/robots");
+        const basePath = "/robots";
+        navigate(basePath);
       } else {
         notify("error", t("robot_edit.notifications.update_failed"));
       }
@@ -595,7 +606,8 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
   };
 
   const handleCancel = () => {
-    navigate("/robots");
+    const basePath = "/robots";
+    navigate(basePath);
   };
 
   const lastPair =
@@ -610,6 +622,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
       onCancel={handleCancel}
       saveButtonText={t("robot_edit.save")}
       cancelButtonText={t("robot_edit.cancel")}
+      showCancelButton={false}
       isLoading={isLoading}
     >
       <>
@@ -640,4 +653,4 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
       </>
     </RobotConfigPage>
   );
-};
+};

src/components/robot/pages/RobotIntegrationPage.tsx

@@ -72,16 +72,16 @@ export const RobotIntegrationPage = ({
   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 
+  const robotIdFromUrl = robotsIndex !== -1 && robotsIndex + 1 < pathSegments.length
-    ? pathSegments[robotsIndex + 1] 
+    ? pathSegments[robotsIndex + 1]
     : null;
-    
+
-  const integrationType = integrateIndex !== -1 && integrateIndex + 1 < pathSegments.length 
+  const integrationType = integrateIndex !== -1 && integrateIndex + 1 < pathSegments.length
     ? pathSegments[integrateIndex + 1] as "googleSheets" | "airtable" | "webhook"
     : preSelectedIntegrationType || null;
 
@@ -114,7 +114,7 @@ export const RobotIntegrationPage = ({
   const [urlError, setUrlError] = useState<string | null>(null);
 
   const { recordingId: recordingIdFromStore, notify, setRerenderRobots, setRecordingId } = useGlobalInfoStore();
-  
+
   const recordingId = robotIdFromUrl || recordingIdFromStore;
 
   useEffect(() => {
@@ -137,7 +137,7 @@ export const RobotIntegrationPage = ({
     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");
@@ -251,7 +251,7 @@ export const RobotIntegrationPage = ({
   const deleteWebhookSetting = async (webhookId: string) => {
     if (!recordingId) return;
     try {
-      setLoading(true);  
+      setLoading(true);
       const response = await removeWebhook(webhookId, recordingId);
       if (response.ok) {
         setSettings((prev) => ({ ...prev, webhooks: (prev.webhooks || []).filter((webhook) => webhook.id !== webhookId) }));
@@ -612,7 +612,7 @@ export const RobotIntegrationPage = ({
       case "webhook":
         return "Webhook Integration";
       default:
-        return "Integration Settings";
+        return "Integration";
     }
   };
 
@@ -677,40 +677,85 @@ export const RobotIntegrationPage = ({
     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="Integration Settings" onCancel={handleCancel} cancelButtonText={t("robot_edit.cancel")} showSaveButton={false} backToSelectionText={"← " + t("right_panel.buttons.back")} onBackToSelection={() => navigate(`/${robotPath}/${recordingId}/integrate`)}>
+      <RobotConfigPage
-        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
+        title={getIntegrationTitle()}
-          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "20px", width: "100%" }}>
+        // onCancel={handleCancel}
-            <div style={{ display: "flex", gap: "20px" }}>
+        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;
+                if (!recordingId) return;
-                  setSelectedIntegrationType("googleSheets");
+                setSelectedIntegrationType("googleSheets");
-                  setSettings({ ...settings, integrationType: "googleSheets" });
+                setSettings({ ...settings, integrationType: "googleSheets" });
-                  const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+                const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
-                  navigate(`${basePath}/${recordingId}/integrate/googleSheets`);
+                navigate(`${basePath}/${recordingId}/integrate/googleSheets`);
-                }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
+              }} 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;
+                if (!recordingId) return;
-                  setSelectedIntegrationType("airtable");
+                setSelectedIntegrationType("airtable");
-                  setSettings({ ...settings, integrationType: "airtable" });
+                setSettings({ ...settings, integrationType: "airtable" });
-                  const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+                const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
-                  navigate(`${basePath}/${recordingId}/integrate/airtable`);
+                navigate(`${basePath}/${recordingId}/integrate/airtable`);
-                }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
+              }} 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;
+                if (!recordingId) return;
-                  setSelectedIntegrationType("webhook");
+                setSelectedIntegrationType("webhook");
-                  setSettings({ ...settings, integrationType: "webhook" });
+                setSettings({ ...settings, integrationType: "webhook" });
-                  const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+                const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
-                  navigate(`${basePath}/${recordingId}/integrate/webhook`);
+                navigate(`${basePath}/${recordingId}/integrate/webhook`);
-                }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
+              }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
                 <img src="/svg/webhook.svg" alt="Webhook" style={{ margin: "6px" }} />
                 Webhooks
               </Button>
@@ -725,15 +770,17 @@ export const RobotIntegrationPage = ({
     );
   }
 
-  const handleBack = () => {
-    if (!recordingId) return;
-    setSelectedIntegrationType(null);
-    const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
-    navigate(`${basePath}/${recordingId}/integrate`);
-  };
-
   return (
-    <RobotConfigPage title={getIntegrationTitle()} onCancel={handleCancel} cancelButtonText={t("robot_edit.cancel")} showSaveButton={false} onBackToSelection={handleBack} backToSelectionText={"← " + t("right_panel.buttons.back")}>
+    <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") && (
@@ -763,9 +810,9 @@ export const RobotIntegrationPage = ({
                       {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><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><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>
@@ -780,7 +827,7 @@ export const RobotIntegrationPage = ({
               {!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 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>
@@ -796,13 +843,13 @@ export const RobotIntegrationPage = ({
                 <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 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>
+                      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" }}/>
+                    <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}>

src/components/robot/pages/RobotSettingsPage.tsx

@@ -128,6 +128,7 @@ export const RobotSettingsPage = ({ handleStart }: RobotSettingsProps) => {
       onCancel={handleCancel}
       cancelButtonText={t("robot_settings.buttons.close")}
       showSaveButton={false}
+      showCancelButton={false}
     >
       <>
         <Box style={{ display: "flex", flexDirection: "column" }}>