mirror of
https://github.com/domfelipe/mika-agent-assist.git
synced 2026-08-07 15:56:50 +00:00
Changes
Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
parent
e0a60f149e
commit
2010809e3f
1 changed files with 86 additions and 51 deletions
|
|
@ -369,68 +369,103 @@ function WelcomePage() {
|
||||||
className="text-center"
|
className="text-center"
|
||||||
>
|
>
|
||||||
<h2 className="text-3xl font-bold text-white">
|
<h2 className="text-3xl font-bold text-white">
|
||||||
Quase lá! Conecte seu Telegram.
|
Crie seu bot em 1 toque 🚀
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-3 text-white/70 max-w-lg mx-auto">
|
<p className="mt-3 text-white/70 max-w-lg mx-auto">
|
||||||
Para conversar com{" "}
|
Preparamos tudo para você. Basta confirmar no Telegram.
|
||||||
<span className="font-semibold text-white">
|
|
||||||
{agentName || "seu agente"}
|
|
||||||
</span>
|
|
||||||
, você precisa conectar seu Telegram. Leva menos de 2 minutos.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<motion.div
|
{/* Card de preview do bot */}
|
||||||
animate={{ scale: [1, 1.06, 1] }}
|
<div className="mx-auto mt-8 max-w-md rounded-2xl border border-white/10 bg-white/5 p-5 text-left">
|
||||||
transition={{ duration: 2.4, repeat: Infinity, ease: "easeInOut" }}
|
<div className="flex items-center gap-4">
|
||||||
className="mx-auto mt-8 mb-8 h-24 w-24 rounded-full bg-primary/20 flex items-center justify-center"
|
<div className="h-14 w-14 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
|
||||||
>
|
<TelegramIcon className="h-7 w-7 text-primary" />
|
||||||
<TelegramIcon className="h-12 w-12 text-primary" />
|
</div>
|
||||||
</motion.div>
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-base font-semibold text-white truncate">
|
||||||
|
{agentName || "Seu agente"}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-white/60 truncate">
|
||||||
|
@{previewUsername || "carregando…"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ol className="space-y-3 max-w-md mx-auto text-left">
|
{/* Estado: aguardando confirmação */}
|
||||||
<StepRow
|
{waitingConfirm && (
|
||||||
number={1}
|
<div className="mt-8 max-w-md mx-auto">
|
||||||
title="Abra o BotFather no Telegram"
|
<div className="flex items-center justify-center gap-3 text-white">
|
||||||
extra={
|
<Loader2 className="h-5 w-5 animate-spin text-primary" />
|
||||||
<Button
|
<span className="text-sm font-medium">
|
||||||
asChild
|
Aguardando confirmação no Telegram…
|
||||||
size="sm"
|
</span>
|
||||||
variant="outline"
|
</div>
|
||||||
className="mt-2 border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white"
|
<p className="mt-2 text-xs text-white/50">
|
||||||
>
|
Confirme as informações na conversa com @mika_managerbot.
|
||||||
<a
|
</p>
|
||||||
href="https://t.me/BotFather?start"
|
</div>
|
||||||
target="_blank"
|
)}
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Abrir BotFather <ExternalLink className="ml-2 h-3.5 w-3.5" />
|
|
||||||
</a>
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<StepRow
|
|
||||||
number={2}
|
|
||||||
title="Digite /newbot e siga as instruções"
|
|
||||||
hint={`Use "${agentName || "Mika"}Bot" como username sugerido`}
|
|
||||||
/>
|
|
||||||
<StepRow
|
|
||||||
number={3}
|
|
||||||
title="Cole o token aqui na próxima tela"
|
|
||||||
/>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
|
{/* Estado: timeout */}
|
||||||
|
{waitTimedOut && (
|
||||||
|
<div className="mt-8 max-w-md mx-auto rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 text-left">
|
||||||
|
<p className="text-sm text-amber-100">
|
||||||
|
Não recebemos a confirmação ainda. Tente novamente ou faça
|
||||||
|
o processo manualmente.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Ícones explicativos — só antes de iniciar */}
|
||||||
|
{!waitingConfirm && !waitTimedOut && (
|
||||||
|
<div className="mt-8 grid grid-cols-3 gap-3 max-w-md mx-auto">
|
||||||
|
<ExplainIcon emoji="📱" label="Abre no Telegram" />
|
||||||
|
<ExplainIcon emoji="✅" label="Confirma as informações" />
|
||||||
|
<ExplainIcon emoji="🎉" label="Bot criado automaticamente" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Ações */}
|
||||||
<div className="mt-10 flex flex-col items-center gap-3">
|
<div className="mt-10 flex flex-col items-center gap-3">
|
||||||
|
{!waitingConfirm && !waitTimedOut && (
|
||||||
<Button
|
<Button
|
||||||
size="lg"
|
size="lg"
|
||||||
className="min-w-64"
|
className="min-w-64"
|
||||||
onClick={handleConnectTelegram}
|
onClick={handleCreateManagedBot}
|
||||||
|
disabled={creatingBot || !agent}
|
||||||
>
|
>
|
||||||
Conectar meu Telegram <ArrowRight className="ml-2 h-4 w-4" />
|
{creatingBot ? (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : null}
|
||||||
|
Criar meu bot no Telegram
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{waitTimedOut && (
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="min-w-64"
|
||||||
|
onClick={handleCreateManagedBot}
|
||||||
|
disabled={creatingBot}
|
||||||
|
>
|
||||||
|
<RefreshCcw className="mr-2 h-4 w-4" />
|
||||||
|
Tentar novamente
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleOpenManualWizard}
|
||||||
|
className="text-sm text-white/70 hover:text-white underline-offset-4 hover:underline"
|
||||||
|
>
|
||||||
|
Prefiro configurar manualmente
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleSkip}
|
onClick={handleSkip}
|
||||||
className="text-sm text-white/60 hover:text-white underline-offset-4 hover:underline"
|
className="text-xs text-white/40 hover:text-white/70 underline-offset-4 hover:underline"
|
||||||
>
|
>
|
||||||
Fazer isso depois
|
Fazer isso depois
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue