fix: handle paste image on linux

[urmauur]

Describe Your Changes

This pull request updates the paste handling logic in the ChatInput component to improve compatibility with Linux systems and browsers that do not support the legacy clipboardData.items API. The main change is the addition of a fallback that uses the modern Clipboard API to read pasted images when the legacy API is unavailable.

Paste handling improvements:

• Added a fallback to use the modern Clipboard API (navigator.clipboard.read) when clipboardData.items is unavailable, improving image paste support on Linux and newer browsers.
• Ensured pasted images are converted to File objects and handled consistently by synthesizing a change event for the existing file handling logic.
• Added error handling for clipboard read operations to prevent crashes and log issues for debugging.

Fixes Issues

• Closes #
• Closes #

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

---

Important

Improves image paste handling in ChatInput.tsx for Linux and newer browsers by using modern Clipboard API as a fallback and adding error handling.

• Behavior:
  • Updates handlePaste in ChatInput.tsx to use modern Clipboard API (navigator.clipboard.read) as a fallback when clipboardData.items is unavailable.
  • Ensures pasted images are converted to File objects and processed by synthesizing a change event.
  • Adds error handling for clipboard read operations to prevent crashes and log issues.
• Compatibility:
  • Improves image paste support on Linux and newer browsers.
  • Handles cases where traditional clipboard methods are unsupported.

^{This description was created by for b93f77a. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to b915f1f in 2 minutes and 3 seconds. Click for details.

• Reviewed 77 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/ChatInput.tsx:377

• Draft comment:
  Good use of async/await for the paste handler. Consider adding a brief comment explaining why the handler is async (i.e., to support fallback for Linux where clipboardData.items is missing).
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50% None

2. web-app/src/containers/ChatInput.tsx:386

• Draft comment:
  The condition checks if clipboardItems is falsy. Note that if clipboardData.items exists but is an empty list, the fallback won't trigger. Verify this behavior is intentional.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% The comment is technically correct - an empty list would trigger the fallback. However, this is likely intentional since an empty clipboard items list means there's nothing to paste, so trying the fallback path makes sense. The comment is asking for verification of intended behavior without providing evidence that this is actually problematic. The comment identifies a real edge case in the code's behavior. Maybe there's a reason we should handle empty lists differently from null/undefined. While technically accurate, the behavior makes logical sense - if there are no clipboard items through the standard API, trying the fallback API is reasonable. There's no clear reason why empty lists should be treated differently. Delete the comment. While it identifies a real edge case, the current behavior is logical and there's no evidence provided that it needs to be changed.

3. web-app/src/containers/ChatInput.tsx:406

• Draft comment:
  Converting the blob to a File uses a filename based on the MIME type. For types like 'image/svg+xml', the resulting filename may include unexpected characters. Consider sanitizing or handling such cases if needed.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

4. web-app/src/containers/ChatInput.tsx:418

• Draft comment:
  The synthetic event casting to React.ChangeEvent (using 'as unknown as ...') bypasses type-checking. Although common, consider a more explicit approach or add a clarifying comment to explain this pattern.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

Workflow ID: wflow_QyicY20foaH7JrET

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[github-actions]

Barecheck - Code coverage report

Total: 36.09%

Your code coverage diff: -0.08% ▾

Uncovered files and lines

File

Lines

web-app/src/containers/ChatInput.tsx

88-90, 113-119, 121-123, 139-140, 181-182, 204-206, 213-214, 217-220, 223-233, 236, 238-240, 246, 248, 250-251, 253-257, 260-261, 264, 266-269, 271-275, 277-289, 291-301, 303-312, 314-317, 320-321, 323-326, 329-330, 333-337, 340-341, 343-346, 349-351, 354-356, 359-362, 364-365, 367-371, 373-375, 379-381, 383-384, 387-390, 392-393, 395-396, 398-403, 406-412, 414-418, 421, 423-427, 430-431, 433-435, 437-440, 442-444, 446-457, 459-464, 466-472, 475-478, 514-522, 524-529, 531-533, 535-537, 539-540, 598, 638-652, 668-670, 675-679, 694-698, 713-727, 730-744, 754, 772, 789, 791-794

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed b93f77a in 2 minutes and 35 seconds. Click for details.

• Reviewed 131 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/ChatInput.tsx:444

• Draft comment:
  Potential filename collision: using Date.now() alone may not ensure unique names when multiple images are pasted quickly. Consider appending an extra unique identifier.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% 1. The code handles pasted images and generates filenames using Date.now() 2. Date.now() returns milliseconds, so collisions are possible but unlikely 3. These are temporary files for a paste operation, not permanent storage 4. Even if a collision occurred, it likely wouldn't cause any real issues since the files are just being temporarily held for upload 5. The suggested solution adds complexity without clear benefit The comment identifies a real theoretical edge case. Multiple pastes in the same millisecond could collide. While technically correct, this is an extremely unlikely edge case for a temporary file operation. The complexity cost outweighs the minimal risk. The comment should be deleted. The current implementation using Date.now() is sufficient for this temporary file handling use case.

2. web-app/src/containers/ChatInput.tsx:392

• Draft comment:
  Refactor the processedCount and hasProcessedImage logic for clarity. The current flow in the traditional branch is a bit convoluted.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

3. web-app/src/containers/ChatInput.tsx:436

• Draft comment:
  Consider using Promise.all in the modern Clipboard API fallback to process items concurrently for improved readability and potential performance benefits.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

4. web-app/src/containers/ChatInput.tsx:474

• Draft comment:
  Consider reducing the verbosity of logging (or using a debug log) when no image data is found or clipboard access fails, to avoid noise in production logs.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_ObqfksWHW7cu2G4Q

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[qnixsynapse]

LGTM in my testing

[Minh141120]

LGTM!