feat: add message attachments (wip)

app/pages/agent/[id]/topic/[topicId].vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type schema from '#triplit/schema';
 import type { Entity } from '@triplit/client';
+import type { BaseMessage } from '~/composables/useChat';
 import type { ModelWithProvider } from '~/composables/useModels';
 
 const rootStart = Date.now();
 const triplit = useTriplitClient();
 
 const chatPaneWrapper = ref<HTMLElement | null>(null);
-const inputValue = ref('');
+const inputValue = ref<BaseMessage>({ content: '', fileIds: [] });
 const route = useRoute();
 const { sendMessage, regenerateMessage } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
@@ -31,6 +32,13 @@ const messagesQuery = computed(() =>
         .Order('createdAt', 'ASC')
 );
 
+const attachmentsQuery = computed(() =>
+    triplit
+        .query('attachments')
+        .Where(['topicId', '=', route.params.topicId])
+        .Order('createdAt', 'ASC')
+);
+
 const partsQuery = computed(() =>
     triplit
         .query('message_parts')
@@ -48,11 +56,13 @@ const generationsQuery = computed(() =>
 const [
     { results: rawTopic, unsubscribe: unsubscribeTopic },
     { results: rawMessages, unsubscribe: unsubscribeMessages },
+    { results: rawAttachments, unsubscribe: unsubscribeAttachments },
     { results: rawParts, unsubscribe: unsubscribeParts },
     { results: rawGenerations, unsubscribe: unsubscribeGenerations }
 ] = await Promise.all([
     useQuery('topic', triplit, topicQuery),
     useQuery('messages', triplit, messagesQuery),
+    useQuery('attachments', triplit, attachmentsQuery),
     useQuery('parts', triplit, partsQuery),
     useQuery('generations', triplit, generationsQuery),
 ]);
@@ -62,6 +72,7 @@ const topic = computed(() => {
 
     const messagesMap = new Map();
     const partsByMessage = new Map<string, Entity<typeof schema, 'message_parts'>[]>();
+    const attachmentsByMessage = new Map<string, Entity<typeof schema, 'attachments'>[]>();
 
     // Group parts by message ID once
     if (rawParts.value) {
@@ -75,6 +86,15 @@ const topic = computed(() => {
         }
     }
 
+    if (rawAttachments.value) {
+        for (const attachment of rawAttachments.value) {
+            if (!attachmentsByMessage.has(attachment.messageId)) {
+                attachmentsByMessage.set(attachment.messageId, []);
+            }
+            attachmentsByMessage.get(attachment.messageId)!.push(attachment);
+        }
+    }
+
     const generationsMap = new Map(
         rawGenerations.value?.map(g => [g.id, g]) ?? []
     );
@@ -83,6 +103,7 @@ const topic = computed(() => {
     for (const msg of rawMessages.value) {
         messagesMap.set(msg.id, {
             ...msg,
+            attachments: attachmentsByMessage.get(msg.id) ?? [],
             parts: partsByMessage.get(msg.id) ?? [],
             children: [],
             generation: generationsMap.get(msg.generationId!) ?? null
@@ -112,7 +133,7 @@ watch(() => topic.value?.name, (newTopicName) => {
     }
 }, { immediate: true });
 
-const submitMessage = async (message: string, model: ModelWithProvider | null) => {
+const submitMessage = async (message: BaseMessage, model: ModelWithProvider | null) => {
     if (!model) {
         console.error('No model selected');
         return;
@@ -354,6 +375,7 @@ console.log("full page render took", Date.now() - rootStart);
 onUnmounted(() => {
     unsubscribeTopic?.();
     unsubscribeMessages?.();
+    unsubscribeAttachments?.();
     unsubscribeParts?.();
     unsubscribeGenerations?.();
 });