https://neobrutalism.com/hi/blocks/ai/ai-chat-assistant-interface
AI चैट असिस्टेंट इंटरफ़ेस
आर्टिफ़िशियल इंटेलिजेंस · Pro सोर्स
एक फ़ाइल में पूरी चैट सतह: क्विक कंट्रोल वाली एक टाइटल हेडर बार, यूज़र और असिस्टेंट बबल की स्क्रॉलिंग थ्रेड जो अपनी स्क्रॉल पोज़िशन खुद रखती है, जवाब पेंडिंग होने पर तीन-डॉट टाइपिंग इंडिकेटर, और एक कंपोज़र जो Enter पर भेजता है और Shift और Enter पर नई लाइन जोड़ता है। जवाब एक टाइमआउट से स्टब किया गया है, इसलिए यह ब्लॉक बिना बैकएंड के चलता है और वे सभी स्टेट दिखाता है जो किसी असली इंटीग्रेशन को चाहिए होते हैं।
आर्टिफ़िशियल इंटेलिजेंस
AI चैट असिस्टेंट इंटरफ़ेसलाइव प्रीव्यू खोलें
- Hero, प्राइसिंग और auth
- हर ब्रेकपॉइंट का पूर्वावलोकन करें
- स्रोत की प्रतिलिपि बनाएँ
- MCP स्थापित करने के लिए तैयार
- Radix · Base UI · React Aria
- 158 तैयार-निर्मित ब्लॉक
- पृष्ठ के शिपिंग वाले खंड
- डैशबोर्ड और विपणन
- Pro कोड अनलॉक करता है
- ड्रॉप-इन लेआउट
पसंद डेवलपर्स, डिज़ाइनर्स
और क्रिएटर्स की
आपकी UI किट मिल गई और तुरंत ले ली। नई है, एक्टिवली मेंटेन होती है और लगातार बेहतर हो रही है — कमाल का काम! 🤘
Ziv Reich, सॉफ़्टवेयर डेवलपर बस इतना कहना था कि neobrutalism.com पर बढ़िया काम किया. सच में बहुत पसंद है. डिज़ाइन मुझसे होता नहीं, तो यह मेरे लिए कमाल की चीज़ रही. अपनी पर्सनल साइट पर इस्तेमाल किया.
Paul Bratslavsky, Coding With Paul के क्रिएटर आख़िरकार Neobrutalism.com से अपनी पर्सनल वेबसाइट फिर से बनाई — मज़ेदार लाइब्रेरी, शुरू करना बहुत आसान!
Cameron Blackwood, कंटेंट क्रिएटर Neobrutalism.com रेट्रो स्टाइल की मेरी पसंदीदा UI कंपोनेंट लाइब्रेरी में से एक है — कंपोनेंट जो सच में ship होते हैं।
Zhengyang Hou, इंडी हैकर वेब के लिए मेरी पसंदीदा ui लाइब्रेरी में से एक. बढ़िया काम — उम्मीद है यह और भी आगे जाएगी.
Taseen Tanvir, फ़ाउंडर और डिज़ाइनर Neobrutalism.com Pro आज़माया — बाक़ी से अलग UI किट, सच में ताज़गी भरी। नियोब्रूटलिज़्म ब्लॉक्स 🔥 से अजीब लेआउट का प्रोटोटाइप कहीं तेज़ हो गया।
Nitesh Padghan, घोस्टराइटर ब्यूटीफ़ुल लैंडिंग पेज डिज़ाइन, परफ़ेक्ट बैलेंस और फ्लो के साथ। कलर पैलेट और एनिमेशन मिलकर एक्सेप्शनल यूज़र एक्सपीरियंस बनाते हैं।
Alan Obeng-Peprah, Senior Designer @ NativeXAI उन्होंने जो डिज़ाइन डिलीवर किया, उससे मैं सच में इंप्रेस्ड हूँ। फ़ाइनल प्रॉडक्ट बिल्कुल वैसा ही था जैसा मैंने सोचा था।
Desmond, Co-founder @ VectorlabsVentures एजेंसी ओनर के तौर पर मैं क्लाइंट लैंडिंग लेआउट पर हफ़्ते लगा देता हूँ। Neobrutalism.com के साथ मैं टेम्प्लेट लगाता हूँ, कॉपी ट्वीक करता हूँ, और शिप के लिए तैयार।
Duke Opoku Amankwah, Founder @ Midas टेम्प्लेट सिर्फ़ विज़ुअली स्टनिंग नहीं — स्ट्रक्चर भी बहुत अच्छा है। हफ़्तों का डेवलपमेंट टाइम बचाया।
Abiola Braimah, Developer @ Studio IX आउटस्टैंडिंग क्वालिटी और डिटेल पर ध्यान। रिस्पॉन्सिव डिज़ाइन हर डिवाइस पर फ्लॉलेस काम करता है।
Acromond X., Co-founder @ VectorlabsVentures इन टेम्प्लेट को हमारे वर्कफ़्लो में जोड़ने से डेवलपमेंट साइकिल काफी कम हो गई। शानदार काम।
Raquib S., Backend Developer ये टेम्प्लेट हमारा गो-टू रिसोर्स बन गए हैं। कोड क्लीन है, अच्छी तरह डॉक्यूमेंटेड, और आसानी से कस्टमाइज़ हो जाता है।
Hallic M., Developer @ AtlasLabs Neobrutalism.com टेम्प्लेट एस्थेटिक्स और फ़ंक्शनैलिटी का परफ़ेक्ट बैलेंस रखते हैं। हमारे प्रोजेक्ट्स के लिए असली गेम-चेंजर।
Ibrahim S., Frontend Lead @ ScaleUp आउटस्टैंडिंग सपोर्ट और प्रीमियम क्वालिटी टेम्प्लेट। इन टेम्प्लेट पर ROI फ़ीनॉमिनल है।
Kevin K., CEO @ WebCraft Neobrutalism.com टेम्प्लेट ने नए क्लाइंट प्रोजेक्ट्स के अप्रोच को पूरी तरह बदल दिया। कोड क्वालिटी एक्सेप्शनल है और डिज़ाइन सच में वर्ल्ड-क्लास।
Danny G., Founder of DevStack मैंने कई टेम्प्लेट लाइब्रेरी इस्तेमाल की हैं, लेकिन Neobrutalism.com परफ़ॉर्मेंस ऑप्टिमाइज़ेशन और क्लीन कोड आर्किटेक्चर की वजह से अलग है।
Ian D., CTO at Wavelength इन टेम्प्लेट में एनिमेशन और माइक्रो-इंटरैक्शन बिल्कुल शानदार हैं। डिज़ाइन टीम के लिए बेस्ट इन्वेस्टमेंट।
Ben S., Lead Designer at PixelPerfect नॉन-टेक्निकल फ़ाउंडर के तौर पर Neobrutalism.com टेम्प्लेट ने डिज़ाइन क्वालिटी से समझौता किए बिना रिकॉर्ड समय में MVP लॉन्च करने में मदद की। हमारे इन्वेस्टर्स हैरान रह गए।
Matthew I., Startup Founder मुझे पसंद है कि ये कंपोनेंट कितने मॉड्यूलर और अच्छी तरह डॉक्यूमेंटेड हैं। अलग-अलग टेम्प्लेट के टुकड़े आसानी से मिला पाए।
Garrett P., Frontend Lead at TechFusion Neobrutalism.com टेम्प्लेट पर ROI अविश्वसनीय है। डेवलपमेंट टाइम बहुत कम हो गया और क्लाइंट्स को बेहतर क्वालिटी साइट्स मिल रही हैं।
Xavier C., Agency Owner
अक्सर पूछे
जाने वाले सवाल
AI चैट असिस्टेंट इंटरफ़ेस ब्लॉक को कैसे बनाया जाता है, आप क्या बदल सकते हैं, और इसे यहाँ अन्य लेआउट की जगह कब इस्तेमाल करें।
नहीं। handleSend विज़िटर का मैसेज जोड़ता है, isReplying सेट करता है, और 1.5 सेकंड बाद एक setTimeout एक तयशुदा लाइन लौटाता है। यही वह जोड़ है जिसे बदलना है: टाइमआउट की जगह अपना fetch या स्ट्रीमिंग कॉल लगाएँ और isReplying फ़्लैग रखे रहें, क्योंकि टाइपिंग इंडिकेटर, डिसेबल्ड सेंड बटन और स्क्रॉल बिहेवियर — सब इसी पर निर्भर हैं।
हर मैसेज में एक id, user या assistant का sender, content, और डिस्प्ले टाइम व मशीन-रीडेबल dateTime दोनों होते हैं — time एलिमेंट के लिए। समय मैसेज बनते ही फ़ॉर्मैट होता है, रेंडर पर नहीं, क्योंकि रेंडर के दौरान Date फ़ॉर्मैट करने से सर्वर और ब्राउज़र का टाइमज़ोन अलग पड़ जाता है और React लोड पर हाइड्रेशन मिसमैच बताता है।
पैनल फ़ोन पर h-[36rem] और sm से ऊपर h-[44rem] है, और हेडर व कंपोज़र के बीच सिर्फ़ थ्रेड ही स्क्रॉल करती है। हेडर और कंपोज़र दोनों फ़िक्स्ड-हाइट फ़्लेक्स चाइल्ड हैं, इसलिए पैनल हाइट बदलने से सिर्फ़ इतना बदलता है कि थ्रेड कितनी दिखती है। किसी पेज को भरना हो तो h-[80vh] जैसी व्यूपोर्ट यूनिट इस्तेमाल करें, सेक्शन में बिठाने की बजाय।
हाँ — ये composerActions array की तीन एंट्री हैं, हर एक का लेबल और आइकन है, इसलिए एंट्री हटाने से बटन हट जाता है। ये 44px स्क्वेयर हैं क्योंकि यह न्यूनतम आरामदायक टच टारगेट है, और हर एक का aria-label है जबकि आइकन aria-hidden है, क्योंकि अकेले आइकन का कोई एक्सेसिबल नाम नहीं होता। ये जानबूझकर आउटलाइन बटन हैं, ताकि सिर्फ़ सेंड बटन प्राइमरी जैसा दिखे।
पहले वर्ज़न में इन्हें bg-chart-1, bg-chart-5 और bg-chart-2 से रंगकर ऊपर आइकन प्रिंट किए गए थे। chart टोकन लाइट और डार्क में अलग वैल्यू रखते हैं, इसलिए वे आइकन एक थीम में पढ़ने लायक थे और दूसरी में लगभग गायब। अब यहाँ हर रंगीन सतह एक टोकन जोड़ी इस्तेमाल करती है — bg-primary साथ में text-primary-foreground, bg-card साथ में text-card-foreground — जो पैलेट कैसा भी हो, कॉन्ट्रास्ट को स्थिर रखती है।
थ्रेड एक role log है जिसमें aria-live polite है, इसलिए स्क्रीन रीडर बिना टोके नए मैसेज अनाउंस करता है, और टाइपिंग इंडिकेटर तीन एनिमेटेड डॉट पर निर्भर रहने की बजाय एक विज़ुअली हिडन Assistant is typing लाइन रखता है। स्क्रॉलिंग scrollIntoView की बजाय थ्रेड पर सीधे scrollTop सेट करती है, और वह भी पहले सेंड के बाद ही — scrollIntoView लोड पर पूरे पेज को इस ब्लॉक तक खींच लेता।