https://neobrutalism.com/it/blocks/ai/ai-chat-assistant-interface
Interfaccia chat AI
Intelligenza artificiale · Codice sorgente Pro
Una superficie di chat completa in un solo file: una barra di intestazione titolata con controlli rapidi, un thread scorrevole di fumetti utente e assistente che mantiene la propria posizione di scroll, un indicatore di digitazione a tre puntini mentre una risposta è in sospeso, e un composer che invia con Enter e va a capo con Shift più Enter. La risposta è simulata con un timeout, così il blocco funziona senza backend e mostra ogni stato di cui ha bisogno un'integrazione reale.
Intelligenza artificiale
Interfaccia chat AIApri anteprima in diretta
- Hero, prezzi e auth
- Visualizza in anteprima ogni punto di interruzione
- Copia il codice sorgente
- MCP pronto per l'installazione
- Radix · Base UI · React Aria
- 158 blocchi prefabbricati
- Sezioni della pagina incluse nella spedizione
- Dashboard e marketing
- Pro sblocca il codice
- Layout a inserimento
Amato da dev, designer
e creator
Mi sono imbattuto nel tuo kit UI e l’ho preso subito. Colpito nel vedere che è nuovo, mantenuto attivamente e migliorato di continuo. Lavoro pazzesco! 🤘
Ziv Reich, Sviluppatore software Volevo solo dire: ottimo lavoro con neobrutalism.com. Mi piace davvero. Sono negato con il design, quindi per me è stato fantastico. L’ho usato sul mio sito personale.
Paul Bratslavsky, Creatore di Coding With Paul Finalmente ho rifatto il mio sito personale con Neobrutalism.com — libreria divertente e semplicissima da iniziare!
Cameron Blackwood, Content creator Neobrutalism.com è una delle mie librerie di componenti UI retro preferite — componenti che si shippano davvero.
Zhengyang Hou, Indie hacker una delle mie librerie ui preferite per il web. ottimo lavoro — spero che vada alla grande.
Taseen Tanvir, Founder e designer Ho appena provato Neobrutalism.com Pro — un kit UI che non somiglia a tutto il resto. I blocchi neobrutalisti 🔥 hanno reso più veloce prototipare layout strani e divertenti.
Nitesh Padghan, Ghostwriter Design di landing page bellissimo, con equilibrio e flusso perfetti. La palette di colori unita alle animazioni crea un’esperienza utente eccezionale.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Sono davvero impressionato dal design che hanno consegnato. Il prodotto finale corrisponde esattamente a quello che avevo in mente.
Desmond, Co-fondatore @ VectorlabsVentures Come titolare di agenzia di solito passo settimane a rifinire i layout delle landing per i clienti. Con Neobrutalism.com inserisco un template, regolo il copy e sono pronto a pubblicare.
Duke Opoku Amankwah, Fondatore @ Midas I template non sono solo splendidi visivamente: sono anche strutturati benissimo. Ci hanno fatto risparmiare settimane di sviluppo.
Abiola Braimah, Sviluppatore @ Studio IX Qualità eccellente e attenzione ai dettagli. Il design responsive funziona alla perfezione su tutti i dispositivi.
Acromond X., Co-fondatore @ VectorlabsVentures Integrare questi template nel nostro workflow ha ridotto in modo significativo il ciclo di sviluppo. Ottimo lavoro.
Raquib S., Sviluppatore backend Questi template sono diventati la nostra risorsa di riferimento. Il codice è pulito, ben documentato e facilmente personalizzabile.
Hallic M., Sviluppatore @ AtlasLabs I template di Neobrutalism.com trovano l’equilibrio perfetto tra estetica e funzionalità. Un vero game-changer per i nostri progetti.
Ibrahim S., Frontend Lead @ ScaleUp Supporto eccellente e template di qualità premium. Il ROI di questi template è fenomenale.
Kevin K., CEO @ WebCraft I template di Neobrutalism.com hanno trasformato del tutto il modo in cui affrontiamo i progetti clienti. La qualità del codice è eccezionale e i design sono di prim’ordine.
Danny G., Fondatore di DevStack Ho usato molte librerie di template, ma Neobrutalism.com si distingue per l’attenzione all’ottimizzazione delle performance e a un’architettura di codice pulita.
Ian D., CTO di Wavelength Le animazioni e le micro-interazioni di questi template sono assolutamente stupefacenti. Il miglior investimento per il nostro team design.
Ben S., Lead Designer di PixelPerfect Come founder non tecnico, i template di Neobrutalism.com ci hanno aiutato a lanciare l’MVP in tempi record senza scendere a compromessi sulla qualità del design. I nostri investitori sono rimasti a bocca aperta.
Matthew I., Fondatore di startup Apprezzo quanto siano modulari e ben documentati questi componenti. Abbiamo potuto mischiare pezzi di template diversi senza attriti.
Garrett P., Frontend Lead di TechFusion Il ROI dei template di Neobrutalism.com è incredibile. Abbiamo ridotto drasticamente i tempi di sviluppo consegnando siti di qualità superiore ai clienti.
Xavier C., Titolare di agenzia
Domande
frequenti
Come è composto il blocco Interfaccia chat AI, cosa puoi modificare e quando usarlo al posto degli altri layout qui.
No. handleSend accoda il messaggio del visitatore, imposta isReplying, e un setTimeout restituisce una riga precompilata dopo 1,5 secondi. Quello è il punto da sostituire: cambia il timeout con la tua fetch o chiamata in streaming e mantieni il flag isReplying, perché l'indicatore di digitazione, il pulsante di invio disabilitato e il comportamento dello scroll dipendono tutti da esso.
Ogni messaggio ha un id, un mittente user o assistant, il contenuto, e sia un orario visualizzato sia un dateTime leggibile dalla macchina per l'elemento time. L'orario viene formattato alla creazione del messaggio invece che al render, perché formattare una Date durante il render fa sì che server e browser non concordino sul fuso orario e React segnali un hydration mismatch al caricamento.
Il pannello è h-[36rem] su telefono e h-[44rem] da sm in su, e il thread tra intestazione e composer è l'unica parte che scorre. Sia l'intestazione sia il composer sono figli flex ad altezza fissa, quindi cambiare l'altezza del pannello modifica solo quanto thread è visibile. Usa un'unità di viewport come h-[80vh] se vuoi che riempia una pagina invece di stare in una sezione.
Sì: sono tre voci nell'array composerActions, ciascuna con un'etichetta e un'icona, quindi eliminare una voce rimuove il pulsante. Sono quadrati da 44px perché è il target minimo comodo al tocco, e ognuno ha un aria-label con la propria icona marcata aria-hidden, dato che un'icona da sola non ha un nome accessibile. Sono pulsanti outline di proposito, così solo il pulsante di invio si legge come primario.
Una versione precedente li tingeva con bg-chart-1, bg-chart-5 e bg-chart-2 e stampava le icone sopra. I token dei grafici hanno valori diversi in chiaro e scuro, quindi quelle icone erano leggibili in un tema e quasi invisibili nell'altro. Ogni superficie colorata qui usa ora una coppia di token, bg-primary con text-primary-foreground, bg-card con text-card-foreground, che mantiene il contrasto fisso qualunque sia la palette.
Il thread è un role log con aria-live polite, così uno screen reader annuncia gli arrivi senza interrompere, e l'indicatore di digitazione porta una riga Assistant is typing visivamente nascosta invece di affidarsi a tre puntini animati. Lo scroll imposta scrollTop sul thread stesso invece di chiamare scrollIntoView, e solo dopo il primo invio: scrollIntoView trascinerebbe l'intera pagina su questo blocco al caricamento.