veridian/app/components/Message/index.vue

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

const triplit = useTriplitClient();
const { openDialog } = useDialog();

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 handleEdit = async () => {
    openDialog<string>(DialogType.Textbox, async (res) => {
        if (res.ok) {
            if (!res.data) return;

            await triplit.update('messages', message.id, {
                content: res.data
            });

            assert('flush' in triplit);
            await triplit.flush();

            await regenerateMessage();
        }
    }, {
        title: 'Edit Message',
        initialValue: message.content
    });
};

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">
                    <Tooltip :inert="focusedIndex === 0" :hotkey="['alt', '[']">
                        <button @click="focusedIndex = focusedIndex! - 1"
                            class="hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                            <span class="i-mynaui-chevron-left w-4 h-4 text-[var(--text-secondary)]"
                                :class="focusedIndex === 0 ? 'opacity-0' : ''"></span>
                        </button>
                    </Tooltip>
                    <span class="text-xs text-[var(--text-secondary)]">
                        {{ focusedIndex + 1 }} / {{ messageCount }}
                    </span>
                    <Tooltip :inert="focusedIndex + 1 === messageCount" :hotkey="['alt', ']']">
                        <button @click="focusedIndex = focusedIndex + 1"
                            class="hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                            <span class="i-mynaui-chevron-right w-4 h-4 text-[var(--text-secondary)]"
                                :class="focusedIndex + 1 === messageCount ? 'opacity-0' : ''"></span>
                        </button>
                    </Tooltip>
                </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)]">
                <Tooltip :hotkey="['ctrl', 'shift', 'enter']">
                    <button @click="regenerateMessage"
                        class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-hover)]">
                        <span class="i-mynaui-refresh text-4.5"></span>
                    </button>
                </Tooltip>
                <button v-if="message.role === 'user'" @click="handleEdit"
                    class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-hover)]">
                    <span class="i-mynaui-pencil text-4.5"></span>
                </button>
                <button @click="copyMessage" :class="{ 'text-emerald-500': copied }"
                    class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-hover)]">
                    <span :class="copied ? 'i-mynaui-check text-emerald-500' : 'i-mynaui-copy text-4.5'"></span>
                </button>
                <Tooltip :hotkey="['ctrl', 'shift', 'backspace']">
                    <button @click="deleteMessage"
                        class="flex justify-center items-center w-7 h-6 text-red-500 hover:bg-[var(--color-hover)]">
                        <span class="i-mynaui-trash text-5"></span>
                    </button>
                </Tooltip>
            </div>
        </div>
    </div>
</template>