Chat Window Component

<div class="flex flex-col h-[500px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden font-sans">

  <!-- Chat Header -->
  <div class="flex items-center justify-between p-4 bg-blue-600 dark:bg-blue-800 text-white shadow-md">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full border-2 border-white dark:border-blue-300" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div>
        <p class="font-semibold text-lg">Support Agent</p>
        <p class="text-sm text-blue-100 dark:text-blue-200">Online</p>
      </div>
    </div>
    <button class="text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 rounded-full p-1">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Chat Messages Area -->
  <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-blue-50 dark:bg-gray-700">

    <!-- Incoming Message Example -->
    <div class="flex items-end">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div class="bg-blue-200 dark:bg-blue-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">Hello! How can I assist you with your fashion queries today?</p>
        <span class="text-xs text-gray-500 dark:text-blue-100 block text-right mt-1">10:00 AM</span>
      </div>
    </div>

    <!-- Outgoing Message Example -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">I'm looking for advice on styling a new dress for a professional event.</p>
        <span class="text-xs text-blue-100 dark:text-blue-200 block text-right mt-1">10:02 AM</span>
      </div>
    </div>

    <!-- Incoming Message Example 2 -->
    <div class="flex items-end">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div class="bg-blue-200 dark:bg-blue-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">Certainly! Could you tell me more about the dress's color and cut?</p>
        <span class="text-xs text-gray-500 dark:text-blue-100 block text-right mt-1">10:03 AM</span>
      </div>
    </div>

  </div>

  <!-- Chat Input Area -->
  <div class="flex items-center p-4 bg-blue-100 dark:bg-gray-900 border-t border-blue-200 dark:border-gray-700">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full border border-blue-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 text-sm">
    <button class="ml-3 p-3 bg-blue-600 dark:bg-blue-700 text-white rounded-full hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-900">
      <svg class="w-5 h-5 -rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </button>
  </div>

</div>