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="[