Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot] 2026-04-22 17:28:43 +00:00
parent be2c9a2f6c
commit 1c29014f6e
2 changed files with 0 additions and 138 deletions

View file

@ -1,67 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { Loader2, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { invokeFunction } from "@/lib/invoke-function";
interface Props {
onConfigured: () => void;
onSkip: () => void;
}
export function StepConfiguring({ onConfigured, onSkip }: Props) {
const [state, setState] = useState<"loading" | "error">("loading");
const [error, setError] = useState<string | null>(null);
const [attempt, setAttempt] = useState(0);
useEffect(() => {
let cancelled = false;
setState("loading");
setError(null);
(async () => {
const { error: err } = await invokeFunction("configure-telegram-webhook");
if (cancelled) return;
if (err) {
setError(err.message);
setState("error");
return;
}
window.setTimeout(() => {
if (!cancelled) onConfigured();
}, 800);
})();
return () => {
cancelled = true;
};
}, [attempt, onConfigured]);
return (
<div className="px-6 py-12 flex flex-col items-center justify-center min-h-[320px]">
{state === "loading" && (
<>
<Loader2 className="h-10 w-10 text-primary animate-spin" />
<p className="mt-4 text-sm text-muted-foreground">
Configurando recebimento de mensagens...
</p>
</>
)}
{state === "error" && (
<div className="w-full max-w-md rounded-lg border border-destructive bg-destructive/5 p-6 text-center">
<AlertCircle className="mx-auto h-8 w-8 text-destructive" />
<h3 className="mt-3 font-semibold">Falha ao configurar webhook</h3>
{error && <p className="mt-2 text-sm text-muted-foreground">{error}</p>}
<div className="mt-5 flex flex-col sm:flex-row gap-2 justify-center">
<Button onClick={() => setAttempt((a) => a + 1)}>Tentar novamente</Button>
<Button variant="ghost" onClick={onSkip}>
Pular (configurar depois)
</Button>
</div>
</div>
)}
</div>
);
}

View file

@ -1,71 +0,0 @@
"use client";
import { useState } from "react";
import { Copy, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";
interface Props {
suggestedName: string;
suggestedUsername: string;
onNext: () => void;
}
export function StepNaming({ suggestedName, suggestedUsername, onNext }: Props) {
return (
<div className="px-6 py-8 max-w-2xl mx-auto">
<h2 className="text-2xl font-bold tracking-tight">Escolha os nomes</h2>
<p className="mt-2 text-muted-foreground">
O BotFather vai pedir dois nomes. Use nossas sugestões se quiser.
</p>
<div className="mt-6 space-y-4">
<CopyField
label="Nome do bot"
value={suggestedName}
help="Esse é o nome que aparece no topo da conversa."
/>
<CopyField
label="Username (termina em bot)"
value={suggestedUsername}
help="Se o username já estiver em uso, tente adicionar um número no final."
/>
</div>
<div className="mt-8 flex justify-end">
<Button onClick={onNext}>Próximo: colar o token</Button>
</div>
</div>
);
}
function CopyField({ label, value, help }: { label: string; value: string; help?: string }) {
const [copied, setCopied] = useState(false);
async function copy() {
try {
await navigator.clipboard.writeText(value);
setCopied(true);
toast.success("Copiado para a área de transferência");
window.setTimeout(() => setCopied(false), 1500);
} catch {
toast.error("Não foi possível copiar");
}
}
return (
<div className="rounded-lg border border-border bg-card p-4">
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
{label}
</label>
<div className="mt-2 flex gap-2">
<Input value={value} readOnly className="font-mono text-sm" />
<Button type="button" variant="outline" size="icon" onClick={copy} aria-label="Copiar">
{copied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
{help && <p className="mt-2 text-xs text-muted-foreground">{help}</p>}
</div>
);
}