bloby-bot 0.17.2

package/supervisor/channels/whatsapp.ts

@@ -0,0 +1,436 @@
+/**
+ * WhatsApp channel provider using Baileys (WhiskeySockets).
+ * Handles connection, QR code flow, message send/receive, and auth persistence.
+ */
+
+import makeWASocket, {
+  useMultiFileAuthState,
+  makeCacheableSignalKeyStore,
+  fetchLatestWaWebVersion,
+  downloadMediaMessage,
+  DisconnectReason,
+  Browsers,
+  type WASocket,
+  type BaileysEventMap,
+} from '@whiskeysockets/baileys';
+import fs from 'fs';
+import path from 'path';
+import QRCode from 'qrcode';
+import pino from 'pino';
+import { DATA_DIR } from '../../shared/paths.js';
+import { log } from '../../shared/logger.js';
+import type { ChannelProvider, ChannelStatus, ChannelType } from './types.js';
+
+const AUTH_DIR = path.join(DATA_DIR, 'channels', 'whatsapp', 'auth');
+
+/** Callback when a new message arrives */
+export type OnWhatsAppMessage = (sender: string, senderName: string | undefined, text: string, fromMe: boolean, isSelfChat: boolean) => void;
+
+/** Callback to transcribe audio via whisper */
+export type TranscribeFn = (audioBase64: string) => Promise<string | null>;
+
+export class WhatsAppChannel implements ChannelProvider {
+  readonly type: ChannelType = 'whatsapp';
+
+  private sock: WASocket | null = null;
+  private connected = false;
+  private qrData: string | null = null;
+  private qrSvg: string | null = null;
+  private onMessage: OnWhatsAppMessage;
+  private onStatusChange: (status: ChannelStatus) => void;
+  private transcribe: TranscribeFn | null = null;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private intentionalDisconnect = false;
+
+  /** IDs of messages we sent — used to prevent echo loops */
+  private sentMessageIds = new Set<string>();
+  private readonly MAX_SENT_IDS = 100;
+  /** Active typing indicator intervals per chat JID */
+  private typingIntervals = new Map<string, ReturnType<typeof setInterval>>();
+
+  /** Maps LID JIDs to phone JIDs (WhatsApp uses LIDs internally for self-chat) */
+  private lidToPhoneMap = new Map<string, string>();
+  /** Our own phone JID (number@s.whatsapp.net) */
+  private ownPhoneJid: string | null = null;
+
+  constructor(
+    onMessage: OnWhatsAppMessage,
+    onStatusChange: (status: ChannelStatus) => void,
+    transcribe?: TranscribeFn,
+  ) {
+    this.onMessage = onMessage;
+    this.onStatusChange = onStatusChange;
+    this.transcribe = transcribe || null;
+  }
+
+  async connect(): Promise<void> {
+    this.intentionalDisconnect = false;
+    await this.connectInternal();
+  }
+
+  async disconnect(): Promise<void> {
+    this.intentionalDisconnect = true;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.sock) {
+      this.sock.end(undefined);
+      this.sock = null;
+    }
+    // Clear all typing intervals
+    for (const interval of this.typingIntervals.values()) clearInterval(interval);
+    this.typingIntervals.clear();
+    this.connected = false;
+    this.qrData = null;
+    this.qrSvg = null;
+    this.emitStatus();
+  }
+
+  async sendMessage(to: string, text: string): Promise<void> {
+    if (!this.sock || !this.connected) {
+      log.warn('[whatsapp] Cannot send — not connected');
+      return;
+    }
+    // Normalize: ensure JID format (number@s.whatsapp.net)
+    const jid = to.includes('@') ? to : `${to.replace(/[^0-9]/g, '')}@s.whatsapp.net`;
+
+    // Clear typing indicator before sending
+    this.stopTyping(jid);
+
+    const result = await this.sock.sendMessage(jid, { text });
+
+    // Track sent message ID to prevent echo loops
+    if (result?.key?.id) {
+      this.trackSentId(result.key.id);
+    }
+
+    log.info(`[whatsapp] Sent message to ${jid} (id=${result?.key?.id || 'unknown'})`);
+  }
+
+  /** Show "typing..." indicator in a chat. Re-sends every 20s to keep it visible. */
+  startTyping(jid: string): void {
+    if (!this.sock || !this.connected) return;
+    // Clear any existing interval for this chat
+    this.stopTyping(jid);
+
+    const send = () => {
+      this.sock?.sendPresenceUpdate('composing', jid).catch(() => {});
+    };
+
+    send(); // immediate
+    this.typingIntervals.set(jid, setInterval(send, 20_000)); // refresh every 20s
+  }
+
+  /** Clear "typing..." indicator in a chat */
+  stopTyping(jid: string): void {
+    const interval = this.typingIntervals.get(jid);
+    if (interval) {
+      clearInterval(interval);
+      this.typingIntervals.delete(jid);
+    }
+    this.sock?.sendPresenceUpdate('paused', jid).catch(() => {});
+  }
+
+  /** Track a sent message ID, evicting oldest when at capacity */
+  private trackSentId(id: string) {
+    this.sentMessageIds.add(id);
+    if (this.sentMessageIds.size > this.MAX_SENT_IDS) {
+      // Delete the first (oldest) entry
+      const first = this.sentMessageIds.values().next().value;
+      if (first) this.sentMessageIds.delete(first);
+    }
+  }
+
+  getStatus(): ChannelStatus {
+    return {
+      channel: 'whatsapp',
+      connected: this.connected,
+      info: {
+        hasQr: !!this.qrData,
+        hasCredentials: this.hasCredentials(),
+        phoneNumber: this.sock?.user?.id?.split(':')[0] || null,
+      },
+    };
+  }
+
+  getQrCode(): string | null {
+    return this.qrSvg;
+  }
+
+  hasCredentials(): boolean {
+    return fs.existsSync(path.join(AUTH_DIR, 'creds.json'));
+  }
+
+  /** Delete stored credentials (for re-auth / logout) */
+  async deleteCredentials(): Promise<void> {
+    try {
+      if (fs.existsSync(AUTH_DIR)) {
+        fs.rmSync(AUTH_DIR, { recursive: true, force: true });
+      }
+    } catch (err: any) {
+      log.warn(`[whatsapp] Failed to delete credentials: ${err.message}`);
+    }
+  }
+
+  // ── Internal ──
+
+  /** Translate a JID from LID format to phone format if possible */
+  private translateJid(jid: string): string {
+    // If it's already a phone JID, return as-is
+    if (jid.endsWith('@s.whatsapp.net')) return jid;
+
+    // Check LID map (only contains our own LID, mapped during connection)
+    const mapped = this.lidToPhoneMap.get(jid);
+    if (mapped) return mapped;
+
+    // Unknown LID — don't guess. Return as-is so isSelfChat stays false.
+    return jid;
+  }
+
+  /** Build the LID-to-phone mapping from sock.user */
+  private buildLidMap() {
+    if (!this.sock?.user) return;
+
+    const user = this.sock.user;
+    // user.id is "phone:device@s.whatsapp.net" — extract phone
+    const phone = user.id.split(':')[0];
+    this.ownPhoneJid = `${phone}@s.whatsapp.net`;
+
+    // user.lid (if available) is the LID JID — map it and variations
+    const lid = (user as any).lid;
+    if (lid) {
+      // Map the exact LID
+      this.lidToPhoneMap.set(lid, this.ownPhoneJid);
+      // Also map the numeric part without @lid suffix (remoteJid may use @lid format)
+      const lidNum = lid.split(':')[0].split('@')[0];
+      this.lidToPhoneMap.set(`${lidNum}@lid`, this.ownPhoneJid);
+      log.info(`[whatsapp] LID map: ${lid} (and ${lidNum}@lid) → ${this.ownPhoneJid}`);
+    }
+
+    log.info(`[whatsapp] Own phone JID: ${this.ownPhoneJid}`);
+  }
+
+  private async connectInternal(): Promise<void> {
+    // Clean up any existing socket before creating a new one
+    if (this.sock) {
+      try { this.sock.ev.removeAllListeners('creds.update'); } catch {}
+      try { this.sock.ev.removeAllListeners('connection.update'); } catch {}
+      try { this.sock.ev.removeAllListeners('messages.upsert'); } catch {}
+      try { this.sock.end(undefined); } catch {}
+      this.sock = null;
+    }
+
+    // Ensure auth directory exists
+    fs.mkdirSync(AUTH_DIR, { recursive: true });
+
+    const { state, saveCreds } = await useMultiFileAuthState(AUTH_DIR);
+
+    // Suppress Baileys' noisy logging
+    const logger = pino({ level: 'silent' }) as any;
+
+    let version: [number, number, number] | undefined;
+    try {
+      const result = await fetchLatestWaWebVersion({});
+      version = result.version;
+    } catch {
+      log.warn('[whatsapp] Could not fetch latest WA version — using default');
+    }
+
+    const sock = makeWASocket({
+      auth: {
+        creds: state.creds,
+        keys: makeCacheableSignalKeyStore(state.keys, logger),
+      },
+      version,
+      browser: Browsers.macOS('Chrome'),
+      printQRInTerminal: false,
+      logger,
+      generateHighQualityLinkPreview: false,
+    });
+
+    this.sock = sock;
+
+    // Persist credential updates
+    sock.ev.on('creds.update', saveCreds);
+
+    // Connection state changes
+    sock.ev.on('connection.update', async (update) => {
+      const { connection, lastDisconnect, qr } = update;
+
+      // QR code received — render to SVG
+      if (qr) {
+        this.qrData = qr;
+        try {
+          this.qrSvg = await QRCode.toString(qr, { type: 'svg' });
+        } catch {
+          this.qrSvg = null;
+        }
+        log.info('[whatsapp] QR code generated — waiting for scan');
+        this.emitStatus();
+      }
+
+      if (connection === 'open') {
+        this.connected = true;
+        this.qrData = null;
+        this.qrSvg = null;
+        this.buildLidMap();
+        // Set presence to unavailable so the phone doesn't show "online" constantly
+        sock.sendPresenceUpdate('unavailable').catch(() => {});
+        log.ok(`[whatsapp] Connected as ${sock.user?.id}`);
+        this.emitStatus();
+      }
+
+      if (connection === 'close') {
+        this.connected = false;
+        this.qrData = null;
+        this.qrSvg = null;
+
+        const statusCode = (lastDisconnect?.error as any)?.output?.statusCode;
+        const reason = DisconnectReason[statusCode] || `code ${statusCode}`;
+        log.warn(`[whatsapp] Disconnected: ${reason}`);
+
+        if (this.intentionalDisconnect) return;
+
+        // Logged out (401) — credentials are invalid, user must re-scan
+        if (statusCode === DisconnectReason.loggedOut) {
+          log.warn('[whatsapp] Logged out — credentials cleared. Re-scan QR to reconnect.');
+          await this.deleteCredentials();
+          this.emitStatus();
+          return;
+        }
+
+        // Connection replaced (440) — another instance took over intentionally, don't fight it
+        if (statusCode === DisconnectReason.connectionReplaced) {
+          log.info('[whatsapp] Connection replaced by a new instance — not reconnecting');
+          this.emitStatus();
+          return;
+        }
+
+        // Any other disconnect — try to reconnect
+        log.info('[whatsapp] Reconnecting in 5s...');
+        this.reconnectTimer = setTimeout(() => this.connectInternal(), 5000);
+      }
+    });
+
+    // Incoming messages
+    sock.ev.on('messages.upsert', async (m: BaileysEventMap['messages.upsert']) => {
+      if (m.type !== 'notify') return;
+
+      for (const msg of m.messages) {
+        // Skip status broadcasts, group messages, and protocol messages
+        if (msg.key.remoteJid === 'status@broadcast') continue;
+        if (msg.key.remoteJid?.endsWith('@g.us')) continue; // group chats — ignore entirely
+        if (msg.key.remoteJid?.endsWith('@newsletter')) continue; // channels/newsletters
+        if (!msg.message) continue;
+
+        // Echo prevention: skip messages we sent ourselves
+        if (msg.key.id && this.sentMessageIds.has(msg.key.id)) {
+          this.sentMessageIds.delete(msg.key.id);
+          continue;
+        }
+
+        // Extract text — or transcribe audio if it's a voice note
+        let rawText = this.extractText(msg.message);
+
+        if (!rawText && this.isAudioMessage(msg.message)) {
+          // Voice note / audio — download and transcribe
+          if (!this.transcribe) {
+            log.info('[whatsapp] Audio message received but no transcribe function configured — skipping');
+            continue;
+          }
+          try {
+            const buffer = await downloadMediaMessage(msg, 'buffer', {}) as Buffer;
+            const base64 = buffer.toString('base64');
+            log.info(`[whatsapp] Transcribing audio (${Math.round(buffer.length / 1024)}KB)...`);
+            const transcript = await this.transcribe(base64);
+            if (!transcript) {
+              log.warn('[whatsapp] Transcription returned empty — skipping');
+              continue;
+            }
+            rawText = transcript;
+            log.info(`[whatsapp] Transcribed: "${rawText.slice(0, 80)}"`);
+          } catch (err: any) {
+            log.warn(`[whatsapp] Audio transcription failed: ${err.message}`);
+            continue;
+          }
+        }
+
+        if (!rawText) continue;
+
+        // Escape special characters to prevent prompt injection via message content
+        const text = this.escapeMessageText(rawText);
+
+        const fromMe = msg.key.fromMe || false;
+        const rawSender = msg.key.remoteJid || '';
+        const participant = msg.key.participant || '';
+
+        // The actual sender JID — use participant if available (newer protocol), fallback to remoteJid
+        const actualSender = participant || rawSender;
+
+        // Translate LID JIDs to phone JIDs
+        const sender = this.translateJid(actualSender);
+        const pushName = msg.pushName || undefined;
+
+        // Detect self-chat: remoteJid matches our own phone number AND no participant field
+        const isSelfChat = !participant && this.ownPhoneJid !== null && this.translateJid(rawSender) === this.ownPhoneJid;
+
+        log.info(`[whatsapp] Message from ${sender} (raw=${rawSender}, participant=${participant}, fromMe=${fromMe}, selfChat=${isSelfChat}): ${text.slice(0, 80)}`);
+
+        this.onMessage(sender, pushName, text, fromMe, isSelfChat);
+      }
+    });
+  }
+
+  /** Extract text content from a Baileys message object */
+  private extractText(message: any): string | null {
+    if (!message) return null;
+
+    // Direct text
+    if (message.conversation) return message.conversation;
+    if (message.extendedTextMessage?.text) return message.extendedTextMessage.text;
+
+    // Image/video/document captions
+    if (message.imageMessage?.caption) return message.imageMessage.caption;
+    if (message.videoMessage?.caption) return message.videoMessage.caption;
+    if (message.documentMessage?.caption) return message.documentMessage.caption;
+
+    // View-once wrappers
+    if (message.viewOnceMessage?.message) return this.extractText(message.viewOnceMessage.message);
+    if (message.viewOnceMessageV2?.message) return this.extractText(message.viewOnceMessageV2.message);
+
+    // Ephemeral wrapper
+    if (message.ephemeralMessage?.message) return this.extractText(message.ephemeralMessage.message);
+
+    // Edited message
+    if (message.editedMessage?.message) return this.extractText(message.editedMessage.message);
+    if (message.protocolMessage?.editedMessage?.message) {
+      return this.extractText(message.protocolMessage.editedMessage.message);
+    }
+
+    return null;
+  }
+
+  /** Check if a message contains audio (voice note or audio file) */
+  private isAudioMessage(message: any): boolean {
+    if (!message) return false;
+    if (message.audioMessage) return true;
+    // Check inside wrappers
+    if (message.viewOnceMessage?.message?.audioMessage) return true;
+    if (message.viewOnceMessageV2?.message?.audioMessage) return true;
+    if (message.ephemeralMessage?.message?.audioMessage) return true;
+    return false;
+  }
+
+  /** Escape message text to prevent prompt injection via special characters */
+  private escapeMessageText(text: string): string {
+    return text
+      .replace(/\[WhatsApp\s*\|/gi, '(WhatsApp|')  // prevent faking channel context tags
+      .replace(/\[Telegram\s*\|/gi, '(Telegram|')
+      .replace(/\[\s*(admin|customer)\s*\]/gi, '($1)');  // prevent faking role tags
+  }
+
+  private emitStatus() {
+    this.onStatusChange(this.getStatus());
+  }
+}

package/supervisor/chat/ARCHITECTURE.md

@@ -0,0 +1,89 @@
+# Bloby Chat Architecture
+
+## Network Topology
+
+```
+Browser
+  |
+  |  https://bot-name.at.bloby.bot
+  v
+Bloby Relay (cloud)
+  |
+  |  Cloudflare Quick Tunnel
+  v
+Supervisor (localhost:3000)
+  |
+  ├── Worker (localhost:3001)      — DB, settings, AI providers
+  ├── Dashboard Vite (localhost:3002) — dev server for workspace/client
+  └── Backend (localhost:3004)     — user's app backend
+```
+
+## How the Chat Loads
+
+The dashboard (`workspace/client/`) loads at the root URL. It injects `widget.js`, which creates:
+
+1. A floating bubble (the Bloby avatar)
+2. A slide-out panel containing an **iframe** at `/bloby/`
+
+The iframe loads `dist-bloby/bloby.html`, which is the pre-built Bloby chat SPA. This SPA is completely independent from the dashboard — it has its own React tree, its own styles, and its own WebSocket connection.
+
+```
+Dashboard (main page)
+  └── widget.js
+        ├── Bubble (click to open)
+        └── Panel
+              └── <iframe src="/bloby/">   ← Bloby chat lives here
+                    ├── bloby-main.tsx
+                    ├── InputBar, MessageList, etc.
+                    └── OnboardWizard (opened from settings menu)
+```
+
+## The Relay Problem
+
+When a user registers a handle (e.g. `bug.at.bloby.bot`), the relay proxies all HTTP traffic through Cloudflare's tunnel to the local supervisor. This works transparently for:
+
+- **GET requests** — settings, onboard status, static assets
+- **WebSocket** — chat messages, heartbeats, real-time events
+
+However, **POST requests from the chat iframe fail** (502 / timeout). The relay + tunnel chain cannot reliably forward HTTP POST bodies originating from an iframe context. The exact cause is in the relay/tunnel infrastructure — the request never reaches the supervisor.
+
+This does NOT affect:
+- The initial onboard (`/bloby/onboard.html` in a separate iframe, runs before the relay is configured)
+- Direct `localhost` access
+- GET requests from the chat iframe
+- WebSocket messages from the chat iframe
+
+## The Fix: WebSocket as a Sidecar Channel
+
+Since the WebSocket connection works reliably from the chat iframe, any mutation that the chat needs to perform (saving settings, etc.) is sent over WebSocket instead of HTTP POST.
+
+```
+Chat Wizard                    Supervisor WS Handler           Worker
+    |                               |                           |
+    |-- ws: settings:save --------->|                           |
+    |                               |-- POST /api/onboard ----->|
+    |                               |   (localhost, no relay)   |
+    |                               |<-- { ok: true } ---------|
+    |<-- ws: settings:saved --------|                           |
+```
+
+The supervisor's WebSocket handler receives the `settings:save` message and makes a **local** HTTP POST to the worker (`localhost:3001`). This completely bypasses the relay.
+
+### When to use WebSocket vs HTTP
+
+| From where | GET | POST/PUT | Notes |
+|---|---|---|---|
+| Initial onboard | `fetch()` | `fetch()` | Runs before relay exists, direct tunnel works |
+| Chat iframe | `fetch()` / `authFetch()` | **WebSocket** | POST through relay fails |
+| Dashboard | `fetch()` | `fetch()` | Not in an iframe, relay handles it fine |
+
+## Key Files
+
+| File | Purpose |
+|---|---|
+| `supervisor/widget.js` | Creates the chat iframe + bubble on the dashboard |
+| `supervisor/chat/bloby-main.tsx` | Chat app entry point, WS connection, wizard integration |
+| `supervisor/chat/OnboardWizard.tsx` | Setup wizard (uses `onSave` prop for WS saves) |
+| `supervisor/chat/src/lib/ws-client.ts` | WebSocket client with reconnect + message queue |
+| `supervisor/index.ts` | Supervisor HTTP server + WS handler (`settings:save`) |
+| `worker/index.ts` | Worker API (`POST /api/onboard`, settings DB) |