feat: add message attachments (wip)

app/pages/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { assert } from '~~/utils/assert';
+import type { BaseMessage } from '~/composables/useChat';
 import type { Agent } from '~/composables/useAgents';
 
 const triplit = useTriplitClient();
@@ -8,6 +9,8 @@ const { open: sidebarOpen, openSidebar } = useSidebar();
 const { agents, createAgent } = useAgents();
 const { providers, getFirstAvailableModel, allModels } = useModels();
 
+const inputValue = ref<BaseMessage>({ content: '', fileIds: [] });
+
 const taglines = {
     morning: [
         'crush your goals before breakfast',
@@ -77,7 +80,7 @@ const agent = computed(() => {
     return agents.value?.[0] ?? null;
 });
 
-const handleChatSubmit = async (message: string, model: ModelWithProvider | null) => {
+const handleChatSubmit = async (message: BaseMessage, model: ModelWithProvider | null) => {
     console.log('Message submitted:', message, agents);
     let agent: Agent | null = agents.value?.[0] ?? null;
     if (!agent) {
@@ -110,7 +113,7 @@ const handleChatSubmit = async (message: string, model: ModelWithProvider | null
 
     await navigateTo(`/agent/${agent.id}/topic/${topic.id}`);
 
-    autoRename(topic.id, message);
+    autoRename(topic.id, message.content);
 
     return sendMessage(message, topic, [], agent, model.provider, model).then(async res => {
         if (res.ok === false) {
@@ -118,15 +121,17 @@ const handleChatSubmit = async (message: string, model: ModelWithProvider | null
             await navigateTo(`/agent/${agent.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();
-                });
-            }
+            // const chatInput = document.getElementById('chat') as HTMLInputElement;
+            // if (chatInput) {
+            //     chatInput.value = message;
+            //     chatInput.dispatchEvent(new Event('input'));
+            //     nextTick(() => {
+            //         chatInput.focus();
+            //     });
+            // }
+            nextTick(() => {
+                inputValue.value = message;
+            });
         }
     });
 };
@@ -173,8 +178,8 @@ onUnmounted(() => {
             </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" />
+                <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+                    :agent="agent" :providers="providers" @submit="handleChatSubmit" />
             </div>
         </div>
     </div>