feat: add paste handling for image uploads in ChatView component

[CoolSpring8]

• Implemented a new handlePaste function to manage image pasting from the clipboard.
• Enhanced user experience by allowing image files to be directly uploaded via paste action.
• Prevented default paste behavior if no text is present, ensuring only image files are processed.

Summary by CodeRabbit

• New Features
  • Added clipboard image paste support. Users can now paste images directly from their clipboard into the chat, providing a convenient alternative to the existing upload method.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

A clipboard paste handler for images was added to ChatView, detecting image items in clipboard data and forwarding them to the existing file input handler without affecting current upload or error handling flows.

Changes

Cohort / File(s)	Change Summary
Image Paste Handling src/components/ChatView.tsx	Added handlePaste function to detect image files from clipboard paste events and integrate with existing file input handler; wired to Textarea's onPaste event

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

• Focus areas:
  • Verify clipboard event handling correctly identifies image MIME types
  • Confirm integration with existing file input handler maintains expected validation and error paths
  • Check for edge cases (mixed content in clipboard, no text data scenarios)

Poem

🐰 A rabbit hops with glee so bright,
Paste an image, oh what delight!
From clipboard's pouch, the pictures flow,
Chat enriched with one swift go! 🖼️✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding paste handling for image uploads in the ChatView component, which matches the PR's primary objective and the implemented handlePaste function.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch image-paste-handling

---

📜 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 bca3716 and ae3cf7a.

📒 Files selected for processing (1)

• src/components/ChatView.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

src/components/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Components under src/components/ should include their own UI behavior (hover/edit states, popovers, menus) rather than being purely presentational

Files:

• src/components/ChatView.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript and React 18 for development
Use tsc for type-checking. Run bunx tsc --noEmit to check for type errors

Files:

• src/components/ChatView.tsx

!(**/*.md)

📄 CodeRabbit inference engine (AGENTS.md)

Indentation: use one tab (Biome default) except for Markdown files where space indentation is used

Files:

• src/components/ChatView.tsx

**/*.{ts,tsx,js,jsx,json}

📄 CodeRabbit inference engine (AGENTS.md)

Use Biome for formatting. Run bunx biome check --write . to format and organize imports

Files:

• src/components/ChatView.tsx

src/**/*.{tsx,css}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer Tailwind utilities for CSS; add global styles in src/index.css only when necessary

Files:

• src/components/ChatView.tsx

**/*.{tsx,css}

📄 CodeRabbit inference engine (AGENTS.md)

When using border in Tailwind, also include border-solid (and set a color) to avoid browser defaults

Files:

• src/components/ChatView.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx}: Never commit API keys. Keys are user-provided and stored client-side (IndexedDB). Avoid server code or bundling secrets into dist/
Keep code concise and self-documenting

Files:

• src/components/ChatView.tsx

🔇 Additional comments (3)

src/components/ChatView.tsx (3)

3-3: LGTM! Proper type import for clipboard handling.

The ClipboardEvent type import is correctly used for typing the paste handler.

---

180-200: Well-structured paste handler with proper integration.

The implementation correctly filters image items from clipboard data and leverages the existing handleFileInput infrastructure for processing. Error handling and file size validation are properly delegated.

The logic at lines 189-191 allows both text and images to be processed when pasted together: text is inserted into the textarea while images become attachments. This dual behavior enhances flexibility but please confirm this is the intended UX.

---

282-282: LGTM! Proper event handler wiring.

The onPaste handler is correctly wired to the Textarea component, consistent with other event handlers in the component.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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