<div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden font-sans">
<!-- Chat Header -->
<div class="w-full bg-purple-600 dark:bg-purple-800 p-4 flex items-center justify-between shadow-md">
<div class="flex items-center">
<img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-white animate-pulse-slow" />
<h2 class="text-white text-lg font-semibold">Customer Support</h2>
</div>
<div class="relative">
<div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0 ring-2 ring-purple-600 dark:ring-purple-800 animate-ping-slow"></div>
<div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0"></div>
</div>
</div>
<!-- Chat Messages -->
<div class="flex-1 p-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-gray-100 dark:scrollbar-track-gray-900">
<!-- Receiver Message -->
<div class="flex items-end justify-start animate-fade-in-down">
<img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
<div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
<p>Hello! How can I help you today?</p>
<span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:00 AM</span>
</div>
</div>
<!-- Sender Message -->
<div class="flex items-end justify-end animate-fade-in-up">
<div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-right hover:scale-105">
<p>I'm looking for information about my recent order, #12345.</p>
<span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">10:02 AM</span>
</div>
<img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
</div>
<!-- Receiver Message with Image -->
<div class="flex items-end justify-start animate-fade-in-down">
<img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
<div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
<p>Certainly! Could you please provide your full name and the email address associated with the order?</p>
<img src="https://picsum.photos/id/237/200/150" alt="Order details" class="mt-2 rounded-md transition-all duration-300 ease-in-out transform hover:scale-105" />
<span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:05 AM</span>
</div>
</div>
<!-- Sender Message with Typing Indicator -->
<div class="flex items-end justify-end animate-fade-in-up">
<div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transform origin-bottom-right">
<div class="flex items-center space-x-1">
<span class="h-2 w-2 bg-white rounded-full animate-bounce-dot"></span>
<span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-200"></span>
<span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-400"></span>
</div>
<span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">Typing...</span>
</div>
<img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
</div>
</div>
<!-- Message Input -->
<div class="bg-cyan-500 dark:bg-cyan-700 p-4 flex items-center shadow-lg">
<input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out transform focus:scale-105" />
<button class="ml-4 bg-blue-500 dark:bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 transform hover:scale-110 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.543 60.543 0 0018.445-8.986.75.75 0 000-1.218A60.543 60.543 0 003.478 2.405z" />
</svg>
</button>
</div>
</div>
<!-- Custom Tailwind CSS for microinteractions and scrollbar styling -->
<style>
@keyframes pulse-slow {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.animate-pulse-slow {
animation: pulse-slow 3s infinite ease-in-out;
}
@keyframes ping-slow {
0% {
transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(2.2);
opacity: 0;
}
}
.animate-ping-slow {
animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes slide-in-bottom {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.animate-slide-in-bottom {
animation: slide-in-bottom 0.5s ease-out;
}
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-down {
animation: fade-in-down 0.5s ease-out;
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.5s ease-out;
}
@keyframes bounce-dot {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
}
.animate-bounce-dot {
animation: bounce-dot 1.4s infinite ease-in-out both;
}
.animation-delay-200 {
animation-delay: 0.2s;
}
.animation-delay-400 {
animation-delay: 0.4s;
}
/* Custom Scrollbar Styles */
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: #cbd5e0 #f7fafc; /* thumb track */
}
.dark .scrollbar-thin {
scrollbar-color: #4a5568 #1a202c; /* thumb track for dark mode */
}
.scrollbar-thin::-webkit-scrollbar {
width: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: #f7fafc; /* Light mode track */
border-radius: 10px;
}
.dark .scrollbar-thin::-webkit-scrollbar-track {
background: #1a202c; /* Dark mode track */
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: #cbd5e0; /* Light mode thumb */
border-radius: 10px;
border: 2px solid #f7fafc; /* Light mode border around thumb */
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
background-color: #4a5568; /* Dark mode thumb */
border: 2px solid #1a202c; /* Dark mode border around thumb */
}
</style>
