Chat

کامپوننت x-chat یک رابط کاربری چت ساده و قابل شخصی‌سازی برای نمایش پیام‌های گفتگو در پروژه‌های Blade شماست. این کامپوننت برای سناریوهایی مانند نمایش پیام‌های کاربران و ادمین، ضمیمه فایل به پیام‌ها و نمایش اطلاعات ارسال‌کننده و زمان ارسال پیام کاربرد دارد.

ویژگی‌ها

نمایش لیست پیام‌ها با ساختار چت (کاربر/ادمین)
پشتیبانی از ضمیمه فایل به هر پیام
نمایش نام ارسال‌کننده و زمان ارسال پیام
امکان تعیین ارتفاع کامپوننت
اعتبارسنجی ساختار ورودی‌ها برای جلوگیری از خطا
قابلیت شخصی‌سازی ظاهر با CSS

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`items`	`array`	—	آرایه‌ای از پیام‌ها (اجباری، ساختار زیر را ببینید)
`height`	`string`	`500px`	ارتفاع کامپوننت (مثلاً: `400px`, `60vh`)

ساختار هر آیتم در `items`

هر پیام باید یک آرایه با فیلدهای زیر باشد:

نام فیلد	نوع داده	اجباری	توضیحات
`is_admin`	`boolean`	بله	آیا پیام توسط ادمین ارسال شده است؟
`message`	`string`	بله	متن پیام
`sender_name`	`string`	بله	نام ارسال‌کننده
`created_at`	`string`	بله	زمان ارسال پیام
`attachments`	`array`	خیر	آرایه‌ای از ضمیمه‌ها (هر ضمیمه باید شامل `url` و `name` باشد)
`avatar_url`	`string`	خیر	url آواتار ارسال کننده
`ip`	`string`	خیر	آدرس IP

ساختار هر ضمیمه (در صورت وجود)

نام فیلد	نوع داده	اجباری	توضیحات
`url`	`string`	بله	آدرس فایل ضمیمه
`name`	`string`	بله	نام فایل ضمیمه

نکات مهم

پراپ items اجباری است و باید آرایه‌ای از پیام‌ها با ساختار بالا باشد.
هر پیام باید شامل فیلدهای is_admin, message, sender_name, created_at باشد.
اگر فیلد attachments وجود داشته باشد، باید آرایه‌ای از ضمیمه‌ها با فیلدهای url و name باشد.
مقدار height به صورت رشته (string) و با واحد معتبر CSS تعیین شود (مثلاً: 400px یا 60vh).

مثال‌ها

نمونه پایه

<x-chat
    :items="[
    [
        'is_admin' => false,
        'message' => 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است...',
        'attachments' => [['url' => '#', 'name' => 'file.png'], ['url' => '#', 'name' => 'file.png']],
        'sender_name' => 'محمد جعفری',
        'created_at' => '1402/12/12 09:00',
    ],
    [
        'is_admin' => false,
        'message' => 'سلام',
        'sender_name' => 'محمد جعفری',
        'created_at' => '1402/12/12 09:00',
    ],
    [
        'is_admin' => true,
        'message' => 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است...',
        'attachments' => [['url' => '#', 'name' => 'file.png'], ['url' => '#', 'name' => 'file.png']],
        'sender_name' => 'محمد جعفری',
        'created_at' => '1402/12/12 09:05',
    ],
]"
    height="400px"
/>

ویژگی‌ها​

ورودی‌های کامپوننت​

ساختار هر آیتم در items​

ساختار هر ضمیمه (در صورت وجود)​

مثال‌ها​

نمونه پایه​