Cannot send media over website, but works through Whatsapp, also media receives from clawdbot..

[placid rover]

Cannot send media over website, but works through Whatsapp, also media receives from clawdbot don't show.

Please fix.

[lost fulcrum]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[sly bobcat]

Based on the docs and common WhatsApp Web media issues, here's what's likely happening and how to troubleshoot:

Common Causes & Fixes

1. File Size Too Large

WhatsApp Web/Baileys has stricter limits than the mobile app:

• Default outbound cap: 5 MB per media item
• Check: Is the media file larger than 5 MB?

Fix: Compress the file or increase the limit in config:

{
  agents: {
    defaults: { mediaMaxMb: 15 }
  }
}

2. Media Format Issues

Some formats work on mobile but not WhatsApp Web:

• Try sending a simple JPEG image first to test
• Avoid HEIC/RAW formats - convert to JPG first
• For videos: ensure it's MP4 with H.264 encoding

3. Gateway Connection Issues

The WhatsApp Web socket may be degraded:

# Restart the gateway
clawdbot gateway restart

# Check status
clawdbot channels status

4. Re-link the Session

Corrupted credentials can cause media issues:

clawdbot channels logout whatsapp
clawdbot channels login  # Scan QR again

Debugging Steps

1. Check gateway logs for media-related errors:

   tail -100 /tmp/clawdbot/clawdbot.log | grep -i media
   

2. Test with a small image (under 1 MB, JPG format)

3. Verify the gateway is running and connected:

   clawdbot channels status --probe

If Media From Clawdbot Doesn't Show

This is usually a Baileys quirk where media uploads succeed but delivery fails. Try:

1. Restart the gateway
2. Re-link the WhatsApp session
3. Check if the file is a supported format

---

Need more help? Ask the user to run:

clawdbot --version

clawdbot channels status

And paste any relevant error logs. This will help identify if it's a version-specific issue.

[placid rover]

Whatsapp works though? Only the Clawdbot chat localhost does not work the same? (missing images and stuff on receive)

[sly bobcat]

Ah, clarification helps! So the issue is specifically with the Clawdbot Control UI (http://localhost:18789/) - not the WhatsApp channel itself.

Debugging Steps

1. Check Browser Console

Open the Control UI and check the browser DevTools console (F12 → Console) for errors when:

• Sending media (look for failed upload/XHR errors)
• Receiving media (look for failed load errors)

2. Check Gateway Logs

clawdbot logs --follow

Look for errors around chat.* or media-related messages.

3. Version Info

[placid rover]

It's possibly better with minimal markdown on the data receive. (less tokens)

[sly bobcat]

clawdbot --version

4. Test Behavior

• Can you send text messages OK through the web UI?
• Does media fail to upload (error in UI) or upload but not display?
• Are there any errors in the "Event Log" tab of the Control UI?

Possible Causes

1. WebSocket binary handling - The UI might not properly handle base64-encoded media over WS
2. File size limits - Different limits than WhatsApp channel
3. Media format issues - Some browsers/formats may not render correctly
4. UI bug - The media card rendering might be broken

---

Please share:

• clawdbot --version
• Any errors from browser console or gateway logs
• File type/size you're testing with

This will help pinpoint whether it's a known issue, a config problem, or something requiring a bug report. 🦐

[sly bobcat]

That's a useful clue! So the issue is likely markdown formatting interfering with media rendering in the Control UI.

When the model responds with media, it might be wrapping or encoding the media reference in markdown that the UI doesn't parse correctly for display.

Quick Fixes to Try

1. Send Media Without Text

Instead of:

Here's the image: ![image](media:...)

Try just sending the media file directly (no text explanation).

2. Check Model Prompt

Make sure the model isn't adding markdown formatting around media responses.

3. Control UI Format

In the Control UI settings, check if there's a "render mode" or "markdown" toggle.

---

Deeper Investigation

Can you share:

1. What exactly you're sending - the exact prompt/media combo
2. What you see in the UI - does it show markdown text instead of the image?
3. Is this with a specific agent or model?

This might be a bug where the Control UI isn't properly parsing media placeholders when they're wrapped in markdown. If you can capture the raw response, that would help identify if it's a parsing issue.

🦐

[placid rover]

idk, it has something to do with the github code you guys have, figure it out

[sly bobcat]

Found the issue! The Control UI doesn't support media rendering. 🦐

Root Cause

In ui/src/ui/chat/message-extract.ts, the extractText function only extracts type: "text" blocks:

const parts = content
  .map((p) => {
    const item = p as Record<string, unknown>;
    if (item.type === "text" && typeof item.text === "string") return item.text;
    return null;  // ← All image/video/audio blocks ignored!
  })
  .filter((v): v is string => typeof v === "string");

And in chat-types.ts, the MessageContentItem type only defines:

type: "text" | "tool_call" | "tool_result"

No image | video | audio types exist.

What Happens

1. Media arrives as { type: "image", data: "...base64...", mimeType: "image/png" }
2. extractText returns null for image blocks (only extracts text)
3. grouped-render.ts has no media rendering code (only avatars)
4. User sees nothing - media is silently dropped

This Is a Known Feature Gap

The Control UI was designed for text-only chat. Media support needs to be implemented:

• [ ] Add media content types to chat-types.ts

• [ ] Update extractText to extract media metadata
• [ ] Add media rendering in grouped-render.ts
• [ ] Handle media uploads in the chat controller

---

Want me to implement the fix? This requires changes to:

1. ui/src/ui/types/chat-types.ts
2. ui/src/ui/chat/message-extract.ts
3. ui/src/ui/chat/grouped-render.ts
4. ui/src/ui/controllers/chat.ts

Let me know and I'll write the code! 🦐