https://neobrutalism.com/pl/blocks/ai/ai-chat-assistant-interface
Interfejs czatu z asystentem AI
Sztuczna inteligencja · Kod źródłowy Pro
Kompletny interfejs czatu w jednym pliku: pasek nagłówka z tytułem i szybkimi kontrolkami, przewijany wątek dymków użytkownika i asystenta z własną pozycją przewijania, trzykropkowy wskaźnik pisania w trakcie oczekiwania na odpowiedź oraz pole wysyłające po Enter, a nową linię dodające po Shift+Enter. Odpowiedź jest atrapą opartą na timeout, więc blok działa bez backendu i pokazuje każdy stan potrzebny prawdziwej integracji.
Sztuczna inteligencja
Interfejs czatu z asystentem AIOtwórz podgląd na żywo
- Hero, cenniki i auth
- Podgląd każdego punktu przerwania
- Skopiuj kod źródłowy
- MCP gotowy do instalacji
- Radix · Base UI · React Aria
- 158 gotowe bloki
- Sekcje strony, które są dostarczane
- Panele kontrolne i marketing
- Pro odblokowuje kod
- Układy typu „drop-in”
Uwielbiane przez deweloperów, projektantów
i twórców
Natknąłem się na twój UI kit i od razu go wziąłem. Projekt nowy, aktywnie rozwijany i wciąż ulepszany — kawał dobrej roboty! 🤘
Ziv Reich, Programista Chciałem tylko powiedzieć: świetna robota z neobrutalism.com. Naprawdę mi się podoba. Jestem beznadziejny w projektowaniu, więc to był strzał w dziesiątkę. Użyłem tego na swojej prywatnej stronie.
Paul Bratslavsky, Twórca Coding With Paul W końcu przebudowałem swoją prywatną stronę z Neobrutalism.com — fajna biblioteka, super łatwy start!
Cameron Blackwood, Twórca treści Neobrutalism.com to jedna z moich ulubionych bibliotek komponentów UI w stylu retro — komponenty, które naprawdę się shipuje.
Zhengyang Hou, Indie hacker jedna z moich ulubionych bibliotek ui do weba. świetna robota — oby projekt szedł coraz dalej.
Taseen Tanvir, Założyciel i projektant Właśnie wypróbowałem Neobrutalism.com Pro — UI kit, który nie wygląda jak wszystko inne. Neobrutalistyczne bloki 🔥 przyspieszyły prototypowanie dziwnych układów.
Nitesh Padghan, Ghostwriter Piękny design landing page z idealną równowagą i flow. Paleta kolorów w połączeniu z animacjami tworzy wyjątkowe doświadczenie użytkownika.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Jestem naprawdę pod wrażeniem designu, który dostarczyli. Finalny produkt dokładnie odpowiadał temu, co sobie wyobrażałem.
Desmond, Współzałożyciel @ VectorlabsVentures Jako właściciel agencji zwykle spędzam tygodnie na dopracowywaniu layoutów landingów dla klientów. Z Neobrutalism.com wkładam szablon, poprawiam copy i jestem gotowy do publikacji.
Duke Opoku Amankwah, Założyciel @ Midas Szablony nie tylko wyglądają rewelacyjnie — są też niesamowicie dobrze ustrukturyzowane. Oszczędziły nam tygodnie pracy deweloperskiej.
Abiola Braimah, Developer @ Studio IX Wybitna jakość i dbałość o detale. Responsywny design działa bez zarzutu na wszystkich urządzeniach.
Acromond X., Współzałożyciel @ VectorlabsVentures Włączenie tych szablonów do naszego workflow znacząco skróciło cykl rozwoju. Świetna robota.
Raquib S., Backend developer Te szablony stały się naszym podstawowym źródłem. Kod jest czysty, dobrze udokumentowany i łatwy do dostosowania.
Hallic M., Developer @ AtlasLabs Szablony Neobrutalism.com trafiają w idealną równowagę między estetyką a funkcjonalnością. Prawdziwy game-changer dla naszych projektów.
Ibrahim S., Frontend Lead @ ScaleUp Wybitne wsparcie i szablony premium. ROI tych szablonów jest fenomenalne.
Kevin K., CEO @ WebCraft Szablony Neobrutalism.com całkowicie zmieniły sposób, w jaki podchodzimy do projektów klientów. Jakość kodu jest wyjątkowa, a designy naprawdę world-class.
Danny G., Założyciel DevStack Korzystałem z wielu bibliotek szablonów, ale Neobrutalism.com wyróżnia się dbałością o optymalizację wydajności i czystą architekturę kodu.
Ian D., CTO w Wavelength Animacje i mikrointerakcje w tych szablonach są absolutnie oszałamiające. Najlepsza inwestycja dla naszego zespołu designu.
Ben S., Lead Designer w PixelPerfect Jako nietechniczny founder, szablony Neobrutalism.com pomogły nam uruchomić MVP w rekordowym czasie bez kompromisów w jakości designu. Nasi inwestorzy byli zachwyceni.
Matthew I., Założyciel startupu Doceniam, jak modularne i dobrze udokumentowane są te komponenty. Bez tarcia mieszamy elementy z różnych szablonów.
Garrett P., Frontend Lead w TechFusion ROI szablonów Neobrutalism.com jest niesamowite. Dramatycznie skróciliśmy czas developmentu, dostarczając klientom strony wyższej jakości.
Xavier C., Właściciel agencji
Najczęściej zadawane
pytania
Jak zbudowany jest blok Interfejs czatu z asystentem AI, co można zmienić i kiedy go używać zamiast innych układów tutaj.
Nie. handleSend dodaje wiadomość odwiedzającego, ustawia isReplying, a setTimeout po 1,5 sekundy zwraca jedną gotową linię tekstu. To jest miejsce do podmiany: zastąp timeout własnym wywołaniem fetch lub streamingiem i zachowaj flagę isReplying, bo od niej zależy wskaźnik pisania, zablokowany przycisk wysyłania i zachowanie przewijania.
Każda wiadomość ma id, nadawcę user lub assistant, treść oraz zarówno czas do wyświetlenia, jak i czytelny dla maszyn dateTime dla elementu time. Czas jest formatowany w momencie tworzenia wiadomości, a nie podczas renderowania, bo formatowanie obiektu Date w trakcie renderu sprawia, że serwer i przeglądarka nie zgadzają się co do strefy czasowej, a React zgłasza przy ładowaniu niezgodność hydracji.
Panel ma h-[36rem] na telefonach i h-[44rem] od sm w górę, a jedyną przewijaną częścią jest wątek między nagłówkiem a polem wysyłania. Zarówno nagłówek, jak i pole wysyłania to elementy flex o stałej wysokości, więc zmiana wysokości panelu wpływa tylko na to, ile wątku jest widoczne. Użyj jednostki viewport, np. h-[80vh], jeśli ma wypełniać całą stronę, a nie siedzieć w sekcji.
Tak — to trzy wpisy w tablicy composerActions, każdy z etykietą i ikoną, więc usunięcie wpisu usuwa przycisk. Mają wymiary kwadratu 44px, bo to minimalny wygodny obszar dotyku, a każdy ma aria-label, przy czym jego ikona jest oznaczona aria-hidden, ponieważ sama ikona nie ma dostępnej nazwy. Celowo są to przyciski outline, więc jedynie przycisk wysyłania czyta się jako primary.
Wcześniejsza wersja barwiła je za pomocą bg-chart-1, bg-chart-5 i bg-chart-2, a ikony drukowała na wierzchu. Tokeny wykresu mają różne wartości w jasnym i ciemnym motywie, więc te ikony były czytelne w jednym motywie, a niemal niewidoczne w drugim. Każda kolorowa powierzchnia używa teraz pary tokenów — bg-primary z text-primary-foreground, bg-card z text-card-foreground — co utrzymuje stały kontrast bez względu na zmianę palety.
Wątek ma role log z aria-live polite, więc czytnik ekranu ogłasza nowe wiadomości bez przerywania, a wskaźnik pisania niesie wizualnie ukrytą linię Assistant is typing zamiast polegać wyłącznie na trzech animowanych kropkach. Przewijanie ustawia scrollTop bezpośrednio na wątku, zamiast wywoływać scrollIntoView, i to dopiero po pierwszej wysłanej wiadomości — scrollIntoView przy ładowaniu przeciągnęłoby całą stronę do tego bloku.