فقاعة المحادثة
رسالة واحدة في محادثة بصورة المرسل واسمه ووقتها، مع التفاعلات ومؤشر الكتابة.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add chat-bubbleويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/chat-bubbleأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { ChatBubble, ChatLog } from "@/components/ui/chat-bubble";<ChatLog aria-label="Conversation with support"> <ChatBubble name="Omar" time="09:38">Shall I release it now?</ChatBubble> <ChatBubble direction="outgoing" time="09:40">Yes please.</ChatBubble></ChatLog>مرجع الخصائص
ChatBubble
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
direction | "incoming" | "outgoing" | "incoming" | خاصية Direction: الواردة في البداية والصادرة في النهاية. |
avatar | ReactNode | لا يوجد | صورة رمزية بمقاس md. |
name | ReactNode | لا يوجد | خاصية Show name. |
time / dateTime | ReactNode / string | لا يوجد | خاصية Show timestamp: الوقت المعروض وقيمته الآلية. |
reactions | ReactNode | لا يوجد | خاصية Show reaction: صف MessageReactions. |
status | ReactNode | لا يوجد | حالة الرسالة تحت الفقاعة الصادرة. |
MessageReaction
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
emoji | string | لا يوجد | الرمز التعبيري. |
count | number | لا يوجد | خاصية Show count. |
mine | boolean | false | خاصية My reaction: aria-pressed. |
label | string | لا يوجد | اسم التفاعل لقارئ الشاشة. |
TypingIndicator
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
label | string | لا يوجد | يُعلَن: «عمر يكتب». |
avatar | ReactNode | لا يوجد | صورة من يكتب. |
ChatLog
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
aria-label | string | لا يوجد | اسم المحادثة. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| Tab | ينتقل إلى أزرار التفاعلات؛ Enter أو Space يبدّل تفاعلك. |
ARIA
- المحادثة قائمة مرتبة داخل منطقة
role="log"، فتُعلَن الرسائل الجديدة بهدوء. - مؤشر الكتابة
role="status"بنص مثل «عمر يكتب». - التفاعل زر تبديل
aria-pressed.
ملاحظات العربية والاتجاه
ينعكس
- الرسائل الواردة على اليمين والصادرة على اليسار في العربية.
- الزاوية المربعة تتبع الصورة الرمزية.
لا ينعكس
- الرموز التعبيرية والأوقات كما هي.
- الأرقام
- الأوقات والأعداد تُكتب كما يمرّرها التطبيق.
- الخط العربي
- النص
body-16، والاسمlabel-14بوزن Medium، والوقتnumeric-12. - النص ثنائي الاتجاه
- نص الرسالة
dir="auto"، فالرسالة الإنجليزية في محادثة عربية تُقرأ صحيحة.