Add image preview to ChatPanel

[ngoiyaeric]

Added image preview logic using URL.createObjectURL and updated UI to show thumbnails for attached images.

---

PR created automatically by Jules for task 6818274094371257842 started by @ngoiyaeric

Summary by CodeRabbit

• New Features
  • Image previews now display when you attach images to your messages, allowing you to visually confirm your selection before sending. The attachment display area has been improved with a responsive layout that shows image previews alongside file names for better visibility.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
qcx	Building	Preview, Comment	Feb 26, 2026 4:29pm

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5973db1 and b507d65.

📒 Files selected for processing (1)

• components/chat-panel.tsx

📜 Recent review details

🔇 Additional comments (2)

components/chat-panel.tsx (2)

160-168: LGTM! Proper blob URL lifecycle management.

The useEffect correctly creates and revokes blob URLs to prevent memory leaks. The cleanup function ensures the previous URL is revoked when selectedFile changes or the component unmounts.

---

304-324: LGTM! Clean UI implementation for image preview.

Good choices here:

• Using native <img> element is appropriate for blob URLs (Next.js Image doesn't support them well)
• Fixed thumbnail dimensions with object-cover ensure consistent display
• data-testid attributes enable reliable testing
• File name truncation prevents layout overflow

---

Walkthrough

The change adds image preview functionality to the chat panel component by introducing state to manage blob URLs, creating preview URLs when images are attached via effect hook, and enhancing the UI to conditionally display image previews with appropriate test identifiers.

Changes

Cohort / File(s)	Summary
Image Preview Feature components/chat-panel.tsx	Added previewUrl state and effect hook to generate/revoke blob URLs for image files. Enhanced UI to conditionally display image previews in the attached-file block with data-testid attributes for testing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: Enable file attachments in chat #303: Also modifies components/chat-panel.tsx to add image-attachment preview UI behavior.

Suggested labels

Review effort 2/5

Poem

🐰 A preview blooms where images dwell,
Blob URLs whisper their stories well,
Effects and states in harmony dance,
A chat panel dressed in visual elegance! ✨

🚥 Pre-merge checks | ✅ 3

✅ 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 'Add image preview to ChatPanel' directly and accurately describes the main change: adding image preview functionality to the ChatPanel component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/image-preview-chat-panel-6818274094371257842

---

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.}

[charliecreates]

Main concerns are around maintainability and consistency: the PR introduces a targeted ESLint suppression (@next/next/no-img-element) where next/image would be a better fit, and the current effect-driven previewUrl state can be simplified to reduce render churn and avoid Strict Mode edge-case flicker. Functionally the blob URL is correctly revoked, so issues are not correctness-blocking.

Additional notes (2)

• Performance | components/chat-panel.tsx:160-168
  Using URL.createObjectURL is fine, but the effect currently sets state (setPreviewUrl(url)) and also returns a cleanup that revokes the previousurl. In React Strict Mode, effects run twice on mount in development, which can surface timing issues in UI tests (e.g., brief flicker) and can complicate debugging.

You can avoid storing the blob URL in React state entirely by deriving it from selectedFile with useMemo and a cleanup effect that only revokes when it changes. This reduces render churn and makes the lifecycle clearer.

• Readability | components/chat-panel.tsx:301-306
  The attachment container is rendered for any selectedFile, but data-testid="attached-image" implies it only applies to images. Since the UI supports non-image files (and previewUrl is conditionally null), this test id name can create confusion and brittle tests.

Either rename it to something file-agnostic (e.g., attached-file) or only apply it when the selected file is an image.

Summary of changes

What changed

• Added image preview state to ChatPanel via previewUrl: string | null.
• Introduced a useEffect that:
  • Creates a blob URL with URL.createObjectURL(selectedFile) when the attachment is an image.
  • Stores it in state and revokes it on cleanup to avoid leaking blob URLs.
  • Clears the preview when the attachment is removed or not an image.
• Updated the attachment UI to:
  • Render a thumbnail (<img src={previewUrl} ... />) when available.
  • Add data-testid hooks (attached-image, image-preview).
  • Add an ESLint suppression for @next/next/no-img-element.

[charliecreates]

The inline // eslint-disable-next-line @next/next/no-img-element is a pretty broad escape hatch and will likely spread. Since this is a preview of a local blob URL, you can still use next/image safely (it supports blob: URLs) and avoid disabling the rule.

This also gives you better defaults (lazy loading/decoding) and consistent sizing behavior.

Suggestion

Replace the raw <img> with next/image and remove the ESLint disable. Example:

importImagefrom"next/image"{previewUrl ? (<divclassName="relative mr-2 h-16 w-16"><Imagesrc={previewUrl}alt={`Preview of ${selectedFile.name}`}fillclassName="object-cover rounded-md border border-border"unoptimized/></div>) : null}

Reply with "@CharlieHelps yes please" if you’d like me to add a commit with this change.

[ngoiyaeric]

@coderabbitai the system is not responding tokens for the image attachment plus prompt

[ngoiyaeric]

@coderabbitai this is how the images are not being previewed, analyze the error

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read the ChatPanel component to understand the full implementation
cat components/chat-panel.tsx

Length of output: 10653

---

🏁 Script executed:

#!/bin/bash
# Search for API calls or fetch requests that might handle message submission
rg -n -A5 -B5 "fetch.*api|axios|sendMessage|submitMessage" components/chat-panel.tsx

Length of output: 0

---

🏁 Script executed:

#!/bin/bash
# Look for form submission handlers
rg -n -A10 -B5 "onSubmit|handleSubmit|handleSend" components/chat-panel.tsx

Length of output: 1093

---

🏁 Script executed:

#!/bin/bash
# Search for FormData usage which is typically needed for file uploads
rg -n -A5 -B5 "FormData|append" components/chat-panel.tsx

Length of output: 505

---

🏁 Script executed:

#!/bin/bash
# Find the actions file that contains the submit function
fd -e ts -e tsx "actions" app/ lib/ --exec cat {} \;

Length of output: 25039

---

🏁 Script executed:

#!/bin/bash
# Search for the submit function definition in action files
rg -n -A20 -B5 "export.*submit|function submit|const submit" app/ lib/ --type ts --type tsx

Length of output: 27

---

🏁 Script executed:

#!/bin/bash
# Look for server actions that handle form data
rg -n -A15 "FormData|'use server'" app/actions.tsx app/actions.ts

Length of output: 2732

---

🏁 Script executed:

#!/bin/bash
# Check if there's an app/actions.tsx or similar file
cat app/actions.tsx 2>/dev/null || cat app/actions.ts 2>/dev/null || echo "Actions file not found in expected location"

Length of output: 25039

---

🏁 Script executed:

#!/bin/bash
# Check the researcher agent implementation to see how it handles messages with images
cat lib/agents/researcher.ts 2>/dev/null || cat lib/agents/researcher.tsx 2>/dev/null || cat lib/agents/index.ts 2>/dev/null | head -200

Length of output: 6425

---

🏁 Script executed:

#!/bin/bash
# Search for the researcher function/agent implementation
fd -e ts -e tsx researcher lib/agents/ --exec cat {} \;

Length of output: 6425

---

🏁 Script executed:

#!/bin/bash
# Look for model configuration and API calls in the researcher
rg -n -A10 -B5 "streamText|generateText|model|anthropic|openai" lib/agents/ --type typescript 2>/dev/null || rg -n -A10 -B5 "streamText|generateText|model|anthropic|openai" lib/agents/

Length of output: 18036

---

🏁 Script executed:

#!/bin/bash
# Check environment configuration for model settings
cat .env.example 2>/dev/null || echo "No .env.example found"

Length of output: 21

---

🏁 Script executed:

#!/bin/bash
# Check the getModel utility function to see how it handles image support
cat lib/utils.ts 2>/dev/null || cat lib/utils.tsx 2>/dev/null || rg -n -A30 "export.*getModel|function getModel" lib/ --type typescript 2>/dev/null || rg -n -A30 "export.*getModel|function getModel" lib/

Length of output: 1956

---

🏁 Script executed:

#!/bin/bash
# Search for getModel implementation across the lib directory
fd -e ts -e tsx . lib/ --exec grep -l "getModel" {} \; | xargs cat

Length of output: 26317

---

🏁 Script executed:

#!/bin/bash
# Look at the user actions to understand model selection
cat lib/actions/users.ts 2>/dev/null || cat lib/actions/users.tsx 2>/dev/null || echo "User actions file not found"

Length of output: 5512

---

@ngoiyaeric, I've identified the issue! The problem is in the getModel() function in lib/utils/index.ts. While it accepts a requireVision parameter (which is correctly passed as true when you attach an image), the function doesn't actually use this parameter to select a vision-capable model.

Looking at the code flow:

1. ✅ Your image is correctly attached and sent to the backend
2. ✅ The file is converted to base64 and added to the message content
3. ✅ The researcher agent detects the image and calls getModel(true)
4. ❌ The getModel() function ignores the vision requirement and returns models that may not support images

For example, grok-4-fast-non-reasoning likely doesn't support vision input, causing the request to fail silently.

Fix

Update your lib/utils/index.tsgetModel() function to select vision-capable model variants when requireVision is true:

exportasyncfunctiongetModel(requireVision: boolean=false){constselectedModel=awaitgetSelectedModel();constxaiApiKey=process.env.XAI_API_KEY;constgemini3ProApiKey=process.env.GEMINI_3_PRO_API_KEY;constawsAccessKeyId=process.env.AWS_ACCESS_KEY_ID;constawsSecretAccessKey=process.env.AWS_SECRET_ACCESS_KEY;constawsRegion=process.env.AWS_REGION;constbedrockModelId=process.env.BEDROCK_MODEL_ID||'anthropic.claude-3-5-sonnet-20241022-v2:0';constopenaiApiKey=process.env.OPENAI_API_KEY;if(selectedModel){switch(selectedModel){case'Grok 4.2':
if(xaiApiKey){constxai=createXai({apiKey: xaiApiKey,baseURL: 'https://api.x.ai/v1',});try{// Use vision-capable model when images are presentreturnxai(requireVision ? 'grok-vision-beta' : 'grok-4-fast-non-reasoning');}catch(error){console.error('Selected model "Grok 4.2" is configured but failed to initialize.',error);thrownewError('Failed to initialize selected model.');}}else{console.error('User selected "Grok 4.2" but XAI_API_KEY is not set.');thrownewError('Selected model is not configured.');}case'Gemini 3':
if(gemini3ProApiKey){constgoogle=createGoogleGenerativeAI({apiKey: gemini3ProApiKey,});try{// Gemini 3 Pro already supports visionreturngoogle('gemini-3-pro-preview');}catch(error){console.error('Selected model "Gemini 3" is configured but failed to initialize.',error);thrownewError('Failed to initialize selected model.');}}else{console.error('User selected "Gemini 3" but GEMINI_3_PRO_API_KEY is not set.');thrownewError('Selected model is not configured.');}case'GPT-5.1':
if(openaiApiKey){constopenai=createOpenAI({apiKey: openaiApiKey,});// GPT-4o already supports visionreturnopenai('gpt-4o');}else{console.error('User selected "GPT-5.1" but OPENAI_API_KEY is not set.');thrownewError('Selected model is not configured.');}}}// Default behavior with vision supportif(xaiApiKey){constxai=createXai({apiKey: xaiApiKey,baseURL: 'https://api.x.ai/v1',});try{// Use vision model when images are presentreturnxai(requireVision ? 'grok-vision-beta' : 'grok-4-fast-non-reasoning');}catch(error){console.warn('xAI API unavailable, falling back to next provider:');}}if(gemini3ProApiKey){constgoogle=createGoogleGenerativeAI({apiKey: gemini3ProApiKey,});try{// Gemini 3 Pro supports visionreturngoogle('gemini-3-pro-preview');}catch(error){console.warn('Gemini 3 Pro API unavailable, falling back to next provider:',error);}}if(awsAccessKeyId&&awsSecretAccessKey){constbedrock=createAmazonBedrock({bedrockOptions: {region: awsRegion,credentials: {accessKeyId: awsAccessKeyId,secretAccessKey: awsSecretAccessKey,},},});// Claude 3.5 Sonnet supports visionconstmodel=bedrock(bedrockModelId,{additionalModelRequestFields: {top_k: 350},});returnmodel;}constopenai=createOpenAI({apiKey: openaiApiKey,});// GPT-4o supports visionreturnopenai('gpt-4o');}

Note: You'll need to verify the correct model identifiers for vision-capable variants. For Grok, I used 'grok-vision-beta' as a placeholder - check the xAI documentation for the actual vision model name.

After applying this fix, your image attachments should work properly and the AI will respond to both your prompt and image!

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

@ngoiyaeric, I can see from the Comment image what appears to be content about Congo wildlife and cities with images displayed. Let me analyze the image preview implementation to identify the issue.

---

🏁 Script executed:

#!/bin/bash
# Read the chat-panel.tsx file to examine the implementation
cat components/chat-panel.tsx

Length of output: 10653

---

@ngoiyaeric, I've identified a critical issue in the implementation. Let me search for the backend submit function to confirm the expected format:

---

🏁 Script executed:

#!/bin/bash
# Find and examine the submit action implementation
fd -e ts -e tsx . | xargs rg -l "export.*submit" | head -5

Length of output: 0

---

🏁 Script executed:

#!/bin/bash
# Look for the actions file
cat app/actions.ts 2>/dev/null || cat app/actions.tsx 2>/dev/null || echo "Not found in expected location"
# Also search for files with submit function
rg "async function submit" -A 10

Length of output: 25650

---

@ngoiyaeric, I've found the critical bug causing your issue!

The Problem

On Line 115 in chat-panel.tsx, you're creating a blob URL for the image:

image: URL.createObjectURL(selectedFile)// Creates blob:http://...

Blob URLs only work in the browser and cannot be accessed by the backend. The backend filters out these invalid URLs (see app/actions.tsx lines 371-377), so the LLM never receives your image - that's why it's not responding with tokens!

The Solution

Convert the image to base64 before adding it to the content array. Here's the fix:

Why This Fixes Both Issues

1. ✅ Backend Processing: The LLM will now receive the image as a valid base64 data URL
2. ✅ Image Preview: The preview already works correctly (separate previewUrl state on line 176-183)
3. ✅ User Message Display: The UserMessage component will now show the image properly

Implementation

Replace your handleSubmit function in components/chat-panel.tsx with the corrected version above. The key change is converting the image to base64 format that both the frontend display AND backend can properly handle.

The image preview thumbnail should already be working (that uses the separate previewUrl state). The main issue was that the actual image data sent to the LLM was in an invalid blob URL format.

Let me know if you need help implementing this fix!

---

🏁 Script executed:

#!/bin/bash
# Create a fixed version showing the changes needed
cat > /tmp/chat-panel-fix.txt << 'EOF'
Replace the handleSubmit function (lines 94-136) with this fixed version:
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
if (!input.trim() && !selectedFile) {
return
}
const content: ({ type: 'text'; text: string } | { type: 'image'; image: string })[] = []
if (input) {
content.push({ type: 'text', text: input })
}
// FIX: Convert image to base64 instead of blob URL
if (selectedFile && selectedFile.type.startsWith('image/')) {
const buffer = await selectedFile.arrayBuffer()
const base64 = Buffer.from(buffer).toString('base64')
const dataUrl = `data:${selectedFile.type};base64,${base64}`
content.push({
type: 'image',
image: dataUrl // Now using data URL instead of blob URL
})
}
setMessages(currentMessages => [
...currentMessages,
{
id: nanoid(),
component: <UserMessage content={content} />
}
])
const formData = new FormData(e.currentTarget)
if (selectedFile) {
formData.append('file', selectedFile)
}
// Include drawn features in the form data
formData.append('drawnFeatures', JSON.stringify(mapData.drawnFeatures || []))
setInput('')
clearAttachment()
const responseMessage = await submit(formData)
setMessages(currentMessages => [...currentMessages, responseMessage as any])
}
EOF
cat /tmp/chat-panel-fix.txt

Length of output: 1350

---

@ngoiyaeric, I've found the critical bug causing your issue!

The Problem

The Comment image shows content about Mountain Gorillas in Kahuzi-Biega National Park, Kinshasa Cityscape, and Okapi Wildlife Reserve - this appears to be test content you're trying to analyze with image attachments.

On Line 111-115 in chat-panel.tsx, you're creating a blob URL for the image:

image: URL.createObjectURL(selectedFile)// Creates blob:http://...

Blob URLs only work in the browser and cannot be accessed by the backend. The backend filters out these invalid URLs (see app/actions.tsx lines 371-377), so the LLM never receives your image - that's why it's not responding with tokens for image + prompt!

The Solution

Convert the image to base64 in the browser before adding it to the content array. Here's the complete fix:

consthandleSubmit=async(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault()if(!input.trim()&&!selectedFile){return}constcontent: ({type: 'text';text: string}|{type: 'image';image: string})[]=[]if(input){content.push({type: 'text',text: input})}// FIX: Convert image to base64 instead of blob URL (browser-compatible)if(selectedFile&&selectedFile.type.startsWith('image/')){constbuffer=awaitselectedFile.arrayBuffer()constbase64=btoa(newUint8Array(buffer).reduce((data,byte)=>data+String.fromCharCode(byte),''))constdataUrl=`data:${selectedFile.type};base64,${base64}`content.push({type: 'image',image: dataUrl// Now using data URL instead of blob URL})}setMessages(currentMessages=>[
...currentMessages,{id: nanoid(),component: <UserMessagecontent={content}/>}])constformData=newFormData(e.currentTarget)if(selectedFile){formData.append('file',selectedFile)}// Include drawn features in the form dataformData.append('drawnFeatures',JSON.stringify(mapData.drawnFeatures||[]))setInput('')clearAttachment()constresponseMessage=awaitsubmit(formData)setMessages(currentMessages=>[...currentMessages,responseMessageasany])}

What Changed

Before (broken):

image: URL.createObjectURL(selectedFile)// blob:http://localhost:3000/abc123

After (fixed):

constbuffer=awaitselectedFile.arrayBuffer()constbase64=btoa(newUint8Array(buffer).reduce((data,byte)=>data+String.fromCharCode(byte),''))constdataUrl=`data:${selectedFile.type};base64,${base64}`
image: dataUrl// data:image/png;base64,iVBORw0KGgo...

Why This Fixes Both Issues

1. ✅ Backend Processing: The LLM will now receive the image as a valid base64 data URL
2. ✅ Image Preview: The thumbnail preview already works (separate previewUrl state on lines 176-183)
3. ✅ User Message Display: The UserMessage component will now show the attached image in the chat

Replace the handleSubmit function in components/chat-panel.tsx with the corrected version above, and your images will be properly sent to the LLM for analysis!

[ngoiyaeric]

Closing this pull request as part of a bulk cleanup of pending PRs.