veridian/app/components/Message/index.vue

<script setup lang="ts">
import type { Message } from '~/composables/useChat';

const triplit = useTriplitClient();

const { message } = defineProps<{
    message: Message
}>();

const focusedIndex = computed({
    get: () => {
        return message.focusedIndex || 0;
    },
    set: (newValue) => {
        triplit.update('messages', message.id, {
            focusedIndex: newValue
        });
    }
});

watch(() => message.children.length, (newCount, oldCount) => {
    if (newCount === oldCount) return;

    // if we are deleting children, only move the focus index if its no longer valid
    // e.g. if we we have 4 children, and are focused on the 2nd, if we delete it, 
    // we want to keep the focus on the 2nd index. It just makes me feel better
    if (oldCount > newCount) {
        if (message.deleted === true && focusedIndex.value === newCount) {
            focusedIndex.value = Math.max(0, newCount - 1);
            return;
        }

        if (focusedIndex.value > newCount) {

            focusedIndex.value = newCount;
        }

        return;
    }

    if (message.deleted === true) {
        focusedIndex.value = newCount - 1;
        return;
    }

    focusedIndex.value = newCount;
});

const activeMessage = computed(() => {
    if (message.children.length === 0 || (focusedIndex.value === 0 && !message.deleted)) {
        return message;
    }

    if (message.deleted === true) {
        return message.children[Math.min(focusedIndex.value, message.children.length - 1)];
    }

    return message.children[focusedIndex.value - 1];
});

const emit = defineEmits<{
    regenerate: []
    delete: []
}>();

const copied = ref(false);
const copyMessage = async () => {
    if (activeMessage.value!.role === 'user') {
        await navigator.clipboard.writeText(activeMessage.value!.content!);
    } else {
        let text = [];
        for (const part of activeMessage.value!.parts || []) {
            if (part.type === 'text') {
                text.push(part.content);
            }
        }

        await navigator.clipboard.writeText(text.join('\n\n'));
    }

    copied.value = true;
    setTimeout(() => {
        copied.value = false;
    }, 2000);
}

const regenerateMessage = async () => {
    emit('regenerate');
}

const deleteMessage = () => {
    if (focusedIndex.value !== 0 && focusedIndex.value === message.children.length) {
        focusedIndex.value = Math.max(0, focusedIndex.value - 1);
    }

    nextTick(() => {
        emit('delete');
    });
};

const messageCount = computed(() => {
    if (message.deleted === true) {
        return message.children.length;
    }

    return message.children.length + 1;
});
</script>

<template>
    <div v-if="activeMessage" class="max-w-full mb-4 group flex flex-col">
        <div :class="[message.role === 'user' ? 'pl-9 flex justify-end' : '']">
            <MessageUser v-if="message.role === 'user'" :message="activeMessage!" />
            <MessageAgent v-else :message="activeMessage" />
        </div>
        <div class="flex justify-between items-center">
            <div>
                <div v-if="messageCount > 1" class="flex gap-1">
                    <button :inert="focusedIndex === 0" @click="focusedIndex = focusedIndex! - 1">
                        <Icon name="mynaui:chevron-left" :class="['w-4 h-4', focusedIndex === 0 ? 'opacity-0' : '']" />
                    </button>
                    <span class="text-xs text-[var(--text-secondary)]">
                        {{ focusedIndex + 1 }} / {{ messageCount }}
                    </span>
                    <button :inert="focusedIndex + 1 === messageCount" @click="focusedIndex = focusedIndex + 1">
                        <Icon name="mynaui:chevron-right"
                            :class="['w-4 h-4', focusedIndex + 1 === messageCount ? 'opacity-0' : '']" />
                    </button>
                </div>
            </div>

            <div v-show="activeMessage.generation?.status !== 'pending'"
                class="self-end mt-1 w-fit bg-[var(--bg-container)] text-[var(--text-secondary)] gap-px flex items-center rounded-md overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                <button @click="regenerateMessage"
                    class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-hover)]">
                    <Icon name="mynaui:refresh" class="text-4.5" />
                </button>
                <button @click="copyMessage" :class="{ 'text-emerald-500': copied }"
                    class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-hover)]">
                    <Icon :name="copied ? 'mynaui:check' : 'mynaui:copy'" class="text-4.5" />
                </button>
                <button @click="deleteMessage"
                    class="flex justify-center items-center w-7 h-6 text-red-500 hover:bg-[var(--color-hover)]">
                    <Icon name="mynaui:trash" class="text-5" />
                </button>
            </div>
        </div>
    </div>
</template>