veridian/app/pages/index.vue

<script setup lang="ts">
import type schema from '#triplit/schema';
import type { Entity } from '@triplit/client';
import { assert } from '~~/utils/assert';

const { agents, unsubscribe: unsubscribeAgents, createAgent } = await useAgents();
const { providers, unsubscribe: unsubscribeModels, getFirstAvailableModel, allModels } = await useModels();

const taglines = {
    morning: [
        'crush your goals before breakfast',
        'turn your productivity to 11',
        'start your day like a boss',
        'make it happen before noon',
        'rise and grind, repeat',
        'morning MVP, all day',
        'fuel your fire early',
        'own the first half of your day',
    ],
    afternoon: [
        'afternoon focus session',
        'making afternoon moves',
        'steady progress continues',
        'keeping the flow going',
        'afternoon productivity boost',
        'momentum is building',
        'making it happen today',
        'afternoon hustle mode',
    ],
    evening: [
        'finish strong today',
        'end on a high note',
        'wrap it up like a pro',
        'leave it all on the field',
        "tomorrow's success starts tonight",
        'last call for wins',
        'close it out like a champion',
        'seal the deal before bed',
    ],
};

const animatedText = ref('');
const currentTaglineIndex = ref(0);
const isDeleting = ref(false);
let typeWriterInterval: NodeJS.Timeout | null = null;

const typeWriter = (time: 'morning' | 'afternoon' | 'evening') => {
    const currentTaglines = taglines[time];
    const currentText = currentTaglines[currentTaglineIndex.value]!;

    if (!isDeleting.value) {
        animatedText.value = currentText.substring(0, animatedText.value.length + 1);
        if (animatedText.value === currentText) {
            isDeleting.value = true;
            typeWriterInterval = setTimeout(() => typeWriter(time), 2000);
            return;
        }
    } else {
        animatedText.value = currentText.substring(0, animatedText.value.length - 1);
        if (animatedText.value === '') {
            isDeleting.value = false;
            currentTaglineIndex.value = (currentTaglineIndex.value + 1) % currentTaglines.length;
        }
    }

    const baseDeleteSpeed = 80;
    const speed = isDeleting.value
        ? baseDeleteSpeed * (0.5 + 0.25 * (animatedText.value.length / currentText.length))
        : 100;

    typeWriterInterval = setTimeout(() => typeWriter(time), speed);
};

const agent = computed(() => {
    return agents.value?.[0];
});

const handleChatSubmit = async (message: string, model: ModelWithProvider | null) => {
    console.log('Message submitted:', message, agents);
    let agent: Entity<typeof schema, 'agents'> | null = agents.value?.[0] ?? null;
    if (!agent) {
        const triplit = useTriplitClient();
        assert('flush' in triplit);

        agent = await createAgent();
        await triplit.flush();
    }

    if (!agent) throw new Error('Failed to find agent');

    if (!model) {
        if (agent.defaultModelId) {
            model = allModels.value.find(m => m.id === agent.defaultModelId) ?? null;
        } else {
            model = getFirstAvailableModel();
        }
    }

    if (!model) {
        console.error('No model selected');
        return;
    }

    const { createTopic, autoRename, sendMessage } = useChat(agent.id);

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

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

    autoRename(topic.id, message);

    return sendMessage(message, topic, [], agent, model.provider, model);
};

onMounted(() => {
    let time: 'morning' | 'afternoon' | 'evening' = 'morning';
    const now = new Date();
    const hours = now.getHours();

    if (hours < 12) {
        time = 'morning';
    } else if (hours < 22) {
        time = 'afternoon';
    } else {
        time = 'evening';
    }

    // randomly select a tagline
    currentTaglineIndex.value = Math.floor(Math.random() * taglines[time].length);
    typeWriter(time);
});

onUnmounted(() => {
    if (typeWriterInterval !== null) {
        clearTimeout(typeWriterInterval);
    }
    unsubscribeAgents?.();
    unsubscribeModels?.();
})
</script>

<template>
    <div class="flex flex-col items-center pt-12 px-4 h-full gap-12">
        <h1 class="text-center text-3xl font-semibold">{{ animatedText }}<span class="cursor">&nbsp;</span></h1>
        <div class="max-w-4xl h-full w-full">
            <!-- TODO: view transitions have caused me issues with the page flashing with no content (so just a black or white screen depending on the theme) so I have disabled them for now.  -->
            <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
                :providers="providers" @submit="handleChatSubmit" />
        </div>
    </div>
</template>

<style>
.cursor {
    display: inline-block;
    width: 1rem;
    height: 0.9em;
    background-color: currentColor;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
    margin-left: 0.125rem;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}
</style>