<template>
    <div class="message-revoke-container">
        <span v-if="message.flow === 'in'">{{ t('对方撤回了一条消息') }}</span>
        <span v-else-if="message.flow === 'out'">{{ t('你撤回了一条消息') }}</span>
        <div v-if="canReEdit" class="edit-content" @click="handleReEdit">
            {{ t('重新编辑') }}
        </div>
    </div>
</template>

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

interface RevokedMessageProps {
    sessionState: SessionState
    message: IMessageModel
    reEditMessage: (message: IMessageModel) => void
}

const props = defineProps<RevokedMessageProps>()

const { t } = useI18n()

const isTextMessage = computed(() => {
    return props.message.type === 'TIMTextElem'
})

const canReEdit = computed(() => {
    return props.message.flow === 'out' && isTextMessage.value && props.sessionState !== 'finished'
})

const handleReEdit = () => {
    props.reEditMessage(props.message)
}
</script>

<style scoped>
.message-revoke-container {
    display: flex;
    justify-content: center;
    color: #999;
    width: 100%;
    font-size: 12px;
    margin-bottom: 10px;
}

.edit-content {
    padding: 0 5px;
    color: rgba(28, 102, 229, 1);
    cursor: pointer;
}
</style>