[FIX] Pasting Images in Chat with Clipboard or CTRL+V

[charlwillia6]

Description ✏️

Since the beginning I have been unable to use CTRL+V to paste images into the chat input box. I believe this may have been just an issue with Windows and Linux.

This PR fixes that issue.

This PR fixes this issue: trypear/pearai-app#114

Also, this PR fixes a spacing issue with the StepContainer, and also fixes the resizing of the TopGuiDiv when the height of the chat input box increases.

StepContainer spacing issue:

Checklist ✅

• I have added screenshots (if UI changes are present).
• I have done a self-review of my code.
• I have manually tested my code (if applicable).

---

Important

Fixes image pasting in chat and adjusts UI layout for better spacing and resizing.

• Image Pasting:
  • Fixes image pasting via clipboard in TipTapEditor.tsx by adding handlePaste() to support image types and size checks.
  • Refactors handleImageFile() to be reusable and checks image type and size.
• UI Adjustments:
  • Fixes spacing issue in StepContainer.tsx by adjusting margin-top in the className.
  • Adjusts TopGuiDiv resizing in gui.tsx to handle chat input box height changes.
• Misc:
  • Removes unnecessary whitespace in TipTapEditor.tsx.

^{This description was created by for 1085ddc. It will automatically update as commits are pushed.}

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 1085ddc in 3 minutes and 14 seconds

More details

• Looked at 183 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 7 drafted comments based on config settings.

1. gui/src/components/gui/StepContainer.tsx:195

• Draft comment:
  Margin change: switched from a negative top margin (-mt-[6px]) to mt-2. Verify that this renders as intended on all viewports.
• Reason this comment was not posted:
  Comment did not seem useful.

2. gui/src/components/mainInput/TipTapEditor.tsx:197

• Draft comment:
  The error message in handleImageFile only mentions jpg and png despite supporting other formats; consider updating the error message for consistency.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  Looking at the diff, the handleImageFile function was moved from being an inner function to an exported function, and an onError parameter was added. The error message itself wasn't changed - it existed before and continues to exist. Since this isn't about a change made in the PR, we should not keep this comment.
  The error message inconsistency is a real issue that could confuse users. Just because it's pre-existing doesn't necessarily mean it shouldn't be fixed.
  While the inconsistency is real, our role is to review changes in this PR, not to find pre-existing issues. The comment is about unchanged code.
  Delete the comment because it addresses a pre-existing issue rather than a change made in this PR.

3. gui/src/components/gui/StepContainer.tsx:195

• Draft comment:
  Changed negative margin to mt-2. Confirm that replacing '-mt-[6px]' with 'mt-2' provides the desired spacing per design guidelines.
• Reason this comment was not posted:
  Marked as duplicate.

4. gui/src/components/mainInput/TipTapEditor.tsx:164

• Draft comment:
  Exported handleImageFile function now uses an onError callback instead of posting an error popup. Ensure this change fits with overall error reporting strategy across the app.
• Reason this comment was not posted:
  Comment did not seem useful.

5. gui/src/components/mainInput/TipTapEditor.tsx:225

• Draft comment:
  In handlePaste, the pasted image file is always recreated as type 'image/png'. Consider preserving the original file type (e.g. JPEG) to avoid potential quality or metadata issues.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  While technically correct that the code converts everything to PNG, this may be an intentional design choice for consistency. The handleImageFile function already accepts multiple formats including JPEG/PNG, and converts everything to JPEG in getDataUrlForFile (line 150). So the PNG conversion here is temporary and doesn't actually affect the final format. Additionally, for a chat interface, preserving exact image formats is likely not critical functionality.
  I may be underestimating the importance of preserving image metadata and quality. Some use cases might require maintaining the original format.
  The code already standardizes all images to JPEG format in getDataUrlForFile(), so preserving the intermediate PNG/JPEG distinction adds unnecessary complexity without benefit.
  The comment should be deleted since the format conversion is likely intentional, and the final output is JPEG regardless of intermediate steps.

6. gui/src/components/mainInput/TipTapEditor.tsx:438

• Draft comment:
  Within the ProseMirror paste plugin, the inserted image node is always added at position 0. Consider inserting at the current selection to ensure the image appears where the user expects.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

7. gui/src/pages/gui.tsx:246

• Draft comment:
  The dependency array for the ResizeObserver useEffect now includes 'inputContainerRef.current' and 'topGuiDivRef.current'. Since refs are mutable and may not trigger re-renders, consider using callback refs or ensuring these elements are stable to avoid unintended behavior.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_6aqhEN14qOQgpetk

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[charlwillia6]

This PR replaces #169