feat: add better provider support, icons, regen, and a lot more

app/pages/index.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-const { agents } = await useAgents();
+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: [
@@ -37,6 +42,7 @@ const taglines = {
 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];
@@ -46,7 +52,7 @@ const typeWriter = (time: 'morning' | 'afternoon' | 'evening') => {
         animatedText.value = currentText.substring(0, animatedText.value.length + 1);
         if (animatedText.value === currentText) {
             isDeleting.value = true;
-            setTimeout(() => typeWriter(time), 2000);
+            typeWriterInterval = setTimeout(() => typeWriter(time), 2000);
             return;
         }
     } else {
@@ -62,13 +68,49 @@ const typeWriter = (time: 'morning' | 'afternoon' | 'evening') => {
         ? baseDeleteSpeed * (0.5 + 0.25 * (animatedText.value.length / currentText.length))
         : 100;
 
-    setTimeout(() => typeWriter(time), speed);
+    typeWriterInterval = setTimeout(() => typeWriter(time), speed);
 };
 
-const handleChatSubmit = async (message: string, _model: unknown) => {
+const agent = computed(() => {
+    return agents.value?.[0];
+});
+
+const handleChatSubmit = async (message: string, model: ModelWithProvider | null) => {
     console.log('Message submitted:', message, agents);
-    await navigateTo(`/agent/${agents.value![0]!.id}`);
-    // TODO: Implement chat functionality
+    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(() => {
@@ -88,6 +130,14 @@ onMounted(() => {
     currentTaglineIndex.value = Math.floor(Math.random() * taglines[time].length);
     typeWriter(time);
 });
+
+onUnmounted(() => {
+    if (typeWriterInterval !== null) {
+        clearTimeout(typeWriterInterval);
+    }
+    unsubscribeAgents?.();
+    unsubscribeModels?.();
+})
 </script>
 
 <template>
@@ -95,7 +145,8 @@ onMounted(() => {
         <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" @submit="handleChatSubmit" />
+            <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
+                :providers="providers" @submit="handleChatSubmit" />
         </div>
     </div>
 </template>