Chat Messagev1.0.0
ردیف یک پیام در گفتگو. پیام کاربر (role="user") حباب‌دار و سمت پایانِ صفحه می‌نشیند؛ پاسخ مدل (role="assistant") بدون حباب، سمت آغاز، مثل الگوی رایج Claude/ChatGPT، چون پاسخ‌ها معمولاً بلندند و حباب فقط شلوغش می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/chat-message.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/chat-message.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/chat-message.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/chat-message.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
ChatMessage,
ChatMessageAvatar,
ChatMessageContent,
ChatMessageBubble,
} from "@/components/ui/chat-message"
<ChatMessage role="user">
<ChatMessageAvatar name={user.name} src={user.avatarUrl} />
<ChatMessageContent>
<ChatMessageBubble>{message.text}</ChatMessageBubble>
</ChatMessageContent>
</ChatMessage>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ChatMessageAvatar رویِ خودِ Avatar است، پس همان props (name، src، icon) را می‌گیرد؛ رنگش خودکار از روی role پیام تنظیم می‌شود.
ChatMessageBubble فقط برای role="user" پس‌زمینه می‌گیرد؛ برای assistant متنِ ساده است؛ اگر پاسخِ مدل شامل استدلال هم هست، Thinking را قبل از آن داخل ChatMessageContent بگذارید.
ChatMessageActions پیش‌فرض نامرئی است و فقط با هاور روی کل ردیف پیام (یا فوکوس کیبورد) آشکار می‌شود؛ دقت صفحه را برای متنِ پیام نگه می‌دارد.
دسترس‌پذیری
- هر دکمهٔ عمل با aria-label و Tooltip مشخص می‌شود، چون فقط آیکون دارد.
- آشکارشدنِ دکمه‌های عمل با focus-within هم کار می‌کند، نه فقط هاور موس؛ کاربر کیبورد هم به آن‌ها می‌رسد.
مرجع API
ChatMessage
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| role | "user" | "assistant" | — | جهت و ظاهرِ کل ردیف را تعیین می‌کند. |
ChatMessageActions
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| reveal | "hover" | "always" | "hover" | hover: کنش‌ها فقط با هاور یا فوکوس دیده می‌شوند؛ always: همیشه، برای پاسخِ آخر. |
ChatMessageAction
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| label | string | — | هم aria-label دکمه و هم متنِ Tooltip. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Full Set of Actions
چند ChatMessageAction را کنارِ هم بگذارید؛ فقط با هاور یا فوکوس روی کلِ ردیف آشکار می‌شوند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
With Thinking
برای پاسخِ استدلال‌محور، Thinking را داخلِ ChatMessageContent و قبل از ChatMessageBubble بگذارید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Full Set of Actions | پاسخِ مدل با کپی، اجرایِ دوباره و رای‌گیری |
| With Thinking | پاسخی که قبل از متنِ نهایی، استدلالِ خودش را هم نشان می‌دهد |
دستورالعمل استفاده
فقط پیامِ کاربر حباب دارد
انجام بده
role="user" حباب می‌گیرد چون معمولاً کوتاه است؛ role="assistant" متنِ ساده می‌ماند چون پاسخ‌ها بلندند و حباب فقط شلوغش می‌کند.
انجام نده
حباب‌دار کردنِ پاسخِ بلندِ مدل، خواندنِ چندخطی را با پس‌زمینهٔ اضافه سخت‌تر می‌کند.
عمل‌ها را فقط با هاور نشان بده
انجام بده
دکمه‌های کپی/پسندیدن پیش‌فرض پنهانند و با هاور روی کل ردیف آشکار می‌شوند؛ متن تمیز می‌ماند.
انجام نده
همیشه‌آشکار بودنِ دکمه‌های عمل کنارِ هر پیام، گفتگو را شلوغ و پرحاشیه می‌کند.