feat: support pasting files into the chat

app/components/ChatInput.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import type { BaseMessage } from '~/composables/useChat';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, onUnmounted, nextTick, type Ref } from 'vue';
+import { nanoid } from 'nanoid';
+import { assert } from '~~/utils/assert';
 import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
 import type { Agent } from '~/composables/useAgents';
+import type FileSelector from './FileSelector.vue';
 
 const { allModels } = useModels();
+const { user } = useAuth();
 
 const inputHeight: Ref<string> = ref('auto');
+const fileSelectorRef = ref<InstanceType<typeof FileSelector> | null>(null);
 const inputRef = ref<HTMLTextAreaElement | null>(null);
 let tempInput = '';
 const files = ref<{
@@ -40,6 +45,20 @@ const props = defineProps<{
 
 const selectedModel = ref<ModelWithProvider | null>(null);
 
+const handlePaste = async (event: ClipboardEvent) => {
+    const items = event.clipboardData?.items;
+    if (!items) return;
+
+    for (const item of items) {
+        console.log("pasted", item, item.type, item.getAsFile());
+        const file = item.getAsFile();
+        if (file !== null) {
+            event.preventDefault();
+            fileSelectorRef.value?.uploadFile(file);
+        }
+    }
+};
+
 const initializeModel = () => {
     if (selectedModel.value) return;
     if (!props.providers || !props.agent) return;
@@ -182,10 +201,12 @@ onBeforeMount(() => {
 onMounted(() => {
     textAreaValue.value = tempInput;
     document.addEventListener('keydown', handleWindowKeyDown);
+    inputRef.value?.addEventListener('paste', handlePaste);
 });
 
 onUnmounted(() => {
     document.removeEventListener('keydown', handleWindowKeyDown);
+    inputRef.value?.removeEventListener('paste', handlePaste);
 });
 </script>
 
@@ -212,7 +233,7 @@ onUnmounted(() => {
                 <div class="flex flex-1 gap-1">
                     <ModelSelector v-if="providers !== undefined" :add-hotkey="true" v-model="selectedModel"
                         :providers="providers" />
-                    <FileSelector :selected-model="selectedModel" v-model="files" />
+                    <FileSelector ref="fileSelectorRef" :selected-model="selectedModel" v-model="files" />
                 </div>
                 <button aria-label="Send message" @click="handleSubmit"
                     :disabled="(!inputValue.content.trim() && files.length === 0) && !loading" :class="[

app/components/FileSelector.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { nanoid } from 'nanoid';
-import { assert } from '~~/utils/assert';
 
 const props = defineProps<{
     selectedModel?: ModelWithProvider | null;
@@ -9,6 +8,8 @@ const props = defineProps<{
 const imageInputRef = ref<HTMLInputElement | null>(null);
 const fileInputRef = ref<HTMLInputElement | null>(null);
 
+const { user } = useAuth();
+
 const files = defineModel<{
     id: string;
     name: string;
@@ -17,11 +18,7 @@ const files = defineModel<{
     url: string;
     progress: number;
 }[]>({ required: false, default: [] });
-const rawFiles = ref<{
+const rawFiles = ref<File[]>([]);
-    name: string;
-    type: string;
-    file: File;
-}[]>([]);
 
 const triplit = useTriplitClient();
 
@@ -64,48 +61,38 @@ const uploadWithProgress = (file: File, url: string, id: string) => {
     });
 };
 
-watch(rawFiles, async (newFiles, oldFiles) => {
+const uploadFile = async (file: File) => {
-    const { user } = useAuth();
+    try {
-    assert(user.value !== null);
-
-    const diff = newFiles.filter(f =>
-        !oldFiles.find(o => o.name === f.name) &&
-        !files.value.find(existing => existing.name === f.name)
-    );
-
-    if (diff.length === 0) return;
-
-    for (const file of diff) {
         const id = nanoid();
+        const fileName = file.name || `${id}.png`;
+        const fileType = file.type || 'application/octet-stream';
+
         files.value.push({
             id,
-            name: file.name,
+            name: fileName,
-            mimeType: file.type,
+            mimeType: fileType,
             status: 'uploading',
-            url: URL.createObjectURL(file.file),
+            url: URL.createObjectURL(file),
             progress: 0
         });
-    }
 
-    await Promise.all(diff.map(async file => {
-        try {
         const { url: uploadUrl, assetUrl } = await $fetch('/api/upload/presigned', {
             method: 'POST',
             body: JSON.stringify({
                 file: {
-                        name: file.name,
+                    name: fileName,
-                        mimeType: file.type,
+                    mimeType: fileType,
                 }
             }),
         }) as { url: string; assetUrl: string };
 
-            await uploadWithProgress(file.file, uploadUrl, files.value.find(f => f.name === file.name)!.id);
+        await uploadWithProgress(file, uploadUrl, id);
 
         await triplit.insert('files', {
-                id: files.value.find(f => f.name === file.name)!.id,
+            id,
             userId: user.value!.id,
-                name: file.name,
+            name: fileName,
-                mimeType: file.type || 'application/octet-stream',
+            mimeType: fileType,
             url: assetUrl,
         });
 
@@ -130,7 +117,19 @@ watch(rawFiles, async (newFiles, oldFiles) => {
             return f;
         });
     }
-    }));
+}
+
+defineExpose({ uploadFile });
+
+watch(rawFiles, async (newFiles, oldFiles) => {
+    const diff = newFiles.filter(f =>
+        !oldFiles.find(o => o.name === f.name) &&
+        !files.value.find(existing => existing.name === f.name)
+    );
+
+    if (diff.length === 0) return;
+
+    await Promise.all(diff.map(async file => uploadFile(file)));
 })
 
 watch(files, async (newFiles, oldFiles) => {
@@ -151,35 +150,32 @@ watch(files, async (newFiles, oldFiles) => {
         if (removedFile.url.startsWith('blob:')) {
             // we knpw that if the url starts with blob: it was the first time we uploaded it
             // so we can just delete it
+            if (removedFile.status === 'uploaded') {
                 await triplit.delete('files', removedFile.id);
+            }
 
             URL.revokeObjectURL(removedFile.url);
         }
     }
 }, { deep: true });
 
-const handleFileChange = (e: Event, inputRef: Ref<HTMLInputElement | null>) => {
+const handleFileChange = (e: Event) => {
     const inputFiles = (e.target! as HTMLInputElement).files;
     if (inputFiles === null) return;
 
-    const newFiles = [...inputFiles].map(file => ({
+    rawFiles.value = [...rawFiles.value, ...inputFiles];
-        name: file.name,
-        type: file.type,
-        file: file,
-    }));
-    rawFiles.value = [...rawFiles.value, ...newFiles];
 
     (e.target! as HTMLInputElement).value = '';
 }
 
 onMounted(() => {
-    imageInputRef.value?.addEventListener('change', (e) => handleFileChange(e, imageInputRef));
+    imageInputRef.value?.addEventListener('change', (e) => handleFileChange(e));
-    fileInputRef.value?.addEventListener('change', (e) => handleFileChange(e, fileInputRef));
+    fileInputRef.value?.addEventListener('change', (e) => handleFileChange(e));
 });
 
 onUnmounted(() => {
-    imageInputRef.value?.removeEventListener('change', (e) => handleFileChange(e, imageInputRef));
+    imageInputRef.value?.removeEventListener('change', (e) => handleFileChange(e));
-    fileInputRef.value?.removeEventListener('change', (e) => handleFileChange(e, fileInputRef));
+    fileInputRef.value?.removeEventListener('change', (e) => handleFileChange(e));
 });
 </script>