Feature Component - Copy this React, Tailwind Component to your project

vale cuando toque el boton del personaje que el diseño sea asi = 1. Pantalla de Creación de Personaje • Avatar del Personaje: • Imagen circular editable con un ícono de edición para cambiar la imagen del personaje. • Campos de Información del Personaje: • Nombre del personaje: Campo de texto con un límite de 20 caracteres y un ejemplo sugerido. • Eslogan: Campo breve para una frase representativa (límite de 50 caracteres). • Descripción: Campo amplio para una descripción (límite de 500 caracteres). • Saludos: Campo extenso para un mensaje de bienvenida (límite de 2048 caracteres). • Sección de Voz: • Opción desplegable para añadir o seleccionar una voz para el personaje. • Más Opciones: • Desplegable para configuraciones avanzadas o adicionales. • Visibilidad: • Campo para seleccionar la visibilidad del personaje, con opciones como “Público”. • Botones: • Ver libro de personajes: En la esquina superior derecha. • Crear personaje: En la parte inferior derecha. Al hacer clic en este botón, el personaje se guarda y el usuario es redirigido a la Interfaz de Conversación. 2. Interfaz de Conversación con el Personaje • Encabezado de Perfil (Parte Superior Izquierda): • Avatar del Personaje: Imagen circular con la inicial. • Nombre del Personaje: Nombre del personaje a la derecha del avatar. • Usuario/Propietario: Indicador del creador (“Por @vifixai”). • Vista Detallada del Personaje (Centro Derecha): • Avatar Expandido: Imagen circular ampliada. • Nombre del Personaje: En posición destacada. • Alias o Información Adicional: Línea para una breve descripción o alias. • Usuario/Propietario: Nombre del usuario creador. • Área de Conversación (Centro de la Pantalla): • Mensajes del Personaje: • Cada mensaje en una burbuja alineada a la izquierda, incluye: • Avatar: Pequeño ícono con la inicial. • Nombre y Rol: Nombre seguido de una etiqueta (ej. “c.ai”). • Contenido del Mensaje: Texto del personaje. • Botón de Reproducción de Audio (Play): Permite escuchar el mensaje. • Sistema de Calificación (Estrellas): Cinco estrellas debajo para calificar la respuesta. • Mensajes del Usuario: • Burbuja alineada a la derecha con un color distintivo para diferenciar. • Avatar del Usuario: Ícono con la inicial (ej. “v”). • Nombre del Usuario: Nombre a la izquierda del mensaje. • Contenido del Mensaje: Texto enviado por el usuario. • Barra de Mensaje (Parte Inferior de la Pantalla): • Campo de Texto: Espacio para escribir, con el marcador “Mensaje amos…”. • Botón de Envío: Ícono de flecha para enviar el mensaje. • Botón de Llamada: Ícono de teléfono que abre la Interfaz de Llamada al ser presionado. • Nota o Advertencia (Debajo de la Barra de Mensaje): • Texto: “Recuerda: ¡todo lo que dicen los personajes es inventado!”. • Opciones de Configuración (Parte Superior Derecha): • Ícono de Silenciar: Para silenciar notificaciones. • Menú de Opciones (Tres Puntos): Configuraciones adicionales. 3. Interfaz de Llamada • Avatar del Personaje: • Imagen circular grande en la parte superior, representando al personaje. • Estado de la Llamada: • Texto “Escuchando” en el centro, indicando que el personaje está activo y listo para interactuar en voz. • Controles de Llamada (Parte Inferior de la Pantalla): • Botón de Silenciar: Ícono de micrófono para silenciar el micrófono durante la llamada. • Botón de Colgar: Ícono de teléfono rojo para finalizar la llamada. • Estilo Visual: • Fondo Gradiente Oscuro: Degradado en tonos oscuros para destacar el avatar y los controles. • Diseño Minimalista: Focalizado en los elementos esenciales para una experiencia de llamada sencilla. Flujo Completo de la Aplicación 1. Pantalla de Creación de Personaje: • El usuario configura el personaje (nombre, eslogan, descripción, saludo, voz, visibilidad). • Al hacer clic en Crear personaje, el personaje se guarda y el usuario es llevado a la Interfaz de Conversación. 2. Interfaz de Conversación: • El usuario interactúa con el personaje mediante mensajes de texto. • Cada respuesta del personaje puede escucharse en audio y calificarse con estrellas. • El usuario puede tocar el Botón de Llamada para iniciar una llamada con el personaje. 3. Interfaz de Llamada: • Al tocar “Llamar”, se abre la interfaz de llamada con el personaje en modo “Escuchando”. • Durante la llamada, el usuario puede silenciar el micrófono o colgar. • Al finalizar la llamada (tocando “Colgar”), el usuario vuelve a la Interfaz de Conversación.