<template>
    <MessageToolsMobile v-if="isMobile" :context-menu="contextMenu" :message="message"
        :is-group-session="isGroupSession" :translate-info="translateInfo" :current-user-id="currentUserId"
        @close="onClose" @translate="onTranslate" />
    <MessageToolsPC v-else :context-menu="contextMenu" :message="message" :is-group-session="isGroupSession"
        :translate-info="translateInfo" :current-user-id="currentUserId" @close="onClose" @translate="onTranslate" />
</template>

<script setup lang="ts">
import type { IMessageModel } from '@tencentcloud/ai-desk-core'

import { isMobile } from '../../../../utils/env'
import MessageToolsMobile from './MessageToolsMobile.vue'
import MessageToolsPC from './MessageToolsPC.vue'

interface MessageToolsContextMenu {
    mouseX: number
    mouseY: number
}

interface TranslateTextInfoItem {
    translateResult: string
    translateStatus: 'loading' | 'success' | 'error'
}

interface Props {
    contextMenu: MessageToolsContextMenu
    message: IMessageModel
    isGroupSession: boolean
    translateInfo?: TranslateTextInfoItem
    currentUserId?: string
}

defineProps<Props>()

const emit = defineEmits<{
    (e: 'close'): void
    (e: 'translate', message: IMessageModel): void
}>()

const onClose = () => {
    emit('close')
}

const onTranslate = (message: IMessageModel) => {
    emit('translate', message)
}
</script>
