veridian/app/pages/agent/[id]/index.vue

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

const triplit = useTriplitClient();

const route = useRoute();
const inputValue = ref('');
const pendingMessage = ref<Message | null>(null);

const { open: sidebarOpen, openSidebar } = useSidebar();
const { createTopic, sendMessage, autoRename } = useChat(route.params.id as string);
const { getAgent } = useAgents();
const { providers } = useModels();

const agent = getAgent(route.params.id as string);

if (!agent.value) navigateTo('/');

useHead({ title: `${agent.value!.name} | Veridian` });

const handleSubmit = async (message: string, model: ModelWithProvider | null) => {
    if (!model) {
        console.error('No model selected');
        return;
    }

    const user = useAuth().user;
    if (!user) {
        console.error('No user');
        return;
    }

    pendingMessage.value = {
        id: '',
        userId: user.value!.id,
        topicId: null,
        content: message,
        role: 'user',
        parts: [],
        generation: null,
        parentMessageId: null,
        children: [],
        generationId: null,
        focusedIndex: null,
        deleted: false,
        createdAt: new Date(),
    }

    const topic = await createTopic();
    if (!topic) throw new Error('Failed to create topic');

    autoRename(topic.id, message).then(async res => {
        if (res.ok === false) {
            console.error('Failed to auto-rename:', res.error);
            await triplit.update('topics', topic.id, {
                renaming: false,
            });

            return;
        }
    });

    await navigateTo(`/agent/${route.params.id}/topic/${topic.id}`);

    return sendMessage(message, topic, [], agent.value!, model.provider, model).then(async res => {
        if (res.ok === false) {
            console.error('Failed to send message:', res.error);

            pendingMessage.value = null;

            await navigateTo(`/agent/${route.params.id}`);
            await triplit.delete('topics', topic.id);

            const chatInput = document.getElementById('chat') as HTMLInputElement;
            if (chatInput) {
                chatInput.value = message;
                chatInput.dispatchEvent(new Event('input'));
                nextTick(() => {
                    chatInput.focus();
                });
            }
        }
    });
};
</script>


<template>
    <div class="flex flex-col h-full w-full">
        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
            <div class="flex items-center gap-2">
                <button v-if="!sidebarOpen" @click="openSidebar"
                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
                    <Icon class="text-5" name="mynaui:panel-left-open" />
                </button>
                <h4 class="text-lg">
                    {{ agent?.name }}
                </h4>
            </div>
        </div>

        <div ref="chatPaneWrapper"
            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
            <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
                <div class="w-full px-px flex flex-col flex-grow gap-2"
                    :class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
                    <div v-if="pendingMessage === null">
                        <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
                        <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
                    </div>
                    <div v-else class="opacity-70">
                        <Message :message="pendingMessage" />
                    </div>
                </div>

                <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
                    <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
                        :agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
                </div>
            </div>
        </div>
    </div>
</template>