Function SimpleCreatorModal

app/src/components/EditAgent/SimpleCreatorModal.tsx:181–699

({ isOpen, onClose, onNext, isAuthenticated, hostingContext, userEmail, isProUser = false })

  isOpen: boolean; onClose: () => void; onNext: (config: any) => void; isAuthenticated: boolean; hostingContext?: 'official-web' | 'self-hosted'; userEmail?: string; isProUser?: boolean;
}
const SimpleCreatorModal: React.FC<SimpleCreatorModalProps> = ({ isOpen, onClose, onNext, isAuthenticated, hostingContext, userEmail, isProUser = false }) => {
  const [step, setStep] = useState(1);
  const [name, setName] = useState('');
  const [agentId, setAgentId] = useState('');
  const [model, setModel] = useState('');
  const [systemPrompt, setSystemPrompt] = useState('');
  
  const [selectedTools, setSelectedTools] = useState<Map<SimpleTool, ToolData>>(new Map());
  const [smsPhoneNumber, setSmsPhoneNumber] = useState('');
  const [whatsappPhoneNumber, setWhatsappPhoneNumber] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [emailAddress, setEmailAddress] = useState('');
  const [pushoverUserKey, setPushoverUserKey] = useState('');
  const [discordWebhookUrl, setDiscordWebhookUrl] = useState('');
  const [telegramChatId, setTelegramChatId] = useState('');

  const [conditionEnabled, setConditionEnabled] = useState(false);
  const [conditionKeyword, setConditionKeyword] = useState('');
  
  const [availableModels, setAvailableModels] = useState<Model[]>([]);
  const [existingAgents, setExistingAgents] = useState<CompleteAgent[]>([]);
  const [loadingModels, setLoadingModels] = useState(false);
  const [visionValidationError, setVisionValidationError] = useState<string | null>(null);
  const [showWhisperWarning, setShowWhisperWarning] = useState(false); 

  // --- NEW: State for contextual warnings ---
  const [showDesktopNotifWarning, setShowDesktopNotifWarning] = useState(false);
  const [showSmsWarning, setShowSmsWarning] = useState(false);
  const [showWhatsappWarning, setShowWhatsappWarning] = useState(false);
  // --- END NEW ---
  
  const promptRef = useRef<HTMLTextAreaElement>(null);
  const [showConfirmClose, setShowConfirmClose] = useState(false);
  const [tutorialStep, setTutorialStep] = useState(0);
  const tutorialDrivenPageChange = useRef(false);

  const tutorialStepConfigs = [
    { selector: '[data-tutorial="name-input"]', title: 'Name your agent', message: "We've suggested 'Person Watcher', change it if you like." },
    { selector: '[data-tutorial="model-grid"]', title: 'Choose a model', message: 'Cloud models work out of the box. Pick any one to continue.' },
    { selector: '[data-tutorial="prompt-area"]', title: 'Your prompt is ready', message: "It watches your camera and outputs PERSON_DETECTED when it sees someone." },
    { selector: '[data-tutorial="keyword-area"]', title: 'Trigger on a keyword', message: "Actions only fire when the model says PERSON_DETECTED, already configured for you!" },
    {
      selector: isAuthenticated ? '[data-tutorial="email-tool"]' : '[data-tutorial="celebrate-tool"]',
      title: isAuthenticated ? 'Get emailed on detection' : 'Celebrate on detection!',
      message: isAuthenticated
        ? `We've pre-selected your email${userEmail ? ` (${userEmail})` : ''} — you'll get alerted when someone is detected.`
        : "Trigger a celebration animation whenever a person is detected... a fun way to test your agent!",
    },
    { selector: '[data-tutorial="finish-button"]', title: 'Ready to launch!', message: "Hit Finish & Create, your agent will be generated so you can view it!" },
  ];

  const handleTutorialNext = () => {
    const next = tutorialStep + 1;
    if (next > tutorialStepConfigs.length) {
      localStorage.setItem('observer_creator_tutorial_seen', 'true');
      setTutorialStep(0);
      return;
    }