Componenti Finestra di chat Componente della finestra di chat

Componente della finestra di chat

Un componente reattivo della finestra di chat progettato con i principi del Material Design, con una combinazione di colori autunnali adatta a organizzazioni senza scopo di lucro/beneficenza. Include il supporto per la modalità oscura ed elementi interattivi come fumetti di messaggi e un campo di input.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente della finestra di chat

Un componente reattivo della finestra di chat con supporto per la modalità oscura, progettato per l'uso aziendale con microinterazioni sottili. Utilizza una combinazione di colori monocromatica. Non è richiesto alcun JavaScript.

Aperto

Componente della finestra di chat

Un componente semplice e reattivo per la finestra di chat con un design organico/ispirato alla natura, una combinazione di colori neon/elettrica e il supporto per la modalità scura, adatto per i sistemi di prenotazione.

Aperto

Componente della finestra di chat

Un componente della finestra di chat reattiva che mostra un moderno design 3D con colori pastello e funzionalità interattive, adatto per la visualizzazione di portfolio.

Aperto