Chat Window 구성 요소

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl">
    <!-- Chat Header -->
    <div class="flex items-center justify-between p-4 bg-lime-100 dark:bg-lime-800 border-b border-lime-200 dark:border-lime-700">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-white dark:border-gray-800 mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div>
          <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-100">Travel Agent Support</h3>
          <p class="text-sm text-lime-700 dark:text-lime-200">Online</p>
        </div>
      </div>
      <button class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Chat Body -->
    <div class="h-80 overflow-y-auto p-4 bg-lime-50 dark:bg-gray-700 transition-colors duration-200">
      <!-- Incoming Message -->
      <div class="flex items-start mb-4">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div class="bg-white dark:bg-gray-600 p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-gray-800 dark:text-gray-100">Hello! How can I assist you with your travel plans today?</p>
          <span class="block text-right text-xs text-gray-500 dark:text-gray-300 mt-1">10:00 AM</span>
        </div>
      </div>

      <!-- Outgoing Message -->
      <div class="flex justify-end mb-4">
        <div class="bg-lime-200 dark:bg-lime-600 p-3 rounded-tl-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-lime-900 dark:text-lime-50">Hi there! I'm planning a trip to Europe next summer and need some advice on itineraries.</p>
          <span class="block text-left text-xs text-lime-700 dark:text-lime-200 mt-1">10:02 AM</span>
        </div>
      </div>

      <!-- Incoming Message -->
      <div class="flex items-start mb-4">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div class="bg-white dark:bg-gray-600 p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-gray-800 dark:text-gray-100">Excellent! Europe offers so many possibilities. Are you looking for historical tours, scenic routes, or something more adventurous?</p>
          <span class="block text-right text-xs text-gray-500 dark:text-gray-300 mt-1">10:05 AM</span>
        </div>
      </div>
    </div>

    <!-- Chat Footer (Input Area) -->
    <div class="p-4 bg-lime-100 dark:bg-lime-800 border-t border-lime-200 dark:border-lime-700 flex items-center">
      <input type="text" placeholder="Type your message..." class="flex-grow p-3 rounded-full border border-lime-300 dark:border-lime-600 bg-white dark:bg-lime-700 text-lime-900 dark:text-lime-50 placeholder-lime-500 dark:placeholder-lime-300 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent transition-all duration-200">
      <button class="ml-3 p-3 bg-lime-500 dark:bg-lime-400 text-white rounded-full hover:bg-lime-600 dark:hover:bg-lime-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>