---

<div v-for="(message, index) in messages"
     :key="index"
     class="max-w-[85%] relative mr-auto group flex items-end gap-3 pt-4"
     :class="{'right ml-auto flex-row-reverse': message.role === 'user'}">

    <div class="rounded-r-xl rounded-tl-xl border border-slate-200/80 bg-slate-50/80 px-4 pb-4 pt-3">
        <div>@{{ message.text }}</div>

        <!-- Кнопки бота -->
        <div v-if="message.role === 'bot' && message.buttons"
             class="pt-4 flex gap-3 flex-wrap">

            <button v-for="(btn, i) in message.buttons"
                    :key="i"
                    @click="handleBotAction(btn)"
                    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer bg-primary border-primary text-white">

                @{{ btn }}
            </button>

        </div>
    </div>
</div>