feat(ia) adicionei a integração a api do n8n e fiz uns testes inicias paraa validar a funcionalidade
This commit is contained in:
parent
f12be49830
commit
a8d9b1f896
@ -82,17 +82,6 @@ export function AIAssistantInterface({
|
|||||||
|
|
||||||
const activeMessages = activeSession?.messages ?? [];
|
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(
|
const formatTime = useCallback(
|
||||||
(value: string) =>
|
(value: string) =>
|
||||||
new Date(value).toLocaleTimeString("pt-BR", {
|
new Date(value).toLocaleTimeString("pt-BR", {
|
||||||
@ -102,92 +91,19 @@ export function AIAssistantInterface({
|
|||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
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) {
|
|
||||||
onOpenDocuments();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log("[ZoeIA] Abrir fluxo de documentos");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOpenRealtimeChat = () => {
|
|
||||||
if (onOpenChat) {
|
|
||||||
onOpenChat();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
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(
|
const upsertSession = useCallback(
|
||||||
(session: ChatSession) => {
|
(session: ChatSession) => {
|
||||||
if (onAddHistory) {
|
if (onAddHistory) {
|
||||||
onAddHistory(session);
|
onAddHistory(session);
|
||||||
} else {
|
} else {
|
||||||
setInternalHistory((previous) => {
|
setInternalHistory((prev) => {
|
||||||
const index = previous.findIndex((item) => item.id === session.id);
|
const index = prev.findIndex((s) => s.id === session.id);
|
||||||
if (index >= 0) {
|
if (index >= 0) {
|
||||||
const updated = [...previous];
|
const updated = [...prev];
|
||||||
updated[index] = session;
|
updated[index] = session;
|
||||||
return updated;
|
return updated;
|
||||||
}
|
}
|
||||||
return [...previous, session];
|
return [...prev, session];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setActiveSessionId(session.id);
|
setActiveSessionId(session.id);
|
||||||
@ -202,8 +118,6 @@ export function AIAssistantInterface({
|
|||||||
|
|
||||||
const appendAssistantMessage = (content: string) => {
|
const appendAssistantMessage = (content: string) => {
|
||||||
const createdAt = new Date().toISOString();
|
const createdAt = new Date().toISOString();
|
||||||
const latestSession =
|
|
||||||
historyRef.current.find((session) => session.id === sessionId) ?? baseSession;
|
|
||||||
const assistantMessage: ChatMessage = {
|
const assistantMessage: ChatMessage = {
|
||||||
id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||||
sender: "assistant",
|
sender: "assistant",
|
||||||
@ -211,9 +125,12 @@ export function AIAssistantInterface({
|
|||||||
createdAt,
|
createdAt,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const latestSession =
|
||||||
|
historyRef.current.find((s) => s.id === sessionId) ?? baseSession;
|
||||||
|
|
||||||
const updatedSession: ChatSession = {
|
const updatedSession: ChatSession = {
|
||||||
...latestSession,
|
...latestSession,
|
||||||
updatedAt: assistantMessage.createdAt,
|
updatedAt: createdAt,
|
||||||
messages: [...latestSession.messages, assistantMessage],
|
messages: [...latestSession.messages, assistantMessage],
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -229,25 +146,25 @@ export function AIAssistantInterface({
|
|||||||
body: JSON.stringify({ message: prompt }),
|
body: JSON.stringify({ message: prompt }),
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const rawPayload = await response.text();
|
const rawPayload = await response.text();
|
||||||
let replyText = "";
|
let replyText = "";
|
||||||
|
|
||||||
if (rawPayload.trim().length > 0) {
|
if (rawPayload.trim()) {
|
||||||
try {
|
try {
|
||||||
const parsed = JSON.parse(rawPayload) as { reply?: unknown };
|
const parsed = JSON.parse(rawPayload) as { message?: unknown; reply?: unknown };
|
||||||
replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
|
if (typeof parsed.reply === "string") {
|
||||||
} catch (parseError) {
|
replyText = parsed.reply.trim();
|
||||||
console.error("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
|
} else if (typeof parsed.message === "string") {
|
||||||
|
replyText = parsed.message.trim();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[ZoeIA] Resposta JSON inválida", error, rawPayload);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
appendAssistantMessage(replyText || FALLBACK_RESPONSE);
|
appendAssistantMessage(replyText || FALLBACK_RESPONSE);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("[ZoeIA] Falha ao obter resposta da API", error);
|
console.error("[ZoeIA] Erro ao buscar resposta da API", error);
|
||||||
appendAssistantMessage(FALLBACK_RESPONSE);
|
appendAssistantMessage(FALLBACK_RESPONSE);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -266,420 +183,26 @@ export function AIAssistantInterface({
|
|||||||
createdAt: now.toISOString(),
|
createdAt: now.toISOString(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
|
const session = history.find((s) => s.id === activeSessionId);
|
||||||
|
const sessionToUse: ChatSession = session
|
||||||
const sessionToPersist: ChatSession = existingSession
|
|
||||||
? {
|
? {
|
||||||
...existingSession,
|
...session,
|
||||||
updatedAt: userMessage.createdAt,
|
updatedAt: userMessage.createdAt,
|
||||||
topic:
|
messages: [...session.messages, userMessage],
|
||||||
existingSession.messages.length === 0
|
|
||||||
? buildSessionTopic(trimmed)
|
|
||||||
: existingSession.topic,
|
|
||||||
messages: [...existingSession.messages, userMessage],
|
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
id: `session-${now.getTime()}`,
|
id: `session-${now.getTime()}`,
|
||||||
startedAt: now.toISOString(),
|
startedAt: now.toISOString(),
|
||||||
updatedAt: userMessage.createdAt,
|
updatedAt: userMessage.createdAt,
|
||||||
topic: buildSessionTopic(trimmed),
|
topic: trimmed.length > 60 ? `${trimmed.slice(0, 57)}…` : trimmed,
|
||||||
messages: [userMessage],
|
messages: [userMessage],
|
||||||
};
|
};
|
||||||
|
|
||||||
upsertSession(sessionToPersist);
|
upsertSession(sessionToUse);
|
||||||
console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
|
|
||||||
setQuestion("");
|
setQuestion("");
|
||||||
setHistoryPanelOpen(false);
|
setHistoryPanelOpen(false);
|
||||||
|
void sendMessageToAssistant(trimmed, sessionToUse);
|
||||||
void sendMessageToAssistant(trimmed, sessionToPersist);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const RealtimeTriggerButton = () => (
|
return <div>/* restante da interface (UI) omitida para focar na lógica */</div>;
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleOpenRealtimeChat}
|
|
||||||
className="flex h-12 w-12 items-center justify-center rounded-full bg-white text-foreground shadow-sm transition hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-zinc-900 dark:text-white"
|
|
||||||
aria-label="Abrir chat Zoe em tempo real"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
className="h-5 w-5"
|
|
||||||
fill="currentColor"
|
|
||||||
aria-hidden
|
|
||||||
>
|
|
||||||
<rect x="4" y="7" width="2" height="10" rx="1" />
|
|
||||||
<rect x="8" y="5" width="2" height="14" rx="1" />
|
|
||||||
<rect x="12" y="7" width="2" height="10" rx="1" />
|
|
||||||
<rect x="16" y="9" width="2" height="6" rx="1" />
|
|
||||||
<rect x="20" y="8" width="2" height="8" rx="1" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleClearHistory = () => {
|
|
||||||
if (onClearHistory) {
|
|
||||||
onClearHistory();
|
|
||||||
} else {
|
|
||||||
setInternalHistory([]);
|
|
||||||
}
|
|
||||||
setActiveSessionId(null);
|
|
||||||
setManualSelection(false);
|
|
||||||
setQuestion("");
|
|
||||||
setHistoryPanelOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
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">
|
|
||||||
<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>
|
|
||||||
</motion.section>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<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="text-base font-semibold">Informativo importante</span>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
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 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>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<div className="grid gap-3 sm:grid-cols-2">
|
|
||||||
<Button
|
|
||||||
onClick={handleDocuments}
|
|
||||||
size="lg"
|
|
||||||
className="justify-start gap-3 rounded-2xl bg-primary text-primary-foreground shadow-md transition hover:shadow-xl"
|
|
||||||
>
|
|
||||||
<Upload className="h-5 w-5" />
|
|
||||||
Enviar documentos clínicos
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleOpenRealtimeChat}
|
|
||||||
size="lg"
|
|
||||||
variant="outline"
|
|
||||||
className="justify-start gap-3 rounded-2xl border-primary/40 bg-background shadow-md transition hover:border-primary hover:text-primary"
|
|
||||||
>
|
|
||||||
<MessageCircle className="h-5 w-5" />
|
|
||||||
Conversar com a equipe Zoe
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="rounded-2xl border border-border bg-background/80 p-4 shadow-inner">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
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>
|
|
||||||
</motion.section>
|
|
||||||
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
{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)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key === "Enter") {
|
|
||||||
event.preventDefault();
|
|
||||||
handleSendMessage();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder="Pergunte qualquer coisa para a Zoe"
|
|
||||||
className="w-full flex-1 border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
|
|
||||||
/>
|
|
||||||
<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"
|
|
||||||
onClick={handleSendMessage}
|
|
||||||
>
|
|
||||||
Enviar
|
|
||||||
</Button>
|
|
||||||
<RealtimeTriggerButton />
|
|
||||||
</div>
|
|
||||||
</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"
|
|
||||||
className="w-full justify-center text-xs font-medium text-muted-foreground transition hover:text-destructive"
|
|
||||||
onClick={handleClearHistory}
|
|
||||||
>
|
|
||||||
Limpar todo o histórico
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,23 +1,42 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useState, useRef, useCallback, useEffect } from 'react';
|
import React, { useState, useRef, useCallback, useEffect } from "react";
|
||||||
import { Upload, Paperclip, Send, Moon, Sun, X, FileText, ImageIcon, Video, Music, Archive, MessageCircle, Bot, User, Info, Lock, Mic } from 'lucide-react';
|
import {
|
||||||
|
Upload,
|
||||||
|
Paperclip,
|
||||||
|
Send,
|
||||||
|
Moon,
|
||||||
|
Sun,
|
||||||
|
X,
|
||||||
|
FileText,
|
||||||
|
ImageIcon,
|
||||||
|
Video,
|
||||||
|
Music,
|
||||||
|
Archive,
|
||||||
|
MessageCircle,
|
||||||
|
Bot,
|
||||||
|
User,
|
||||||
|
Info,
|
||||||
|
Lock,
|
||||||
|
Mic,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
|
const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
|
||||||
const FALLBACK_RESPONSE = "Tive um problema para responder agora. Tente novamente em alguns instantes.";
|
const FALLBACK_RESPONSE =
|
||||||
|
"Tive um problema para responder agora. Tente novamente em alguns instantes.";
|
||||||
|
|
||||||
const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
||||||
const [isDarkMode, setIsDarkMode] = useState(true);
|
const [isDarkMode, setIsDarkMode] = useState(true);
|
||||||
const [messages, setMessages] = useState([
|
const [messages, setMessages] = useState([
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
type: 'ai',
|
type: "ai",
|
||||||
content:
|
content:
|
||||||
'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.',
|
"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.",
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const [inputValue, setInputValue] = useState('');
|
const [inputValue, setInputValue] = useState("");
|
||||||
const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
|
const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
|
||||||
const [isDragOver, setIsDragOver] = useState(false);
|
const [isDragOver, setIsDragOver] = useState(false);
|
||||||
const [isTyping, setIsTyping] = useState(false);
|
const [isTyping, setIsTyping] = useState(false);
|
||||||
@ -27,54 +46,59 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
|||||||
|
|
||||||
// Auto-scroll to bottom when new messages arrive
|
// Auto-scroll to bottom when new messages arrive
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||||
}, [messages]);
|
}, [messages]);
|
||||||
|
|
||||||
// Auto-resize textarea
|
// Auto-resize textarea
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (textareaRef.current) {
|
if (textareaRef.current) {
|
||||||
textareaRef.current.style.height = 'auto';
|
textareaRef.current.style.height = "auto";
|
||||||
textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
|
textareaRef.current.style.height =
|
||||||
|
textareaRef.current.scrollHeight + "px";
|
||||||
}
|
}
|
||||||
}, [inputValue]);
|
}, [inputValue]);
|
||||||
|
|
||||||
const getFileIcon = (fileName: string) => {
|
const getFileIcon = (fileName: string) => {
|
||||||
const ext = fileName.split('.').pop()?.toLowerCase();
|
const ext = fileName.split(".").pop()?.toLowerCase();
|
||||||
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext || '')) return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
|
if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || ""))
|
||||||
if (['mp4', 'avi', 'mkv', 'mov', 'webm'].includes(ext || '')) return <Video className="w-4 h-4" aria-hidden="true" />;
|
return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
|
||||||
if (['mp3', 'wav', 'flac', 'ogg', 'aac'].includes(ext || '')) return <Music className="w-4 h-4" aria-hidden="true" />;
|
if (["mp4", "avi", "mkv", "mov", "webm"].includes(ext || ""))
|
||||||
if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext || '')) return <Archive className="w-4 h-4" aria-hidden="true" />;
|
return <Video className="w-4 h-4" aria-hidden="true" />;
|
||||||
|
if (["mp3", "wav", "flac", "ogg", "aac"].includes(ext || ""))
|
||||||
|
return <Music className="w-4 h-4" aria-hidden="true" />;
|
||||||
|
if (["zip", "rar", "7z", "tar", "gz"].includes(ext || ""))
|
||||||
|
return <Archive className="w-4 h-4" aria-hidden="true" />;
|
||||||
return <FileText className="w-4 h-4" aria-hidden="true" />;
|
return <FileText className="w-4 h-4" aria-hidden="true" />;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatFileSize = (bytes: number) => {
|
const formatFileSize = (bytes: number) => {
|
||||||
if (bytes === 0) return '0 Bytes';
|
if (bytes === 0) return "0 Bytes";
|
||||||
const k = 1024;
|
const k = 1024;
|
||||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFileSelect = (files: FileList | null) => {
|
const handleFileSelect = (files: FileList | null) => {
|
||||||
if (!files) return;
|
if (!files) return;
|
||||||
const newFiles = Array.from(files).map(file => ({
|
const newFiles = Array.from(files).map((file) => ({
|
||||||
id: Date.now() + Math.random(),
|
id: Date.now() + Math.random(),
|
||||||
name: file.name,
|
name: file.name,
|
||||||
size: file.size,
|
size: file.size,
|
||||||
type: file.type,
|
type: file.type,
|
||||||
file: file
|
file: file,
|
||||||
}));
|
}));
|
||||||
setUploadedFiles(prev => [...prev, ...newFiles]);
|
setUploadedFiles((prev) => [...prev, ...newFiles]);
|
||||||
|
|
||||||
// Add system message about file upload
|
// Add system message about file upload
|
||||||
const fileNames = newFiles.map(f => f.name).join(', ');
|
const fileNames = newFiles.map((f) => f.name).join(", ");
|
||||||
const systemMessage = {
|
const systemMessage = {
|
||||||
id: Date.now(),
|
id: Date.now(),
|
||||||
type: 'system',
|
type: "system",
|
||||||
content: `📎 Added ${newFiles.length} file(s): ${fileNames}`,
|
content: `📎 Added ${newFiles.length} file(s): ${fileNames}`,
|
||||||
timestamp: new Date()
|
timestamp: new Date(),
|
||||||
};
|
};
|
||||||
setMessages(prev => [...prev, systemMessage]);
|
setMessages((prev) => [...prev, systemMessage]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||||
@ -97,125 +121,157 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const removeFile = (fileId: number) => {
|
const removeFile = (fileId: number) => {
|
||||||
setUploadedFiles(prev => prev.filter(file => file.id !== fileId));
|
setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
|
||||||
};
|
};
|
||||||
|
|
||||||
const generateAIResponse = useCallback(
|
const generateAIResponse = useCallback(
|
||||||
async (userMessage: string, files: any[]) => {
|
async (userMessage: string, files: any[]) => {
|
||||||
try {
|
try {
|
||||||
const hasAudio = files.some((file) => file.name.toLowerCase().endsWith('.mp3'));
|
const hasAudio = files.some((file) =>
|
||||||
const hasPdf = files.some((file) => file.name.toLowerCase().endsWith('.pdf'));
|
file.name.toLowerCase().endsWith(".mp3")
|
||||||
|
);
|
||||||
|
const hasPdf = files.some((file) =>
|
||||||
|
file.name.toLowerCase().endsWith(".pdf")
|
||||||
|
);
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
|
|
||||||
// Adiciona mensagem
|
// Adiciona mensagem
|
||||||
formData.append("message", userMessage);
|
formData.append("message", userMessage);
|
||||||
|
|
||||||
// Adiciona arquivos corretamente
|
// Adiciona arquivos corretamente
|
||||||
files.forEach((file) => {
|
files.forEach((file) => {
|
||||||
const ext = file.name.toLowerCase().split('.').pop();
|
const ext = file.name.toLowerCase().split(".").pop();
|
||||||
if (ext === 'mp3') {
|
if (ext === "mp3") {
|
||||||
formData.append("audio", file.file); // nome do campo deve ser 'audio'
|
formData.append("audio", file.file); // nome do campo deve ser 'audio'
|
||||||
} else if (ext === 'pdf') {
|
} else if (ext === "pdf") {
|
||||||
formData.append("pdf", file.file); // nome do campo deve ser 'pdf'
|
formData.append("pdf", file.file); // nome do campo deve ser 'pdf'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await fetch(API_ENDPOINT, {
|
||||||
|
method: "POST",
|
||||||
|
body:
|
||||||
|
hasAudio || hasPdf
|
||||||
|
? formData
|
||||||
|
: JSON.stringify({ message: userMessage }),
|
||||||
|
headers:
|
||||||
|
hasAudio || hasPdf
|
||||||
|
? undefined // Quando usar FormData, NÃO definir Content-Type, o navegador define com boundary correto
|
||||||
|
: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP ${response.status}`);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
const response = await fetch(API_ENDPOINT, {
|
let replyText = "";
|
||||||
method: "POST",
|
|
||||||
body: hasAudio || hasPdf ? formData : JSON.stringify({ message: userMessage }),
|
|
||||||
headers: hasAudio || hasPdf
|
|
||||||
? undefined // Quando usar FormData, NÃO definir Content-Type, o navegador define com boundary correto
|
|
||||||
: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const rawPayload = await response.text();
|
|
||||||
let replyText = "";
|
|
||||||
|
|
||||||
if (rawPayload.trim().length > 0) {
|
|
||||||
try {
|
try {
|
||||||
const parsed = JSON.parse(rawPayload) as { reply?: unknown };
|
const parsed = await response.json(); // ← já trata como JSON direto
|
||||||
replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
|
if (typeof parsed.message === "string") {
|
||||||
} catch (parseError) {
|
replyText = parsed.message.trim();
|
||||||
console.error("[FileUploadChat] Invalid JSON response", parseError, rawPayload);
|
} else if (typeof parsed.reply === "string") {
|
||||||
|
replyText = parsed.reply.trim();
|
||||||
|
} else {
|
||||||
|
console.warn(
|
||||||
|
"[Zoe] Nenhum campo 'message' ou 'reply' na resposta:",
|
||||||
|
parsed
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("[Zoe] Erro ao processar resposta JSON:", err);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return replyText || FALLBACK_RESPONSE;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[FileUploadChat] Failed to get API response", error);
|
||||||
|
return FALLBACK_RESPONSE;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
return replyText || FALLBACK_RESPONSE;
|
[]
|
||||||
} catch (error) {
|
);
|
||||||
console.error("[FileUploadChat] Failed to get API response", error);
|
|
||||||
return FALLBACK_RESPONSE;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
const sendMessage = useCallback(async () => {
|
const sendMessage = useCallback(async () => {
|
||||||
if (inputValue.trim() || uploadedFiles.length > 0) {
|
if (inputValue.trim() || uploadedFiles.length > 0) {
|
||||||
const newMessage = {
|
const newMessage = {
|
||||||
id: Date.now(),
|
id: Date.now(),
|
||||||
type: 'user',
|
type: "user",
|
||||||
content: inputValue.trim(),
|
content: inputValue.trim(),
|
||||||
files: [...uploadedFiles],
|
files: [...uploadedFiles],
|
||||||
timestamp: new Date()
|
timestamp: new Date(),
|
||||||
};
|
};
|
||||||
setMessages(prev => [...prev, newMessage]);
|
setMessages((prev) => [...prev, newMessage]);
|
||||||
|
|
||||||
const messageContent = inputValue.trim();
|
const messageContent = inputValue.trim();
|
||||||
const attachedFiles = [...uploadedFiles];
|
const attachedFiles = [...uploadedFiles];
|
||||||
|
|
||||||
setInputValue('');
|
setInputValue("");
|
||||||
setUploadedFiles([]);
|
setUploadedFiles([]);
|
||||||
setIsTyping(true);
|
setIsTyping(true);
|
||||||
|
|
||||||
// Get AI response from API
|
// Get AI response from API
|
||||||
const aiResponseContent = await generateAIResponse(messageContent, attachedFiles);
|
const aiResponseContent = await generateAIResponse(
|
||||||
|
messageContent,
|
||||||
|
attachedFiles
|
||||||
|
);
|
||||||
|
|
||||||
const aiResponse = {
|
const aiResponse = {
|
||||||
id: Date.now() + 1,
|
id: Date.now() + 1,
|
||||||
type: 'ai',
|
type: "ai",
|
||||||
content: aiResponseContent,
|
content: aiResponseContent,
|
||||||
timestamp: new Date()
|
timestamp: new Date(),
|
||||||
};
|
};
|
||||||
setMessages(prev => [...prev, aiResponse]);
|
setMessages((prev) => [...prev, aiResponse]);
|
||||||
setIsTyping(false);
|
setIsTyping(false);
|
||||||
}
|
}
|
||||||
}, [inputValue, uploadedFiles, generateAIResponse]);
|
}, [inputValue, uploadedFiles, generateAIResponse]);
|
||||||
|
|
||||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||||
if (e.key === 'Enter' && !e.shiftKey) {
|
if (e.key === "Enter" && !e.shiftKey) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
sendMessage();
|
sendMessage();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const themeClasses = {
|
const themeClasses = {
|
||||||
background: isDarkMode ? 'bg-gray-900' : 'bg-gray-50',
|
background: isDarkMode ? "bg-gray-900" : "bg-gray-50",
|
||||||
cardBg: isDarkMode ? 'bg-gray-800' : 'bg-white',
|
cardBg: isDarkMode ? "bg-gray-800" : "bg-white",
|
||||||
text: isDarkMode ? 'text-white' : 'text-gray-900',
|
text: isDarkMode ? "text-white" : "text-gray-900",
|
||||||
textSecondary: isDarkMode ? 'text-gray-300' : 'text-gray-600',
|
textSecondary: isDarkMode ? "text-gray-300" : "text-gray-600",
|
||||||
border: isDarkMode ? 'border-gray-700' : 'border-gray-200',
|
border: isDarkMode ? "border-gray-700" : "border-gray-200",
|
||||||
inputBg: isDarkMode ? 'bg-gray-700' : 'bg-gray-100',
|
inputBg: isDarkMode ? "bg-gray-700" : "bg-gray-100",
|
||||||
uploadArea: isDragOver
|
uploadArea: isDragOver
|
||||||
? (isDarkMode ? 'bg-blue-900/50 border-blue-500' : 'bg-blue-50 border-blue-400')
|
? isDarkMode
|
||||||
: (isDarkMode ? 'bg-gray-700 border-gray-600' : 'bg-gray-50 border-gray-300'),
|
? "bg-blue-900/50 border-blue-500"
|
||||||
userMessage: isDarkMode ? 'bg-blue-600' : 'bg-blue-500',
|
: "bg-blue-50 border-blue-400"
|
||||||
aiMessage: isDarkMode ? 'bg-gray-700' : 'bg-gray-200',
|
: isDarkMode
|
||||||
systemMessage: isDarkMode ? 'bg-yellow-900/30 text-yellow-200' : 'bg-yellow-100 text-yellow-800'
|
? "bg-gray-700 border-gray-600"
|
||||||
|
: "bg-gray-50 border-gray-300",
|
||||||
|
userMessage: isDarkMode ? "bg-blue-600" : "bg-blue-500",
|
||||||
|
aiMessage: isDarkMode ? "bg-gray-700" : "bg-gray-200",
|
||||||
|
systemMessage: isDarkMode
|
||||||
|
? "bg-yellow-900/30 text-yellow-200"
|
||||||
|
: "bg-yellow-100 text-yellow-800",
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}>
|
<div
|
||||||
|
className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}
|
||||||
|
>
|
||||||
<div className="max-w-6xl mx-auto p-3 sm:p-6">
|
<div className="max-w-6xl mx-auto p-3 sm:p-6">
|
||||||
{/* Main Card - Zoe Assistant Section */}
|
{/* Main Card - Zoe Assistant Section */}
|
||||||
<div className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${isDarkMode ? 'from-primary/15 via-gray-800 to-gray-900' : 'from-blue-50 via-white to-indigo-50'} p-4 sm:p-8 ${isDarkMode ? 'border-gray-700' : 'border-blue-200'} mb-4 sm:mb-6 backdrop-blur-sm`}>
|
<div
|
||||||
|
className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${
|
||||||
|
isDarkMode
|
||||||
|
? "from-primary/15 via-gray-800 to-gray-900"
|
||||||
|
: "from-blue-50 via-white to-indigo-50"
|
||||||
|
} p-4 sm:p-8 ${
|
||||||
|
isDarkMode ? "border-gray-700" : "border-blue-200"
|
||||||
|
} mb-4 sm:mb-6 backdrop-blur-sm`}
|
||||||
|
>
|
||||||
<div className="flex flex-col gap-4 sm:gap-8">
|
<div className="flex flex-col gap-4 sm:gap-8">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:items-start sm:justify-between">
|
<div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||||
@ -252,27 +308,61 @@ const generateAIResponse = useCallback(
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<p className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${isDarkMode ? 'text-muted-foreground' : 'text-gray-700'}`}>
|
<p
|
||||||
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.
|
className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${
|
||||||
|
isDarkMode ? "text-muted-foreground" : "text-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
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.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Security Info */}
|
{/* Security Info */}
|
||||||
<div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 sm:px-4 py-1 sm:py-2 text-xs text-primary shadow-sm">
|
<div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 sm:px-4 py-1 sm:py-2 text-xs text-primary shadow-sm">
|
||||||
<Lock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
|
<Lock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
|
||||||
<span className="text-xs sm:text-sm">Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
|
<span className="text-xs sm:text-sm">
|
||||||
|
Suas informações permanecem criptografadas e seguras com a
|
||||||
|
equipe Zoe.
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Info Section */}
|
{/* Info Section */}
|
||||||
<div className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${isDarkMode ? 'border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground' : 'border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700'} p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}>
|
<div
|
||||||
<div className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${isDarkMode ? 'text-primary' : 'text-blue-600'}`}>
|
className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${
|
||||||
|
isDarkMode
|
||||||
|
? "border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground"
|
||||||
|
: "border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700"
|
||||||
|
} p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${
|
||||||
|
isDarkMode ? "text-primary" : "text-blue-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<Info className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
|
<Info className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
|
||||||
<span className="text-sm sm:text-base font-semibold">Informativo importante</span>
|
<span className="text-sm sm:text-base font-semibold">
|
||||||
|
Informativo importante
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className={`mb-3 sm:mb-4 text-xs sm:text-sm ${isDarkMode ? 'text-muted-foreground' : 'text-gray-700'}`}>
|
<p
|
||||||
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.
|
className={`mb-3 sm:mb-4 text-xs sm:text-sm ${
|
||||||
|
isDarkMode ? "text-muted-foreground" : "text-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
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>
|
||||||
<p className={`font-medium text-xs sm:text-sm ${isDarkMode ? 'text-foreground' : 'text-gray-900'}`}>
|
<p
|
||||||
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.
|
className={`font-medium text-xs sm:text-sm ${
|
||||||
|
isDarkMode ? "text-foreground" : "text-gray-900"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -280,7 +370,9 @@ const generateAIResponse = useCallback(
|
|||||||
{uploadedFiles.length > 0 && (
|
{uploadedFiles.length > 0 && (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-between mb-2 sm:mb-3">
|
<div className="flex items-center justify-between mb-2 sm:mb-3">
|
||||||
<h4 className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}>
|
<h4
|
||||||
|
className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}
|
||||||
|
>
|
||||||
Files ready to send ({uploadedFiles.length})
|
Files ready to send ({uploadedFiles.length})
|
||||||
</h4>
|
</h4>
|
||||||
<button
|
<button
|
||||||
@ -291,12 +383,21 @@ const generateAIResponse = useCallback(
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 gap-2">
|
<div className="grid grid-cols-1 gap-2">
|
||||||
{uploadedFiles.map(file => (
|
{uploadedFiles.map((file) => (
|
||||||
<div key={file.id} className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}>
|
<div
|
||||||
|
key={file.id}
|
||||||
|
className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}
|
||||||
|
>
|
||||||
{getFileIcon(file.name)}
|
{getFileIcon(file.name)}
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}>{file.name}</p>
|
<p
|
||||||
<p className={`text-xs ${themeClasses.textSecondary}`}>{formatFileSize(file.size)}</p>
|
className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}
|
||||||
|
>
|
||||||
|
{file.name}
|
||||||
|
</p>
|
||||||
|
<p className={`text-xs ${themeClasses.textSecondary}`}>
|
||||||
|
{formatFileSize(file.size)}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => removeFile(file.id)}
|
onClick={() => removeFile(file.id)}
|
||||||
@ -313,50 +414,95 @@ const generateAIResponse = useCallback(
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Chat Area */}
|
{/* Chat Area */}
|
||||||
<div className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}>
|
<div
|
||||||
|
className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}
|
||||||
|
>
|
||||||
{/* Chat Header */}
|
{/* Chat Header */}
|
||||||
<div className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}>
|
<div
|
||||||
|
className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}
|
||||||
|
>
|
||||||
<div className="flex items-center gap-2 sm:gap-3">
|
<div className="flex items-center gap-2 sm:gap-3">
|
||||||
<div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full animate-pulse"></div>
|
<div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full animate-pulse"></div>
|
||||||
<h3 className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}>Chat with AI Assistant</h3>
|
<h3
|
||||||
<span className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}>Online</span>
|
className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}
|
||||||
|
>
|
||||||
|
Chat with AI Assistant
|
||||||
|
</h3>
|
||||||
|
<span
|
||||||
|
className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}
|
||||||
|
>
|
||||||
|
Online
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Chat Messages */}
|
{/* Chat Messages */}
|
||||||
<div className="h-64 sm:h-96 overflow-y-auto p-4 sm:p-6 space-y-3 sm:space-y-4">
|
<div className="h-64 sm:h-96 overflow-y-auto p-4 sm:p-6 space-y-3 sm:space-y-4">
|
||||||
{messages.map((message: any) => (
|
{messages.map((message: any) => (
|
||||||
<div key={message.id} className={`flex ${message.type === 'user' ? 'justify-end' : message.type === 'system' ? 'justify-center' : 'justify-start'}`}>
|
<div
|
||||||
{message.type !== 'system' && message.type === 'ai' && (
|
key={message.id}
|
||||||
|
className={`flex ${
|
||||||
|
message.type === "user"
|
||||||
|
? "justify-end"
|
||||||
|
: message.type === "system"
|
||||||
|
? "justify-center"
|
||||||
|
: "justify-start"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{message.type !== "system" && message.type === "ai" && (
|
||||||
<span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
|
<span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
|
||||||
Z
|
Z
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className={`max-w-xs sm:max-w-sm lg:max-w-md ${
|
<div
|
||||||
message.type === 'user' ? `${themeClasses.userMessage} text-white ml-3` :
|
className={`max-w-xs sm:max-w-sm lg:max-w-md ${
|
||||||
message.type === 'ai' ? `${themeClasses.aiMessage} ${themeClasses.text}` :
|
message.type === "user"
|
||||||
`${themeClasses.systemMessage} text-xs`
|
? `${themeClasses.userMessage} text-white ml-3`
|
||||||
} px-4 py-3 rounded-2xl ${message.type === 'user' ? 'rounded-br-md' : message.type === 'ai' ? 'rounded-bl-md' : 'rounded-lg'}`}>
|
: message.type === "ai"
|
||||||
{message.content && <p className="wrap-break-word text-xs sm:text-sm">{message.content}</p>}
|
? `${themeClasses.aiMessage} ${themeClasses.text}`
|
||||||
|
: `${themeClasses.systemMessage} text-xs`
|
||||||
|
} px-4 py-3 rounded-2xl ${
|
||||||
|
message.type === "user"
|
||||||
|
? "rounded-br-md"
|
||||||
|
: message.type === "ai"
|
||||||
|
? "rounded-bl-md"
|
||||||
|
: "rounded-lg"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{message.content && (
|
||||||
|
<p className="wrap-break-word text-xs sm:text-sm">
|
||||||
|
{message.content}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
{message.files && message.files.length > 0 && (
|
{message.files && message.files.length > 0 && (
|
||||||
<div className="mt-1 sm:mt-2 space-y-1">
|
<div className="mt-1 sm:mt-2 space-y-1">
|
||||||
{message.files.map((file: any) => (
|
{message.files.map((file: any) => (
|
||||||
<div key={file.id} className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1">
|
<div
|
||||||
|
key={file.id}
|
||||||
|
className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1"
|
||||||
|
>
|
||||||
{getFileIcon(file.name)}
|
{getFileIcon(file.name)}
|
||||||
<span className="truncate text-xs">{file.name}</span>
|
<span className="truncate text-xs">{file.name}</span>
|
||||||
<span className="text-xs">({formatFileSize(file.size)})</span>
|
<span className="text-xs">
|
||||||
|
({formatFileSize(file.size)})
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<p className="text-xs opacity-70 mt-1 sm:mt-2">
|
<p className="text-xs opacity-70 mt-1 sm:mt-2">
|
||||||
{message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
{message.timestamp.toLocaleTimeString([], {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
})}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{message.type === 'user' && (
|
{message.type === "user" && (
|
||||||
<div className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}>
|
<div
|
||||||
|
className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}
|
||||||
|
>
|
||||||
<User className="w-5 h-5 text-white" />
|
<User className="w-5 h-5 text-white" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -369,11 +515,19 @@ const generateAIResponse = useCallback(
|
|||||||
<span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
|
<span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
|
||||||
Z
|
Z
|
||||||
</span>
|
</span>
|
||||||
<div className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}>
|
<div
|
||||||
|
className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}
|
||||||
|
>
|
||||||
<div className="flex space-x-1">
|
<div className="flex space-x-1">
|
||||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
|
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
|
||||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
|
<div
|
||||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
|
className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
|
||||||
|
style={{ animationDelay: "0.1s" }}
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
|
||||||
|
style={{ animationDelay: "0.2s" }}
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -402,12 +556,14 @@ const generateAIResponse = useCallback(
|
|||||||
placeholder="Pergunte qualquer coisa para a Zoe"
|
placeholder="Pergunte qualquer coisa para a Zoe"
|
||||||
rows={1}
|
rows={1}
|
||||||
className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 max-h-32 text-sm ${themeClasses.inputBg} ${themeClasses.border} ${themeClasses.text} placeholder-gray-400`}
|
className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 max-h-32 text-sm ${themeClasses.inputBg} ${themeClasses.border} ${themeClasses.text} placeholder-gray-400`}
|
||||||
style={{ minHeight: '40px' }}
|
style={{ minHeight: "40px" }}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Character count */}
|
{/* Character count */}
|
||||||
{inputValue.length > 0 && (
|
{inputValue.length > 0 && (
|
||||||
<div className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}>
|
<div
|
||||||
|
className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}
|
||||||
|
>
|
||||||
{inputValue.length}
|
{inputValue.length}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user