Feat/add sticker support clean

[anshika-guleria]

Summary

Implemented native sticker pack support for PasoChat, allowing users to send and receive expressive, categorized stickers in both direct and group conversations.

Key Changes

1. Backend Architecture & Database Sync

• Added sticker field to the message schema.

• Added favoriteStickers and recentStickers arrays to the user model.

• Added sticker APIs:

  • GET /api/stickers/packs
  • GET /api/stickers/user-data
  • POST /api/stickers/favorites/toggle
  • POST /api/stickers/recents

• Updated sendMessage, sendGroupMessage, and forwardMessage to support sticker messages.

• Added support for reply previews when working with sticker messages.

• Recent stickers are deduplicated and limited to 30 items.

2. Built-in Sticker Packs

Added 46 SVG stickers across 5 curated packs in frontend/public/stickers/:

• Reactions & Moods — Mindblown, Laughing, Crying, Party, Cool, Heart Eyes, Fire, Facepalm, Thinking, Shocked, Angry, Angel
• Pepe & Memes — Pepe Happy, Pepe Sad, Pepe Hype, Big Brain Pepe, Doge Wow, 100 Percent, GG WP, Stonks, Popcat, Bruh
• Cute Animals — Cat Love, Coder Cat, Happy Pup, Sleepy Fox, Bear Hug, Cheering Bunny, Panda Munch, Waddling Penguin
• Anime & Chibi — Sparkle Eyes, Chibi Rage, Nervous Sweat, Kawaii Blush, Peace Sign, Sleepy Chibi, Pro Gamer, Coffee Time
• Vibes & Gestures — Thumbs Up, Heart Hands, High Five, Peace Out, Clapping, Rocket Launch, Super Star, Fresh Coffee

3. Interactive Sticker Picker

Created StickerPicker.jsx with:

• Real-time sticker search by name, pack, and emotion tags
• Categorized tabs for All, Recent, Favorites, and individual packs
• Favorite/unfavorite functionality with instant feedback
• One-click sticker sending
• Lazy-loaded sticker assets with loading fallbacks
• Outside-click dismissal

4. Message Composer & Chat Bubble

• Integrated a dedicated Sticker button into MessageInput.jsx.

• Added a separate sticker picker popup with outside-click dismissal.

• Updated MessageBubble.jsx to render sticker-only messages with:

  • Transparent backgrounds
  • Smooth hover animations
  • Timestamps and message status
  • Reactions
  • Forwarding
  • Reply previews

Screenshot

Testing

• Verified sticker sending and receiving in direct conversations.
• Verified sticker sending and receiving in group conversations.
• Verified favorites and recent stickers persist correctly.
• Verified forwarding and replying to sticker messages.
• Verified responsive sticker picker behavior.

Closes Issue

Closes #119

[vercel]

@anshika-guleria is attempting to deploy a commit to the Akash Santra 's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 14e26f97-a9a5-4fa1-a866-b19f46b4702e

---

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

[anshika-guleria]

Please check @Akash504-ai

[Akash504-ai]

The screenshots seem to show the existing emoji feature. Since this issue is for stickers, could you share a screenshot of the new sticker picker and a sticker message being sent? Just want to verify the sticker part before reviewing.

[anshika-guleria]

O sorry i sent the wrong ones give me a minute

[anshika-guleria]

sorry you were right i also had forgotten to push the svg files sorry about that i have updated images

[Akash504-ai]

Why is the OTP/auth logic being changed in this PR? These changes don't seem related to #119. Please revert the unrelated auth changes so this PR stays scoped to sticker support.

[Akash504-ai]

Should we validate stickerUrl against the available sticker packs before saving/sending it? Right now it looks like an arbitrary URL could be stored as a favorite/recent sticker.

[anshika-guleria]

I have updated sticker.controller.js on the backend to validate stickerUrl against the set of valid sticker URLs from the registered sticker packs before saving it to favorites

[anshika-guleria]

Does it require more tweaks @Akash504-ai