کامپوننت‌های چت به shadcn/ui اومد
ریاکت
فرانتاندخلاصهٔ کامل‌تر
تیم shadcn/ui یه مجموعه کامپوننت جدید برای ساختن رابط چت منتشر کرده: MessageScroller، Message، Bubble، Attachment و Marker. تو این پست اومده که این فاز اولِ کار روی کامپوننت‌های چته و قراره تیکه‌تیکه پیش بره؛ هر بار یه بخش رو با یه انتزاعِ بازطراحی‌شده به شکل کامپوننت shadcn/ui می‌دن که بتونی copy و compose و adapt کنی. به گفته‌ی تیم، شروع کار از لایه‌ی گفتگوئه: اسکرول، ردیف پیام‌ها، حباب‌ها، پیوست‌ها و نشانگرها.
مهم‌ترین قطعه MessageScrollerه، همون کانتینر اسکرولِ یه گفتگو. کارهایی که راحت خراب می‌شن رو خودش مدیریت می‌کنه: لنگر انداختن روی نوبت‌ها، پاسخ‌های streamشده، بازگردانی thread ذخیره‌شده، اضافه شدن تاریخچه به بالای لیست، پرش به یه پیام، کنترل‌های اسکرول و ردیابی دیده‌شدن. نکته‌ش اینه که این رفتار رو صاحب میشه ولی خودِ پیام‌ها، state هوش مصنوعی، transport یا persistence تو رو دست نمی‌زنه؛ رندر محتوا با خودته.
بقیه‌ی کامپوننت‌ها قطعه‌های روزمره‌ی دور اسکرولر رو پوشش می‌دن. Message یه ردیف گفتگو رو با آواتار، ترازبندی، هدر، محتوا، فوتر و پیام‌های گروه‌شده می‌چینه. Bubble سطح پیام رو با variantها، واکنش‌ها، لینک‌ها، دکمه‌ها و محتوای جمع‌شو رندر می‌کنه. Attachment فایل‌ها و تصاویر رو با متادیتا و وضعیت آپلود نشون می‌ده و Marker هم آپدیت‌های وضعیت، یادداشت‌های سیستمی و جداکننده‌های برچسب‌دار (مثل حالت streaming یا فعالیت toolها و بریدگی تاریخ) رو می‌سازه. این‌ها عمداً کوچیک‌ان تا کنار هم بچینیشون.
دوتا یوتیلیتی CSS جدید هم اضافه شده. scroll-fade به کانتینرهای اسکرول لبه‌های محوشونده‌ی آگاه‌به‌اسکرول اضافه می‌کنه تا بدون overlay یا listener بفهمونه محتوای بیشتری هست. shimmer هم یه افکت درخششِ متن برای وضعیت زنده‌ست، مثل «Thinking…» یا «Generating response…». هر دو با shadcn/tailwind.css میان، پس پروژه‌هایی که با init راه افتادن از قبل دارنشون.
یه پکیج جدید هم به اسم @shadcn/react ساختن برای کامپوننت‌های headless و بدون استایل؛ اولین قطعه‌ش @shadcn/react/message-scrollerه که کل منطق اسکرول (anchoring، auto-follow، حفظ prepend، دستورهای اسکرول و visibility) توش تست‌شده زندگی می‌کنه و کامپوننت رجیستری فقط با استایل‌های shadcn/ui می‌پیچتش. الان برای Radix و Base UI در دسترسه. تیم تأکید می‌کنه این نسخه جایگزین AI Elements نمی‌شه؛ اگه ازش استفاده می‌کنی لازم نیست چیزی رو بازنویسی کنی و هر وقت خواستی می‌تونی نسخه‌ی shadcn/ui رو امتحان کنی.
نکات کلیدی:
- shadcn/ui پنج کامپوننت چت منتشر کرد: MessageScroller، Message، Bubble، Attachment و Marker.
- MessageScroller رفتار سختِ اسکرول گفتگو رو مدیریت می‌کنه ولی state و داده‌ی تو رو دست نمی‌زنه.
- دوتا یوتیلیتی CSS جدید scroll-fade و shimmer اضافه شد.
- پکیج جدید @shadcn/react کامپوننت‌های headless می‌ده، اولینش message-scroller برای Radix و Base UI.
- این کار جایگزین AI Elements نیست و فاز اول کامپوننت‌های چته.
