<template>
    <div class="message-avatar" :class="{ 'user': message.isUser, 'support': !message.isUser }">
        {{ message.isUser ? '👤' : '🤖' }}
    </div>
    <div>
        <div class="message-bubble"
             :class="{ 'user': message.isUser, 'support': !message.isUser }"
             :style="message.isUser ? { backgroundColor: widgetConfig.customer_chat_bg_color, color: widgetConfig.customer_chat_text_color } : { backgroundColor: widgetConfig.agent_chat_bg_color, color: widgetConfig.agent_chat_text_color }">
            {{ message.text }}
        </div>
        <div class="message-time">{{ message.time }}</div>
    </div>
</template>
<script setup>
import { useWidgetConfig } from '@/Public/js/useWidgetConfig.js'
const { widgetConfig } = useWidgetConfig()
const props = defineProps({
    message: {
        type: Object,
        required: true
    }
})
</script>
