<template>
    <div class="user-custom-element-card">
        <img class="user-custom-element-image" :src="userCustomElementData?.iconUrl"
            :alt="userCustomElementData?.title || 'custom element'" />
        <div class="user-custom-element-content">
            <div class="user-custom-element-header">
                {{ userCustomElementData?.title ?? '' }}
            </div>
            <div class="user-custom-element-desc">
                {{ userCustomElementData?.description ?? '' }}
            </div>
        </div>
    </div>
</template>

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

interface UserCustomElementProps {
    message: IMessageModel
}

const props = defineProps<UserCustomElementProps>()

const userCustomElementData = computed(() => {
    const payload = JSONToObject(props.message.payload)

    return {
        iconUrl: payload.iconUrl,
        title: payload.title,
        description: payload.description,
    }
})
</script>

<style scoped>
.user-custom-element-card {
    display: flex;
    background-color: white;
    border: 1px solid #d1d2d3;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
}

.user-custom-element-image {
    width: 120px;
    height: 120px;
    object-fit: fill;
    flex-shrink: 0;
}

.user-custom-element-content {
    padding: 0;
    display: flex;
    margin: 10px;
    min-width: 150px;
    flex-direction: column;
    justify-content: space-between;
}

.user-custom-element-header {
    font-size: 12px;
    color: black;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.user-custom-element-desc {
    font-size: 14px;
    color: #ff6c2e;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
</style>