How to Clone Telegram

Create a Telegram-style messaging platform called Hivecast using Next.js (App Router), Tailwind, Prisma + SQLite, with polling-based realtime (2s interval) that's structured so a websocket layer can replace it later.

## What to build
DMs, group chats, broadcast channels and webhook bots in one two-pane messenger UI. Mobile-first responsive.

## Screens
- Chat list sidebar: avatar, title, last-message preview, relative timestamp, unread count badge, pinned chats on top; new-chat button opens a create modal (DM / group / channel)
- Conversation: virtualized message list, grouped consecutive messages from the same sender, day separators, reply-to quoting, emoji reactions (hover toolbar), image attachments with lightbox, typing indicator, composer with file attach
- Channel: admin-only composer, posts with view counts and reactions, Join/Joined + mute buttons for subscribers, linked comment thread per post (opens right drawer)
- Discover: grid of public channels/groups with member counts, categories and search
- Bot console: register bot (generates @username and webhook secret), delivery log table (timestamp, chat, payload, response code), test-fire button
- Settings: profile editor, per-chat notification toggles

## Prisma schema
User (id, username, displayName, avatarUrl, bio, isBot, botWebhookUrl, botSecret), Chat (id, type enum dm/group/channel, title, avatarEmoji, description, username nullable, inviteCode, createdById), ChatMember (chatId, userId, role enum owner/admin/member/subscriber, muted, lastReadMessageId, joinedAt), Message (id, chatId, senderId, body, attachmentUrl, attachmentType, replyToId, createdAt, editedAt, deletedAt), Reaction (messageId, userId, emoji), PostStat (messageId, viewCount)

## Core logic (must actually work)
- POST /api/chats/[id]/messages validates membership and role (channels: admins only), creates the message, bumps chat activity
- After saving a message, find bot members of the chat and POST {chatId, from, text, timestamp} to each botWebhookUrl with an X-Hivecast-Signature header (HMAC of body with botSecret); if the response JSON contains reply, insert it as a bot message - implement an internal /api/demo-bot endpoint so seeding works without external URLs
- Unread counts computed from lastReadMessageId; PATCH marks read on chat open
- GET /api/chats/[id]/messages?after= powers polling; return messages, reactions and typing state in one payload
- Editing within 48h sets editedAt; delete sets deletedAt and the UI renders a tombstone

## Rules
- DMs are unique per user pair (find-or-create); group max 200 members; channels unlimited subscribers
- Public chats need a unique @username; private chats get an 8-char inviteCode and /join/[code] route
- Reactions are toggles, one emoji per user per message (changing emoji replaces it)
- Channel post views increment once per subscriber per post

## Style
Light, fast, focused: #4F46E5 indigo primary, #F5B82E honey accent for channel elements, #F4F5FB app background, white surfaces, rounded-2xl bubbles (mine indigo with white text, theirs white with border), Inter font, dark mode via class strategy.

Seed: 8 users, 2 working bots wired to the internal demo-bot endpoint (@welcomebot, @pricebot), 3 public channels with 10 posts each and realistic view counts, 2 groups with 40 messages of natural conversation, 1 DM thread, and varied unread states so the sidebar looks real on first load.

Build a production-quality Telegram-style community platform (channels + groups + bots). Message delivery, membership rules and the bot gateway must be server-authoritative and idempotent.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui
- Supabase: Postgres + Auth + Realtime (postgres_changes subscriptions for live messages/presence) + Storage (presigned media uploads)
- Upstash QStash (or BullMQ if self-hosting) for the bot webhook delivery queue; Zod schemas shared across API and bot payloads

## Core design: one chat engine, three behaviors
Chats are a single table with type dm | group | channel; behavior differences are policy, not schema:
  - lib/chat/policy.ts exports canPost(member, chat), canInvite, canModerate - pure functions with unit tests
  - Channels: role subscriber cannot post; posts get view tracking and a linked discussion thread
  - DMs: find-or-create with a unique constraint on the sorted user-id pair
All writes go through API routes (service role); Postgres RLS allows members to SELECT only their chats' messages - realtime subscriptions then deliver exactly what each user may see.

## Message pipeline
- POST /api/chats/[id]/messages: validate membership + policy, insert with a client-generated uuid for idempotent retries, update chat.last_message_at - one transaction
- Read state: chat_members.last_read_message_id updated via PATCH; unread counts computed in a single SQL view, never stored counters
- Edits allowed 48h (sets edited_at); deletes are tombstones (deleted_at) so ordering and reply-to references survive

## Bot gateway (the differentiating subsystem)
- bots table: user_id, webhook_url, secret, status; on each message in a chat with bot members, enqueue a delivery job per bot
- Worker POSTs JSON {update_id, chat, from, text, ts} with X-Signature: HMAC-SHA256(body, secret); 3 retries with backoff; deliveries logged (status code, latency) to bot_deliveries for the console UI
- Bot replies come back via POST /api/bot/[botId]/send authenticated by bot token - same message pipeline, so bots obey the same policy functions
- Circuit breaker: 20 consecutive failures pauses a bot and surfaces a console warning

## Schema
users, chats, chat_members (unique chat_id+user_id, role enum), messages (uuid pk, reply_to_id, indexes on (chat_id, created_at)), reactions (unique message_id+user_id), post_views (unique message_id+user_id), bots, bot_deliveries, invites. Derive everything countable; no mutable counters except chats.last_message_at.

## Implementation order
1. Schema + RLS policies + auth + seed (8 users, 3 channels, 2 groups, scripted conversations)
2. Message pipeline + policy module with tests
3. Two-pane UI: chat list with live unread counts, conversation view with realtime subscription, optimistic send reconciled by uuid
4. Channels: admin composer, view tracking, discussion threads, Discover directory
5. Bot gateway: queue worker, HMAC delivery, console with delivery log; ship one example bot
6. Reactions, replies, edits/tombstones, invite links
7. Moderation: admin roles UI, slow mode, member removal

## Quality bar
- Optimistic sends with client uuids - no duplicate messages on flaky networks; messages render in <100ms perceived
- Virtualized message list handles 10k-message chats; images lazy-load with blurhash placeholders
- Full keyboard support (arrow through chats, Enter to send, Escape closes panels); RLS tested with a malicious-client test suite

Start with step 1 and show me the policy module tests before any UI.

Design the complete UI for a Telegram-style community messaging app called Hivecast. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: crisp modern messenger - #4F46E5 indigo primary, #F5B82E honey accent for broadcast/channel elements, #F4F5FB app background, white surfaces, rounded-2xl bubbles, Inter font, generous whitespace, dark mode variant.

## Layout
Two-pane desktop (320px sidebar + fluid conversation), single-pane stacked on mobile with slide-over navigation.

## Screens

### 1. Chat list sidebar
- Header: Hivecast wordmark, search input, compose icon-button
- Chat rows: avatar (emoji avatars on soft color circles), bold title with channel megaphone or group icon, one-line last-message preview ('Ana: see you at 7'), relative time, indigo unread badge; pinned section on top; active row tinted indigo
- Bottom: current-user row with settings gear and dark-mode toggle

### 2. Conversation (group chat)
- Header: avatar, title, '42 members, 5 online', icons for search/mute/info
- Messages: theirs left (white bubble, sender name colored per-user, avatar shown once per group), mine right (indigo bubble, white text); day separator chips; consecutive messages grouped tight; one message with an image attachment, one with a file card (name, size, download icon); reply-to shown as a quoted bar inside a bubble; reactions as small emoji-count pills under bubbles
- Typing indicator row ('Marco is typing…'); composer: attach paperclip, input, emoji button, indigo send button

### 3. Channel view
- Honey-tinted header badge 'CHANNEL', title with verified check, '12.4k subscribers'
- Posts as full-width cards: rich text, optional image, footer with eye icon + view count (8,214), reaction pills, comment-bubble button ('24 comments'); composer visible only in an 'admin view' toggle state; non-admin bottom bar shows Joined ✓ and Mute buttons
- Comments drawer sliding from the right with its own mini thread

### 4. Discover
- Search bar + category chips (Trading, Design, Local, Gaming, News)
- Card grid: emoji cover on gradient, name, member count, two-line description, Join button; 'Featured channels' hero row on top

### 5. Bot console
- Bot card: robot avatar, @pricebot, webhook URL field with copy button, masked secret with reveal, status pill (Active green / Paused amber)
- Delivery log table: time, chat, payload snippet (mono font), response code chip (200 green, 500 red), latency; 'Send test message' button triggering a toast

### 6. Create modal & settings
- Create: type selector cards (DM / Group / Channel) with icons, name input, emoji avatar picker, public/private toggle revealing @username or invite-link field
- Settings: profile form, notification matrix (per-chat mute list), blocked users list

Fill everything with believable niche-community content (a trading-signals channel, a design-inspiration channel, a neighborhood group), real-looking names, message timestamps and counts - no lorem ipsum. Show both light and dark mode for the conversation screen.

Build a community messaging platform (Telegram model) called Hivecast with group chats, broadcast channels and webhook bots.

## Entities
- Chat: type (dm/group/channel), title, avatarEmoji, description, username (public handle, optional), inviteCode, createdBy
- ChatMember: chat + user references, role (owner/admin/member/subscriber), muted flag, lastReadMessageId, joinedAt
- Message: chat reference, sender, body, attachmentUrl, attachmentType, replyToId, createdAt, editedAt, deletedAt
- Reaction: message + user references, emoji (one per user per message)
- Bot: owner user, name, username, webhookUrl, secret, status (active/paused)
- BotDelivery: bot reference, chat, payload, responseCode, createdAt

## Roles
- Member: DMs, joins groups/channels, sends messages where allowed, reacts, reports
- Channel admin: posts to channels they own/admin, sees view counts, manages members and invite links
- Bot developer: registers bots, sets webhook URLs, reads delivery logs
- Platform admin: handles reported content, can suspend chats and bots

## Pages
1. Main messenger: sidebar of chats (avatar, last message, timestamp, unread badge) + conversation pane; mobile collapses to two screens
2. Conversation: bubbles with sender names in groups, day separators, replies with quotes, emoji reactions, image/file attachments, typing indicator
3. Channel: admin-only composer; posts with view counts, reactions and comment threads; Join and Mute controls for subscribers
4. Discover: searchable directory of public channels and groups with categories and member counts
5. Create modal: DM / group / channel with public @username or private invite link
6. Bot console: register a bot, copy webhook secret, view delivery log, send a test event
7. Settings: profile, per-chat notifications, blocked users

## Rules
- Channels: only owner/admin can post; members join as subscribers who can react and comment
- DMs are unique per user pair; groups cap at 200 members; channels are unlimited
- Unread count = messages after the member's lastReadMessageId; opening the chat clears it
- When a message lands in a chat with bots, POST it as JSON to each bot's webhookUrl (include a signature header using the bot secret); if the bot replies with { "reply": "..." }, post it as the bot's message; log every delivery
- Edits within 48 hours show an 'edited' label; deletions leave a 'message deleted' tombstone
- Public chats are discoverable by @username; private chats join via invite code

## Look & feel
Crisp messenger UI: #4F46E5 indigo primary, #F5B82E honey accent on channel/broadcast elements, #F4F5FB background with white surfaces, rounded message bubbles (mine indigo, theirs white), Inter font, dark mode toggle.

Seed: 8 users, 2 demo bots (@welcomebot greets joins, @pricebot answers messages containing 'price'), 3 public channels (trading signals, design inspiration, local events) with 10 posts and realistic view counts each, 2 groups with 40 messages of natural conversation, 1 DM, and mixed unread badges so the sidebar feels lived-in.