feat: add image-select modal (#49)

src/components/chat-view/chat-input/ImageUploadButton.tsx

@@ -1,30 +1,40 @@
 import { ImageIcon } from 'lucide-react'
+import { TFile } from 'obsidian'
+
+import { useApp } from '../../../contexts/AppContext'
+import { ImageSelectorModal } from '../../modals/ImageSelectorModal'
 
 export function ImageUploadButton({
   onUpload,
 }: {
   onUpload: (files: File[]) => void
 }) {
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files ?? [])
-    if (files.length > 0) {
-      onUpload(files)
+  const app = useApp()
+
+  const handleClick = () => {
+    const handleVaultImages = async (files: TFile[]) => {
+      const imageFiles = await Promise.all(
+        files.map(async (file) => {
+          const arrayBuffer = await app.vault.readBinary(file)
+          const blob = new Blob([arrayBuffer], { type: `image/${file.extension}` })
+          return new File([blob], file.name, { type: `image/${file.extension}` })
+        })
+      )
+      onUpload(imageFiles)
     }
+
+    new ImageSelectorModal(app, onUpload, handleVaultImages).open()
   }
 
   return (
-    <label className="infio-chat-user-input-submit-button">
-      <input
-        type="file"
-        accept="image/*"
-        multiple
-        onChange={handleFileChange}
-        style={{ display: 'none' }}
-      />
+    <button 
+      className="infio-chat-user-input-submit-button"
+      onClick={handleClick}
+    >
       <div className="infio-chat-user-input-submit-button-icons">
         <ImageIcon size={12} />
       </div>
       <div>Image</div>
-    </label>
+    </button>
   )
 }