feat: Update ChatInputForm and FileSelector components for v-model binding

- Refactored `ChatInputForm.vue` to use v-model for handling file selection with `FileSelector` component.
- Removed `handleFilesSelected` method from `ChatInputForm.vue` as it is no longer needed with v-model.
- Updated `FileSelector.vue` component to accept a `modelValue` prop and emit `update:modelValue` for two-way data binding.
- Added a watcher in `FileSelector.vue` to update the displayed file names whenever `modelValue` changes.

Author: takanotume24

src/components/ChatInputForm.vue

@@ -5,7 +5,7 @@
         @keydown="checkCtrlEnter"></textarea>
     </div>
     <div class="d-flex justify-content-between align-items-center">
-      <FileSelector @files-selected="handleFilesSelected" />
+      <FileSelector v-model="selectedFiles"/>
       <button type="submit" class="btn btn-primary">Send</button>
     </div>
   </form>
@@ -51,9 +51,6 @@ export default defineComponent({
         this.handleSubmit();
       }
     },
-    handleFilesSelected(files: File[]) {
-      this.selectedFiles = files;
-    },
   },
   mounted() {
 

src/components/FileSelector.vue

@@ -17,21 +17,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 
 export default defineComponent({
-    emits: ['files-selected'],
-    setup(_, { emit }) {
-        const selectedFiles = ref<File[]>([]);
+    props: {
+        modelValue: {
+            type: Array as () => File[],
+            default: () => []
+        }
+    },
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
         const fileNames = ref<string[]>([]);
         const fileInput = ref<HTMLInputElement | null>(null);
 
+        // Watch for changes in modelValue and update fileNames
+        watch(() => props.modelValue, (newFiles) => {
+            fileNames.value = newFiles.map(file => file.name);
+        }, { immediate: true });
+
         const handleFileChange = (event: Event) => {
             const target = event.target as HTMLInputElement;
             if (target.files) {
-                selectedFiles.value = Array.from(target.files);
-                fileNames.value = selectedFiles.value.map(file => file.name);
-                emit('files-selected', selectedFiles.value);
+                const files = Array.from(target.files);
+                emit('update:modelValue', files);
             }
         };
 
@@ -49,4 +58,5 @@ export default defineComponent({
 });
 </script>
 
+
 <style scoped></style>