diff --git a/src/routes/bem-vindo.tsx b/src/routes/bem-vindo.tsx index 90e1abb..c8fd153 100644 --- a/src/routes/bem-vindo.tsx +++ b/src/routes/bem-vindo.tsx @@ -3,14 +3,7 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { useEffect, useMemo, useRef, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; -import { - ArrowRight, - CheckCircle2, - ExternalLink, - Loader2, - RefreshCcw, - Sparkles, -} from "lucide-react"; +import { ArrowRight, Loader2, Sparkles } from "lucide-react"; import { useQueryClient } from "@tanstack/react-query"; import { toast } from "sonner"; @@ -21,8 +14,7 @@ import { supabase } from "@/integrations/supabase/client"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Logo } from "@/components/mika/Logo"; -import { TelegramIcon } from "@/components/mika/telegram/TelegramIcon"; -import { TelegramOnboardingWizard } from "@/components/mika/telegram/TelegramOnboardingWizard"; +import { BotFatherWizard } from "@/components/mika/telegram/BotFatherWizard"; import { cn } from "@/lib/utils"; const WELCOME_DONE_KEY = "mika-welcome-done"; @@ -41,14 +33,6 @@ function WelcomePage() { const [step, setStep] = useState<1 | 2 | 3>(1); const [agentName, setAgentName] = useState(""); const [saving, setSaving] = useState(false); - const [wizardOpen, setWizardOpen] = useState(false); - - // Managed bot state - const [creatingBot, setCreatingBot] = useState(false); - const [waitingConfirm, setWaitingConfirm] = useState(false); - const [waitTimedOut, setWaitTimedOut] = useState(false); - const [previewUsername, setPreviewUsername] = useState(null); - const waitStartedAt = useRef(null); const fullName = (profile?.full_name || "").trim(); const firstName = useMemo( @@ -141,95 +125,28 @@ function WelcomePage() { } } - async function handleOpenManualWizard() { - await markWelcomeDone(); - setWaitingConfirm(false); - setWizardOpen(true); - } - async function handleSkip() { await markWelcomeDone(); navigate({ to: "/painel", search: {} }); } - // Sugere username localmente (apenas preview visual antes do clique) - useEffect(() => { - if (step !== 3) return; - if (agent?.managed_bot_suggested_username) { - setPreviewUsername(agent.managed_bot_suggested_username); - return; + async function handleActivated() { + await markWelcomeDone(); + if (agent) { + await supabase + .from("agent_instances") + .update({ telegram_onboarding_completed: true }) + .eq("id", agent.id); } - const base = (agentName || "mika") - .toLowerCase() - .normalize("NFD") - .replace(/[\u0300-\u036f]/g, "") - .replace(/[^a-z0-9]/g, "") - .substring(0, 28); - const safe = base.length >= 3 ? base : `mika${base}`; - setPreviewUsername(`${safe}bot`); - }, [step, agentName, agent?.managed_bot_suggested_username]); - - async function handleCreateManagedBot() { - if (!agent) { - toast.error("Aguarde, ainda estamos preparando seu agente…"); - return; - } - setCreatingBot(true); - setWaitTimedOut(false); - try { - const { data, error } = await supabase.functions.invoke<{ - url: string; - suggested_username: string; - manager_username: string; - }>("create-managed-bot", { - body: { - agent_instance_id: agent.id, - agent_name: agentName.trim(), - }, - }); - if (error || !data?.url) { - throw error ?? new Error("Resposta inválida"); - } - setPreviewUsername(data.suggested_username); - window.open(data.url, "_blank", "noopener,noreferrer"); - await markWelcomeDone(); - waitStartedAt.current = Date.now(); - setWaitingConfirm(true); - } catch (err) { - console.error(err); - toast.error( - "Não foi possível iniciar a criação do bot. Tente novamente ou use o modo manual.", - ); - } finally { - setCreatingBot(false); + if (user) { + await queryClient.invalidateQueries({ queryKey: ["agent-instance", user.id] }); } + toast.success( + "🎉 Perfeito! Seu agente está sendo ativado. Em alguns minutos você receberá uma mensagem no Telegram!", + ); + navigate({ to: "/painel", search: {} }); } - // Polling: enquanto aguardamos confirmação, useAgentInstance já refetch a cada 10s. - // Aceleramos o refetch a cada 3s e detectamos sucesso. - useEffect(() => { - if (!waitingConfirm) return; - if (!user) return; - const interval = setInterval(() => { - queryClient.invalidateQueries({ queryKey: ["agent-instance", user.id] }); - if (waitStartedAt.current && Date.now() - waitStartedAt.current > 5 * 60_000) { - setWaitingConfirm(false); - setWaitTimedOut(true); - } - }, 3000); - return () => clearInterval(interval); - }, [waitingConfirm, user, queryClient]); - - // Detecta sucesso da confirmação via webhook - useEffect(() => { - if (!waitingConfirm) return; - if (agent?.telegram_onboarding_completed && !agent.managed_bot_pending) { - setWaitingConfirm(false); - toast.success("🎉 Bot criado! Seu agente está sendo ativado."); - navigate({ to: "/painel", search: {} }); - } - }, [waitingConfirm, agent, navigate]); - if (authLoading || !user) { return (
@@ -252,7 +169,7 @@ function WelcomePage() {
-
+
{step === 1 && ( -

- Crie seu bot em 1 toque 🚀 -

-

- Preparamos tudo para você. Basta confirmar no Telegram. -

- - {/* Card de preview do bot */} -
-
-
- -
-
-

- {agentName || "Seu agente"} -

-

- @{previewUsername || "carregando…"} -

-
-
+
+

+ Conecte seu Telegram +

+

+ Falta pouco! Vamos colocar a {agentName || "Mika"} para conversar com você. +

- {/* Estado: aguardando confirmação */} - {waitingConfirm && ( -
-
- - - Aguardando confirmação no Telegram… - -
-

- Confirme as informações na conversa com @mika_managerbot. -

-
- )} - - {/* Estado: timeout */} - {waitTimedOut && ( -
-

- Não recebemos a confirmação ainda. Tente novamente ou faça - o processo manualmente. -

-
- )} - - {/* Ícones explicativos — só antes de iniciar */} - {!waitingConfirm && !waitTimedOut && ( -
- - - -
- )} - - {/* Ações */} -
- {!waitingConfirm && !waitTimedOut && ( - - )} - - {waitTimedOut && ( - - )} - - - -
+ )}
- - { - setWizardOpen(open); - if (!open) { - // Se o token foi salvo (vault_id presente), considera sucesso - if (agent?.telegram_bot_token_vault_id) { - toast.success( - "Perfeito! Seu agente está sendo ativado. Você receberá uma mensagem no Telegram quando estiver pronto! 🎉", - ); - } - navigate({ to: "/painel", search: {} }); - } - }} - /> -
- ); -} - -function StepRow({ - number, - title, - hint, - extra, -}: { - number: number; - title: string; - hint?: string; - extra?: React.ReactNode; -}) { - return ( -
  • - - {number} - -
    -

    {title}

    - {hint &&

    {hint}

    } - {extra} -
    -
  • - ); -} - -function ExplainIcon({ emoji, label }: { emoji: string; label: string }) { - return ( -
    -
    {emoji}
    -

    {label}

    ); }