チャットウィンドウコンポーネント

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden flex flex-col h-[70vh] md:h-[80vh] lg:h-[75vh]">
    <!-- Chat Header -->
    <div class="flex items-center justify-between p-4 bg-orange-700 dark:bg-orange-900 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-gray-300" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Chat User Avatar">
        <h2 class="text-lg font-semibold">Sarah Jenkins</h2>
      </div>
      <div class="flex space-x-3">
        <button aria-label="Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
          </svg>
        </button>
        <button aria-label="Video Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <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 10l4.872-3.248A1 1 0 0122 7.744v8.512a1 1 0 01-2.128.536L15 14m-5 4v-4a4 4 0 014-4h.5a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5H10zm0 0a2 2 0 100-4 2 2 0 000 4z"/>
          </svg>
        </button>
        <button aria-label="More Options" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Chat Body (Messages) -->
    <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-800 scrollbar-thumb-orange-800 dark:scrollbar-thumb-orange-600 scrollbar-track-orange-100 dark:scrollbar-track-gray-700 scrollbar-thin">

      <!-- Received Message -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">Hello! Thank you so much for reaching out. We appreciate your interest in our 'Harvest Hope' initiative.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
        </div>
      </div>

      <!-- Sent Message -->
      <div class="flex items-end justify-end">
        <div class="bg-orange-600 dark:bg-orange-700 text-white p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
          <p class="text-sm">I'm excited to learn more! How can I make a donation, and what impact will it have?</p>
          <span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:07 AM</span>
        </div>
      </div>

      <!-- Received Message with longer text -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">You can donate directly through our website at <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">[Your Charity Website Link]</a>. Every contribution helps us provide food, shelter, and education to those in need, especially during this season.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:08 AM</span>
        </div>
      </div>

      <!-- Sent Message with image -->
      <div class="flex items-end justify-end">
        <div class="bg-orange-600 dark:bg-orange-700 text-white p-2 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
          <img src="https://picsum.photos/300/200?random=1" alt="Image attachment" class="rounded-lg mb-2 shadow-lg w-full h-auto object-cover">
          <p class="text-sm">This looks like a wonderful cause! Here's a photo from our recent charity drive to share some inspiration.</p>
          <span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:10 AM</span>
        </div>
      </div>

      <!-- Received message with another user -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Another User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">Thanks for sharing that, John! It's inspiring to see the community come together.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:12 AM</span>
        </div>
      </div>

    </div>

    <!-- Chat Input -->
    <div class="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-inner flex items-center space-x-2">
      <button aria-label="Attach File" class="p-2 text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 rounded-full">
        <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" />
        </svg>
      </button>
      <input type="text" placeholder="Type a message..." aria-label="Chat message input" class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:border-transparent text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400">
      <button aria-label="Send Message" class="p-2 bg-orange-600 dark:bg-orange-700 text-white rounded-full shadow-md hover:bg-orange-700 dark:hover:bg-orange-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-45 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom scrollbar for Webkit browsers */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--tw-scrollbar-track-color, transparent);
    border-radius: 10px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--tw-scrollbar-thumb-color);
    border-radius: 10px;
    border: 2px solid var(--tw-scrollbar-track-color, transparent);
  }

  /* Fallback for Firefox and other browsers, using standard properties where possible */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-scrollbar-thumb-color) var(--tw-scrollbar-track-color);
  }

  /* Tailwind utility classes for scrollbar */
  .scrollbar-thumb-orange-800 {
    --tw-scrollbar-thumb-color: #9A3412;
  }
  .dark\:scrollbar-thumb-orange-600 {
    --tw-scrollbar-thumb-color: #DDAA55;
  }
  .scrollbar-track-orange-100 {
    --tw-scrollbar-track-color: #FFF7ED;
  }
  .dark\:scrollbar-track-gray-700 {
    --tw-scrollbar-track-color: #374151;
  }

  /* Material Design-inspired blob shapes for message bubbles */
  .material-blob-left {
    border-top-left-radius: 4px; /* Slight adjustment for a less sharp corner */
  }
  .material-blob-right {
    border-top-right-radius: 4px; /* Slight adjustment for a less sharp corner */
  }
</style>