feat(ui): polish chat interface, message bubbles, upload zone & header

[AyushAnand413]

Overview

This PR overhauls the entire frontend UI across ChatArea, Sidebar, and Header without touching any backend logic or API contracts. The focus is on visual polish, better UX affordances, and a cleaner layout — every existing feature continues to work exactly as before.

---

Changes by component

ChatArea.tsx

• Message bubbles — User messages are now right-aligned blue pill bubbles (bg-accent-primary, rounded-2xl rounded-tr-sm). Assistant messages are left-aligned card bubbles with a bot-avatar circle. Error messages (no docs, API failure) get an orange warning tint (bg-accent-warning/10) instead of a left border.
• Bot avatar — Small gradient circle (blue→green) appears beside every assistant bubble and the typing indicator, making the conversation layout feel like a real chat.
• Typing indicator — Moved from bare floating dots into a proper chat bubble, matching the assistant bubble style. Dots animate with staggered framer-motion bounces.
• Input area — Replaced <input> with an auto-growing <textarea> (max 140 px). Enter sends, Shift+Enter inserts a newline. A hint line below the box reminds users of the shortcut.
• Send button — Shows a spinning loader while the AI is generating instead of just going disabled. Activates with brand-blue background only when there is text to send.
• Empty state — Replaced the plain bot icon with a Sparkles icon inside a gradient rounded square with a green status dot. Added a short description line below the heading.
• Suggestion chips — Wrapped in AnimatePresence so they fade out gracefully once the first message is sent.

Sidebar.tsx

• Upload zone — Moved to the top of the sidebar (above the document list) for better discoverability. Enlarged with a 10×10 rounded icon container, drag-glow overlay (bg-accent-primary/5), icon lift animation on hover/drag, PDF format badge, and clearer copy ("Drag & drop or click to browse").
• Document cards — Each card now shows a colored icon badge per status:
  • 🟢 indexed → green CheckCircle2 + "Indexed at HH:MM"
  • 🔵 in-progress → spinning Loader2 + status label + gradient progress bar
  • 🟠 error → orange AlertCircle + orange-tinted card border
• Progress bar — Gradient from-accent-primary to-blue-400 with a smooth framer-motion width animation. Replaces the raw text percentage display.
• Remove button — Appears on hover with a smooth opacity transition; now in the top-right corner with proper padding and hover highlight.
• Thin scrollbar — Document list uses the new scrollbar-thin utility class for a subtle 4 px scrollbar instead of hiding it entirely.
• Header — Shows X/Y indexed ratio inline instead of just the total count.

Header.tsx

• Logo mark — Added a 6×6 gradient square (from-accent-primary to-blue-400) with a white "R" before the wordmark.
• Animated status dot — Green dot now uses Tailwind's animate-ping overlay for a live pulse effect.
• Doc count — Displays indexed/total docs only when at least one document exists, keeping the header clean on first load.
• Removed Upload button — The header upload button was redundant with the sidebar upload zone; removed to reduce visual noise.

globals.css

• ::selection — Brand-blue highlight (rgba(74,125,255,0.25)) for selected text.
• scrollbar-thin — New utility: 4 px wide, #3a3a3f thumb on transparent track, using both scrollbar-width: thin (Firefox) and ::-webkit-scrollbar (Chrome/Safari).

---

What was NOT changed

• All API calls (sendChat, uploadPdf) are untouched
• Zustand store (useStore) is untouched
• Routing, layout split (35/65), and responsive breakpoints are untouched
• No new dependencies added

Test plan

• Upload a PDF → verify uploading → parsing → indexed state transitions with gradient progress bar
• Ask a question with an indexed doc → blue user bubble, card assistant bubble, typing indicator bubble
• Ask a question with no docs → orange error bubble
• Press Enter to send, Shift+Enter for newline
• Observe send button spins while AI generates
• Drag a PDF onto the upload zone → confirm drag-glow and drop handling
• Hover a document card → confirm remove button fades in
• Check header status dot pulse animation

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ragify-ai	Building	Preview, Comment	May 5, 2026 10:06am