<template>
    <div class="message" :class="role">
        <button v-if="role !== 'system'" class="copy-btn" @click="doCopy" title="Copy">⎘</button>
        <slot />
        <div v-if="$slots.footer" class="bubble-footer">
            <slot name="footer" />
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    role: 'user' | 'assistant' | 'system';
    copyContent?: string;
}>();

function doCopy() {
    if (props.copyContent !== undefined) {
        navigator.clipboard.writeText(props.copyContent).catch(() => {
            const el = document.createElement('textarea');
            el.value = props.copyContent!;
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
        });
    }
}
</script>
