Chat Panel - Copy this React, Tailwind Component to your project

Diseño General del Panel: El panel se divide en tres secciones: una barra lateral izquierda, una vista central de chat, y un panel de información de contacto a la derecha. Barra Lateral Izquierda: Encabezado Superior: Íconos pequeños de minimizar, maximizar y cerrar, típicos de una ventana. Barra de Búsqueda: Un campo de texto con un ícono de lupa para buscar chats o contactos. Estado: Sección con contactos activos visualizada por imágenes de perfil en círculo con una línea verde en la base para indicar disponibilidad. Un ícono "+" para añadir nuevos contactos o chats. Listado de Chats: Una lista vertical con avatares e información de chats recientes. Cada entrada de la lista muestra: Avatar de contacto/chats, con un indicativo de estado (un punto de color verde para online). Nombre del Contacto/Grupo. Resumen del último mensaje o estado de llamada (p. ej., "Call ended"). Hora del último mensaje. Vista Central del Chat: Encabezado de Chat: Imagen de perfil del contacto activo. Nombre y estado del contacto (p. ej., "Online"). Íconos de llamada y opciones adicionales. Cuerpo del Chat: Mensajes dispuestos en burbujas de texto. Cada burbuja indica: Contenido del mensaje. Hora del mensaje en la parte inferior. Diferencia visual entre los mensajes enviados y recibidos (p. ej., color o alineación diferentes). Panel de Información del Contacto (Derecha): Encabezado: Imagen de perfil ampliada. Nombre del contacto y su estado. Íconos para realizar llamadas o video llamadas. Sección de Información Adicional: Descripción breve del contacto (p. ej., "Hello My name is..."). Una galería de imágenes o documentos compartidos anteriormente. Opciones de Configuración: Alternar notificaciones (p. ej., "Mute notifications"). Configurar mensajes efímeros (p. ej., "Disappearing messages"). Acciones de Bloqueo/Reporte: Botones para bloquear, reportar o eliminar el chat.