fix: handle copy image from browser in linux

web-app/src/containers/ChatInput.tsx

@@ -381,61 +381,10 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
     }
 
     const clipboardItems = e.clipboardData?.items
+    let hasProcessedImage = false
 
-    // Linux fallback: Use modern Clipboard API if clipboardData.items is unavailable
+    // Try clipboardData.items first (traditional method)
-    if (
+    if (clipboardItems && clipboardItems.length > 0) {
-      !clipboardItems &&
-      navigator.clipboard &&
-      'read' in navigator.clipboard
-    ) {
-      e.preventDefault()
-
-      try {
-        const clipboardContents = await navigator.clipboard.read()
-        const files: File[] = []
-
-        for (const item of clipboardContents) {
-          const imageTypes = item.types.filter((type) =>
-            type.startsWith('image/')
-          )
-
-          for (const type of imageTypes) {
-            try {
-              const blob = await item.getType(type)
-              // Convert blob to File
-              const file = new File(
-                [blob],
-                `pasted-image.${type.split('/')[1]}`,
-                { type }
-              )
-              files.push(file)
-            } catch (error) {
-              console.error('Error reading clipboard item:', error)
-            }
-          }
-        }
-
-        if (files.length > 0) {
-          const syntheticEvent = {
-            target: {
-              files: files,
-            },
-          } as unknown as React.ChangeEvent<HTMLInputElement>
-
-          handleFileChange(syntheticEvent)
-        }
-        return
-      } catch (error) {
-        console.error('Error reading clipboard contents:', error)
-        return
-      }
-    }
-
-    // Original logic for browsers with working clipboardData.items
-    if (!clipboardItems) {
-      return
-    }
-
       const imageItems = Array.from(clipboardItems).filter((item) =>
         item.type.startsWith('image/')
       )
@@ -454,7 +403,8 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
           processedCount++
 
           // When all items are processed, handle the valid files
-        if (processedCount === imageItems.length && files.length > 0) {
+          if (processedCount === imageItems.length) {
+            if (files.length > 0) {
               const syntheticEvent = {
                 target: {
                   files: files,
@@ -462,8 +412,68 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
               } as unknown as React.ChangeEvent<HTMLInputElement>
 
               handleFileChange(syntheticEvent)
+              hasProcessedImage = true
+            }
           }
         })
+        
+        // If we found image items but couldn't get files, fall through to modern API
+        if (processedCount === imageItems.length && !hasProcessedImage) {
+          // Continue to modern clipboard API fallback below
+        } else {
+          return // Successfully processed with traditional method
+        }
+      }
+    }
+
+    // Modern Clipboard API fallback (for Linux, images copied from web, etc.)
+    if (navigator.clipboard && 'read' in navigator.clipboard) {
+      e.preventDefault()
+
+      try {
+        const clipboardContents = await navigator.clipboard.read()
+        const files: File[] = []
+
+        for (const item of clipboardContents) {
+          const imageTypes = item.types.filter((type) =>
+            type.startsWith('image/')
+          )
+
+          for (const type of imageTypes) {
+            try {
+              const blob = await item.getType(type)
+              // Convert blob to File with better naming
+              const extension = type.split('/')[1] || 'png'
+              const file = new File(
+                [blob],
+                `pasted-image-${Date.now()}.${extension}`,
+                { type }
+              )
+              files.push(file)
+            } catch (error) {
+              console.error('Error reading clipboard item:', error)
+            }
+          }
+        }
+
+        if (files.length > 0) {
+          const syntheticEvent = {
+            target: {
+              files: files,
+            },
+          } as unknown as React.ChangeEvent<HTMLInputElement>
+
+          handleFileChange(syntheticEvent)
+          return
+        }
+      } catch (error) {
+        console.error('Clipboard API access failed:', error)
+      }
+    }
+
+    // If we reach here, no image was found or processed
+    if (!hasProcessedImage) {
+      console.log('No image data found in clipboard or clipboard access failed')
     }
   }