فقط منتشر شد: مجموعهٔ جدید کامپوننت چت shadcn/ui

shadcn مجموعه‌ای از کامپوننت‌های آماده برای ساخت رابط‌های چت منتشر کرده است. این بسته برای نخستین‌بار اجزای پایهٔ جریان مکالمه را مستقیماً به shadcn/ui می‌آورد و توسعه رابط‌های گفتگو را تسریع می‌کند.

کامپوننت‌های اضافه‌شده

این انتشار لایهٔ «گفت‌وگو» را معرفی می‌کند و پنج جزء اصلی را شامل می‌شود: MessageScroller، Message، Bubble، Attachment و Marker. همچنین دو ابزار کمکی CSS جدید، scroll-fade و shimmer اضافه شده‌اند تا تجربهٔ بصری و تعامل اسکرول بهتر شود. هدف مرحلهٔ اول، ارائهٔ اجزای جداشدنی است تا توسعه‌دهندگان بتوانند آن‌ها را کپی، ترکیب و شخصی‌سازی کنند.

نصب

pnpm dlx shadcn@latest add message-scroller message bubble attachment marker

MessageScroller در مرکز تجربه

MessageScroller به‌عنوان ظرف اسکرول طراحی شده تا رفتارهایی را مدیریت کند که معمولاً در پیاده‌سازی چت نادیده گرفته می‌شوند: نگاشت لنگرها هنگام mount، پاسخ‌های جریان‌یافته، بازیابی thread ذخیره‌شده، تاریخچهٔ پیش‌رو، امکان رفتن به پیام مشخص، کنترل‌های اسکرول و ردیابی دیدپذیری. این کامپوننت منطق تعامل مربوط به اسکرول را مسئولیت می‌پذیرد اما رندر پیام‌ها، وضعیت مدل هوش مصنوعی یا منطق ذخیره‌سازی بر عهدهٔ توسعه‌دهنده است.

نقش سایر اجزا

  • Message: چینش یک ردیف مکالمه و کانتینر منطق پیام.
  • Bubble: نما و تعامل‌های بصری پیام، شامل واکنش‌ها و دکمه‌ها.
  • Attachment: مدیریت فایل و تصویر همراه با وضعیت آپلود و پیش‌نمایش.
  • Marker: رندر جداکننده‌ها و وضعیت‌هایی مانند نشان‌گر فعالیت یا تقسیم‌بندی تاریخ‌ها.

بستهٔ headless و @shadcn/react

shadcn پکیج @shadcn/react را معرفی کرده که مجموعه‌ای از کامپوننت‌های بدون استایل (headless) فراهم می‌کند و با MessageScroller آغاز شده است. رجیستری shadcn/ui نسخه‌های استایل‌دار را ارائه می‌دهد، در حالی که بستهٔ headless منطق اسکرول و تعامل را نگه می‌دارد؛ این رویکرد اجازه می‌دهد منطق تعامل تست‌شده بدون چسباندن به یک ظاهر ثابت در پروژه‌ها استفاده شود. همهٔ اجزا برای هر دو اکوسیستم Radix و Base UI در دسترس هستند.

نمونه رابط چت ساخته‌شده با کامپوننت‌های shadcn/ui

بازخورد جامعه و مسائل فنی

اعلام منتشرشدن این مجموعه واکنش زیادی در پی داشت؛ از جمله ذکر شدن توسط Guillermo Rauch، مدیرعامل Vercel، و بازدید گستردهٔ پست مربوطه. گزارش‌هایی در GitHub نشان دادند که لنگرهای mount در MessageScroller در برخی شرایط اعمال نمی‌شوند؛ تیم توسعه این مشکل را با استفاده از پکیج headless قابل بازتولید تشخیص داده است. در مباحث عمومی مثل Hacker News، توسعه‌دهندگان به امکان به‌روزرسانی جداگانهٔ اجزا و اجتناب از قفل‌شدن نسخه‌ها واکنش مثبت نشان دادند.

رابطه با AI Elements و اکوسیستم وسیع‌تر

این انتشار با مجموعه‌هایی مانند AI Elements تداخل ندارد. AI Elements شامل بیش از 20 کامپوننت مرتبط با هوک useChat از AI SDK است و shadcn تأکید کرده کاربران فعلی نیازی به بازنویسی ندارند. مهاجرت زمانی منطقی است که به انتزاع‌های جدید، استایل‌های به‌روز یا پشتیبانی از Radix/Base UI نیاز باشد. مستندات نگاشت مستقیم اجزا را برای تسهیل مهاجرت ارائه می‌کنند (مثلاً MessageScroller → MessageScroller.Root و MessageScrollerProvider → MessageScroller.Provider).

در اکوسیستم شاهد گزینه‌هایی مانند shadcn-chatbot-kit از Blazity و prompt-kit از ibelick هستیم که بین توسعه‌دهندگان محبوب‌اند؛ ادغام چنین الگوهایی در shadcn/ui نشان می‌دهد چت به عنوان یک الگوی رابط بنیادین در حال استانداردسازی است.

اهمیت برای توسعه‌دهندگان

  • شتاب در ساخت رابط‌های چت با استفاده از اجزا قابل‌کپی و قابل‌سفارشی‌سازی.
  • سازگاری با پروژه‌های مبتنی بر Tailwind CSS و React و پشتیبانی از Radix و Base UI.
  • استفاده از منطق تعامل تست‌شده بدون تحمیل استایل مشخص.

جمع‌بندی

افزودن این مجموعه به shadcn/ui فراتر از معرفی چند کامپوننت است؛ گامی به سمت تعریف پایهٔ مشترک برای طراحی رابط‌های چت. رویکرد ماژولار اجازه می‌دهد بخش‌های تعامل جدا، تغییر و در پروژه‌ها بازاستفاده شوند، بدون وابستگی اجباری به یک کتابخانهٔ واحد. انتظار می‌رود در نسخه‌های بعدی انتزاعات بیشتر و ابزارهای کمکی جدید برای ساده‌تر و پایدارتر کردن ساخت چت‌یوآی ارائه شوند.