Skip to content

feat(whatsapp): QR pairing panel in dashboard - #46698

Closed
nalepy wants to merge 2 commits into
NousResearch:mainfrom
nalepy:feat/whatsapp-qr-dashboard
Closed

feat(whatsapp): QR pairing panel in dashboard#46698
nalepy wants to merge 2 commits into
NousResearch:mainfrom
nalepy:feat/whatsapp-qr-dashboard

Conversation

@nalepy

@nalepy nalepy commented Jun 15, 2026

Copy link
Copy Markdown

Summary

Adds a WhatsApp QR pairing flow directly in the Channels dashboard page, so users can link their phone without touching the terminal.

Problem

The existing WhatsApp integration required users to run a terminal command to display a QR code for pairing — a poor experience for non-technical users.

Solution

  • scripts/whatsapp-bridge/bridge.js: Exposes two new HTTP endpoints on the local bridge:

    • GET /qr — returns { status, qr } where qr is the raw Baileys QR string when pairing is needed (status qr_pending), or null when connected/disconnected.
    • POST /reset-session — wipes saved credentials and triggers a fresh reconnect, generating a new QR code.
    • Tracks a latestQR variable and introduces qr_pending as a connection state.
  • hermes_cli/web_server.py: Adds two proxy endpoints that forward to the bridge over loopback:

    • GET /api/messaging/whatsapp/qr
    • POST /api/messaging/whatsapp/reset
  • web/src/lib/api.ts: Adds getWhatsappQR(), resetWhatsappSession() client methods and the WhatsappQRResponse interface.

  • web/src/pages/ChannelsPage.tsx: Adds WhatsappOnboardingPanel rendered inside the WhatsApp platform card. It:

    • Polls /api/messaging/whatsapp/qr every 3 s
    • Renders a QR image (using the existing qrcode library) when status === "qr_pending"
    • Shows a "Connected" badge when linked
    • Provides a "Reset & re-pair" button that wipes the session and prompts a new QR

Test plan

  • Enable WhatsApp in .env (WHATSAPP_ENABLED=true)
  • Open the Channels page → WhatsApp card shows QR code when not connected
  • Scan QR with WhatsApp → badge changes to "Connected", QR disappears
  • Click "Reset & re-pair" → session wiped, new QR appears
  • Other messaging platform cards are unaffected
  • Dashboard build passes (npm run build in web/)

Add WhatsApp QR code pairing directly in the Channels page so users
can link their phone without touching the terminal.

Changes:
- bridge.js: expose GET /qr (returns raw Baileys QR string + status)
  and POST /reset-session (wipes session files, triggers new QR).
  Track latestQR and qr_pending state for the dashboard to poll.
- web_server.py: proxy /api/messaging/whatsapp/qr and
  /api/messaging/whatsapp/reset to the local bridge on port 3000.
- api.ts: add getWhatsappQR() and resetWhatsappSession() client
  methods plus WhatsappQRResponse interface.
- ChannelsPage.tsx: add WhatsappOnboardingPanel that polls every 3 s,
  renders a QR image via the qrcode library when status is qr_pending,
  and provides a Reset and re-pair button.
@alt-glitch alt-glitch added type/feature New feature or request platform/whatsapp WhatsApp Business adapter comp/cli CLI entry point, hermes_cli/, setup wizard comp/gateway Gateway runner, session dispatch, delivery P3 Low — cosmetic, nice to have labels Jun 15, 2026
@alt-glitch

Copy link
Copy Markdown
Collaborator

Related: #45585 and #17907 (phone-number pairing-code support via Baileys). This PR adds a QR pairing panel to the web dashboard (Channels page) — a different pairing surface, complementary rather than overlapping.

Redesign WhatsappOnboardingPanel to use the same visual patterns:
- Rounded border with muted background container
- Two-column grid with QR image on right, controls on left
- Same button/badge/tone styling as TelegramOnboardingPanel
- Status phases: idle, connecting (QR shown), ready (connected)
- Cancel button during QR pairing, Re-pair button when connected
@teknium1

teknium1 commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

WhatsApp dashboard QR pairing has now landed on main via #60571 (salvage of #56748). Your PR was submitted first and proposed the same feature — thank you, and apologies we couldn't land both. The merged version was picked as the base because it additionally covered the apply/cancel lifecycle, bot/self-chat mode selection, allowlist-preserving apply, and shipped test coverage, but you had the idea in the dashboard first and that's acknowledged here with credit.

Closing since the feature is now on main.

@teknium1 teknium1 closed this Jul 8, 2026
@nalepy

nalepy commented Jul 8, 2026 via email

Copy link
Copy Markdown
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

comp/cli CLI entry point, hermes_cli/, setup wizard comp/dashboard Web dashboard / control panel UI (dashboard/, landing) P3 Low — cosmetic, nice to have platform/whatsapp WhatsApp Business adapter type/feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants