Chat Window Component

<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>