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

feat: pages ui revamp
2025-08-25 19:59:55 +05:30
parent af8ddaf337 5d8fe40b43
commit 84ddce75b8
5 changed files with 226 additions and 123 deletions
--- a/src/components/robot/pages/RobotConfigPage.tsx
+++ b/src/components/robot/pages/RobotConfigPage.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import { 
-  Box, 
-  Typography, 
-  Button, 
+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;
@@ -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",
-  cancelButtonText = "Cancel",
+  saveButtonText,
+  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={{ 
-      maxWidth: 1000, 
-      margin: 'auto', 
-      px: 4,
-      py: 3,
-      minHeight: '80vh',
+    <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
    }}>
-      <Box sx={{ 
-        display: 'flex', 
-        alignItems: 'center', 
-        minHeight: '64px',
+      {/* Header Section - Fixed Position */}
+      <Box sx={{
+        display: 'flex',
+        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 
-          variant="h4" 
-          sx={{ 
+        <Typography
+          variant="h4"
+          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,
-            mt: 2,
+            pt: 3, // Reduce padding top to minimize space above
            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 && (
-            <Button
-              variant="outlined"
-              onClick={handleBack}
-              disabled={isLoading}
-              sx={{
-                color: '#ff00c3 !important',
-                borderColor: '#ff00c3 !important',
-                backgroundColor: 'white !important',
-              }} >
-              {cancelButtonText}
-            </Button>
-          )}
-          {showSaveButton && onSave && (
-            <Button
-              variant="contained"
-              onClick={onSave}
-              disabled={isLoading}
-              sx={{
-                bgcolor: '#ff00c3',
-                '&:hover': {
-                  bgcolor: '#cc0099',
+            {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',
-                },
-                textTransform: 'none',
-                fontWeight: 500,
-                px: 3,
-                boxShadow: 'none',
-              }}
-            >
-              {isLoading ? 'Saving...' : saveButtonText}
-            </Button>
-          )}
+                }}
+              >
+                {isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
+              </Button>
+            )}
          </Box>
        </Box>
      )}
--- a/src/components/robot/pages/RobotDuplicatePage.tsx
+++ b/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>
  );
-};
+};
--- a/src/components/robot/pages/RobotEditPage.tsx
+++ b/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"
-    | "MONDAY"
-    | "TUESDAY"
-    | "WEDNESDAY"
-    | "THURSDAY"
-    | "FRIDAY"
-    | "SATURDAY";
+  | "SUNDAY"
+  | "MONDAY"
+  | "TUESDAY"
+  | "WEDNESDAY"
+  | "THURSDAY"
+  | "FRIDAY"
+  | "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>
  );
-};
+};
--- a/src/components/robot/pages/RobotIntegrationPage.tsx
+++ b/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 
-    ? pathSegments[robotsIndex + 1] 
+
+  const robotIdFromUrl = robotsIndex !== -1 && robotsIndex + 1 < pathSegments.length
+    ? 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`)}>
-        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
-          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "20px", width: "100%" }}>
-            <div style={{ display: "flex", gap: "20px" }}>
+      <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' }}>
+                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' }}>
+                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' }}>
+                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>
@@ -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}>
--- a/src/components/robot/pages/RobotSettingsPage.tsx
+++ b/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" }}>