chatbot-file-attachment-debug
CommunityFix broken PDF attachments in WhatsApp-style chatbots
System Documentation
What problem does it solve?
This skill fixes the common issue where uploaded PDF and document files in WhatsApp-style AI chatbots display as broken image icons instead of proper file icons, along with related bugs like missing file text extraction for AI processing and disappearing optimistic user messages after navigation.
Core Features & Use Cases
- 3-Layer Root Cause Fix: Addresses frontend attachment type misclassification, backend filtering of non-image attachments, and missing Prisma schema fields for file metadata.
- PDF Text Extraction Support: Enables backend parsing of PDF files to extract text for AI processing, avoiding broken base64 PDF sends to LLMs.
- Race Condition Fix: Resolves the bug where optimistic user messages vanish from the UI when the SET_MESSAGES action overwrites local state before the message is saved to the database.
- Use Case: Ideal for full-stack development teams building Elysia.js + Prisma + React chatbots that need reliable support for non-image file uploads.
Quick Start
Use this skill to debug and fix your WhatsApp-style chatbot's broken PDF attachment display, missing file text extraction, and disappearing optimistic user message issues across your frontend, backend, and database layers.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: chatbot-file-attachment-debug Download link: https://github.com/freedomw1987/tree_monstor/archive/main.zip#chatbot-file-attachment-debug Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 537,000+ vetted skills library on demand.