mirror of
https://github.com/domfelipe/mika-agent-assist.git
synced 2026-08-07 06:56:44 +00:00
Changes
Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
parent
9cc40fc041
commit
68d374dd6b
1 changed files with 447 additions and 0 deletions
447
src/components/mika/telegram/BotFatherWizard.tsx
Normal file
447
src/components/mika/telegram/BotFatherWizard.tsx
Normal file
|
|
@ -0,0 +1,447 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import {
|
||||||
|
ArrowRight,
|
||||||
|
Check,
|
||||||
|
Copy,
|
||||||
|
ExternalLink,
|
||||||
|
Loader2,
|
||||||
|
AlertCircle,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { invokeFunction } from "@/lib/invoke-function";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
sanitizeForUsername,
|
||||||
|
suggestBotUsername,
|
||||||
|
} from "@/lib/telegram-username";
|
||||||
|
|
||||||
|
const TOKEN_REGEX = /^\d+:[A-Za-z0-9_-]{35}$/;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
agentName: string;
|
||||||
|
fullName: string;
|
||||||
|
onActivated: (bot: { bot_username: string; bot_name: string; bot_id: number }) => void;
|
||||||
|
onSkip: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BotFatherWizard({ agentName, fullName, onActivated, onSkip }: Props) {
|
||||||
|
const [step1Done, setStep1Done] = useState(false);
|
||||||
|
const [step2Done, setStep2Done] = useState(false);
|
||||||
|
const [step3Done, setStep3Done] = useState(false);
|
||||||
|
const [token, setToken] = useState("");
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const suggestedUsername = useMemo(() => {
|
||||||
|
// base do agent_name; cai pro firstName se não der
|
||||||
|
const base = sanitizeForUsername(agentName).replace(/^mikade/, "mika");
|
||||||
|
if (base.length >= 5) {
|
||||||
|
const trimmed = base.slice(0, 28);
|
||||||
|
return trimmed.endsWith("bot") ? trimmed : `${trimmed}bot`;
|
||||||
|
}
|
||||||
|
return suggestBotUsername(fullName);
|
||||||
|
}, [agentName, fullName]);
|
||||||
|
|
||||||
|
const tokenValid = TOKEN_REGEX.test(token.trim());
|
||||||
|
|
||||||
|
function handleOpenBotFather() {
|
||||||
|
window.open("https://t.me/BotFather?start=newbot", "_blank", "noopener,noreferrer");
|
||||||
|
setStep1Done(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function copyToClipboard(value: string, onDone: () => void) {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(value);
|
||||||
|
toast.success("Copiado!");
|
||||||
|
onDone();
|
||||||
|
} catch {
|
||||||
|
toast.error("Não foi possível copiar.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleActivate() {
|
||||||
|
if (!tokenValid) return;
|
||||||
|
setSubmitting(true);
|
||||||
|
setErrorMsg(null);
|
||||||
|
const { data, error } = await invokeFunction<{
|
||||||
|
bot_username: string;
|
||||||
|
bot_name: string;
|
||||||
|
bot_id: number;
|
||||||
|
}>("validate-telegram-bot", { token: token.trim() });
|
||||||
|
|
||||||
|
if (error || !data?.bot_username) {
|
||||||
|
setSubmitting(false);
|
||||||
|
setErrorMsg(
|
||||||
|
error?.message ?? "Token inválido. Verifique e tente novamente.",
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onActivated(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid gap-8 lg:grid-cols-2 lg:gap-10 items-start">
|
||||||
|
{/* COLUNA ESQUERDA — passos */}
|
||||||
|
<div className="text-left">
|
||||||
|
<h2 className="text-2xl font-bold text-white">
|
||||||
|
Crie seu bot em 2 minutos
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-sm text-white/60">
|
||||||
|
Siga os passos abaixo. Cada um leva alguns segundos.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ol className="mt-6 space-y-4">
|
||||||
|
<Step
|
||||||
|
number={1}
|
||||||
|
emoji="📱"
|
||||||
|
title="Abra o BotFather"
|
||||||
|
description="O BotFather é o bot oficial do Telegram para criar bots."
|
||||||
|
done={step1Done}
|
||||||
|
highlight={!step1Done}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={handleOpenBotFather}
|
||||||
|
className="mt-3"
|
||||||
|
>
|
||||||
|
Abrir BotFather
|
||||||
|
<ExternalLink className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
<Step
|
||||||
|
number={2}
|
||||||
|
emoji="🤖"
|
||||||
|
title="Escolha um nome"
|
||||||
|
description="Quando o BotFather perguntar o nome, use:"
|
||||||
|
done={step2Done}
|
||||||
|
highlight={step1Done && !step2Done}
|
||||||
|
>
|
||||||
|
<CopyChip
|
||||||
|
value={agentName || "Mika"}
|
||||||
|
onCopied={() => setStep2Done(true)}
|
||||||
|
/>
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
<Step
|
||||||
|
number={3}
|
||||||
|
emoji="@"
|
||||||
|
title="Escolha um username"
|
||||||
|
description="Quando pedir o username (deve terminar em 'bot'), use:"
|
||||||
|
done={step3Done}
|
||||||
|
highlight={step2Done && !step3Done}
|
||||||
|
>
|
||||||
|
<CopyChip
|
||||||
|
value={suggestedUsername}
|
||||||
|
onCopied={() => setStep3Done(true)}
|
||||||
|
/>
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
<Step
|
||||||
|
number={4}
|
||||||
|
emoji="🔑"
|
||||||
|
title="Cole o token aqui"
|
||||||
|
description="O BotFather vai te enviar um token. Cole ele abaixo:"
|
||||||
|
done={tokenValid}
|
||||||
|
highlight={step3Done && !tokenValid}
|
||||||
|
>
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
value={token}
|
||||||
|
onChange={(e) => {
|
||||||
|
setToken(e.target.value);
|
||||||
|
if (errorMsg) setErrorMsg(null);
|
||||||
|
}}
|
||||||
|
placeholder="1234567890:ABCdefGHIjklMNOpqrsTUVwxyz"
|
||||||
|
className={cn(
|
||||||
|
"h-11 font-mono text-sm bg-white/5 border-white/20 text-white placeholder:text-white/30",
|
||||||
|
tokenValid &&
|
||||||
|
"border-emerald-400/60 focus-visible:ring-emerald-400/40",
|
||||||
|
)}
|
||||||
|
disabled={submitting}
|
||||||
|
/>
|
||||||
|
{tokenValid && (
|
||||||
|
<p className="flex items-center gap-1.5 text-xs font-medium text-emerald-400">
|
||||||
|
<Check className="h-3.5 w-3.5" /> Token válido!
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{errorMsg && (
|
||||||
|
<p className="flex items-start gap-1.5 text-xs text-red-300">
|
||||||
|
<AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
||||||
|
{errorMsg}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Step>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<div className="mt-8 flex flex-col items-center gap-3">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="w-full sm:min-w-64 sm:w-auto"
|
||||||
|
disabled={!tokenValid || submitting}
|
||||||
|
onClick={handleActivate}
|
||||||
|
>
|
||||||
|
{submitting ? (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : null}
|
||||||
|
Ativar meu agente
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onSkip}
|
||||||
|
className="text-xs text-white/50 hover:text-white/80 underline-offset-4 hover:underline"
|
||||||
|
>
|
||||||
|
Fazer isso depois
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* COLUNA DIREITA — preview animado (apenas desktop) */}
|
||||||
|
<aside className="hidden lg:block">
|
||||||
|
<ChatPreview agentName={agentName} firstName={fullName.split(" ")[0] || "você"} />
|
||||||
|
<ul className="mt-6 space-y-2 text-sm text-white/80">
|
||||||
|
{[
|
||||||
|
"Responder perguntas e pesquisar",
|
||||||
|
"Gerenciar sua agenda e lembretes",
|
||||||
|
"Resumir emails importantes",
|
||||||
|
"Criar automações personalizadas",
|
||||||
|
"Memória persistente entre conversas",
|
||||||
|
].map((item) => (
|
||||||
|
<li key={item} className="flex items-start gap-2">
|
||||||
|
<span className="text-emerald-400 mt-0.5">✅</span>
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Step({
|
||||||
|
number,
|
||||||
|
emoji,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
done,
|
||||||
|
highlight,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
number: number;
|
||||||
|
emoji: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
done: boolean;
|
||||||
|
highlight: boolean;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl border p-4 transition-all",
|
||||||
|
done
|
||||||
|
? "border-emerald-500/30 bg-emerald-500/5"
|
||||||
|
: highlight
|
||||||
|
? "border-primary/50 bg-primary/5"
|
||||||
|
: "border-white/10 bg-white/5",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"h-8 w-8 shrink-0 rounded-full flex items-center justify-center font-bold text-sm",
|
||||||
|
done
|
||||||
|
? "bg-emerald-500 text-white"
|
||||||
|
: "bg-primary text-primary-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{done ? <Check className="h-4 w-4" /> : number}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-semibold text-white">
|
||||||
|
<span className="mr-1.5">{emoji}</span>
|
||||||
|
{title}
|
||||||
|
</p>
|
||||||
|
<p className="mt-0.5 text-xs text-white/60">{description}</p>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CopyChip({
|
||||||
|
value,
|
||||||
|
onCopied,
|
||||||
|
}: {
|
||||||
|
value: string;
|
||||||
|
onCopied: () => void;
|
||||||
|
}) {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
async function handleCopy() {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(value);
|
||||||
|
setCopied(true);
|
||||||
|
toast.success("Copiado!");
|
||||||
|
onCopied();
|
||||||
|
setTimeout(() => setCopied(false), 1500);
|
||||||
|
} catch {
|
||||||
|
toast.error("Não foi possível copiar.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleCopy}
|
||||||
|
className={cn(
|
||||||
|
"mt-3 group flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors",
|
||||||
|
"border-white/15 bg-white/5 hover:bg-white/10",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="font-mono text-sm text-white truncate">{value}</span>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-1.5 text-xs font-medium shrink-0",
|
||||||
|
copied ? "text-emerald-400" : "text-white/60 group-hover:text-white",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{copied ? (
|
||||||
|
<>
|
||||||
|
<Check className="h-3.5 w-3.5" /> Copiado
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Copy className="h-3.5 w-3.5" /> Copiar
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChatPreview({
|
||||||
|
agentName,
|
||||||
|
firstName,
|
||||||
|
}: {
|
||||||
|
agentName: string;
|
||||||
|
firstName: string;
|
||||||
|
}) {
|
||||||
|
const safeName = (agentName || "Mika").trim();
|
||||||
|
const safeFirst = (firstName || "você").trim();
|
||||||
|
const reply = `Olá, ${safeFirst}! 👋 Sou a Mika, sua assistente pessoal. Como posso ajudar você hoje?`;
|
||||||
|
|
||||||
|
// Cycle: 0 = só "Oi!", 1 = typing, 2 = resposta digitando, 3 = completa, depois reseta
|
||||||
|
const [cycle, setCycle] = useState(0);
|
||||||
|
const [typed, setTyped] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (cycle === 0) {
|
||||||
|
const t = setTimeout(() => setCycle(1), 900);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
}
|
||||||
|
if (cycle === 1) {
|
||||||
|
const t = setTimeout(() => setCycle(2), 1100);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
}
|
||||||
|
if (cycle === 2) {
|
||||||
|
// typewriter
|
||||||
|
let i = 0;
|
||||||
|
setTyped("");
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
i += 1;
|
||||||
|
setTyped(reply.slice(0, i));
|
||||||
|
if (i >= reply.length) {
|
||||||
|
clearInterval(interval);
|
||||||
|
setTimeout(() => setCycle(3), 1500);
|
||||||
|
}
|
||||||
|
}, 25);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}
|
||||||
|
if (cycle === 3) {
|
||||||
|
const t = setTimeout(() => {
|
||||||
|
setTyped("");
|
||||||
|
setCycle(0);
|
||||||
|
}, 2500);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
}
|
||||||
|
}, [cycle, reply]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-2xl border border-white/10 bg-[oklch(0.18_0.03_265)] p-5 shadow-2xl">
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-white/40">
|
||||||
|
Prévia do seu bot
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-3 flex items-center gap-3 border-b border-white/10 pb-3">
|
||||||
|
<div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center text-lg">
|
||||||
|
🤖
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="text-sm font-semibold text-white truncate">{safeName}</p>
|
||||||
|
<p className="text-xs text-emerald-400">online</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 space-y-2 min-h-[180px]">
|
||||||
|
{/* Mensagem do usuário */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<div className="rounded-2xl rounded-br-sm bg-primary px-3 py-1.5 text-sm text-primary-foreground">
|
||||||
|
Oi!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Typing indicator */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{cycle === 1 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 6 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="flex justify-start"
|
||||||
|
>
|
||||||
|
<div className="rounded-2xl rounded-bl-sm bg-white/10 px-3 py-2 flex gap-1">
|
||||||
|
{[0, 1, 2].map((i) => (
|
||||||
|
<motion.span
|
||||||
|
key={i}
|
||||||
|
className="h-1.5 w-1.5 rounded-full bg-white/60"
|
||||||
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
||||||
|
transition={{
|
||||||
|
duration: 1,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: i * 0.2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
{/* Resposta do bot */}
|
||||||
|
{(cycle === 2 || cycle === 3) && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 6 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex justify-start"
|
||||||
|
>
|
||||||
|
<div className="max-w-[85%] rounded-2xl rounded-bl-sm bg-white/10 px-3 py-2 text-sm text-white">
|
||||||
|
{cycle === 2 ? typed : reply}
|
||||||
|
{cycle === 2 && (
|
||||||
|
<span className="ml-0.5 inline-block h-3.5 w-px bg-white/80 align-middle animate-pulse" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue