[NikolaGoranNaumovski]

🎯 Goal

Show users the messages they have scheduled: a banner above the composer with the count, and a list of the scheduled messages for the channel (or thread) with their time and status. This is the entry point for managing scheduled messages (REACT-1389) and follows the web designs (Figma: Scheduled List and Confirmation sections).

Part of the scheduled messages feature (REACT-1388). Stacked on #3355 (schedule from the composer). The data comes from client.scheduledMessages (GetStream/stream-chat-js#1915).

🛠 Implementation details

Banner (ScheduledMessagesBanner)

• Rendered above the composer in MessageComposerUI: "N scheduled messages" in a channel, "N scheduled replies" in a thread, with a View button.
• Counts come from the store (useScheduledMessageCount), so the banner costs no requests and updates live from scheduled_message.* events.
• Hidden at 0 and without the schedule-message capability. Overridable through ComponentContext (ScheduledMessagesBanner, null hides it).
• View opens the list in a dialog (ScheduledMessageListDialog) for the banner's channel or thread.

List (ScheduledMessageList, exported standalone)

• Props: cid, optional parentId (thread replies), optional searchQuery.
• Failed messages first, then one group per day ("Today", "Tomorrow", weekday, date), each sorted by scheduled_at.
• Each item (ScheduledMessageItem, overridable through ComponentContext) shows the text or an attachment summary, the scheduled time, a status badge (Scheduled / Sending… / Failed) and, for failed messages, the reason (translateScheduledMessageFailureReason).
• "Load more" appears only when the store has another page (next), for older failed messages.
• States:
  • first load: skeleton rows (ScheduledMessageListLoading)
  • first load failed: error state with Try again, which reloads the store (ScheduledMessagesLoadError); messages already in the store stay listed if a later reload fails
  • nothing scheduled: ScheduledMessagesEmptyList
  • search without matches: "No messages found" (ScheduledMessagesNoResults)
  • all empty states share ScheduledMessagesEmptyState

Channel Detail

• New "Scheduled messages" section after Pinned messages (ScheduledMessagesView), listing the channel's scheduled messages.
• A search field above the list (shown when the channel has scheduled messages) filters by message text.

Hooks and utilities

• Hooks: useScheduledMessageGroups, useScheduledMessagesPagination, useScheduledMessagesLoadState.
• Pure utilities with unit tests: grouping by failed / day, message preview, failure reason copy, text search.
• getChannelContainer is shared with the schedule button for portals.

Translations
All new strings are in the 12 locales.

Testing

• Unit: banner count per channel and thread, hidden at 0 and without the capability, live updates from events; list grouping and order, item content per status, load more, loading / error / retry / empty / no-results states, search; Channel Detail section and search; axe checks.
• Manual in examples/vite against the scheduled messages test app: banner count and live updates, list grouping by day, status badges.

🎨 UI Changes

Screenshots: banner above the composer, list dialog, Channel Detail section with search, loading skeleton, error and empty states.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

CodeRabbit Verify

• Run CodeRabbit Verify to test the changes in this pull request.