waveterm icon indicating copy to clipboard operation
waveterm copied to clipboard

[Feature]: Paste Image Support in Wave AI Panel

Open Mostafa-Khairy0 opened this issue 1 month ago โ€ข 3 comments

This feature adds support for pasting images directly into the Wave AI input panel.

When a user copies an image (e.g., from their clipboard or a screenshot) and pastes it into the input area, the image is automatically:

  • Detected from the clipboard (image/* MIME type)
  • Converted into a File object with a unique timestamp-based filename
  • Validated for file type and size
  • Added to the AI model via model.addFile()

This update improves the user experience by removing the need to manually upload images enabling faster and smoother AI-assisted workflows.

Mostafa-Khairy0 avatar Nov 02 '25 18:11 Mostafa-Khairy0

Walkthrough

This change refactors a frontend component to centralize file validation/upload via a new processFile(file) function, consolidates type and size checks, and adds paste-to-image support with handlePaste that converts clipboard images to File objects and processes them. handleFileChange now iterates over selected files, delegates to processFile, and clears the input afterward. handleUploadClick was shortened to a single invocation of the file input. Focus/blur logic was simplified and an inline focus method exposed on the input ref; handleFocus now calls model.requestWaveAIFocus() and handleBlur delegates to model.requestNodeFocus() when appropriate. Textarea receives an onPaste handler and textarea resizing is triggered in a useEffect on input and when the panel open state changes. No exported/public signatures were changed.

Estimated code review effort

๐ŸŽฏ 3 (Moderate) | โฑ๏ธ ~25 minutes

  • Verify processFile enforces allowed types and sizes, and that model.setError messages are appropriate for UI display
  • Confirm handlePaste extracts image items from the clipboard consistently across browsers, infers extensions correctly, and constructs valid File objects
  • Check focus/blur simplifications for regressions around requestWaveAIFocus() and focus retention when relatedTarget remains inside the panel
  • Validate textarea resize useEffect dependencies and that resizeTextarea runs when input changes and when isPanelOpen toggles
  • Ensure clearing the file input in handleFileChange and the one-line handleUploadClick work for multiple-file selections across target browsers

Pre-merge checks and finishing touches

โŒ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage โš ๏ธ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
โœ… Passed checks (2 passed)
Check name Status Explanation
Title Check โœ… Passed The pull request title "[Feature]: Paste Image Support in Wave AI Panel" directly and clearly reflects the main objective of the changeset. The raw summary confirms that the primary change involves "Expanded clipboard support" with a new handlePaste function to capture and process image data from the clipboard. The title is concise, specific, and accurately represents the feature being introduced without vague terminology or noise. It aligns perfectly with the PR objectives which state the core purpose is to add support for pasting images directly into the Wave AI input panel.
Description Check โœ… Passed The pull request description is directly related to the changeset and provides meaningful information about the feature being implemented. It accurately describes the paste image functionality, including how images are detected from the clipboard, converted to File objects with timestamped filenames, validated for type and size, and added to the AI model. The description aligns with the raw summary which documents the "Expanded clipboard support" and new handlePaste function, and it clearly communicates the user experience benefit of removing the need for manual image uploads.
โœจ Finishing touches
  • [ ] ๐Ÿ“ Generate docstrings
๐Ÿงช Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

๐Ÿ“œ Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

๐Ÿ“ฅ Commits

Reviewing files that changed from the base of the PR and between 7f75c7a5d4482081d8c6fd4ae192e232ef46e4dc and ab13a7e573e476abd4f93d07dc57358237803044.

๐Ÿ“’ Files selected for processing (1)
  • frontend/app/aipanel/aipanelinput.tsx (3 hunks)
๐Ÿšง Files skipped from review as they are similar to previous changes (1)
  • frontend/app/aipanel/aipanelinput.tsx

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

โค๏ธ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Nov 02 '25 18:11 coderabbitai[bot]

ah this looks like a good change, but the formatting differences make it a little harder to make sure there are no regressions. will try to review and make sure.

sawka avatar Nov 03 '25 20:11 sawka

Appreciate the feedback! I can revert or isolate the formatting changes to make the review easier. Would you prefer I do that?

Mostafa-Khairy0 avatar Nov 05 '25 20:11 Mostafa-Khairy0

Just following up on this PR. Whenever you get a moment, Iโ€™d really appreciate a quick review so we can move forward. Thank you! @sawka

Mostafa-Khairy0 avatar Nov 18 '25 09:11 Mostafa-Khairy0

closing this. we had some very big updates to the paste code in the terminal to deal with file pasting, and i want to align the code to use those instead of duplicating them (termutil.ts)

sawka avatar Nov 25 '25 17:11 sawka