https://neobrutalism.com/fa/blocks/ai/ai-chat-assistant-interface
رابط دستیار چت هوش مصنوعی
هوش مصنوعی · Pro source
یک سطح چت کامل در یک فایل: یک نوار هدر عنواندار با کنترلهای سریع، یک رشتهٔ پیامِ قابل اسکرول از حبابهای کاربر و دستیار که موقعیت اسکرول خودش را نگه میدارد، یک نشانگر تایپِ سهنقطهای هنگام انتظار پاسخ، و یک نویسنده که با Enter ارسال میکند و با Shift و Enter خط جدید اضافه میکند. پاسخ با یک timeout شبیهسازی شده، پس بلاک بدون بکاند اجرا میشود و هر وضعیتی را که یک یکپارچهسازی واقعی نیاز دارد نشان میدهد.
هوش مصنوعی
رابط دستیار چت هوش مصنوعیباز کردن پیشنمایش زنده
- Hero، قیمتگذاری و auth
- پیشنمایش هر نقطه شکست
- منبع را کپی کنید
- MCP آماده نصب
- Radix · Base UI · React Aria
- 158 بلوکهای آماده
- بخشهای صفحهای که ارسال میشوند
- داشبوردها و بازاریابی
- Pro کد را باز میکند
- چیدمانهای آماده
محبوبِ توسعهدهندگان، طراحان
و سازندگان
اتفاقی به UI kit شما برخوردم و بیدرنگ برش داشتم. نو است، فعالانه نگهداری میشود و مدام بهتر میشود — کار فوقالعاده! 🤘
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 kit که شبیه بقیه نیست. بلاکهای نئوبروتالیستی 🔥 پروتوتایپ چیدمانهای عجیب را خیلی سریعتر کردند.
Nitesh Padghan, نویسندهٔ سایه طراحی لندینگپیج زیبا با تعادل و جریان کامل. پالت رنگی همراه با انیمیشنها تجربهٔ کاربری استثنایی میسازد.
Alan Obeng-Peprah, طراح ارشد @ NativeXAI از طراحیای که تحویل دادند واقعاً تحتتأثیرم. محصول نهایی دقیقاً همان چیزی بود که تصور میکردم.
Desmond, همبنیانگذار @ VectorlabsVentures بهعنوان صاحب آژانس معمولاً هفتهها صرف پالایش لیاوت لندینگ مشتریها میکنم. با Neobrutalism.com قالب را میگذارم، کپی را تنظیم میکنم و آمادهام برای انتشار.
Duke Opoku Amankwah, بنیانگذار @ Midas قالبها فقط از نظر بصری خیرهکننده نیستند؛ ساختارشان هم فوقالعاده است. هفتهها زمان توسعه برایمان صرفهجویی کرد.
Abiola Braimah, توسعهدهنده @ Studio IX کیفیت برجسته و دقت در جزئیات. طراحی واکنشگرا روی همهٔ دستگاهها بینقص کار میکند.
Acromond X., همبنیانگذار @ VectorlabsVentures یکپارچهسازی این قالبها در گردشکارمان چرخهٔ توسعه را بهطور چشمگیری کوتاه کرد. کار عالی.
Raquib S., توسعهدهندهٔ بکاند این قالبها منبع اصلی ما شدهاند. کد تمیز، مستندسازیشده و بهراحتی قابل شخصیسازی است.
Hallic M., توسعهدهنده @ AtlasLabs قالبهای Neobrutalism.com تعادل کامل بین زیبایی و کارکرد را برقرار میکنند. واقعاً نقطهٔ عطفی برای پروژههای ما.
Ibrahim S., لید فرانتاند @ ScaleUp پشتیبانی عالی و قالبهای باکیفیت premium. ROI این قالبها شگفتانگیز است.
Kevin K., CEO @ WebCraft قالبهای Neobrutalism.com کاملاً رویکرد ما به پروژههای مشتری را عوض کردند. کیفیت کد استثنایی است و طراحیها واقعاً در سطح جهانیاند.
Danny G., بنیانگذار DevStack کتابخانههای قالب زیادی استفاده کردهام، اما Neobrutalism.com بهخاطر توجه به بهینهسازی عملکرد و معماری کد تمیز متمایز است.
Ian D., CTO در Wavelength انیمیشنها و ریزتعاملهای این قالبها مطلقاً خیرهکنندهاند. بهترین سرمایهگذاری برای تیم طراحی ما.
Ben S., لید دیزاینر در PixelPerfect بهعنوان بنیانگذار غیرفنی، قالبهای Neobrutalism.com کمک کردند MVP را در زمانی رکوردی بدون قربانیکردن کیفیت طراحی لانچ کنیم. سرمایهگذارانمان شگفتزده شدند.
Matthew I., بنیانگذار استارتاپ از ماژولار بودن و مستندسازی خوب این کامپوننتها قدردانی میکنم. توانستیم تکههایی از قالبهای مختلف را بیاصطکاک ترکیب کنیم.
Garrett P., لید فرانتاند در TechFusion ROI قالبهای Neobrutalism.com باورنکردنی است. زمان توسعه را بهشدت کم کردیم و همزمان سایتهای باکیفیتتری به مشتریها تحویل میدهیم.
Xavier C., صاحب آژانس
سؤالات
پرتکرار
نحوهٔ ساختٔ بلاک رابط دستیار چت هوش مصنوعی، آنچه میتوانید تغییر دهید، و زمانی که آن را به جای سایر چیدمانها در اینجا استفاده کنید.
نه. handleSend پیام بازدیدکننده را اضافه میکند، isReplying را تنظیم میکند، و یک setTimeout پس از ۱.۵ ثانیه یک خط از پیش آماده برمیگرداند. این همان محل اتصال است که باید جایگزین شود: timeout را با fetch یا فراخوانی streaming خودتان عوض کنید و پرچم isReplying را نگه دارید، چون نشانگر تایپ، دکمهٔ ارسالِ غیرفعال و رفتار اسکرول همگی به آن وابستهاند.
هر پیام یک id، یک فرستنده از نوع user یا assistant، محتوا، و هم یک زمان نمایشی و هم dateTime قابلخواندن برای ماشین برای عنصر time دارد. زمان هنگام ایجاد پیام قالببندی میشود نه هنگام رندر، چون قالببندی یک Date در حین رندر باعث میشود سرور و مرورگر دربارهٔ منطقهٔ زمانی توافق نداشته باشند و React یک عدمتطابق hydration هنگام بارگذاری گزارش کند.
پنل در موبایل h-[36rem] است و از sm به بالا h-[44rem]، و رشتهٔ بین هدر و نویسنده تنها بخشی است که اسکرول میشود. هم هدر و هم نویسنده فرزندان flex با ارتفاع ثابت هستند، پس تغییر ارتفاع پنل فقط میزان رشتهٔ قابلمشاهده را عوض میکند. اگر میخواهید یک صفحه را پر کند نه اینکه در یک بخش بنشیند، از یک واحد ویوپورت مثل h-[80vh] استفاده کنید.
بله — اینها سه ورودی در آرایهٔ composerActions هستند، هرکدام با یک برچسب و یک آیکون، پس حذف یک ورودی دکمه را حذف میکند. آنها مربعهای ۴۴px هستند چون آن کمینهٔ هدف لمسی راحت است، و هرکدام یک aria-label دارد در حالی که آیکونش aria-hidden علامتگذاری شده، چون یک آیکون بهتنهایی نام قابلدسترس ندارد. آنها عمداً دکمهٔ outline هستند، پس فقط دکمهٔ ارسال مثل primary خوانده میشود.
نسخهٔ قبلی آنها را با 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 است، پس صفحهخوان ورود پیامها را بدون قطعکردن اعلام میکند، و نشانگر تایپ بهجای تکیه بر سه نقطهٔ متحرک، یک خط «دستیار در حال تایپ است» بهصورت مخفی بصری حمل میکند. اسکرولکردن scrollTop را روی خودِ رشته تنظیم میکند نه فراخوانی scrollIntoView، و فقط پس از اولین ارسال — scrollIntoView کل صفحه را هنگام بارگذاری به این بلاک میکشاند.