Chat Window 구성 요소

<div class="flex flex-col h-screen antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200">
  <div class="flex flex-row items-center justify-between flex-shrink-0 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
    <div class="flex items-center gap-3">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <div class="flex flex-col">
        <div class="font-semibold">John Doe</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Active now</div>
      </div>
    </div>
    <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-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>

  <div class="flex-1 p-4 overflow-y-auto">
    <!-- Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
        <div>
          <span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
            Hey there! How are you doing?
          </span>
        </div>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-end justify-end mb-4">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-1 items-end">
        <div>
          <span class="inline-block px-4 py-2 text-white bg-blue-500 rounded-lg">
            I'm doing great, thanks for asking! How about you?
          </span>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 ml-3 rounded-full">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
        <div>
          <span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
            I'm doing good too! Just chilling and working on some projects.
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-700">
    <div class="relative flex items-center">
      <input type="text" placeholder="Type your message..." class="flex-grow w-full h-10 px-4 pr-10 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
      <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-500 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
      </button>
    </div>
  </div>
</div>