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

Hola PureCode, soy un diseñador UI/UX e ingeniero de sistemas enfocado en el desarrollo con React y Tailwind CSS. Estoy trabajando en el rediseño de la interfaz de chat de mi aplicación y me gustaría tu ayuda para generar un código que cumpla con los siguientes requisitos de diseño y funcionalidad: Descripción General: Estoy rediseñando la interfaz de mi aplicación de mensajería. La interfaz debe incluir dos secciones principales: Lista de Chats a la Izquierda: La lista de chats muestra los contactos, con sus nombres, extractos del último mensaje y la hora del mensaje. Esta lista está posicionada a la izquierda y utiliza un diseño limpio y sencillo, con colores suaves que se ajustan a la estética general de la aplicación. Cuando un usuario selecciona un chat, la frontera o separación entre la lista de chats y el área de la conversación debe ser casi imperceptible, con la intención de crear una transición visual sin interrupciones, logrando una apariencia unificada (como se muestra en la imagen con tonos morados). El chat seleccionado debe estar resaltado con un color de fondo suave, para ayudar al usuario a identificar fácilmente cuál chat está activo. Vista de Conversación al Centro: La parte central muestra la vista de la conversación activa. Utilizar Tailwind CSS para crear burbujas de mensajes con esquinas redondeadas. Los mensajes entrantes deben tener un fondo gris suave, mientras que los mensajes salientes deben tener un color más vivo (como un azul claro). Para la animación entre la lista y la vista del chat, utiliza Framer Motion para agregar una transición sutil que haga que el área de la conversación se desplace y aparezca de una manera fluida. Esto mejorará la experiencia del usuario, dándole una sensación de continuidad al moverse entre diferentes chats. Respuestas Generadas por la IA: En la vista de la conversación activa, tengo un área donde se muestran tres respuestas generadas por la IA. Estas respuestas deben mostrarse inicialmente retraídas, es decir, deben ocupar menos espacio visual y permitir al usuario hacer clic o tocar para desplegarlas completamente. Cada una de estas respuestas tendrá un pequeño indicador (como un ícono de flecha o una barra) que invite al usuario a expandir y ver el contenido completo. Utiliza Framer Motion para crear una animación que dé la sensación de que las respuestas "emergen" hacia el usuario al ser desplegadas. Esto debería hacerse con una transición suave para mejorar la percepción de calidad del producto. Usa Tailwind CSS para el diseño visual de las respuestas y asegúrate de que se mantenga una jerarquía visual clara, con colores diferenciados para resaltar las respuestas generadas. Diseño Detallado de Interacción: Cuando un usuario selecciona el botón "Sugerir Respuesta" en el chat, las respuestas generadas deberían aparecer en una caja con borde gris suave al pie de la conversación. Dentro de esta caja, las tres respuestas estarán dispuestas verticalmente, cada una con un efecto de hover para indicar interactividad. Para cada respuesta generada, utiliza una barra lateral de borde que sugiera que la respuesta puede ser deslizada o desplegada. Cuando se despliega, debe ocupar el espacio suficiente para permitir la lectura completa sin perder el contexto de la conversación. Estética General: La interfaz debe tener una paleta de colores consistentes, como tonos morados y grises claros, para reflejar una experiencia moderna y profesional. Los bordes entre los componentes deben ser suaves o casi invisibles para mantener la apariencia fluida. Las transiciones suaves y el uso de animaciones sutiles son clave para mejorar la experiencia de usuario. Los elementos interactivos deben tener una retroalimentación visual adecuada, como cambios de color o de tamaño al hacer clic, para mantener la experiencia de usuario clara e intuitiva. Tecnologías Requeridas: React para la estructura de los componentes. Tailwind CSS para el estilizado y diseño visual. Framer Motion para las animaciones entre las secciones y los desplegables. Por favor, genera un código que cumpla con estas especificaciones y que permita que los elementos se integren de forma natural en el flujo de la interfaz, mejorando la experiencia de usuario.