Migliori chat blocks 2026: 6 sezioni verificate

Un blocco chat è una conversazione disegnata, senza trasporto dei messaggi. Il catalogo ne ha 6 da 4 registry, misurati il 1 novembre 2026 su /api/blocks/category/chat; uno solo arriva a sette file e vale la pena guardarlo per primo.

Il problema che nessuna demo mostra

Nella preview il thread ha quattro messaggi e sta fermo. In produzione ne ha quattrocento e si muove. Il primo guasto è lo scorrimento: se il componente chiama lo scroll verso il fondo a ogni render, chi sta leggendo un messaggio vecchio viene riportato in basso appena arriva una notifica, e perde il punto. Il secondo è la tastiera: Invio invia, Maiusc più Invio va a capo, e se il blocco non distingue i due casi scrivi messaggi troncati.

Il terzo guasto è la duplicazione. Con un invio ottimistico il messaggio compare subito nell'elenco, poi il server risponde con lo stesso testo e il componente lo aggiunge di nuovo. Il quarto è l'accessibilità: un messaggio nuovo che appare in fondo senza regione live non viene annunciato, e chi non vede lo schermo non sa che è arrivata una risposta.

I segnali da controllare nel codice

• Dove avviene lo scorrimento: su effetto di ogni messaggio o solo quando l'utente è già in fondo.
• Se il compositore è un file separato, così puoi sostituirlo senza toccare la lista dei messaggi.
• Se la textarea cresce con il testo e si ferma a un'altezza massima, invece di espandersi oltre il viewport.
• Se ogni messaggio ha un orario con datetime e un identificativo stabile, necessario per la riconciliazione.
• La licenza del publisher, perché i quattro registry non dichiarano gli stessi termini.

La dimensione del blocco cambia il tipo di lavoro. Con un file solo costruisci tu l'elenco delle conversazioni, il passaggio da una all'altra e lo stato di scrittura. Con sette file hai già la struttura, ma erediti anche scelte che non hai fatto: dove sta il pulsante di invio su mobile, quanto spazio occupa l'intestazione, come si comporta l'elenco su tablet.

Il limite dichiarato

Nessuno dei 6 blocchi porta il trasporto: non c'è WebSocket, non c'è polling, non c'è coda di ritentativi. La macchina a stati di un messaggio, cioè in invio, inviato, fallito, ritentato, è tutta da scrivere, ed è la parte che determina se l'interfaccia mente all'utente. Il secondo limite è la licenza del publisher, che copre il blocco e non le librerie che importa.

La regola per non rifare l'elenco

Se il thread resta sotto i duecento messaggi e non ha allegati, prendi il blocco da un file e scrivi il compositore a parte. Se servono allegati, ritentativi e più conversazioni, parti dal blocco da sette file e cancella ciò che non usi: è più veloce togliere che aggiungere, ma solo se il codice è leggibile. In entrambi i casi la virtualizzazione della lista è una decisione tua, non del blocco.

L'alternativa è un componente testa di serie per il registro messaggi, con il tuo trasporto sopra. Costa più righe all'inizio e ti lascia il controllo su scorrimento, annunci e ritentativi, che sono esattamente i tre punti in cui un blocco copiato si rompe. Il blocco resta comodo per la bolla, i timestamp e la spaziatura, che sono la parte noiosa e visivamente più visibile.

Un ultimo dettaglio riguarda gli allegati e le immagini. Un blocco che mostra solo testo non ha né un segnaposto per il file in caricamento né un modo per indicare una dimensione massima, e in produzione gli utenti caricano file da venti megabyte. Prima di scegliere, guarda se il compositore ha un pulsante per gli allegati e se la bolla del messaggio riserva spazio all'immagine: sono due dettagli che costano poco e che nessuno aggiunge dopo.

curl "https://ui.eneawork.it/api/blocks/category/chat?limit=10"

I thread pronti sono in /blocks/category/chat, i campi di testo in /components/cat/form e gli avatar in /icons. Per l'accessibilità leggi la checklist dei componenti React e per le transizioni transizioni in React; il confronto tra blocco pronto e componente headless è in copy-paste o headless.