fix(ia) adicionei o endepoint de producao do agente
This commit is contained in:
parent
e927de1821
commit
7ca2c21ba3
@ -1,29 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { SimpleThemeToggle } from "@/components/ui/simple-theme-toggle";
|
||||
import {
|
||||
Clock,
|
||||
Info,
|
||||
Lock,
|
||||
MessageCircle,
|
||||
Plus,
|
||||
Upload,
|
||||
} from "lucide-react";
|
||||
import { Clock, Info, Lock, MessageCircle, Plus, Upload } from "lucide-react";
|
||||
|
||||
interface HistoryEntry {
|
||||
const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/cd7d10e6-bcfc-4f3a-b649-351d12b714f1";
|
||||
const FALLBACK_RESPONSE = "Tive um problema para responder agora. Tente novamente em alguns instantes.";
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
text: string;
|
||||
sender: "user" | "assistant";
|
||||
content: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface ChatSession {
|
||||
id: string;
|
||||
startedAt: string;
|
||||
updatedAt: string;
|
||||
topic: string;
|
||||
messages: ChatMessage[];
|
||||
}
|
||||
|
||||
interface AIAssistantInterfaceProps {
|
||||
onOpenDocuments?: () => void;
|
||||
onOpenChat?: () => void;
|
||||
history?: HistoryEntry[];
|
||||
onAddHistory?: (entry: HistoryEntry) => void;
|
||||
history?: ChatSession[];
|
||||
onAddHistory?: (session: ChatSession) => void;
|
||||
onClearHistory?: () => void;
|
||||
}
|
||||
|
||||
@ -35,11 +41,117 @@ export function AIAssistantInterface({
|
||||
onClearHistory,
|
||||
}: AIAssistantInterfaceProps) {
|
||||
const [question, setQuestion] = useState("");
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [internalHistory, setInternalHistory] = useState<HistoryEntry[]>([]);
|
||||
const history = externalHistory ?? internalHistory;
|
||||
const [internalHistory, setInternalHistory] = useState<ChatSession[]>(externalHistory ?? []);
|
||||
const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
|
||||
const [manualSelection, setManualSelection] = useState(false);
|
||||
const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
|
||||
const messageListRef = useRef<HTMLDivElement | null>(null);
|
||||
const history = internalHistory;
|
||||
const historyRef = useRef<ChatSession[]>(history);
|
||||
const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?";
|
||||
const greetingWords = useMemo(() => baseGreeting.split(" "), [baseGreeting]);
|
||||
const [typedGreeting, setTypedGreeting] = useState("");
|
||||
const [typedIndex, setTypedIndex] = useState(0);
|
||||
const [isTypingGreeting, setIsTypingGreeting] = useState(true);
|
||||
|
||||
const showHistoryBadge = useMemo(() => history.length > 0, [history.length]);
|
||||
const [gradientGreeting, plainGreeting] = useMemo(() => {
|
||||
if (!typedGreeting) return ["", ""] as const;
|
||||
const separatorIndex = typedGreeting.indexOf("Como");
|
||||
if (separatorIndex === -1) {
|
||||
return [typedGreeting, ""] as const;
|
||||
}
|
||||
const gradientPart = typedGreeting.slice(0, separatorIndex).trimEnd();
|
||||
const plainPart = typedGreeting.slice(separatorIndex).trimStart();
|
||||
return [gradientPart, plainPart] as const;
|
||||
}, [typedGreeting]);
|
||||
|
||||
useEffect(() => {
|
||||
if (externalHistory) {
|
||||
setInternalHistory(externalHistory);
|
||||
}
|
||||
}, [externalHistory]);
|
||||
|
||||
useEffect(() => {
|
||||
historyRef.current = history;
|
||||
}, [history]);
|
||||
|
||||
const activeSession = useMemo(
|
||||
() => history.find((session) => session.id === activeSessionId) ?? null,
|
||||
[history, activeSessionId]
|
||||
);
|
||||
|
||||
const activeMessages = activeSession?.messages ?? [];
|
||||
|
||||
const formatDateTime = useCallback(
|
||||
(value: string) =>
|
||||
new Date(value).toLocaleString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const formatTime = useCallback(
|
||||
(value: string) =>
|
||||
new Date(value).toLocaleTimeString("pt-BR", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (history.length === 0) {
|
||||
setActiveSessionId(null);
|
||||
setManualSelection(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!activeSessionId && !manualSelection) {
|
||||
setActiveSessionId(history[history.length - 1].id);
|
||||
return;
|
||||
}
|
||||
|
||||
const exists = history.some((session) => session.id === activeSessionId);
|
||||
if (!exists && !manualSelection) {
|
||||
setActiveSessionId(history[history.length - 1].id);
|
||||
}
|
||||
}, [history, activeSessionId, manualSelection]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!messageListRef.current) return;
|
||||
messageListRef.current.scrollTo({
|
||||
top: messageListRef.current.scrollHeight,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}, [activeMessages.length]);
|
||||
|
||||
useEffect(() => {
|
||||
setTypedGreeting("");
|
||||
setTypedIndex(0);
|
||||
setIsTypingGreeting(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isTypingGreeting) return;
|
||||
if (typedIndex >= greetingWords.length) {
|
||||
setIsTypingGreeting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const timeout = window.setTimeout(() => {
|
||||
setTypedGreeting((previous) =>
|
||||
previous
|
||||
? `${previous} ${greetingWords[typedIndex]}`
|
||||
: greetingWords[typedIndex]
|
||||
);
|
||||
setTypedIndex((previous) => previous + 1);
|
||||
}, 260);
|
||||
|
||||
return () => window.clearTimeout(timeout);
|
||||
}, [greetingWords, isTypingGreeting, typedIndex]);
|
||||
|
||||
const handleDocuments = () => {
|
||||
if (onOpenDocuments) {
|
||||
@ -57,13 +169,129 @@ export function AIAssistantInterface({
|
||||
console.log("[ZoeIA] Abrir chat em tempo real");
|
||||
};
|
||||
|
||||
const buildSessionTopic = useCallback((content: string) => {
|
||||
const normalized = content.trim();
|
||||
if (!normalized) return "Atendimento";
|
||||
return normalized.length > 60 ? `${normalized.slice(0, 57)}…` : normalized;
|
||||
}, []);
|
||||
|
||||
const upsertSession = useCallback(
|
||||
(session: ChatSession) => {
|
||||
if (onAddHistory) {
|
||||
onAddHistory(session);
|
||||
} else {
|
||||
setInternalHistory((previous) => {
|
||||
const index = previous.findIndex((item) => item.id === session.id);
|
||||
if (index >= 0) {
|
||||
const updated = [...previous];
|
||||
updated[index] = session;
|
||||
return updated;
|
||||
}
|
||||
return [...previous, session];
|
||||
});
|
||||
}
|
||||
setActiveSessionId(session.id);
|
||||
setManualSelection(false);
|
||||
},
|
||||
[onAddHistory]
|
||||
);
|
||||
|
||||
const sendMessageToAssistant = useCallback(
|
||||
async (prompt: string, baseSession: ChatSession) => {
|
||||
const sessionId = baseSession.id;
|
||||
|
||||
const appendAssistantMessage = (content: string) => {
|
||||
const createdAt = new Date().toISOString();
|
||||
const latestSession =
|
||||
historyRef.current.find((session) => session.id === sessionId) ?? baseSession;
|
||||
const assistantMessage: ChatMessage = {
|
||||
id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
sender: "assistant",
|
||||
content,
|
||||
createdAt,
|
||||
};
|
||||
|
||||
const updatedSession: ChatSession = {
|
||||
...latestSession,
|
||||
updatedAt: assistantMessage.createdAt,
|
||||
messages: [...latestSession.messages, assistantMessage],
|
||||
};
|
||||
|
||||
upsertSession(updatedSession);
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(API_ENDPOINT, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ message: prompt }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const rawPayload = await response.text();
|
||||
let replyText = "";
|
||||
|
||||
if (rawPayload.trim().length > 0) {
|
||||
try {
|
||||
const parsed = JSON.parse(rawPayload) as { reply?: unknown };
|
||||
replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
|
||||
} catch (parseError) {
|
||||
console.error("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
|
||||
}
|
||||
}
|
||||
|
||||
appendAssistantMessage(replyText || FALLBACK_RESPONSE);
|
||||
} catch (error) {
|
||||
console.error("[ZoeIA] Falha ao obter resposta da API", error);
|
||||
appendAssistantMessage(FALLBACK_RESPONSE);
|
||||
}
|
||||
},
|
||||
[upsertSession]
|
||||
);
|
||||
|
||||
const handleSendMessage = () => {
|
||||
const trimmed = question.trim();
|
||||
if (!trimmed) return;
|
||||
|
||||
handlePersistHistory(trimmed);
|
||||
console.log("[ZoeIA] Mensagem enviada para Zoe", trimmed);
|
||||
const now = new Date();
|
||||
const userMessage: ChatMessage = {
|
||||
id: `msg-user-${now.getTime()}`,
|
||||
sender: "user",
|
||||
content: trimmed,
|
||||
createdAt: now.toISOString(),
|
||||
};
|
||||
|
||||
const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
|
||||
|
||||
const sessionToPersist: ChatSession = existingSession
|
||||
? {
|
||||
...existingSession,
|
||||
updatedAt: userMessage.createdAt,
|
||||
topic:
|
||||
existingSession.messages.length === 0
|
||||
? buildSessionTopic(trimmed)
|
||||
: existingSession.topic,
|
||||
messages: [...existingSession.messages, userMessage],
|
||||
}
|
||||
: {
|
||||
id: `session-${now.getTime()}`,
|
||||
startedAt: now.toISOString(),
|
||||
updatedAt: userMessage.createdAt,
|
||||
topic: buildSessionTopic(trimmed),
|
||||
messages: [userMessage],
|
||||
};
|
||||
|
||||
upsertSession(sessionToPersist);
|
||||
console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
|
||||
setQuestion("");
|
||||
setHistoryPanelOpen(false);
|
||||
|
||||
void sendMessageToAssistant(trimmed, sessionToPersist);
|
||||
};
|
||||
|
||||
const RealtimeTriggerButton = () => (
|
||||
@ -89,91 +317,149 @@ export function AIAssistantInterface({
|
||||
</button>
|
||||
);
|
||||
|
||||
const handlePersistHistory = (text: string) => {
|
||||
const entry: HistoryEntry = {
|
||||
id: `hist-${Date.now()}`,
|
||||
text,
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
if (onAddHistory) {
|
||||
onAddHistory(entry);
|
||||
} else {
|
||||
setInternalHistory((prev) => [...prev, entry]);
|
||||
}
|
||||
setDrawerOpen(true);
|
||||
};
|
||||
|
||||
const handleClearHistory = () => {
|
||||
if (onClearHistory) {
|
||||
onClearHistory();
|
||||
} else {
|
||||
setInternalHistory([]);
|
||||
}
|
||||
setActiveSessionId(null);
|
||||
setManualSelection(false);
|
||||
setQuestion("");
|
||||
setHistoryPanelOpen(false);
|
||||
};
|
||||
|
||||
const HistoryGlyph = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
>
|
||||
<circle cx="16" cy="8" r="3" className="stroke-current" strokeWidth="1.6" />
|
||||
<line x1="5" y1="8" x2="12" y2="8" className="stroke-current" strokeWidth="1.6" strokeLinecap="round" />
|
||||
<line x1="5" y1="16" x2="19" y2="16" className="stroke-current" strokeWidth="1.6" strokeLinecap="round" />
|
||||
<circle cx="9" cy="16" r="1" className="fill-current" />
|
||||
</svg>
|
||||
);
|
||||
const handleSelectSession = useCallback((sessionId: string) => {
|
||||
setManualSelection(true);
|
||||
setActiveSessionId(sessionId);
|
||||
setHistoryPanelOpen(false);
|
||||
}, []);
|
||||
|
||||
const startNewConversation = useCallback(() => {
|
||||
setManualSelection(true);
|
||||
setActiveSessionId(null);
|
||||
setQuestion("");
|
||||
setHistoryPanelOpen(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-12">
|
||||
<header className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="relative rounded-2xl border border-border/60 bg-card text-muted-foreground shadow-sm transition hover:text-primary"
|
||||
>
|
||||
<HistoryGlyph />
|
||||
<span className="sr-only">Abrir histórico de interações</span>
|
||||
{showHistoryBadge && (
|
||||
<span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-primary" />
|
||||
)}
|
||||
</Button>
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-primary via-sky-500 to-emerald-400 text-base font-semibold text-white shadow-lg">
|
||||
Zoe
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-primary">Assistente Clínica Zoe</p>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Olá, eu sou Zoe. Como posso ajudar hoje?</h1>
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: -14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
className="rounded-3xl border border-primary/10 bg-gradient-to-br from-primary/15 via-background to-background/95 p-6 shadow-xl backdrop-blur-sm"
|
||||
>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-3xl bg-gradient-to-br from-primary via-indigo-500 to-sky-500 text-base font-semibold text-white shadow-lg">
|
||||
Zoe
|
||||
</span>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
|
||||
Assistente Clínica Zoe
|
||||
</p>
|
||||
<motion.h1
|
||||
key={typedGreeting}
|
||||
className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl"
|
||||
initial={{ opacity: 0.6 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{gradientGreeting && (
|
||||
<span className="bg-gradient-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
|
||||
{gradientGreeting}
|
||||
{plainGreeting ? " " : ""}
|
||||
</span>
|
||||
)}
|
||||
{plainGreeting && <span className="text-foreground">{plainGreeting}</span>}
|
||||
<span
|
||||
className={`ml-1 inline-block h-6 w-[0.12rem] align-middle ${
|
||||
isTypingGreeting ? "animate-pulse bg-primary" : "bg-transparent"
|
||||
}`}
|
||||
/>
|
||||
</motion.h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-end gap-2 sm:justify-end">
|
||||
{history.length > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary transition hover:bg-primary/10"
|
||||
onClick={() => setHistoryPanelOpen(true)}
|
||||
>
|
||||
Ver históricos
|
||||
</Button>
|
||||
)}
|
||||
{history.length > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground transition hover:text-destructive"
|
||||
onClick={handleClearHistory}
|
||||
>
|
||||
Limpar histórico
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="rounded-full border-primary/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10"
|
||||
onClick={startNewConversation}
|
||||
>
|
||||
Novo atendimento
|
||||
</Button>
|
||||
<SimpleThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
<motion.p
|
||||
className="max-w-2xl text-sm text-muted-foreground"
|
||||
initial={{ opacity: 0, y: -6 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3, duration: 0.4 }}
|
||||
>
|
||||
Organizamos exames, orientações e tarefas assistenciais em um painel único para acelerar decisões clínicas. Utilize a Zoe para revisar resultados, registrar percepções e alinhar próximos passos com a equipe de saúde.
|
||||
</motion.p>
|
||||
</div>
|
||||
<SimpleThemeToggle />
|
||||
</header>
|
||||
</motion.section>
|
||||
|
||||
<div className="flex items-center gap-2 rounded-full border border-border px-4 py-2 text-xs text-muted-foreground shadow-sm">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.15, duration: 0.4 }}
|
||||
className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 text-xs text-primary shadow-sm"
|
||||
>
|
||||
<Lock className="h-4 w-4" />
|
||||
<span>Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<section className="space-y-6 rounded-3xl border border-primary/15 bg-card/60 p-6 shadow-lg backdrop-blur">
|
||||
<div className="rounded-3xl border border-primary/20 bg-primary/5 p-6 text-sm leading-relaxed text-muted-foreground">
|
||||
<motion.section
|
||||
className="space-y-6 rounded-3xl border border-primary/15 bg-card/70 p-6 shadow-lg backdrop-blur"
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.5 }}
|
||||
>
|
||||
<motion.div
|
||||
className="rounded-3xl border border-primary/25 bg-gradient-to-br from-primary/10 via-background/50 to-background p-6 text-sm leading-relaxed text-muted-foreground"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.25, duration: 0.4 }}
|
||||
>
|
||||
<div className="mb-4 flex items-center gap-3 text-primary">
|
||||
<Info className="h-5 w-5" />
|
||||
<span className="font-semibold">Informativo importante</span>
|
||||
<span className="text-base font-semibold">Informativo importante</span>
|
||||
</div>
|
||||
<p>
|
||||
A Zoe é a assistente virtual da Clínica Zoe. Ela reúne informações sobre seus cuidados e orienta os próximos passos.
|
||||
O atendimento é informativo e não substitui a avaliação de um profissional de saúde qualificado.
|
||||
A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado.
|
||||
As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
Em situações de urgência, procure imediatamente o suporte médico presencial ou ligue para os serviços de emergência.
|
||||
<p className="mt-4 font-medium text-foreground">
|
||||
Em situações de urgência, entre em contato com a equipe médica presencial ou acione os serviços de emergência da sua região.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Button
|
||||
@ -200,18 +486,83 @@ export function AIAssistantInterface({
|
||||
Estamos reunindo o histórico da sua jornada. Enquanto isso, você pode anexar exames, enviar dúvidas ou solicitar contato com a equipe Zoe.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</motion.section>
|
||||
|
||||
<div className="flex items-center gap-3 rounded-full border border-border bg-card/70 px-3 py-2 shadow-xl">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full border border-border/40 bg-background/60 text-muted-foreground transition hover:text-primary"
|
||||
onClick={handleDocuments}
|
||||
<motion.section
|
||||
className="flex flex-col gap-5 rounded-3xl border border-primary/10 bg-card/70 p-6 shadow-lg backdrop-blur"
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.25, duration: 0.45 }}
|
||||
>
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{activeSession ? "Atendimento em andamento" : "Inicie uma conversa"}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-foreground sm:text-base">
|
||||
{activeSession?.topic ?? "O primeiro contato orienta nossas recomendações clínicas"}
|
||||
</p>
|
||||
</div>
|
||||
{activeSession && (
|
||||
<span className="mt-1 inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary shadow-inner sm:mt-0">
|
||||
Atualizado às {formatTime(activeSession.updatedAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={messageListRef}
|
||||
className="flex max-h-[45vh] min-h-[220px] flex-col gap-3 overflow-y-auto rounded-2xl border border-border/40 bg-background/70 p-4"
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
{activeMessages.length > 0 ? (
|
||||
activeMessages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm ${
|
||||
message.sender === "user"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "border border-border/60 bg-background text-foreground"
|
||||
}`}
|
||||
>
|
||||
<p className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</p>
|
||||
<span
|
||||
className={`mt-2 block text-[0.68rem] uppercase tracking-[0.18em] ${
|
||||
message.sender === "user"
|
||||
? "text-primary-foreground/75"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{formatTime(message.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-1 flex-col items-center justify-center rounded-2xl border border-dashed border-primary/25 bg-background/80 px-6 py-12 text-center text-sm text-muted-foreground">
|
||||
<p className="text-sm font-medium text-foreground">Envie sua primeira mensagem</p>
|
||||
<p className="mt-2 max-w-md text-sm text-muted-foreground">
|
||||
Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<div className="flex flex-col gap-3 rounded-3xl border border-border bg-card/70 px-4 py-3 shadow-xl sm:flex-row sm:items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full border border-border/40 bg-background/60 text-muted-foreground transition hover:text-primary"
|
||||
onClick={handleDocuments}
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
<Input
|
||||
value={question}
|
||||
onChange={(event) => setQuestion(event.target.value)}
|
||||
@ -222,9 +573,9 @@ export function AIAssistantInterface({
|
||||
}
|
||||
}}
|
||||
placeholder="Pergunte qualquer coisa para a Zoe"
|
||||
className="border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
|
||||
className="w-full flex-1 border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
className="rounded-full bg-primary px-5 text-primary-foreground shadow-md transition hover:bg-primary/90"
|
||||
@ -236,82 +587,99 @@ export function AIAssistantInterface({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{drawerOpen && (
|
||||
<aside className="fixed inset-y-0 left-0 z-[120] w-[min(22rem,80vw)] bg-card shadow-2xl">
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between border-b border-border px-4 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-primary via-sky-500 to-emerald-400 text-sm font-semibold text-white shadow-md">
|
||||
Zoe
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-foreground">Histórico da Zoe</h2>
|
||||
<p className="text-xs text-muted-foreground">{history.length} registro{history.length === 1 ? "" : "s"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{historyPanelOpen && (
|
||||
<aside className="fixed inset-y-0 right-0 z-[160] w-[min(22rem,80vw)] border-l border-border bg-card shadow-2xl">
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between border-b border-border px-4 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-primary via-sky-500 to-emerald-400 text-sm font-semibold text-white shadow-md">
|
||||
Zoe
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-foreground">Históricos de atendimento</h2>
|
||||
<p className="text-xs text-muted-foreground">{history.length} registro{history.length === 1 ? "" : "s"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full"
|
||||
onClick={() => setHistoryPanelOpen(false)}
|
||||
>
|
||||
<span aria-hidden>×</span>
|
||||
<span className="sr-only">Fechar históricos</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="border-b border-border px-4 py-3">
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full justify-start gap-2 rounded-xl bg-primary text-primary-foreground shadow-md transition hover:shadow-lg"
|
||||
onClick={startNewConversation}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Novo atendimento
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4">
|
||||
{history.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhum atendimento registrado ainda. Envie uma mensagem para começar um acompanhamento.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-3 text-sm">
|
||||
{[...history].reverse().map((session) => {
|
||||
const lastMessage = session.messages[session.messages.length - 1];
|
||||
const isActive = session.id === activeSessionId;
|
||||
return (
|
||||
<li key={session.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSelectSession(session.id)}
|
||||
className={`flex w-full flex-col gap-2 rounded-xl border px-3 py-3 text-left shadow-sm transition hover:border-primary hover:shadow-md ${
|
||||
isActive ? "border-primary/60 bg-primary/10" : "border-border/60 bg-background/90"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="font-semibold text-foreground line-clamp-2">{session.topic}</p>
|
||||
<span className="text-xs text-muted-foreground">{formatDateTime(session.updatedAt)}</span>
|
||||
</div>
|
||||
{lastMessage && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-2">
|
||||
{lastMessage.sender === "assistant" ? "Zoe: " : "Você: "}
|
||||
{lastMessage.content}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-[0.68rem] uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>
|
||||
{session.messages.length} mensagem{session.messages.length === 1 ? "" : "s"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{history.length > 0 && (
|
||||
<div className="border-t border-border px-4 py-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setDrawerOpen(false)}
|
||||
className="rounded-full"
|
||||
className="w-full justify-center text-xs font-medium text-muted-foreground transition hover:text-destructive"
|
||||
onClick={handleClearHistory}
|
||||
>
|
||||
<span className="sr-only">Fechar histórico</span>
|
||||
×
|
||||
Limpar todo o histórico
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 border-b border-border px-4 py-3">
|
||||
<Button
|
||||
type="button"
|
||||
className="flex-1 justify-start gap-2 rounded-xl bg-primary text-primary-foreground shadow-md transition hover:shadow-lg"
|
||||
onClick={() => {
|
||||
handleClearHistory();
|
||||
setDrawerOpen(false);
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Novo atendimento
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4">
|
||||
{history.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhuma conversa registrada ainda. Envie uma mensagem para começar um novo acompanhamento com a Zoe.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-3 text-sm">
|
||||
{[...history]
|
||||
.reverse()
|
||||
.map((entry) => (
|
||||
<li
|
||||
key={entry.id}
|
||||
className="flex items-start gap-3 rounded-xl border border-border/60 bg-background/90 p-3 shadow-sm"
|
||||
>
|
||||
<span className="mt-0.5 text-primary">
|
||||
<Clock className="h-4 w-4" />
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-foreground line-clamp-2">{entry.text}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(entry.createdAt).toLocaleString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,21 +5,18 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ArrowLeft, Mic, MicOff, Sparkles } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AIAssistantInterface } from "@/components/ZoeIA/ai-assistant-interface";
|
||||
import {
|
||||
AIAssistantInterface,
|
||||
ChatSession,
|
||||
} from "@/components/ZoeIA/ai-assistant-interface";
|
||||
import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
|
||||
|
||||
interface HistoryEntry {
|
||||
id: string;
|
||||
text: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export function ChatWidget() {
|
||||
const [assistantOpen, setAssistantOpen] = useState(false);
|
||||
const [realtimeOpen, setRealtimeOpen] = useState(false);
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [voiceDetected, setVoiceDetected] = useState(false);
|
||||
const [history, setHistory] = useState<HistoryEntry[]>([]);
|
||||
const [history, setHistory] = useState<ChatSession[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!assistantOpen && !realtimeOpen) return;
|
||||
@ -74,8 +71,16 @@ export function ChatWidget() {
|
||||
openRealtime();
|
||||
};
|
||||
|
||||
const handleAddHistory = (entry: HistoryEntry) => {
|
||||
setHistory((prev) => [...prev, entry]);
|
||||
const handleUpsertHistory = (session: ChatSession) => {
|
||||
setHistory((previous) => {
|
||||
const index = previous.findIndex((item) => item.id === session.id);
|
||||
if (index >= 0) {
|
||||
const updated = [...previous];
|
||||
updated[index] = session;
|
||||
return updated;
|
||||
}
|
||||
return [...previous, session];
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearHistory = () => {
|
||||
@ -105,7 +110,7 @@ export function ChatWidget() {
|
||||
onOpenDocuments={handleOpenDocuments}
|
||||
onOpenChat={handleOpenChat}
|
||||
history={history}
|
||||
onAddHistory={handleAddHistory}
|
||||
onAddHistory={handleUpsertHistory}
|
||||
onClearHistory={handleClearHistory}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user