https://neobrutalism.com/tr/blocks/ai/ai-chat-assistant-interface
Yapay Zekâ Sohbet Arayüzü
Yapay Zekâ · Pro kaynağı
Tek bir dosyada eksiksiz bir sohbet yüzeyi: hızlı kontroller içeren başlıklı bir üst çubuk, kendi kaydırma konumunu koruyan kullanıcı ve asistan baloncuklarından oluşan kaydırılabilir bir ileti dizisi, bir yanıt beklenirken üç noktalı bir yazıyor göstergesi ve Enter ile gönderen, Shift ve Enter ile yeni satır ekleyen bir yazım alanı. Yanıt bir zaman aşımıyla taklit edilir, bu yüzden blok arka uç olmadan çalışır ve gerçek bir entegrasyonun ihtiyaç duyduğu her durumu gösterir.
Yapay Zekâ
Yapay Zekâ Sohbet ArayüzüCanlı önizlemeyi aç
- Hero, fiyatlandırma ve auth
- Her duraklama noktasını önizle
- Kaynağı kopyala
- MCP kuruluma hazır
- Radix · Base UI · React Aria
- 158 hazır bloklar
- Gönderilen sayfa bölümleri
- Gösterge panelleri ve pazarlama
- Pro şifreyi açar
- Açılır düzenler
Sevilen bir topluluk:
geliştiriciler, tasarımcılar ve üreticiler
Bir UI kitine denk geldim ve hemen aldım. Yeni, aktif sürdürülüyor ve sürekli gelişiyor — harika bir iş! 🤘
Ziv Reich, Yazılım Geliştirici Sadece şunu söylemek istedim: neobrutalism.com harika olmuş. Gerçekten çok beğendim. Tasarımda berbatım, bu yüzden bu benim için müthiş oldu. Kişisel sitemde kullandım.
Paul Bratslavsky, Coding With Paul'ün yaratıcısı Sonunda kişisel web sitemi Neobrutalism.com ile yeniden yaptım — eğlenceli kütüphane, başlamak çok kolay!
Cameron Blackwood, İçerik Üreticisi Neobrutalism.com, retro tarzındaki en sevdiğim UI bileşen kütüphanelerinden biri — gerçekten ship edilebilen bileşenler.
Zhengyang Hou, Indie Hacker web için en sevdiğim ui kütüphanelerinden biri. harika iş — umarım çok daha ileri gider.
Taseen Tanvir, Kurucu ve Tasarımcı Neobrutalism.com Pro'yu denedim — her şeye benzemeyen bir UI kiti. Neobrütalist bloklar 🔥 tuhaf düzenleri prototiplemeyi çok hızlandırdı.
Nitesh Padghan, Ghostwriter Mükemmel denge ve akışa sahip harika bir landing page tasarımı. Renk paleti animasyonlarla birleşince olağanüstü bir kullanıcı deneyimi yaratıyor.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Sundukları tasarımdan gerçekten etkilendim. Nihai ürün tam olarak hayal ettiğimle örtüştü.
Desmond, Kurucu ortak @ VectorlabsVentures Bir ajans sahibi olarak müşteriler için landing page düzenlerini genelde haftalarca cilalarım. Neobrutalism.com ile bir şablon takıyorum, metni ayarlıyorum ve ship etmeye hazırım.
Duke Opoku Amankwah, Kurucu @ Midas Şablonlar yalnızca görsel olarak çarpıcı değil; aynı zamanda inanılmaz iyi yapılandırılmış. Bize haftalarca geliştirme süresi kazandırdı.
Abiola Braimah, Geliştirici @ Studio IX Üstün kalite ve detaylara özen. Responsive tasarım tüm cihazlarda sorunsuz çalışıyor.
Acromond X., Kurucu ortak @ VectorlabsVentures Bu şablonları iş akışımıza entegre etmek geliştirme döngümüzü ciddi şekilde kısalttı. Mükemmel iş.
Raquib S., Backend geliştirici Bu şablonlar başvurduğumuz ana kaynağımız oldu. Kod temiz, iyi belgelenmiş ve kolayca özelleştirilebilir.
Hallic M., Geliştirici @ AtlasLabs Neobrutalism.com şablonları estetik ile işlevsellik arasında mükemmel dengeyi kuruyor. Projelerimiz için gerçek bir dönüm noktası.
Ibrahim S., Frontend Lead @ ScaleUp Üstün destek ve premium kalitede şablonlar. Bu şablonların ROI’si fenomenal.
Kevin K., CEO @ WebCraft Neobrutalism.com şablonları yeni müşteri projelerine yaklaşımımızı tamamen değiştirdi. Kod kalitesi olağanüstü, tasarımlar gerçekten dünya standartlarında.
Danny G., DevStack kurucusu Birçok şablon kütüphanesi kullandım ama Neobrutalism.com performans optimizasyonu ve temiz kod mimarisine verdiği önemle öne çıkıyor.
Ian D., Wavelength CTO’su Bu şablonlardaki animasyonlar ve mikro etkileşimler gerçekten büyüleyici. Tasarım ekibimiz için en iyi yatırım.
Ben S., PixelPerfect Lead Designer Teknik olmayan bir kurucu olarak Neobrutalism.com şablonları, tasarım kalitesinden ödün vermeden MVP’mizi rekor sürede çıkarmamıza yardımcı oldu. Yatırımcılarımız çok etkilendi.
Matthew I., Startup kurucusu Bu bileşenlerin ne kadar modüler ve iyi belgelenmiş olduğunu takdir ediyorum. Farklı şablonlardan parçaları sorunsuzca birleştirebildik.
Garrett P., TechFusion Frontend Lead Neobrutalism.com şablonlarının ROI’si inanılmaz. Geliştirme süremizi ciddi şekilde kısaltırken müşterilere daha yüksek kaliteli siteler teslim ediyoruz.
Xavier C., Ajans sahibi
Sıkça sorulan
sorular
Bu Yapay Zekâ Sohbet Arayüzü bloğunun nasıl bir araya getirildiği, ne değiştirebileceğiniz ve burada diğer düzenler yerine ne zaman kullanması gerektiği.
Hayır. handleSend ziyaretçinin iletisini ekler, isReplying'i ayarlar ve bir setTimeout 1,5 saniye sonra hazır bir satır döndürür. Değiştirilmesi gereken nokta burasıdır: zaman aşımını kendi fetch veya akış çağrınızla değiştirin ve isReplying bayrağını koruyun, çünkü yazıyor göstergesi, devre dışı gönder düğmesi ve kaydırma davranışının tümü buna bağlıdır.
Her ileti bir id, user veya assistant gönderen, içerik ve hem görüntülenen bir zaman hem de time öğesi için makine tarafından okunabilir bir dateTime içerir. Zaman, render sırasında değil ileti oluşturulduğunda biçimlendirilir, çünkü render sırasında bir Date'i biçimlendirmek sunucu ile tarayıcıyı saat dilimi konusunda anlaşmazlığa düşürür ve React yüklemede bir hidrasyon uyuşmazlığı bildirir.
Panel telefonlarda h-[36rem], sm'den itibaren h-[44rem]'dir ve başlık ile yazım alanı arasındaki ileti dizisi kaydırılan tek kısımdır. Hem başlık hem de yazım alanı sabit yükseklikli flex alt öğeleridir, bu yüzden panel yüksekliğini değiştirmek yalnızca görünen ileti miktarını değiştirir. Bir bölüm içinde oturmak yerine bir sayfayı doldurmasını istiyorsanız h-[80vh] gibi bir görünüm alanı birimi kullanın.
Evet — bunlar composerActions dizisinde her biri bir etiket ve bir simgeye sahip üç kayıttır, bu yüzden bir kaydı silmek düğmeyi kaldırır. En küçük rahat dokunma hedefi oldukları için 44px karedirler ve her birinin, simgesi aria-hidden işaretlenmiş bir aria-label'ı vardır, çünkü tek başına bir simgenin erişilebilir adı yoktur. Kasıtlı olarak anahat düğmelerdir, böylece yalnızca gönder düğmesi birincil olarak okunur.
Önceki bir sürüm onları bg-chart-1, bg-chart-5 ve bg-chart-2 ile renklendirip üzerine simgeler basıyordu. Grafik belirteçleri açık ve koyu temada farklı değerler taşır, bu yüzden bu simgeler bir temada okunaklı, diğerinde neredeyse görünmezdi. Buradaki her renkli yüzey artık bir belirteç çifti kullanır — bg-primary ile text-primary-foreground, bg-card ile text-card-foreground — bu da palet ne şekilde değişirse değişsin kontrastı sabit tutar.
İleti dizisi, aria-live polite ile bir role log'dur, bu yüzden bir ekran okuyucu araya girmeden gelen iletileri duyurur ve yazıyor göstergesi, üç canlandırılmış nokta yerine görsel olarak gizli bir Asistan yazıyor satırı taşır. Kaydırma, scrollIntoView çağırmak yerine ileti dizisinin kendisinde scrollTop ayarlar ve yalnızca ilk gönderimden sonra — scrollIntoView, yüklemede tüm sayfayı bu bloğa sürüklerdi.