108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { ArrowLeft, Sparkles } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { AIAssistantInterface } from "@/components/ZoeIA/ai-assistant-interface";
|
|
|
|
interface HistoryEntry {
|
|
id: string;
|
|
text: string;
|
|
createdAt: string;
|
|
}
|
|
|
|
export function ChatWidget() {
|
|
const [assistantOpen, setAssistantOpen] = useState(false);
|
|
const [history, setHistory] = useState<HistoryEntry[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (!assistantOpen) return;
|
|
|
|
const original = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
|
|
return () => {
|
|
document.body.style.overflow = original;
|
|
};
|
|
}, [assistantOpen]);
|
|
|
|
const gradientRing = useMemo(
|
|
() => (
|
|
<span
|
|
aria-hidden
|
|
className="absolute inset-0 rounded-full bg-gradient-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100"
|
|
/>
|
|
),
|
|
[]
|
|
);
|
|
|
|
const openAssistant = () => setAssistantOpen(true);
|
|
const closeAssistant = () => setAssistantOpen(false);
|
|
|
|
const handleOpenDocuments = () => {
|
|
console.log("[ChatWidget] Abrindo fluxo de documentos");
|
|
closeAssistant();
|
|
};
|
|
|
|
const handleOpenChat = () => {
|
|
console.log("[ChatWidget] Encaminhando para chat humano");
|
|
closeAssistant();
|
|
};
|
|
|
|
const handleAddHistory = (entry: HistoryEntry) => {
|
|
setHistory((prev) => [...prev, entry]);
|
|
};
|
|
|
|
const handleClearHistory = () => {
|
|
setHistory([]);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{assistantOpen && (
|
|
<div
|
|
id="ai-assistant-overlay"
|
|
className="fixed inset-0 z-[100] flex flex-col bg-background"
|
|
>
|
|
<div className="flex items-center justify-between border-b border-border px-4 py-3">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
className="flex items-center gap-2"
|
|
onClick={closeAssistant}
|
|
>
|
|
<ArrowLeft className="h-4 w-4" aria-hidden />
|
|
<span className="text-sm">Voltar</span>
|
|
</Button>
|
|
</div>
|
|
<div className="flex-1 overflow-auto">
|
|
<AIAssistantInterface
|
|
onOpenDocuments={handleOpenDocuments}
|
|
onOpenChat={handleOpenChat}
|
|
history={history}
|
|
onAddHistory={handleAddHistory}
|
|
onClearHistory={handleClearHistory}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="fixed bottom-6 right-6 z-50 sm:bottom-8 sm:right-8">
|
|
<button
|
|
type="button"
|
|
onClick={openAssistant}
|
|
className="group relative flex h-16 w-16 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
|
|
aria-haspopup="dialog"
|
|
aria-expanded={assistantOpen}
|
|
aria-controls="ai-assistant-overlay"
|
|
>
|
|
{gradientRing}
|
|
<span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-background text-primary shadow-[0_12px_30px_rgba(37,99,235,0.25)] ring-1 ring-primary/10 transition group-hover:scale-[1.03] group-active:scale-95">
|
|
<Sparkles className="h-7 w-7" aria-hidden />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|