feat/added stickers using svg support

[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: 72564cf6-d757-4029-9c45-c8a0a4f72657

---

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