Chat interno 1-a-1 entre usuarios de la plataforma (addon skeen_chat + pagina Chat con badge de no leidos)
This commit is contained in:
273
frontend/src/pages/Chat.tsx
Normal file
273
frontend/src/pages/Chat.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import type { FC, FormEvent, KeyboardEvent } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Send, Search, ArrowLeft } from 'lucide-react';
|
||||
import Layout from '../components/Layout';
|
||||
import { Card, Button, EmptyState, toast } from '../components/ui';
|
||||
import { ROLE_LABELS } from '../lib/auth';import { odooApi, type ChatUser, type ChatMessage } from '../services/odoo';
|
||||
|
||||
const POLL_MS = 5000;
|
||||
|
||||
// Las fechas llegan en UTC ("YYYY-MM-DD HH:MM:SS"); se muestran en hora local
|
||||
const fmtTime = (d: string | null): string => {
|
||||
if (!d) return '';
|
||||
const dt = new Date(d.replace(' ', 'T') + 'Z');
|
||||
return dt.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
|
||||
const fmtDay = (d: string | null): string => {
|
||||
if (!d) return '';
|
||||
const dt = new Date(d.replace(' ', 'T') + 'Z');
|
||||
const today = new Date();
|
||||
const sameDay = dt.toDateString() === today.toDateString();
|
||||
return sameDay
|
||||
? fmtTime(d)
|
||||
: dt.toLocaleDateString('es-MX', { day: 'numeric', month: 'short' });
|
||||
};
|
||||
|
||||
const initials = (name: string) =>
|
||||
(name || '?').split(' ').filter(Boolean).slice(0, 2).map((w) => w[0]).join('').toUpperCase();
|
||||
|
||||
const Chat: FC = () => {
|
||||
const [users, setUsers] = useState<ChatUser[]>([]);
|
||||
const [loadingUsers, setLoadingUsers] = useState(true);
|
||||
const [activeId, setActiveId] = useState<number | null>(null);
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [loadingThread, setLoadingThread] = useState(false);
|
||||
const [draft, setDraft] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const lastIdRef = useRef(0);
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const activeUser = users.find((u) => u.id === activeId) || null;
|
||||
|
||||
const fetchUsers = useCallback(async () => {
|
||||
try {
|
||||
const res = await odooApi.getChatUsers();
|
||||
if (res.status === 'success') setUsers(res.users);
|
||||
} catch {
|
||||
// silencioso en polling
|
||||
} finally {
|
||||
setLoadingUsers(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchThread = useCallback(async (otherId: number, incremental: boolean) => {
|
||||
try {
|
||||
const res = await odooApi.getChatMessages(otherId, incremental ? lastIdRef.current : undefined);
|
||||
if (res.status !== 'success') return;
|
||||
if (incremental) {
|
||||
if (res.messages.length === 0) return;
|
||||
setMessages((prev) => {
|
||||
const known = new Set(prev.map((m) => m.id));
|
||||
return [...prev, ...res.messages.filter((m) => !known.has(m.id))];
|
||||
});
|
||||
} else {
|
||||
setMessages(res.messages);
|
||||
}
|
||||
lastIdRef.current = Math.max(...res.messages.map((m) => m.id), lastIdRef.current);
|
||||
setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50);
|
||||
} catch {
|
||||
// silencioso en polling
|
||||
}
|
||||
}, []);
|
||||
|
||||
const openConversation = useCallback(async (id: number) => {
|
||||
setActiveId(id);
|
||||
setMessages([]);
|
||||
lastIdRef.current = 0;
|
||||
setLoadingThread(true);
|
||||
await fetchThread(id, false);
|
||||
setLoadingThread(false);
|
||||
// El servidor ya marcó leídos: refrescar conteos de la lista
|
||||
fetchUsers();
|
||||
}, [fetchThread, fetchUsers]);
|
||||
|
||||
// Carga inicial + polling de lista y hilo abierto
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
const id = setInterval(() => {
|
||||
fetchUsers();
|
||||
if (activeId) fetchThread(activeId, true);
|
||||
}, POLL_MS);
|
||||
return () => clearInterval(id);
|
||||
}, [fetchUsers, fetchThread, activeId]);
|
||||
|
||||
const send = async (e?: FormEvent) => {
|
||||
e?.preventDefault();
|
||||
const body = draft.trim();
|
||||
if (!body || !activeId || sending) return;
|
||||
try {
|
||||
setSending(true);
|
||||
const res = await odooApi.sendChatMessage(activeId, body);
|
||||
if (res.status === 'success') {
|
||||
setMessages((prev) => [...prev, res.message]);
|
||||
lastIdRef.current = Math.max(lastIdRef.current, res.message.id);
|
||||
setDraft('');
|
||||
setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50);
|
||||
fetchUsers();
|
||||
}
|
||||
} catch (err) {
|
||||
const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
|
||||
toast.error(msg || 'No se pudo enviar el mensaje');
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onDraftKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
send();
|
||||
}
|
||||
};
|
||||
|
||||
const filteredUsers = users.filter((u) =>
|
||||
!search || u.name.toLowerCase().includes(search.toLowerCase()));
|
||||
|
||||
return (
|
||||
<Layout title="Chat" subtitle="Mensajería interna del equipo">
|
||||
<Card>
|
||||
<Card.Body noPadding>
|
||||
<div className="flex h-[calc(100vh-14rem)] min-h-[420px]">
|
||||
{/* Columna izquierda: conversaciones */}
|
||||
<div className={`w-full md:w-80 md:shrink-0 border-r border-theme-border flex flex-col ${activeId ? 'hidden md:flex' : 'flex'}`}>
|
||||
<div className="p-3 border-b border-theme-border">
|
||||
<div className="relative">
|
||||
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-theme-muted" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar usuario..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full rounded-xl border border-theme-border-strong bg-theme-surface pl-9 pr-3 py-2 text-sm text-theme-heading focus:outline-none focus:ring-2 focus:ring-theme-accent/30 focus:border-theme-accent transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{loadingUsers ? (
|
||||
<p className="p-4 text-sm text-theme-muted">Cargando...</p>
|
||||
) : filteredUsers.length === 0 ? (
|
||||
<p className="p-4 text-sm text-theme-muted">No hay usuarios para mostrar.</p>
|
||||
) : (
|
||||
<ul>
|
||||
{filteredUsers.map((u) => (
|
||||
<li key={u.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openConversation(u.id)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-3 text-left transition-colors hover:bg-theme-accent-bg ${activeId === u.id ? 'bg-theme-accent-bg' : ''}`}
|
||||
>
|
||||
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-lilac text-xs font-bold text-theme-heading">
|
||||
{initials(u.name)}
|
||||
</span>
|
||||
<span className="flex-1 min-w-0">
|
||||
<span className="flex items-center justify-between gap-2">
|
||||
<span className="truncate text-sm font-medium text-theme-heading">{u.name}</span>
|
||||
{u.last_date && (
|
||||
<span className="shrink-0 text-[10px] text-theme-muted">{fmtDay(u.last_date)}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="flex items-center justify-between gap-2">
|
||||
<span className="truncate text-xs text-theme-muted">
|
||||
{u.last_message
|
||||
? `${u.last_mine ? 'Tú: ' : ''}${u.last_message}`
|
||||
: ROLE_LABELS[u.role] || u.role}
|
||||
</span>
|
||||
{u.unread > 0 && (
|
||||
<span className="shrink-0 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-theme-accent text-theme-inverse text-[10px] font-bold">
|
||||
{u.unread}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna derecha: hilo */}
|
||||
<div className={`flex-1 flex-col min-w-0 ${activeId ? 'flex' : 'hidden md:flex'}`}>
|
||||
{!activeUser ? (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<EmptyState
|
||||
title="Selecciona una conversación"
|
||||
subtitle="Elige un usuario de la lista para iniciar o continuar un chat."
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveId(null)}
|
||||
className="md:hidden p-1.5 rounded-lg text-theme-muted hover:bg-theme-accent-bg"
|
||||
aria-label="Volver a la lista"
|
||||
>
|
||||
<ArrowLeft size={18} />
|
||||
</button>
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-lilac text-xs font-bold text-theme-heading">
|
||||
{initials(activeUser.name)}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-semibold text-theme-heading">{activeUser.name}</p>
|
||||
<p className="text-xs text-theme-muted">{ROLE_LABELS[activeUser.role] || activeUser.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4 space-y-2 bg-theme-bg">
|
||||
{loadingThread ? (
|
||||
<p className="text-sm text-theme-muted text-center py-6">Cargando mensajes...</p>
|
||||
) : messages.length === 0 ? (
|
||||
<p className="text-sm text-theme-muted text-center py-6">
|
||||
Aún no hay mensajes. Escribe el primero.
|
||||
</p>
|
||||
) : (
|
||||
messages.map((m) => (
|
||||
<div key={m.id} className={`flex ${m.mine ? 'justify-end' : 'justify-start'}`}>
|
||||
<div
|
||||
className={`max-w-[75%] rounded-2xl px-3.5 py-2 text-sm shadow-card ${
|
||||
m.mine
|
||||
? 'bg-theme-accent text-theme-inverse rounded-br-md'
|
||||
: 'bg-theme-surface text-theme-heading border border-theme-border rounded-bl-md'
|
||||
}`}
|
||||
>
|
||||
<p className="whitespace-pre-wrap break-words">{m.body}</p>
|
||||
<p className={`mt-1 text-[10px] text-right ${m.mine ? 'text-theme-inverse/70' : 'text-theme-muted'}`}>
|
||||
{fmtTime(m.date)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
<form onSubmit={send} className="flex items-end gap-2 p-3 border-t border-theme-border">
|
||||
<textarea
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={onDraftKeyDown}
|
||||
placeholder={`Mensaje para ${activeUser.name}... (Enter envía)`}
|
||||
rows={1}
|
||||
maxLength={2000}
|
||||
className="flex-1 resize-none rounded-xl border border-theme-border-strong bg-theme-surface px-3 py-2.5 text-sm text-theme-heading focus:outline-none focus:ring-2 focus:ring-theme-accent/30 focus:border-theme-accent transition"
|
||||
/>
|
||||
<Button type="submit" loading={sending} disabled={!draft.trim()} aria-label="Enviar mensaje">
|
||||
<Send size={16} />
|
||||
</Button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chat;
|
||||
Reference in New Issue
Block a user