[Feature]: Paste Image Support in Wave AI Panel #2506
Conversation
WalkthroughThis 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
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/app/aipanel/aipanelinput.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-14T06:30:54.763Z
Learnt from: sawka
Repo: wavetermdev/waveterm PR: 2430
File: frontend/app/aipanel/aimessage.tsx:137-144
Timestamp: 2025-10-14T06:30:54.763Z
Learning: In `frontend/app/aipanel/aimessage.tsx`, the `AIToolUseGroup` component splits file operation tool calls into separate batches (`fileOpsNeedApproval` and `fileOpsNoApproval`) based on their approval state before passing them to `AIToolUseBatch`. This ensures each batch has homogeneous approval states, making group-level approval handling valid.
Applied to files:
frontend/app/aipanel/aipanelinput.tsx
🧬 Code graph analysis (1)
frontend/app/aipanel/aipanelinput.tsx (2)
frontend/app/aipanel/waveai-focus-utils.ts (1)
waveAIHasFocusWithin(15-42)frontend/app/aipanel/ai-utils.ts (3)
isAcceptableFile(11-199)validateFileSize(308-339)formatFileSizeError(372-375)
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/app/aipanel/aipanelinput.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-14T06:30:54.763Z
Learnt from: sawka
Repo: wavetermdev/waveterm PR: 2430
File: frontend/app/aipanel/aimessage.tsx:137-144
Timestamp: 2025-10-14T06:30:54.763Z
Learning: In `frontend/app/aipanel/aimessage.tsx`, the `AIToolUseGroup` component splits file operation tool calls into separate batches (`fileOpsNeedApproval` and `fileOpsNoApproval`) based on their approval state before passing them to `AIToolUseBatch`. This ensures each batch has homogeneous approval states, making group-level approval handling valid.
Applied to files:
frontend/app/aipanel/aipanelinput.tsx
🧬 Code graph analysis (1)
frontend/app/aipanel/aipanelinput.tsx (2)
frontend/app/aipanel/waveai-focus-utils.ts (1)
waveAIHasFocusWithin(15-42)frontend/app/aipanel/ai-utils.ts (3)
isAcceptableFile(11-199)validateFileSize(308-339)formatFileSizeError(372-375)
🔇 Additional comments (6)
frontend/app/aipanel/aipanelinput.tsx (6)
41-41: LGTM!Inlining the focus handler simplifies the code while maintaining the same functionality.
56-65: LGTM!The focus and blur handlers are correctly refactored with proper early returns and dependencies.
67-70: LGTM!The textarea resize behavior is correctly triggered on input changes and when the panel opens.
72-72: LGTM!Simplifying the upload click handler to a one-liner improves code clarity.
92-99: LGTM!The refactored
handleFileChangecorrectly processes each file through the centralizedprocessFilehelper and clears the input afterwards. Sequential processing is acceptable for file uploads to maintain order and avoid overwhelming the system.
136-136: LGTM!The
onPastehandler is correctly wired to enable image paste functionality.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/app/aipanel/aipanelinput.tsx (1)
121-121: Consider adding randomness or UUID for guaranteed filename uniqueness.While
Date.now()combined with sequentialawaitprocessing makes collisions extremely unlikely, adding a random component or using a UUID would eliminate even the theoretical possibility of duplicate filenames.For example:
const filename = `pasted-image-${Date.now()}-${Math.random().toString(36).substr(2, 9)}.${ext}`;or use a UUID library if available:
const filename = `pasted-image-${crypto.randomUUID()}.${ext}`;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/app/aipanel/aipanelinput.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-14T06:30:54.763Z
Learnt from: sawka
Repo: wavetermdev/waveterm PR: 2430
File: frontend/app/aipanel/aimessage.tsx:137-144
Timestamp: 2025-10-14T06:30:54.763Z
Learning: In `frontend/app/aipanel/aimessage.tsx`, the `AIToolUseGroup` component splits file operation tool calls into separate batches (`fileOpsNeedApproval` and `fileOpsNoApproval`) based on their approval state before passing them to `AIToolUseBatch`. This ensures each batch has homogeneous approval states, making group-level approval handling valid.
Applied to files:
frontend/app/aipanel/aipanelinput.tsx
🧬 Code graph analysis (1)
frontend/app/aipanel/aipanelinput.tsx (2)
frontend/app/aipanel/waveai-focus-utils.ts (1)
waveAIHasFocusWithin(15-42)frontend/app/aipanel/ai-utils.ts (3)
isAcceptableFile(11-199)validateFileSize(308-339)formatFileSizeError(372-375)
🔇 Additional comments (2)
frontend/app/aipanel/aipanelinput.tsx (2)
74-95: LGTM! Robust file processing with proper validation and error handling.The
processFilefunction effectively centralizes file validation, size checking, and upload logic. The try-catch aroundmodel.addFile()ensures that upload failures are gracefully handled with clear user feedback. The memoization with[model]correctly prevents stale closures.
97-104: LGTM! File change handler properly integrated.The sequential file processing ensures predictable behavior, and clearing the input value allows users to re-select the same file if needed.
|
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. |
|
Appreciate the feedback! I can revert or isolate the formatting changes to make the review easier. Would you prefer I do that? |
2 participants
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:
This update improves the user experience by removing the need to manually upload images enabling faster and smoother AI-assisted workflows.