Chat-Fenster-Komponente

<div class="min-h-screen bg-orange-50 dark:bg-stone-950 flex items-center justify-center p-4 sm:p-6 md:p-8 font-serif text-stone-800 dark:text-stone-300">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-900 rounded-lg shadow-xl overflow-hidden border border-stone-200 dark:border-stone-800 flex flex-col" style="box-shadow: 8px 8px 0px 0px rgba(100, 70, 0, 0.1);">

    <!-- Header -->
    <div class="p-4 bg-stone-100 dark:bg-stone-800 border-b border-stone-200 dark:border-stone-700 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div>
          <h2 class="font-bold text-lg leading-tight text-amber-800 dark:text-amber-300">Elara Vance</h2>
          <p class="text-sm text-stone-600 dark:text-stone-400">Online now</p>
        </div>
      </div>
      <div class="flex space-x-3">
        <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <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="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l.293-.293A1 1 0 017 8.586V10h4V7a1 1 0 011-1h2.586l.293-.293A1 1 0 0117 4.586V6h4a1 1 0 011 1v4a1 1 0 01-1 1h-1.586l-.293.293A1 1 0 0117 15.414V14H7a1 1 0 01-1-1v-4a1 1 0 011-1h10a1 1 0 001-1V7a1 1 0 00-1-1h-2v4z" />
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <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="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Chat Messages Container -->
    <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 bg-orange-50 dark:bg-stone-950 border-t border-b border-stone-200 dark:border-stone-800" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPGcgZmlsbD0iI0FBQjBBQiIgZmlsbC1vcGFjaXR5PSIuMDgiPgogICAgICA8cGF0aCBkPSJNNiAxOXY0Mmg0OFYxOUg2em00MCA1aDJhMSA0IDEgNCAxIDQ0LTQgMWgxMmE0IDEgNFY3SDQyem0xMiA0MmE0IDEgNCAxIDQgMWgtMzJhMSA0IDEgNC4wNi00LjA2IDEtMy45NC0xem0tNDAgNHYaMWExIDEgMSAwIDAxLjAxLS41MiAxIDEgMSAwIDAgMSA0LjE2LTQwLjMzIDEtMy44Ny0xem00Mi45NiAyYzAtMi42NiA4LjMtNC4zMiAxMi00Ljc0VjE0SDM4VjEwSDIyVjdIMTkgMi45M0E0IDEgNCAxIDQuMDIgMS4zNSA0IDEgNCAxIDQuMDJWMmgwTTAgNzBoNDh2MTJMMzYgODJMMjQgOTRMMTUgMTAzSDR6bTYwLTQwaC0xMnYxMmwxMiA4LS43NC0uNjJWMTEyem0yMCAyaDNhMSAxIDEgMCAxIDAtNiAwTTAgMGgwVjIwaDQ4djcuNjlhMSAxIDEgMCAxLS42OC41OGwtLjIyLS4wMiAxLjQ4LTQuOTZhMSA1IDEgNSAxMC4wMi0uNTQgMyAxIDMgMSAyLjItLjg0ek01MSAyMEE0IDEgNCAxIDI0LjAyIDUwem0tMjYtMTguMjNhMSA1IDEgNSAxMC4wMi0uNTQgMyAxIDMgMSAyLjItLjg0ek0xMyA3MmgwVjU2QTYgNiA2IDAgMDE2IDYySDUwYTYgNiA2IDAgMDE1LTUgNTYtNWExIDUgMSA1IDEwLjAyLS41NCazPgogICAgPC9nPgo8L3N2Zz4=');
      background-size: 60px 60px; background-repeat: repeat;">

      <!-- Received message -->
      <div class="flex items-start">
        <img class="w-8 h-8 rounded-full object-cover mr-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="bg-stone-100 dark:bg-stone-800 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-stone-200 dark:border-stone-700 relative text-sm sm:text-base">
          <p>Hey there! Your profile looked really interesting. I love your passion for classic literature.</p>
          <span class="absolute bottom-1 right-2 text-xs text-stone-500 dark:text-stone-400">10:30 AM</span>
        </div>
      </div>

      <!-- Sent message -->
      <div class="flex justify-end items-end">
        <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-amber-200 dark:border-amber-700 relative text-sm sm:text-base">
          <p>Oh, thank you! I spend a lot of time in libraries. What kind of books are you into?</p>
          <span class="absolute bottom-1 left-2 text-xs text-stone-500 dark:text-stone-400">10:32 AM</span>
        </div>
        <img class="w-8 h-8 rounded-full object-cover ml-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/8.jpg" alt="My Avatar">
      </div>

      <!-- Received message with image -->
      <div class="flex items-start">
        <img class="w-8 h-8 rounded-full object-cover mr-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="bg-stone-100 dark:bg-stone-800 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-stone-200 dark:border-stone-700 relative text-sm sm:text-base">
          <p>I'm a big fan of historical fiction and anything that transports me to another era.</p>
          <img src="https://picsum.photos/300/200?random=1" alt="Shared Image" class="mt-2 rounded-lg object-cover w-full h-auto max-h-48">
          <span class="absolute bottom-1 right-2 text-xs text-stone-500 dark:text-stone-400">10:35 AM</span>
        </div>
      </div>

      <!-- Sent message -->
      <div class="flex justify-end items-end">
        <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-amber-200 dark:border-amber-700 relative text-sm sm:text-base">
          <p>That's awesome! I just finished 'The Nightingale' by Kristin Hannah. Have you read it?</p>
          <span class="absolute bottom-1 left-2 text-xs text-stone-500 dark:text-stone-400">10:38 AM</span>
        </div>
        <img class="w-8 h-8 rounded-full object-cover ml-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/8.jpg" alt="My Avatar">
      </div>

    </div>

    <!-- Message Input -->
    <div class="p-4 bg-stone-100 dark:bg-stone-800 border-t border-stone-200 dark:border-stone-700 flex items-center space-x-3">
      <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
        <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.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" />
        </svg>
      </button>
      <input type="text" placeholder="Type your message..." class="flex-1 py-2 px-4 rounded-full bg-white dark:bg-stone-900 border border-stone-300 dark:border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm sm:text-base placeholder:text-stone-500 dark:placeholder:text-stone-400">
      <button class="p-2 rounded-full bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
      </button>
    </div>

  </div>
</div>