<template>
    <TTooltip v-if="messageSourceLabel && tooltipTitle" :content="tooltipTitle" placement="top">
        <span class="robot-message-source-info">{{ messageSourceLabel }}</span>
    </TTooltip>
    <span v-else-if="messageSourceLabel" class="robot-message-source-info">
        {{ messageSourceLabel }}
    </span>
</template>

<script setup lang="ts">
import { Tooltip as TTooltip } from 'tdesign-vue-next'
import type { IMessageModel } from '@tencentcloud/ai-desk-core'
import { useMessageSource } from './useMessageSource'

interface Props {
    message: IMessageModel
}

const props = defineProps<Props>()

const { messageSourceLabel, tooltipTitle } = useMessageSource(() => props.message)
</script>

<style scoped>
.robot-message-source-info {
    display: inline-block;
    background: #F9FAFC;
    color: #999;
    border: 1px solid #D1D4DE;
    border-radius: 10px;
    font-size: 12px;
    line-height: 16px;
    padding: 2px 8px;
    margin-right: 2px;
    vertical-align: middle;
}
</style>
