<div class="max-w-xl mx-auto bg-white rounded-md p-4 shadow-md">
  <!-- AI Assistant heading with online status -->
  <div class="flex items-center mb-4">
    <div class="w-3 h-3 bg-green-400 rounded-full mr-2"></div>
    <h2 class="text-gray-700 font-semibold">AI Assistant</h2>
  </div>
  <!-- User message -->
  <div class="flex items-start mb-4">
    <img src="https://ui-avatars.com/api/?name=John+Doe" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
    <div class="bg-blue-500 rounded-lg p-2">
      <p class="text-white">Hi! How can I help you?</p>
    </div>
  </div>

  <!-- AI message -->
  <div class="flex items-start justify-end mb-4">
    <div class="bg-gray-50 rounded-lg p-2">
      <p class="text-gray-800">Sure! I'm here to assist you.</p>
    </div>
    <img src="https://ui-avatars.com/api/?name=AI" alt="AI Avatar" class="w-8 h-8 rounded-full ml-2">
  </div>

  <!-- User message -->
  <div class="flex items-start mb-4">
    <img src="https://ui-avatars.com/api/?name=John+Doe" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
    <div class="bg-blue-500 rounded-lg p-2">
      <p class="text-white">Need more information?</p>
    </div>
  </div>

  <!-- AI message -->
  <div class="flex items-start justify-end mb-4">
    <div class="bg-gray-50 rounded-lg p-2">
      <p class="text-gray-800">Of course! We offer a wide range of services...</p>
    </div>
    <img src="https://ui-avatars.com/api/?name=AI" alt="AI Avatar" class="w-8 h-8 rounded-full ml-2">
  </div>

  <!-- Input field for new message -->
  <div class="flex items-center mt-4">
    <input type="text" placeholder="Type your message..." class="flex-1 p-2 border ml-2 bg-gray-50 rounded-full">
    <button class="bg-blue-500 text-white p-2 rounded-full ml-2">Send</button>
  </div>
</div>