import { useState, useRef, useEffect, useCallback } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { parse } from "marked"; // ─── Tipos ───────────────────────────────────────────────────────────────────── type ChatMessage = { id?: number; role: "user" | "assistant"; text: string; time: string; }; type Conversation = { id: string; title: string; messages: ChatMessage[]; startedAt: string; }; // ─── Ícones ──────────────────────────────────────────────────────────────────── function ExpandIcon({ expanded }: { expanded: boolean }) { return ( {expanded ? ( <> ) : ( <> )} ); } function PlusIcon() { return ( ); } function HistoryIcon() { return ( ); } function SpinnerIcon() { return ( ); } function TrashIcon() { return ( ); } // ─── Header ──────────────────────────────────────────────────────────────────── function ChatHeader({ toggleId, expanded, onToggleExpand, onNewChat, hasActiveConversation, }: { toggleId: string; expanded: boolean; onToggleExpand: () => void; onNewChat: () => void; hasActiveConversation: boolean; }) { return (
LP

Laura

beta

Online agora

{hasActiveConversation && ( )}
); } // ─── Lista de conversas recentes ─────────────────────────────────────────────── function RecentConversations({ conversations, loading, onSelect, onNewChat, onDelete, }: { conversations: Conversation[]; loading: boolean; onSelect: (conv: Conversation) => void; onNewChat: () => void; onDelete: (id: string) => void; }) { return (
Conversas recentes
{loading ? (
Carregando...
) : conversations.length === 0 ? (

Nenhuma conversa ainda.

) : ( conversations.map((conv) => (
{/* Linha clicável */} {/* Botão deletar — aparece no hover */}
)) )}
); } // ─── Typing indicator ────────────────────────────────────────────────────────── function TypingIndicator() { return (
{[0, 150, 300].map((delay) => ( ))}
); } // ─── Bolha ───────────────────────────────────────────────────────────────────── function ChatBubble({ message }: { message: ChatMessage }) { const isUser = message.role === "user"; const messageHtml = parse(message?.text) as string; return (

{message.time}

); } function EmptyState() { return (
👋

Olá! Sou a Laura.

Como posso te ajudar hoje?

); } // ─── CSRF helpers ───────────────────────────────────────────────────────────── function getCsrfToken(): string { const cookie = document.cookie.match(/(?:^|;\s*)XSRF-TOKEN=([^;]+)/); if (cookie) return decodeURIComponent(cookie[1]); return document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ?? ""; } async function refreshCsrfToken(): Promise { await fetch("/sanctum/csrf-cookie", { credentials: "same-origin" }); } async function fetchWithCsrf(url: string, init: RequestInit, retry = true): Promise { const res = await fetch(url, { ...init, credentials: "same-origin", headers: { ...(init.headers as Record), "X-XSRF-TOKEN": getCsrfToken() }, }); if (res.status === 419 && retry) { await refreshCsrfToken(); return fetchWithCsrf(url, init, false); } return res; } // ─── Componente principal ────────────────────────────────────────────────────── export default function ChatWindow() { const toggleId = "chat-toggle"; const [message, setMessage] = useState(""); const [isLoading, setIsLoading] = useState(false); const [expanded, setExpanded] = useState(true); // Conversa ativa const [activeConvId, setActiveConvId] = useState(null); const [activeMessages, setActiveMessages] = useState([]); // Histórico vindo do backend const [history, setHistory] = useState([]); const [historyLoading, setHistoryLoading] = useState(false); // Tela: "history" | "chat" const [screen, setScreen] = useState<"history" | "chat">("history"); const messagesEndRef = useRef(null); const textareaRef = useRef(null); // Busca as últimas 5 conversas do backend const fetchHistory = useCallback(async () => { setHistoryLoading(true); try { const res = await fetch("/agent/conversations"); const data: Conversation[] = await res.json(); setHistory(data); } catch { // silencia — histórico não crítico } finally { setHistoryLoading(false); } }, []); // Carrega histórico quando o chat é aberto (checkbox marcado) // Usamos um MutationObserver não é necessário — recarrega sempre que "history" aparece useEffect(() => { if (screen === "history") fetchHistory(); }, [screen, fetchHistory]); useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [activeMessages, isLoading]); useEffect(() => { const textarea = textareaRef.current; if (!textarea) return; textarea.style.height = "auto"; textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`; }, [message]); function handleNewChat() { setActiveConvId(null); setActiveMessages([]); setScreen("chat"); } function handleSelectConversation(conv: Conversation) { setActiveConvId(conv.id); setActiveMessages(conv.messages); setScreen("chat"); } async function handleDeleteConversation(id: string) { // Remove optimisticamente da lista setHistory((prev) => prev.filter((c) => c.id !== id)); // Se era a conversa ativa, limpa if (activeConvId === id) { setActiveConvId(null); setActiveMessages([]); } try { await fetchWithCsrf(`/agent/conversations/${id}`, { method: "DELETE" }); } catch { // Re-busca em caso de erro para manter consistência fetchHistory(); } } const sendToAgent = useCallback(async (text: string) => { const userMessage: ChatMessage = { id: Date.now(), role: "user", text, time: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), }; setActiveMessages((prev) => [...prev, userMessage]); setIsLoading(true); try { const res = await fetchWithCsrf("/invoke-agent", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: text, conversation_id: activeConvId }), }); const contentType = res.headers.get("content-type") ?? ""; if (!contentType.includes("application/json")) { throw new Error(`Erro ${res.status}: resposta inesperada do servidor.`); } const data = await res.json(); if (!res.ok) { const errMsg = data?.message ?? data?.error ?? `Erro ${res.status}`; throw new Error(errMsg); } if (data.conversation_id) setActiveConvId(data.conversation_id); setActiveMessages((prev) => [ ...prev, { id: prev.length + 1, role: "assistant", text: data.reply, time: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), }, ]); } catch (err: any) { setActiveMessages((prev) => [ ...prev, { id: prev.length + 1, role: "assistant", text: `⚠️ ${err?.message ?? "Erro ao conectar com a Laura. Tente novamente."}`, time: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), }, ]); } finally { setIsLoading(false); } }, [activeConvId]); useEffect(() => { function onLauraSendMessage(e: Event) { const { message: text } = (e as CustomEvent<{ message: string }>).detail; const toggleEl = document.getElementById('chat-toggle') as HTMLInputElement; if (toggleEl && !toggleEl.checked) toggleEl.checked = true; setScreen("chat"); sendToAgent(text); } window.addEventListener('laura:send-message', onLauraSendMessage); return () => window.removeEventListener('laura:send-message', onLauraSendMessage); }, [sendToAgent]); async function handleSend() { if (!message.trim() || isLoading) return; const text = message; setMessage(""); await sendToAgent(text); } function handleKeyDown(e: React.KeyboardEvent) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } } const hasMessages = activeMessages.length > 0; return ( <>
{ if (e.target.checked) setScreen("history"); }} /> {/* Botão flutuante */} {/* Chat Window */}
setExpanded((v) => !v)} onNewChat={handleNewChat} hasActiveConversation={hasMessages} /> {/* ── Tela: histórico ── */} {screen === "history" && (
)} {/* ── Tela: chat ── */} {screen === "chat" && ( <>
{!hasMessages && !isLoading ? ( ) : ( activeMessages.map((msg) => ) )} {isLoading && }