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,10 +61,67 @@ 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 id = nanoid();
+        const fileName = file.name || `${id}.png`;
+        const fileType = file.type || 'application/octet-stream';
 
+        files.value.push({
+            id,
+            name: fileName,
+            mimeType: fileType,
+            status: 'uploading',
+            url: URL.createObjectURL(file),
+            progress: 0
+        });
+
+        const { url: uploadUrl, assetUrl } = await $fetch('/api/upload/presigned', {
+            method: 'POST',
+            body: JSON.stringify({
+                file: {
+                    name: fileName,
+                    mimeType: fileType,
+                }
+            }),
+        }) as { url: string; assetUrl: string };
+
+        await uploadWithProgress(file, uploadUrl, id);
+
+        await triplit.insert('files', {
+            id,
+            userId: user.value!.id,
+            name: fileName,
+            mimeType: fileType,
+            url: assetUrl,
+        });
+
+        files.value = files.value.map(f => {
+            if (f.name === file.name) {
+                return {
+                    ...f,
+                    status: 'uploaded',
+                    progress: 100
+                };
+            }
+            return f;
+        });
+    } catch (error) {
+        files.value = files.value.map(f => {
+            if (f.name === file.name) {
+                return {
+                    ...f,
+                    status: 'error'
+                };
+            }
+            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)
@@ -75,62 +129,7 @@ watch(rawFiles, async (newFiles, oldFiles) => {
 
     if (diff.length === 0) return;
 
-    for (const file of diff) {
+    await Promise.all(diff.map(async file => uploadFile(file)));
-        const id = nanoid();
-        files.value.push({
-            id,
-            name: file.name,
-            mimeType: file.type,
-            status: 'uploading',
-            url: URL.createObjectURL(file.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,
-                        mimeType: file.type,
-                    }
-                }),
-            }) as { url: string; assetUrl: string };
-
-            await uploadWithProgress(file.file, uploadUrl, files.value.find(f => f.name === file.name)!.id);
-
-            await triplit.insert('files', {
-                id: files.value.find(f => f.name === file.name)!.id,
-                userId: user.value!.id,
-                name: file.name,
-                mimeType: file.type || 'application/octet-stream',
-                url: assetUrl,
-            });
-
-            files.value = files.value.map(f => {
-                if (f.name === file.name) {
-                    return {
-                        ...f,
-                        status: 'uploaded',
-                        progress: 100
-                    };
-                }
-                return f;
-            });
-        } catch (error) {
-            files.value = files.value.map(f => {
-                if (f.name === file.name) {
-                    return {
-                        ...f,
-                        status: 'error'
-                    };
-                }
-                return f;
-            });
-        }
-    }));
 })
 
 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
-            await triplit.delete('files', removedFile.id);
+            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>