<template>
    <div>
        <MessageCustomerService v-if="isCustomerServiceMessage(message)" :message="message"
            @preview-image="handlePreviewImage" />

        <UserCustomElement v-else-if="Number(JSONToObject(message.payload)?.fromPostMessage) === 1"
            :message="message" />

        <div v-else>{{ t('自定义消息') }}</div>
    </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { isCustomerServiceMessage, JSONToObject, type IMessageModel } from '@tencentcloud/ai-desk-core'

import MessageCustomerService from './MessageCustomerService/index.vue'
import UserCustomElement from './UserCustomElement.vue'

interface MessageCustomProps {
    message: IMessageModel
}

const props = defineProps<MessageCustomProps>()

const emit = defineEmits<{
    (event: 'preview-image', previewImageId: string): void
}>()

const { t } = useI18n();

const handlePreviewImage = (previewImageId: string) => {
    if (!props.message?.ID || !previewImageId) {
        return
    }

    emit('preview-image', previewImageId)
}
</script>

<style scoped></style>