Ajustou wizard Telegram v4

X-Lovable-Edit-ID: edt-796564ad-4023-40cd-b9fc-da6daf930998
Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot] 2026-04-25 13:19:57 +00:00
commit 5c1c588aac
3 changed files with 33 additions and 54 deletions

View file

@ -101,11 +101,13 @@ export function StepToken({ onValidated, onNext, validated }: Props) {
)} )}
</div> </div>
{state !== "success" && (
<div className="mt-6 flex justify-end"> <div className="mt-6 flex justify-end">
<Button onClick={onNext} disabled={state !== "success"}> <Button onClick={onNext} disabled>
Próximo Próximo
</Button> </Button>
</div> </div>
)}
</div> </div>
); );
} }

View file

@ -14,10 +14,9 @@ import { toast } from "sonner";
import { StepWelcome } from "./StepWelcome"; import { StepWelcome } from "./StepWelcome";
import { StepCreateBot } from "./StepCreateBot"; import { StepCreateBot } from "./StepCreateBot";
import { StepToken, type ValidatedBot } from "./StepToken"; import { StepToken, type ValidatedBot } from "./StepToken";
import { StepWaiting } from "./StepWaiting";
const STORAGE_KEY = "mika-onboarding-last-step"; const STORAGE_KEY = "mika-onboarding-last-step";
const TOTAL_STEPS = 4; const TOTAL_STEPS = 3;
interface Props { interface Props {
open: boolean; open: boolean;
@ -35,19 +34,11 @@ export function TelegramOnboardingWizard({ open, onOpenChange, initialStep }: Pr
const [validated, setValidated] = useState<ValidatedBot | null>(null); const [validated, setValidated] = useState<ValidatedBot | null>(null);
// Deriva o passo inicial do estado real do agente. // Deriva o passo inicial do estado real do agente.
// Só pula para passos avançados se houver evidência concreta no banco.
function deriveStepFromAgent(): number { function deriveStepFromAgent(): number {
if (!agent) return 1; if (!agent) return 1;
const hasToken = !!agent.telegram_bot_token_vault_id; const hasToken = !!agent.telegram_bot_token_vault_id;
const hasUsername = !!agent.telegram_bot_username; const hasUsername = !!agent.telegram_bot_username;
const webhookOk = !!agent.telegram_webhook_configured;
const firstMsg = !!agent.telegram_first_message_received_at;
// Token validado + webhook configurado → aguardando 1ª mensagem (ou já recebida)
if (hasToken && hasUsername && (webhookOk || firstMsg)) return 4;
// Token validado mas webhook ainda não → ainda no passo do token (3)
if (hasToken && hasUsername) return 3; if (hasToken && hasUsername) return 3;
// Sem token: sempre começa do início
return 1; return 1;
} }
@ -59,7 +50,6 @@ export function TelegramOnboardingWizard({ open, onOpenChange, initialStep }: Pr
return; return;
} }
const derived = deriveStepFromAgent(); const derived = deriveStepFromAgent();
// Se o agente ainda não tem token, ignora qualquer valor antigo do localStorage
if (derived === 1 && typeof window !== "undefined") { if (derived === 1 && typeof window !== "undefined") {
window.localStorage.removeItem(STORAGE_KEY); window.localStorage.removeItem(STORAGE_KEY);
setStep(1); setStep(1);
@ -91,35 +81,30 @@ export function TelegramOnboardingWizard({ open, onOpenChange, initialStep }: Pr
onOpenChange(false); onOpenChange(false);
} }
async function handleFinish() {
if (!agent || !user) return handleClose(); // Após validar token, recarrega agent_instance, marca onboarding como completo,
const { error } = await supabase // mostra toast de sucesso e fecha o wizard automaticamente.
async function handleValidated(bot: ValidatedBot) {
setValidated(bot);
if (user) {
await queryClient.invalidateQueries({ queryKey: ["agent-instance", user.id] });
}
if (agent) {
await supabase
.from("agent_instances") .from("agent_instances")
.update({ telegram_onboarding_completed: true }) .update({ telegram_onboarding_completed: true })
.eq("id", agent.id); .eq("id", agent.id);
if (error) { if (user) {
toast.error("Não foi possível salvar o status do onboarding."); await queryClient.invalidateQueries({ queryKey: ["agent-instance", user.id] });
return; }
} }
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
window.localStorage.removeItem(STORAGE_KEY); window.localStorage.removeItem(STORAGE_KEY);
} }
await queryClient.invalidateQueries({ queryKey: ["agent-instance", user.id] }); toast.success("Token salvo! Seu agente será ativado em alguns minutos.");
toast.success("Onboarding concluído!");
onOpenChange(false); onOpenChange(false);
} }
// Após validar token, recarrega agent_instance (já tem bot_username persistido)
function handleValidated(bot: ValidatedBot) {
setValidated(bot);
if (user) {
queryClient.invalidateQueries({ queryKey: ["agent-instance", user.id] });
}
}
const botUsername = validated?.bot_username ?? agent?.telegram_bot_username ?? "";
const connectedAt = agent?.telegram_connected_at ?? null;
return ( return (
<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}> <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
<DialogPrimitive.Portal> <DialogPrimitive.Portal>
@ -137,7 +122,7 @@ export function TelegramOnboardingWizard({ open, onOpenChange, initialStep }: Pr
Conectar Telegram ao Mika Conectar Telegram ao Mika
</DialogPrimitive.Title> </DialogPrimitive.Title>
<DialogPrimitive.Description className="sr-only"> <DialogPrimitive.Description className="sr-only">
Wizard guiado para conectar seu agente Mika ao Telegram em 4 passos. Wizard guiado para conectar seu agente Mika ao Telegram em 3 passos.
</DialogPrimitive.Description> </DialogPrimitive.Description>
<div className="sticky top-0 z-10 bg-background/95 backdrop-blur-sm border-b border-border"> <div className="sticky top-0 z-10 bg-background/95 backdrop-blur-sm border-b border-border">
@ -178,22 +163,9 @@ export function TelegramOnboardingWizard({ open, onOpenChange, initialStep }: Pr
<StepToken <StepToken
validated={validated} validated={validated}
onValidated={handleValidated} onValidated={handleValidated}
onNext={() => setStep(4)} onNext={() => { /* fechamento é feito em handleValidated */ }}
/> />
)} )}
{step === 4 && agent && botUsername && (
<StepWaiting
agentInstanceId={agent.id}
botUsername={botUsername}
connectedAt={connectedAt}
onFinish={handleFinish}
/>
)}
{step === 4 && (!agent || !botUsername) && (
<div className="px-6 py-12 text-center text-sm text-muted-foreground">
Conecte o bot primeiro para receber a primeira mensagem.
</div>
)}
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
</div> </div>

View file

@ -358,8 +358,13 @@ function WelcomePage() {
open={wizardOpen} open={wizardOpen}
onOpenChange={(open) => { onOpenChange={(open) => {
setWizardOpen(open); setWizardOpen(open);
// Quando fechar o wizard, leva ao painel
if (!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: {} }); navigate({ to: "/painel", search: {} });
} }
}} }}