feat: implement offline message persistence and refined UI

[deepak0x]

This PR implements robust Offline Message Persistence along with a refined UI for failed message delivery. It ensures that messages sent while offline are not lost, allows users to recover them after a page reload, and provides a clear, intuitive interface for resending or deleting failed attempts.

Closes #1091

---

Screenshots/Video

Screencast.from.2026-01-23.22-34-23.online-video-cutter.com.mp4

Key Changes

1. Offline Persistence (localStorage)

• Implemented localStorage-based caching for messages that fail to send.

• Messages are partitioned by Room ID (rid), ensuring they only reappear in their respective channels.

• Persisted messages are automatically re-injected into the message store during:

  • Initialization
  • Room switching

• Added session cleanup logic to wipe offline caches on user logout.

---

2. Refined Message Sorting

• Ensures global ordering consistency between:

  • Server-fetched messages
  • Locally recovered offline messages

• Resend behavior: When a message is resent, its timestamp is updated to the current time, naturally moving it to the bottom of the chat.

---

3. UX & UI Improvements

• Offline Indicator: Added a centered red RiWifiOffLine icon for messages that fail to send.

• Custom Error Menu: Clicking the error icon opens an upward-positioned menu with:

  • Resend
  • Delete

[Spiral-Memory]

This looks good overall, but I’d prefer the Wi-Fi icon to be more understated - small and subtle, to give it a cleaner, more polished look.

[deepak0x]

sure
will fix and commit

[deepak0x]

Hi @Spiral-Memory, addressed all three review comments:

1. PERSISTENCE_KEY moved globally
Created packages/react/src/lib/constants.js — exports EC_OFFLINE_MESSAGES_KEY. messageStore.js now imports it from there.

2 & 3. Replaced react-icons with built-in icon + made it more understated
Removed RiWifiOffLine from react-icons/ri entirely. Now using <Icon name="error-circle" /> from @embeddedchat/ui-elements — smaller (0.875em), subtle opacity (0.7), uses theme.colors.danger.

Before vs After:

Please let me know if any further changes are needed!

[deepak0x]

Also removed react-icons package entirely from packages/react/package.json — it was the only usage and is now replaced by the built-in icon system. yarn.lock updated accordingly.