Composant de fenêtre de chat
Composant de fenêtre de chat réactif conçu pour une utilisation professionnelle, doté d’une interface utilisateur en mode sombre avec une palette de couleurs complémentaire. Comprend des messages de remplacement, une liste de contacts et une zone de saisie.
HTML Code
<div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans">
<!-- Chat Window Wrapper -->
<div class="flex-1 flex overflow-hidden rounded-lg shadow-xl m-4 lg:m-8 bg-white dark:bg-gray-800">
<!-- Left Panel: Contacts List (Hidden on Mobile, shown on larger screens) -->
<div class="hidden md:flex flex-col w-1/4 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Chats</h2>
<input type="text" placeholder="Search chats..." class="w-full mt-3 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400">
</div>
<div class="flex-1 overflow-y-auto">
<!-- Contact 1 (Active) -->
<a href="#" class="flex items-center p-4 hover:bg-purple-100 dark:hover:bg-purple-900 transition-colors duration-200 bg-purple-50 dark:bg-purple-800 border-l-4 border-purple-600 dark:border-purple-400">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold text-purple-800 dark:text-purple-200">John Doe</p>
<p class="text-sm text-purple-600 dark:text-purple-400 truncate">Hey, are you free for a call?</p>
</div>
<span class="text-xs text-purple-500 dark:text-purple-300">10:30 AM</span>
</a>
<!-- Contact 2 -->
<a href="#" class="flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">That's great news!</p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-300">Yesterday</span>
</a>
<!-- Contact 3 -->
<a href="#" class="flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/51.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold text-gray-800 dark:text-gray-100">Michael Johnson</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Let me know if you need anything.</p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-300">2 days ago</span>
</a>
</div>
</div>
<!-- Right Panel: Chat Messages -->
<div class="flex flex-col flex-1">
<!-- Chat Header -->
<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
<p class="text-sm text-green-500 dark:text-green-400">Online</p>
</div>
</div>
<div class="flex space-x-4">
<button aria-label="Call" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</button>
<button aria-label="Video Call" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</button>
</div>
</div>
<!-- Chat Messages Area -->
<div class="flex-1 overflow-y-auto p-4 space-y-4">
<!-- Incoming Message -->
<div class="flex items-start">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl max-w-sm">
<p class="text-sm text-gray-800 dark:text-gray-100">Hey, good morning! Hope you're having a productive day.</p>
<p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">10:28 AM</p>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end">
<div class="bg-purple-600 dark:bg-purple-700 text-white p-3 rounded-xl max-w-sm">
<p class="text-sm">Good morning! I am. Just finishing up the Q3 report. Have you reviewed the client proposal?</p>
<p class="text-xs text-purple-200 dark:text-purple-300 text-right mt-1">10:29 AM</p>
</div>
</div>
<!-- Incoming Message -->
<div class="flex items-start">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl max-w-sm">
<p class="text-sm text-gray-800 dark:text-gray-100">Yes, I have. Looks solid. Just a minor tweak on the budget section, I'll send you the revised version in a bit.</p>
<p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">10:30 AM</p>
</div>
</div>
<!-- Outgoing Message (Last message) -->
<div class="flex justify-end">
<div class="bg-purple-600 dark:bg-purple-700 text-white p-3 rounded-xl max-w-sm">
<p class="text-sm">Perfect, looking forward to it. Are you free for a quick call to discuss the next steps on project 'Alpha'?</p>
<p class="text-xs text-purple-200 dark:text-purple-300 text-right mt-1">10:30 AM</p>
</div>
</div>
</div>
<!-- Chat Input Area -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850 flex items-center space-x-3">
<button aria-label="Attach file" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.414a4 4 0 00-5.656-5.656l-6.415 6.415a3 3 0 104.243 4.243l.707-.707m1.414-.707l.707-.707m1.414-.707l.707-.707m0 0l1 1m0-1v1" />
</svg>
</button>
<input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400">
<button aria-label="Send message" class="bg-purple-600 dark:bg-purple-500 text-white p-3 rounded-full hover:bg-purple-700 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-90 -mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
RetroChatWindow
Un composant de fenêtre de chat de style rétro/vintage utilisant Tailwind CSS, avec un design réactif et une prise en charge du mode sombre. Comprend des messages et des avatars de remplacement. Pas de JavaScript.
Composant de fenêtre de chat
Un composant de fenêtre de chat simple, de style Glassmorphism, avec une palette de couleurs pastel, conçu pour la consommation de contenu. Il dispose d’une mise en page réactive et d’un support de thème sombre.
Composant de fenêtre de chat
Un composant de fenêtre de chat complexe, de couleur triadique et axé sur la micro-interaction, adapté aux plateformes immobilières. Il dispose d’une liste de conversations, d’une zone de discussion active avec des bulles de messages et d’un champ de saisie interactif, tous entièrement réactifs et avec prise en charge du mode sombre.