-
+ ) : (
+ chats.map((chat) => (
+
handleChatClick(chat)}
+ >
+
+
+
+
+
+ {chat.name}
+
+
+ {formatTime(chat.timestamp)}
+
+
- {chat.name}
-
-
- {formatTime(chat.timestamp)}
+ {chat.lastMessage}
+ {chat.unread && (
+
+
+ )}
-
- {chat.lastMessage}
-
- {chat.unread && (
-
-
- )}
-
- ))}
+
+ ))
+ )}
diff --git a/app/components/chat/chatOverlay.tsx b/app/components/chat/chatOverlay.tsx
index b58e63f..e98b1d3 100644
--- a/app/components/chat/chatOverlay.tsx
+++ b/app/components/chat/chatOverlay.tsx
@@ -8,10 +8,18 @@ import {
Modal,
ModalBody,
ModalContent,
+ ModalHeader,
} from '@heroui/react';
-import { Flag, MoreVertical, X } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { type ChatMessage, chatsService } from '~/lib/services/chats.service';
+import { Flag, MoreVertical, Trash2, Users, X } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useAuth } from '~/contexts/auth-context';
+import { useDeleteChat } from '~/lib/hooks/useChats';
+import { useWebSocket } from '~/lib/hooks/useWebSocket';
+import {
+ type ChatMember,
+ type ChatMessage,
+ chatsService,
+} from '~/lib/services/chats.service';
import MessageInput from './messageInput';
import MessageList from './messageList';
import ReportChatModal from './reportContent/reportChatModal';
@@ -23,6 +31,9 @@ interface Message {
name?: string;
sender: 'student' | 'tutor';
timestamp: Date;
+ userAvatar?: string;
+ userName?: string;
+ userId?: string;
}
interface ChatOverlayProps {
@@ -41,15 +52,83 @@ export default function ChatOverlay({
tutor,
onClose,
}: ChatOverlayProps) {
+ const { user } = useAuth();
const [messages, setMessages] = useState
([]);
const [isReportModalOpen, setIsReportModalOpen] = useState(false);
- const [_isLoading, setIsLoading] = useState(false);
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+ const [isMembersModalOpen, setIsMembersModalOpen] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [typingUsers, setTypingUsers] = useState([]);
+ const [members, setMembers] = useState([]);
+
+ const deleteChatMutation = useDeleteChat();
+
+ const {
+ isConnected,
+ onNewMessage,
+ onUserTyping,
+ onUserStoppedTyping,
+ onUserJoined,
+ onUserLeft,
+ sendMessage: sendWebSocketMessage,
+ sendTyping,
+ sendStopTyping,
+ } = useWebSocket(groupId);
+
+ const loadMessages = useCallback(async () => {
+ if (!groupId) return;
+ setIsLoading(true);
+ try {
+ const data = await chatsService.getGroupMessages(groupId);
+ const convertedMessages = data.map((msg: ChatMessage) => {
+ const isCurrentUser = msg.usuarioId === user?.id;
+ const sender: 'student' | 'tutor' = isCurrentUser ? 'student' : 'tutor';
+ return {
+ id: msg.id,
+ type: 'text' as const,
+ content: msg.contenido,
+ sender,
+ timestamp: new Date(msg.fechaCreacion),
+ userAvatar:
+ msg.usuario?.avatar_url ||
+ (isCurrentUser ? user?.avatarUrl : undefined),
+ userName: msg.usuario
+ ? `${msg.usuario.nombre} ${msg.usuario.apellido}`
+ : isCurrentUser
+ ? user?.name
+ : 'Usuario',
+ userId: msg.usuarioId,
+ };
+ });
+ setMessages(convertedMessages);
+ } catch (error) {
+ console.error('Error loading messages:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ }, [groupId, user]);
+
+ const loadMembers = useCallback(async () => {
+ if (!groupId) return;
+ try {
+ const groupData = await chatsService.getGroupById(groupId);
+ if (groupData.miembros) {
+ setMembers(groupData.miembros);
+ }
+ } catch (error) {
+ console.error('Error loading members:', error);
+ }
+ }, [groupId]);
useEffect(() => {
if (groupId) {
+ // Marcar como loading y cargar mensajes
+ setIsLoading(true);
loadMessages();
+ loadMembers();
} else if (tutor) {
// Mensaje de bienvenida automático del tutor si no hay groupId
+ setIsLoading(false);
setMessages([
{
id: 'welcome',
@@ -60,27 +139,104 @@ export default function ChatOverlay({
},
]);
}
- }, [tutor, groupId]);
+ }, [tutor, groupId, loadMessages, loadMembers]);
- const loadMessages = async () => {
- if (!groupId) return;
- setIsLoading(true);
- try {
- const data = await chatsService.getGroupMessages(groupId);
- const convertedMessages = data.map((msg: ChatMessage) => ({
- id: msg.id,
- type: 'text' as const,
- content: msg.contenido,
- sender: 'student' as const,
- timestamp: new Date(msg.fechaCreacion),
- }));
- setMessages(convertedMessages);
- } catch (error) {
- console.error('Error loading messages:', error);
- } finally {
- setIsLoading(false);
- }
- };
+ useEffect(() => {
+ if (!groupId || !isConnected) return;
+
+ const unsubscribeNewMessage = onNewMessage((message) => {
+ console.log('[ChatOverlay] New message received via WebSocket:', message);
+ const isCurrentUser = message.usuario.id === user?.id;
+ const sender: 'student' | 'tutor' = isCurrentUser ? 'student' : 'tutor';
+
+ const newMessage: Message = {
+ id: message.id,
+ type: 'text',
+ content: message.contenido,
+ sender,
+ timestamp: new Date(message.fechaCreacion),
+ userAvatar: message.usuario.avatar_url,
+ userName: `${message.usuario.nombre} ${message.usuario.apellido}`,
+ userId: message.usuario.id,
+ };
+
+ setMessages((prev) => {
+ // Evitar duplicados: buscar si ya existe el mensaje o un temporal con el mismo contenido
+ const existingIndex = prev.findIndex(
+ (m) =>
+ m.id === message.id ||
+ (m.id.startsWith('temp-') &&
+ m.content === message.contenido &&
+ m.userId === message.usuario.id),
+ );
+
+ if (existingIndex !== -1) {
+ // Si es nuestro mensaje temporal, solo actualizar el ID pero mantener los mismos datos
+ // para evitar re-render del avatar
+ if (isCurrentUser) {
+ const updated = [...prev];
+ updated[existingIndex] = {
+ ...prev[existingIndex],
+ id: message.id,
+ timestamp: new Date(message.fechaCreacion),
+ };
+ return updated;
+ }
+ // Si es mensaje de otro usuario, reemplazarlo completamente
+ const updated = [...prev];
+ updated[existingIndex] = newMessage;
+ return updated;
+ }
+
+ // Si no existe y no es nuestro mensaje (ya lo agregamos optimistamente), agregarlo
+ if (!isCurrentUser) {
+ return [...prev, newMessage];
+ }
+
+ // Si es nuestro mensaje pero no encontramos el temporal, agregarlo de todas formas
+ return [...prev, newMessage];
+ });
+ });
+
+ const unsubscribeUserTyping = onUserTyping((data) => {
+ console.log('[ChatOverlay] User typing:', data.email);
+ if (data.userId !== user?.id) {
+ setTypingUsers((prev) =>
+ prev.includes(data.userId) ? prev : [...prev, data.userId],
+ );
+ }
+ });
+
+ const unsubscribeUserStoppedTyping = onUserStoppedTyping((data) => {
+ console.log('[ChatOverlay] User stopped typing:', data.userId);
+ setTypingUsers((prev) => prev.filter((id) => id !== data.userId));
+ });
+
+ const unsubscribeUserJoined = onUserJoined((data) => {
+ console.log('[ChatOverlay] User joined:', data.email);
+ });
+
+ const unsubscribeUserLeft = onUserLeft((data) => {
+ console.log('[ChatOverlay] User left:', data.email);
+ });
+
+ return () => {
+ unsubscribeNewMessage();
+ unsubscribeUserTyping();
+ unsubscribeUserStoppedTyping();
+ unsubscribeUserJoined();
+ unsubscribeUserLeft();
+ };
+ }, [
+ groupId,
+ isConnected,
+ onNewMessage,
+ onUserTyping,
+ onUserStoppedTyping,
+ onUserJoined,
+ onUserLeft,
+ user?.id,
+ ]);
async function sendText(text: string) {
if (!groupId) {
@@ -107,19 +263,57 @@ export default function ChatOverlay({
return;
}
- // Enviar al backend
+ // Crear mensaje temporal para mostrar inmediatamente (optimistic update)
+ const tempId = `temp-${Date.now()}`;
+ const optimisticMessage: Message = {
+ id: tempId,
+ type: 'text',
+ content: text,
+ sender: 'student',
+ timestamp: new Date(),
+ userAvatar: user?.avatarUrl,
+ userName: user?.name || 'Tú',
+ userId: user?.id,
+ };
+
+ // Agregar mensaje inmediatamente a la UI
+ setMessages((prev) => [...prev, optimisticMessage]);
+
try {
- const newMsg = await chatsService.sendMessage(groupId, text);
- const message: Message = {
- id: newMsg.id,
- type: 'text',
- content: newMsg.contenido,
- sender: 'student',
- timestamp: new Date(newMsg.fechaCreacion),
- };
- setMessages((prev) => [...prev, message]);
+ if (isConnected) {
+ console.log('[ChatOverlay] Sending message via WebSocket');
+ await sendWebSocketMessage(text);
+ // El evento 'newMessage' del WebSocket actualizará el mensaje automáticamente
+ } else {
+ console.log(
+ '[ChatOverlay] Sending message via HTTP (WebSocket not connected)',
+ );
+ const newMsg = await chatsService.sendMessage(groupId, text);
+
+ // Reemplazar mensaje temporal con el del servidor
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === tempId
+ ? {
+ id: newMsg.id,
+ type: 'text',
+ content: newMsg.contenido,
+ sender: 'student',
+ timestamp: new Date(newMsg.fechaCreacion),
+ userAvatar: newMsg.usuario?.avatar_url || user?.avatarUrl,
+ userName: newMsg.usuario
+ ? `${newMsg.usuario.nombre} ${newMsg.usuario.apellido}`
+ : user?.name || 'Usuario',
+ userId: newMsg.usuarioId,
+ }
+ : msg,
+ ),
+ );
+ }
} catch (error) {
- console.error('Error sending message:', error);
+ console.error('[ChatOverlay] Error sending message:', error);
+ // Remover mensaje temporal si hay error
+ setMessages((prev) => prev.filter((msg) => msg.id !== tempId));
}
}
@@ -152,6 +346,29 @@ export default function ChatOverlay({
alert('Reporte enviado exitosamente. Nuestro equipo lo revisará pronto.');
}
+ function handleDeleteChat() {
+ setIsDeleteModalOpen(true);
+ }
+
+ async function confirmDeleteChat() {
+ if (!groupId) {
+ console.warn('No hay groupId para eliminar');
+ setIsDeleteModalOpen(false);
+ onClose();
+ return;
+ }
+
+ try {
+ await deleteChatMutation.mutateAsync(groupId);
+ console.log('Chat eliminado exitosamente:', groupId);
+ setIsDeleteModalOpen(false);
+ onClose();
+ } catch (error) {
+ console.error('Error al eliminar el chat:', error);
+ alert('Error al eliminar el chat. Por favor, intenta de nuevo.');
+ }
+ }
+
if (!tutor) return null;
return (
@@ -161,18 +378,18 @@ export default function ChatOverlay({
onClose={onClose}
size="lg"
scrollBehavior="inside"
- isDismissable={false}
hideCloseButton={true}
classNames={{
- backdrop: 'bg-transparent',
- wrapper: '!justify-end !items-stretch',
- base: 'rounded-3xl',
- body: 'rounded-3xl',
+ backdrop: 'bg-transparent pointer-events-none',
+ wrapper:
+ '!justify-end !items-end !p-0 !m-0 pointer-events-none md:!pr-0 md:!pb-0',
+ base: 'rounded-t-3xl md:rounded-t-3xl !mb-0 !m-0 max-h-[100vh] md:max-h-[90vh] w-full md:w-[450px] lg:w-[480px] shadow-2xl pointer-events-auto fixed bottom-0 right-0 md:right-20',
+ body: 'rounded-t-3xl',
}}
motionProps={{
variants: {
enter: {
- x: 0,
+ y: 0,
opacity: 1,
transition: {
duration: 0.3,
@@ -180,10 +397,10 @@ export default function ChatOverlay({
},
},
exit: {
- x: 50,
+ y: 100,
opacity: 0,
transition: {
- duration: 0.2,
+ duration: 0.25,
ease: 'easeIn',
},
},
@@ -191,19 +408,36 @@ export default function ChatOverlay({
}}
>
-
+
{/* Header del chat */}
-
-
-
-
-
{tutor.name}
-
{tutor.title}
+
+
+
+
+ {isConnected && (
+
+ )}
+
+
+
+ {tutor.name}
+
+
+ {isConnected ? 'En línea' : tutor.title}
+
{/* Botones alineados */}
-
+
-
+
-
{/* Área de mensajes */}
-
-
+
+
{/* Input de mensajes */}
-
+
@@ -257,6 +518,121 @@ export default function ChatOverlay({
tutorName={tutor.name}
onSubmitReport={handleReport}
/>
+
+ {/* Modal de confirmación de eliminación */}
+
setIsDeleteModalOpen(false)}
+ size="sm"
+ >
+
+
+
+
+
+
+
+ ¿Eliminar chat?
+
+
+ ¿Estás seguro de que quieres eliminar este chat con{' '}
+ {tutor?.name} ? Esta
+ acción no se puede deshacer.
+
+
+
+ setIsDeleteModalOpen(false)}
+ className="flex-1"
+ isDisabled={deleteChatMutation.isPending}
+ size="sm"
+ >
+ Cancelar
+
+
+ Eliminar
+
+
+
+
+
+
+ {/* Modal de miembros */}
+
setIsMembersModalOpen(false)}
+ size="md"
+ scrollBehavior="inside"
+ placement="top-center"
+ classNames={{
+ backdrop: 'bg-transparent pointer-events-none',
+ wrapper:
+ 'pointer-events-none !items-start !justify-end md:pr-24 pr-0 pt-20',
+ base: 'pointer-events-auto max-h-[80vh] w-full md:w-[380px]',
+ }}
+ >
+
+
+
+
+ Miembros del grupo
+
+
+
+
+
+ {members.length === 0 ? (
+
+ No hay miembros para mostrar
+
+ ) : (
+ members.map((member) => (
+
+
+
+
+ {member.usuario
+ ? `${member.usuario.nombre} ${member.usuario.apellido}`
+ : 'Usuario'}
+
+
+ {member.usuario?.email || 'Sin email'}
+
+
+
+ ))
+ )}
+
+
+
);
}
diff --git a/app/components/chat/messageInput.tsx b/app/components/chat/messageInput.tsx
index 1e6bb85..b9ee6b2 100644
--- a/app/components/chat/messageInput.tsx
+++ b/app/components/chat/messageInput.tsx
@@ -1,22 +1,55 @@
import { Button } from '@heroui/react';
import { Paperclip, Send } from 'lucide-react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
interface MessageInputProps {
onSendText: (text: string) => void;
onSendFile: (file: File) => void;
+ onTyping?: () => void;
+ onStopTyping?: () => void;
}
export default function MessageInput({
onSendText,
onSendFile,
+ onTyping,
+ onStopTyping,
}: MessageInputProps) {
const [text, setText] = useState('');
+ const typingTimeoutRef = useRef
(null);
function handleSend() {
if (!text.trim()) return;
onSendText(text);
setText('');
+ if (onStopTyping) {
+ onStopTyping();
+ }
+ if (typingTimeoutRef.current) {
+ clearTimeout(typingTimeoutRef.current);
+ typingTimeoutRef.current = null;
+ }
+ }
+
+ function handleTextChange(e: React.ChangeEvent) {
+ const newText = e.target.value;
+ setText(newText);
+
+ if (newText.length > 0 && onTyping) {
+ onTyping();
+
+ if (typingTimeoutRef.current) {
+ clearTimeout(typingTimeoutRef.current);
+ }
+
+ typingTimeoutRef.current = setTimeout(() => {
+ if (onStopTyping) {
+ onStopTyping();
+ }
+ }, 1000);
+ } else if (newText.length === 0 && onStopTyping) {
+ onStopTyping();
+ }
}
function handleKey(e: React.KeyboardEvent) {
@@ -36,8 +69,8 @@ export default function MessageInput({
}
return (
-
-
+
diff --git a/app/components/chat/messageItem.tsx b/app/components/chat/messageItem.tsx
index 6154e24..bd906de 100644
--- a/app/components/chat/messageItem.tsx
+++ b/app/components/chat/messageItem.tsx
@@ -1,6 +1,15 @@
import { Avatar } from '@heroui/react';
import { Paperclip } from 'lucide-react';
+function fixGoogleAvatarUrl(url: string | undefined): string | undefined {
+ if (!url) return undefined;
+ if (url.includes('googleusercontent.com')) {
+ const baseUrl = url.split('=')[0];
+ return `${baseUrl}=s96-c`;
+ }
+ return url;
+}
+
interface MessageItemProps {
message: {
id: string;
@@ -9,66 +18,106 @@ interface MessageItemProps {
name?: string;
sender: 'student' | 'tutor';
timestamp: Date;
+ userAvatar?: string;
+ userName?: string;
+ userId?: string;
};
tutorName: string;
}
export default function MessageItem({ message, tutorName }: MessageItemProps) {
const isStudent = message.sender === 'student';
+ // Solo animar mensajes de otros usuarios (tutor), no animar mensajes propios ni sus reemplazos
+ const shouldAnimate = !isStudent;
+
+ const getAvatarProps = () => {
+ if (message.userAvatar) {
+ const fixedUrl = fixGoogleAvatarUrl(message.userAvatar);
+ return {
+ src: fixedUrl,
+ name: message.userName || tutorName,
+ showFallback: true,
+ imgProps: {
+ referrerPolicy: 'no-referrer' as const,
+ },
+ };
+ }
+ return {
+ name: (message.userName || tutorName)
+ .split(' ')
+ .map((n) => n[0])
+ .join(''),
+ showFallback: true,
+ };
+ };
return (
{!isStudent && (
n[0])
- .join('')}
+ {...getAvatarProps()}
color="danger"
- size="sm"
- className="flex-shrink-0"
+ size="md"
+ className="flex-shrink-0 w-8 h-8 md:w-10 md:h-10"
/>
)}
- {message.type === 'text' && (
-
{message.content}
- )}
-
- {message.type === 'file' && (
-
-
- )}
-
-
- {message.timestamp.toLocaleTimeString('es-ES', {
- hour: '2-digit',
- minute: '2-digit',
- })}
-
+ {/* Header con nombre del usuario */}
+
+
+ {message.userName || tutorName}
+
+
+
+ {/* Contenido del mensaje */}
+
+ {message.type === 'text' && (
+
+ {message.content}
+
+ )}
+
+ {message.type === 'file' && (
+
+ {message.name}
+
+ )}
+
+
+ {message.timestamp.toLocaleTimeString('es-ES', {
+ hour: '2-digit',
+ minute: '2-digit',
+ })}
+
+
+
{isStudent && (
-
+
)}
);
diff --git a/app/components/chat/messageList.tsx b/app/components/chat/messageList.tsx
index 1a7422a..fed6eba 100644
--- a/app/components/chat/messageList.tsx
+++ b/app/components/chat/messageList.tsx
@@ -8,34 +8,100 @@ interface Message {
name?: string;
sender: 'student' | 'tutor';
timestamp: Date;
+ userAvatar?: string;
+ userName?: string;
+ userId?: string;
}
interface MessageListProps {
messages: Message[];
tutorName: string;
+ typingUsers?: string[];
+ isLoading?: boolean;
}
-export default function MessageList({ messages, tutorName }: MessageListProps) {
+export default function MessageList({
+ messages,
+ tutorName,
+ typingUsers = [],
+ isLoading = false,
+}: MessageListProps) {
const bottomRef = useRef
(null);
+ // biome-ignore lint/correctness/useExhaustiveDependencies: Need to scroll when messages change
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
- }, []);
+ }, [messages]);
return (
-
- {messages.length === 0 ? (
-
-
No hay mensajes aún
+
+ {isLoading ? (
+ // Skeleton loader mientras carga
+ [1, 2, 3].map((i) => (
+
+ {i % 2 === 0 && (
+
+ )}
+
+ {i % 2 !== 0 && (
+
+ )}
+
+ ))
+ ) : messages.length === 0 ? (
+
) : (
- messages.map((message) => (
-
- ))
+ <>
+ {messages.map((message) => (
+
+ ))}
+ {typingUsers.length > 0 && (
+
+
+
+ ●
+
+
+ ●
+
+
+ ●
+
+
+
+ {typingUsers.length === 1
+ ? 'Alguien está escribiendo...'
+ : `${typingUsers.length} personas están escribiendo...`}
+
+
+ )}
+
)}
diff --git a/app/components/chat/reportContent/reportChatModal.tsx b/app/components/chat/reportContent/reportChatModal.tsx
index 4fce092..c2430a9 100644
--- a/app/components/chat/reportContent/reportChatModal.tsx
+++ b/app/components/chat/reportContent/reportChatModal.tsx
@@ -9,13 +9,19 @@ import {
RadioGroup,
Textarea,
} from '@heroui/react';
-import { AlertTriangle } from 'lucide-react';
+import { AlertTriangle, CheckCircle } from 'lucide-react';
import { useState } from 'react';
+import {
+ mapFrontendReasonToBackend,
+ reportesService,
+ TipoContenido,
+} from '~/lib/services/reportes.services';
interface ReportChatModalProps {
isOpen: boolean;
onClose: () => void;
tutorName: string;
+ messageId?: string;
onSubmitReport: (reason: string, details: string) => void;
isMessageReport?: boolean;
}
@@ -24,12 +30,15 @@ export default function ReportChatModal({
isOpen,
onClose,
tutorName,
+ messageId,
onSubmitReport,
isMessageReport = false,
}: Readonly
) {
const [selectedReason, setSelectedReason] = useState('');
const [details, setDetails] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
+ const [successMessage, setSuccessMessage] = useState('');
+ const [errorMessage, setErrorMessage] = useState('');
const reportReasons = [
{ value: 'harassment', label: 'Acoso o intimidación' },
@@ -45,22 +54,48 @@ export default function ReportChatModal({
if (!selectedReason) return;
setIsSubmitting(true);
+ setErrorMessage('');
- // Simular llamada API
- await new Promise((resolve) => setTimeout(resolve, 1000));
+ try {
+ const motivo = mapFrontendReasonToBackend(selectedReason);
- onSubmitReport(selectedReason, details);
+ if (messageId) {
+ await reportesService.createReport({
+ contenido_id: messageId,
+ tipo_contenido: TipoContenido.MENSAJE_CHAT,
+ motivo,
+ descripcion: details || undefined,
+ });
+ } else {
+ // Fallback: si no hay messageId, solo ejecuta el callback
+ console.warn('No messageId provided, skipping API call');
+ }
- // Resetear formulario
- setSelectedReason('');
- setDetails('');
- setIsSubmitting(false);
- onClose();
+ onSubmitReport(selectedReason, details);
+
+ setSuccessMessage(
+ 'Reporte enviado exitosamente. Será revisado por nuestro equipo.',
+ );
+
+ setTimeout(() => {
+ setSelectedReason('');
+ setDetails('');
+ setSuccessMessage('');
+ onClose();
+ }, 2000);
+ } catch (error) {
+ console.error('Error al crear reporte:', error);
+ alert('Error al enviar el reporte. Por favor, intenta nuevamente.');
+ } finally {
+ setIsSubmitting(false);
+ }
};
const handleClose = () => {
setSelectedReason('');
setDetails('');
+ setSuccessMessage('');
+ setErrorMessage('');
onClose();
};
@@ -80,50 +115,75 @@ export default function ReportChatModal({
{isMessageReport ? 'Reportar mensaje' : 'Reportar conversación'}
-
- {isMessageReport ? (
- <>
- Estás reportando un mensaje de {tutorName} .
- Esta acción será revisada por nuestro equipo de moderación.
-
- ) : (
- <>
- Estás reportando tu conversación completa con{' '}
- {tutorName} . Esta acción será revisada por
- nuestro equipo de moderación.
-
- )}
-
-
-
- {reportReasons.map((reason) => (
-
- {reason.label}
-
- ))}
-
-
-
-
-
-
- Nota: Los reportes falsos pueden resultar en
- sanciones para tu cuenta.
-
-
+
+
+
+ {isMessageReport ? (
+ <>
+ Estás reportando un mensaje de {tutorName} .
+ Esta acción será revisada por nuestro equipo de moderación.
+
+ ) : (
+ <>
+ Estás reportando tu conversación completa con{' '}
+ {tutorName} . Esta acción será revisada por
+ nuestro equipo de moderación.
+
+ )}
+
+
+
+ {reportReasons.map((reason) => (
+
+ {reason.label}
+
+ ))}
+
+
+
+
+
+
+ Nota: Los reportes falsos pueden resultar en
+ sanciones para tu cuenta.
+
+
([
{
id: '1',
- text: '¡Hola! Soy tu asistente virtual de ECIWISE+. ¿En qué puedo ayudarte hoy?',
+ text: 'Hola! Soy tu asistente virtual de ECIWISE+. ¿En qué puedo ayudarte hoy?',
isUser: false,
timestamp: new Date(),
},
]);
const [inputValue, setInputValue] = useState('');
+ const [isSending, setIsSending] = useState(false);
+ const [errorMessage, setErrorMessage] = useState(null);
- const handleSendMessage = () => {
- const textToSend = inputValue;
- if (!textToSend.trim()) return;
+ const handleSendMessage = async () => {
+ const textToSend = inputValue.trim();
+ if (!textToSend || isSending) return;
const userMessage: Message = {
id: Date.now().toString(),
@@ -34,27 +41,48 @@ export function ChatbotWidget() {
setMessages((prev) => [...prev, userMessage]);
setInputValue('');
+ setIsSending(true);
+ setErrorMessage(null);
- // Simulate bot response
- setTimeout(() => {
+ try {
+ const reply = await navigationChatService.sendMessage(textToSend);
const botMessage: Message = {
- id: (Date.now() + 1).toString(),
- text: 'Gracias por tu mensaje. Estoy aquí para ayudarte con tutorías, materiales de estudio y cualquier pregunta sobre la plataforma.',
+ id: `${Date.now()}-bot`,
+ text: reply,
isUser: false,
timestamp: new Date(),
};
setMessages((prev) => [...prev, botMessage]);
- }, 1000);
+ } catch (error) {
+ const friendlyMessage =
+ error instanceof Error
+ ? error.message
+ : 'No pudimos obtener respuesta del asistente.';
+ setErrorMessage(friendlyMessage);
+ const fallbackMessage: Message = {
+ id: `${Date.now()}-error`,
+ text: 'Hubo un problema al conectar con el asistente. Intenta nuevamente en unos segundos.',
+ isUser: false,
+ timestamp: new Date(),
+ };
+ setMessages((prev) => [...prev, fallbackMessage]);
+ } finally {
+ setIsSending(false);
+ }
};
- const handleKeyPress = (e: React.KeyboardEvent) => {
+ const handleKeyPress = (e: KeyboardEvent) => {
if (e.key === 'Enter') {
handleSendMessage();
}
};
return (
-
+
{isOpen && (
@@ -90,16 +118,22 @@ export function ChatbotWidget() {
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={handleKeyPress}
size="sm"
+ isDisabled={isSending}
/>
+ {errorMessage && (
+
{errorMessage}
+ )}
{topic.counts.likes}
+
{topic.counts.views}
@@ -265,57 +271,6 @@ function TopicCard({
);
}
-function GroupChatCard() {
- const [chats, setChats] = useState
([]);
- const [isLoading, setIsLoading] = useState(false);
-
- const loadChats = async () => {
- setIsLoading(true);
- try {
- const data = await chatsService.getAllGroups();
- setChats(data);
- } catch (error) {
- console.error('Error loading chats:', error);
- } finally {
- setIsLoading(false);
- }
- };
-
- // biome-ignore lint/correctness/useExhaustiveDependencies: loadChats should only run once on mount
- useEffect(() => {
- loadChats();
- }, []);
-
- return (
-
-
-
-
- Conecta en tiempo real con otros estudiantes y tutores.
-
-
- {isLoading ? 'Cargando...' : 'Abrir chat'}
-
-
-
- );
-}
-
export function CommunityForums() {
const [search, setSearch] = useState('');
const [subject, setSubject] = useState('Todos');
@@ -324,8 +279,8 @@ export function CommunityForums() {
const [description, setDescription] = useState('');
const [selectedMateriaForCreate, setSelectedMateriaForCreate] =
useState('');
- const MIN_LEN = 15;
- const MAX_LEN = 50;
+ const MIN_LEN = 10;
+ const MAX_LEN = 150;
// State para materias
const [materias, setMaterias] = useState([]);
@@ -360,6 +315,15 @@ export function CommunityForums() {
const [threadContent, setThreadContent] = useState('');
const [isLoadingThreads, setIsLoadingThreads] = useState(false);
+ //State para
+ // State para reportes
+ const [reportModalOpen, setReportModalOpen] = useState(false);
+ const [reportingContentId, setReportingContentId] = useState(
+ null,
+ );
+ const [reportingContentType, setReportingContentType] =
+ useState(TipoContenido.THREAD);
+
// State para respuestas a hilos
const [respondingToThreadId, setRespondingToThreadId] = useState<
string | null
@@ -462,7 +426,9 @@ export function CommunityForums() {
title: forum.title,
excerpt: forum.description || '',
author: forum.creator?.nombre || 'Anónimo',
- timeAgo: formatTimeAgo(forum.created_at),
+ timeAgo: forum.created_at
+ ? formatTimeAgo(forum.created_at)
+ : 'Recientemente',
subject: forum.materia?.nombre || 'General',
pinned: pinnedById[forum.id] || false,
resolved: forum.closed,
@@ -511,8 +477,16 @@ export function CommunityForums() {
if (!isEditTitleValid || !editingTopicIdModal) return;
try {
+ const user = getStorageJSON<{ id: string }>(STORAGE_KEYS.USER);
+ const userId = user?.id;
+ if (!userId) {
+ console.error('User ID not found');
+ alert('No se pudo obtener tu ID de usuario');
+ return;
+ }
await forumsService.editForum(editingTopicIdModal, {
title: editTopicTitle,
+ editorId: userId,
});
setEditedById((prev) => ({ ...prev, [editingTopicIdModal]: true }));
await loadForums();
@@ -555,6 +529,16 @@ export function CommunityForums() {
);
}
};
+ const openReportModal = (contentId: string, contentType: TipoContenido) => {
+ setReportingContentId(contentId);
+ setReportingContentType(contentType);
+ setReportModalOpen(true);
+ };
+
+ const closeReportModal = () => {
+ setReportingContentId(null);
+ setReportModalOpen(false);
+ };
const likeForum = async (forumId: string) => {
try {
@@ -905,44 +889,25 @@ export function CommunityForums() {
key={thread.id}
className="rounded-medium border-1 border-default-200 p-4 space-y-3"
>
-
-
-
- {thread.title}
-
-
-
- {thread.author?.nombre || 'Anónimo'}
-
- •
-
- {thread.created_at
- ? new Date(
- thread.created_at,
- ).toLocaleDateString()
- : 'Recientemente'}
-
-
+
+
+ {thread.title}
+
+
+
+ {thread.author?.nombre || 'Anónimo'}
+
+ •
+
+ {thread.created_at
+ ? new Date(
+ thread.created_at,
+ ).toLocaleDateString()
+ : 'Recientemente'}
+
-
- loadResponsesForThread(thread.id)
- }
- >
-
-
+
{thread.content}
@@ -951,7 +916,7 @@ export function CommunityForums() {
className="flex items-center gap-1 text-default-500 text-xs hover:text-primary transition-colors cursor-pointer"
onClick={() => likeThread(thread.id, t.id)}
>
-
+
{thread.likes_count || 0}
+ {/*BOTÓN */}
+
{
+ e.stopPropagation();
+ openReportModal(
+ thread.id,
+ TipoContenido.THREAD,
+ );
+ }}
+ >
+ Reportar
+
{showThreadsFor === thread.id && (
@@ -1075,12 +1055,7 @@ export function CommunityForums() {
)}
-
-
-
@@ -1177,6 +1152,16 @@ export function CommunityForums() {
)}
+ {/* Modal de reporte */}
+ {reportingContentId && (
+ void;
+ contenidoId: string;
+ tipoContenido: TipoContenido;
+ nombreContenido?: string; // Ej: "este thread", "esta respuesta"
+}
+
+const reportReasons = [
+ { value: 'harassment', label: 'Acoso o intimidación' },
+ { value: 'inappropriate', label: 'Contenido inapropiado' },
+ { value: 'spam', label: 'Spam o publicidad' },
+ { value: 'offensive', label: 'Lenguaje ofensivo' },
+ { value: 'scam', label: 'Estafa o fraude' },
+ { value: 'impersonation', label: 'Suplantación de identidad' },
+ { value: 'other', label: 'Otro motivo' },
+];
+
+export default function ReportContentModal({
+ isOpen,
+ onClose,
+ contenidoId,
+ tipoContenido,
+ nombreContenido = 'este contenido',
+}: Readonly) {
+ const [selectedReason, setSelectedReason] = useState('');
+ const [details, setDetails] = useState('');
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [error, setError] = useState(null);
+
+ const getTipoTexto = () => {
+ switch (tipoContenido) {
+ case TipoContenido.THREAD:
+ return 'thread';
+ case TipoContenido.RESPONSE:
+ return 'respuesta';
+ case TipoContenido.MENSAJE_CHAT:
+ return 'mensaje';
+ default:
+ return 'contenido';
+ }
+ };
+
+ const handleSubmit = async () => {
+ if (!selectedReason) return;
+
+ setIsSubmitting(true);
+ setError(null);
+
+ try {
+ const motivo = mapFrontendReasonToBackend(selectedReason);
+
+ await reportesService.createReport({
+ contenido_id: contenidoId,
+ tipo_contenido: tipoContenido,
+ motivo,
+ descripcion: details || undefined,
+ });
+
+ // Resetear formulario
+ setSelectedReason('');
+ setDetails('');
+ onClose();
+
+ // Mostrar mensaje de éxito (opcional)
+ alert('Reporte enviado exitosamente. Será revisado por nuestro equipo.');
+ } catch (err) {
+ console.error('Error al crear reporte:', err);
+ setError(
+ err instanceof Error ? err.message : 'Error al enviar el reporte',
+ );
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const handleClose = () => {
+ setSelectedReason('');
+ setDetails('');
+ setError(null);
+ onClose();
+ };
+
+ return (
+
+
+
+
+
+
+ Estás reportando {nombreContenido}. Esta acción será revisada por
+ nuestro equipo de moderación.
+
+
+ {error && (
+
+ )}
+
+
+ {reportReasons.map((reason) => (
+
+ {reason.label}
+
+ ))}
+
+
+
+
+
+
+ Nota: Los reportes falsos pueden resultar en
+ sanciones para tu cuenta.
+
+
+
+
+ Cancelar
+
+
+ Enviar reporte
+
+
+
+
+ );
+}
diff --git a/app/components/create-group-modal.tsx b/app/components/create-group-modal.tsx
index cb2a557..5cb15c5 100644
--- a/app/components/create-group-modal.tsx
+++ b/app/components/create-group-modal.tsx
@@ -9,33 +9,28 @@ import {
ModalContent,
ModalFooter,
ModalHeader,
+ Spinner,
Textarea,
} from '@heroui/react';
import { Search } from 'lucide-react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { useUsers } from '~/lib/hooks/useUsers';
interface User {
id: string;
+ email: string;
name: string;
avatar: string;
- role: 'student' | 'tutor';
+ role: string;
}
-const mockUsers: User[] = [
- { id: '1', name: 'Dr. María García', avatar: 'MG', role: 'tutor' },
- { id: '2', name: 'Ing. Carlos Rodríguez', avatar: 'CR', role: 'tutor' },
- { id: '3', name: 'Ana Martínez', avatar: 'AM', role: 'student' },
- { id: '4', name: 'Luis Pérez', avatar: 'LP', role: 'student' },
- { id: '5', name: 'Sofia González', avatar: 'SG', role: 'student' },
-];
-
interface CreateGroupModalProps {
isOpen: boolean;
onClose: () => void;
onCreateGroup: (groupData: {
name: string;
description: string;
- members: User[];
+ emails: string[];
}) => void;
}
@@ -49,8 +44,28 @@ export function CreateGroupModal({
const [searchValue, setSearchValue] = useState('');
const [selectedMembers, setSelectedMembers] = useState([]);
- const filteredUsers = mockUsers.filter((user) =>
- user.name.toLowerCase().includes(searchValue.toLowerCase()),
+ const { data: usersData, isLoading } = useUsers(searchValue);
+
+ const users = useMemo(() => {
+ if (!usersData?.data) return [];
+ return usersData.data.map((user) => ({
+ id: user.id,
+ email: user.email,
+ name: `${user.nombre} ${user.apellido}`,
+ avatar:
+ user.avatarUrl || `${user.nombre[0]}${user.apellido[0]}`.toUpperCase(),
+ role: user.rol,
+ }));
+ }, [usersData]);
+
+ const filteredUsers = useMemo(
+ () =>
+ users.filter(
+ (user) =>
+ user.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+ user.email.toLowerCase().includes(searchValue.toLowerCase()),
+ ),
+ [users, searchValue],
);
const handleMemberToggle = (user: User) => {
@@ -73,7 +88,7 @@ export function CreateGroupModal({
onCreateGroup({
name: groupName,
description: groupDescription,
- members: selectedMembers,
+ emails: selectedMembers.map((m) => m.email),
});
handleClose();
}
@@ -157,30 +172,36 @@ export function CreateGroupModal({
/>
- {filteredUsers.map((user) => (
-
-
member.id === user.id,
- )}
- onValueChange={() => handleMemberToggle(user)}
- />
-
-
{user.name}
-
- {user.role}
-
-
+
- ))}
- {filteredUsers.length === 0 && (
-
- No se encontraron usuarios
-
+ ) : (
+ <>
+ {filteredUsers.map((user) => (
+
+
member.id === user.id,
+ )}
+ onValueChange={() => handleMemberToggle(user)}
+ />
+
+
{user.name}
+
{user.email}
+
+ No se encontraron usuarios
+
+ )}
+
)}
diff --git a/app/components/dashboard-layout.tsx b/app/components/dashboard-layout.tsx
index fe2b0f9..45ac5c1 100644
--- a/app/components/dashboard-layout.tsx
+++ b/app/components/dashboard-layout.tsx
@@ -1,5 +1,6 @@
import { useState } from 'react';
import { Outlet } from 'react-router';
+import { useIaFeature } from '~/lib/hooks/useIaFeature';
import ChatOverlay from './chat/chatOverlay';
import { ChatDropdown } from './chat-dropdown';
import { ChatbotWidget } from './chatbot-widget';
@@ -21,7 +22,6 @@ export function DashboardLayout({
userAvatar,
onLogout,
}: DashboardLayoutProps) {
- // ← AGREGA ESTO: Estado para el chat
const [selectedTutor, setSelectedTutor] = useState<{
id: number;
name: string;
@@ -29,6 +29,38 @@ export function DashboardLayout({
avatarInitials: string;
} | null>(null);
+ const [selectedGroupId, setSelectedGroupId] = useState
(
+ undefined,
+ );
+
+ const iaEnabled = useIaFeature(5000);
+
+ const handleOpenChat = (data: {
+ id: number;
+ name: string;
+ title: string;
+ avatarInitials: string;
+ groupId?: string;
+ }) => {
+ if (data.groupId) {
+ setSelectedGroupId(data.groupId);
+ setSelectedTutor({
+ id: data.id,
+ name: data.name,
+ title: data.title,
+ avatarInitials: data.avatarInitials,
+ });
+ } else {
+ setSelectedTutor(data);
+ setSelectedGroupId(undefined);
+ }
+ };
+
+ const handleCloseChat = () => {
+ setSelectedTutor(null);
+ setSelectedGroupId(undefined);
+ };
+
return (
- setSelectedTutor(null)}
+ onClose={handleCloseChat}
/>
- {/* Chatbot Widget */}
- (null);
const [formData, setFormData] = useState({
- nombre: '',
- materia: '',
- semestre: '',
- descripcion: '',
+ title: '',
+ description: '',
+ file: null as File | null,
});
+ const [fileName, setFileName] = useState('');
const [errors, setErrors] = useState>({});
// Prellenar formulario cuando se carga el material
useEffect(() => {
if (material) {
setFormData({
- nombre: material.nombre,
- materia: material.materia,
- semestre: material.semestre.toString(),
- descripcion: material.descripcion || '',
+ title: material.nombre || '',
+ description: material.descripcion || '',
+ file: null,
});
}
}, [material]);
@@ -60,15 +53,25 @@ export function EditMaterialForm({
const validateForm = () => {
const newErrors: Record = {};
- if (!formData.nombre.trim()) newErrors.nombre = 'El nombre es requerido';
- if (!formData.materia) newErrors.materia = 'La materia es requerida';
- if (!formData.semestre) newErrors.semestre = 'El semestre es requerido';
+ if (!formData.title.trim()) {
+ newErrors.title = 'El título es requerido';
+ }
return newErrors;
};
+ const handleFileChange = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ setFormData((prev) => ({ ...prev, file }));
+ setFileName(file.name);
+ setErrors((prev) => ({ ...prev, file: '' }));
+ }
+ };
+
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
+ setErrors({});
const formErrors = validateForm();
if (Object.keys(formErrors).length > 0) {
@@ -77,22 +80,28 @@ export function EditMaterialForm({
}
try {
+ const data = new FormData();
+ data.append('title', formData.title);
+ data.append('description', formData.description);
+ if (formData.file) {
+ data.append('file', formData.file);
+ }
+
await updateMaterial.mutateAsync({
id: materialId,
- data: {
- nombre: formData.nombre,
- materia: formData.materia,
- tipo: 'PDF',
- semestre: Number(formData.semestre),
- descripcion: formData.descripcion,
- },
+ data,
});
onSuccess?.();
onClose();
- } catch (_error) {
+ } catch (error) {
+ console.error('Error detallado:', error);
+ const errorMessage =
+ error instanceof Error
+ ? error.message
+ : 'Error al actualizar el material. Intente nuevamente.';
setErrors({
- submit: 'Error al actualizar el material. Intente nuevamente.',
+ submit: errorMessage,
});
}
};
@@ -141,64 +150,61 @@ export function EditMaterialForm({