bizlin-chat 0.0.1-a1

package/backend/README.md

@@ -0,0 +1,54 @@
+# Backend (Node/Express)
+
+Run locally:
+
+```bash
+cd backend
+npm install
+npm start
+```
+
+API endpoints:
+
+- `GET /api/messages` — list messages
+- `POST /api/messages` — send message, body `{ text, sender? }`
+
+Realtime: Socket.IO server on the same port (emits `message` events).
+
+Example: http://localhost:4000/api/hello
+
+Database (PostgreSQL)
+
+The backend supports PostgreSQL. By default it connects to the `DATABASE_URL` env var or `postgresql://postgres:postgres@localhost:5432/bizchat`.
+
+Quick start with Docker Compose:
+
+```bash
+docker compose up -d
+```
+
+This starts a Postgres instance on port 5432. Then run the backend as usual and it will auto-create the `messages` table.
+
+WhatsApp integration
+
+Set these environment variables for WhatsApp Cloud API integration:
+
+- `WHATSAPP_PHONE_NUMBER_ID` — your phone number ID from the Meta App Dashboard
+- `WHATSAPP_TOKEN` — system user permanent access token (keep secret)
+- `WHATSAPP_VERIFY_TOKEN` — a token you set to verify webhook subscription
+- `WHATSAPP_API_VERSION` — optional, defaults to `v15.0`
+
+Endpoints:
+
+- `GET /webhook` — verification endpoint used when subscribing to webhooks (uses `WHATSAPP_VERIFY_TOKEN`).
+- `POST /webhook` — receives webhook events (incoming messages and statuses).
+- `POST /api/send` — send a text message via WhatsApp Cloud API. Body: `{ "to": "<whatsapp_number>", "text": "Hello" }`.
+ - `POST /api/send` — send a text message via WhatsApp Cloud API. Body: `{ "to": "<whatsapp_number>", "text": "Hello" }`.
+ - `POST /api/sendMedia` — send media by URL. Body: `{ "to": "<whatsapp_number>", "mediaUrl": "https://...", "mediaType": "image|audio|video|document" }`.
+ - `POST /api/sendTemplate` — send a template message. Body: `{ "to": "<whatsapp_number>", "templateName": "template_name", "language": "en_US", "components": [...] }`.
+
+The backend persists incoming messages to the `messages` table and emits realtime `message` events via Socket.IO.
+
+Security
+- Webhook requests are verified using `X-Hub-Signature-256` when `WHATSAPP_APP_SECRET` is set.
+

package/backend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "backend",
+  "version": "0.1.0",
+  "private": true,
+  "main": "src/index.js",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "nodemon src/index.js"
+  },
+  "dependencies": {
+    "axios": "1.5.0",
+    "cors": "2.8.5",
+    "express": "4.18.2",
+    "socket.io": "4.7.2",
+    "uuid": "9.0.0",
+    "pg": "8.11.0"
+  }
+  
+}

package/backend/src/db.js

@@ -0,0 +1,44 @@
+const { Pool } = require('pg')
+
+const DATABASE_URL = process.env.DATABASE_URL || 'postgresql://postgres:postgres@localhost:5432/bizchat'
+
+const pool = new Pool({ connectionString: DATABASE_URL })
+
+async function init() {
+  // Create messages table if it doesn't exist
+  const sql = `
+  CREATE TABLE IF NOT EXISTS messages (
+    id TEXT PRIMARY KEY,
+    text TEXT NOT NULL,
+    sender TEXT,
+    ts BIGINT NOT NULL,
+    wa_id TEXT,
+    direction TEXT,
+    type TEXT,
+    media_url TEXT,
+    status TEXT
+  );
+  `
+  await pool.query(sql)
+}
+
+async function getMessages() {
+  const res = await pool.query('SELECT id, text, sender, ts, wa_id, direction, type, media_url FROM messages ORDER BY ts ASC')
+  return res.rows
+}
+
+async function addMessage(message) {
+  const { id, text, sender, ts, wa_id, direction, type, media_url, status } = message
+  const sql = 'INSERT INTO messages(id, text, sender, ts, wa_id, direction, type, media_url, status) VALUES($1, $2, $3, $4, $5, $6, $7, $8, $9)'
+  await pool.query(sql, [id, text, sender, ts, wa_id || null, direction || null, type || null, media_url || null, status || null])
+  return message
+}
+
+async function updateMessageStatus(id, status) {
+  const sql = 'UPDATE messages SET status = $1 WHERE id = $2'
+  await pool.query(sql, [status, id])
+}
+
+module.exports = { init, getMessages, addMessage, updateMessageStatus, pool }
+
+module.exports = { init, getMessages, addMessage, pool }

package/backend/src/index.js

@@ -0,0 +1,176 @@
+const express = require('express')
+const cors = require('cors')
+const http = require('http')
+const { Server } = require('socket.io')
+const { v4: uuidv4 } = require('uuid')
+const db = require('./db')
+const whatsapp = require('./whatsapp')
+const crypto = require('crypto')
+
+const app = express()
+app.use(cors())
+app.use(express.json())
+
+app.get('/api/hello', (req, res) => {
+  res.json({ message: 'Hello from backend' })
+})
+
+app.get('/api/messages', async (req, res) => {
+  try {
+    const rows = await db.getMessages()
+    res.json(rows)
+  } catch (err) {
+    console.error(err)
+    res.status(500).json({ error: 'failed to load messages' })
+  }
+})
+
+app.post('/api/messages', async (req, res) => {
+  try {
+    const { text, sender } = req.body
+    if (!text) return res.status(400).json({ error: 'text is required' })
+    const message = { id: uuidv4(), text, sender: sender || 'agent', ts: Date.now() }
+    await db.addMessage(message)
+    io.emit('message', message)
+    res.status(201).json(message)
+  } catch (err) {
+    console.error(err)
+    res.status(500).json({ error: 'failed to save message' })
+  }
+})
+
+// Send outbound message via WhatsApp Cloud API
+app.post('/api/send', async (req, res) => {
+  const { to, text } = req.body
+  if (!to || !text) return res.status(400).json({ error: 'to and text are required' })
+  try {
+    const resp = await whatsapp.sendText(to, text)
+    const waMessageId = resp && resp.messages && resp.messages[0] && resp.messages[0].id
+    const message = { id: waMessageId || uuidv4(), text, sender: 'us', ts: Date.now(), wa_id: to, direction: 'outbound', type: 'text' }
+    await db.addMessage(message)
+    io.emit('message', message)
+    res.status(200).json(message)
+  } catch (err) {
+    console.error('send failed', err?.response?.data || err.message || err)
+    res.status(500).json({ error: 'failed to send message' })
+  }
+})
+
+// Webhook verification endpoint (GET)
+app.get('/webhook', (req, res) => {
+  const mode = req.query['hub.mode']
+  const token = req.query['hub.verify_token']
+  const challenge = req.query['hub.challenge']
+  if (mode && token) {
+    if (mode === 'subscribe' && token === process.env.WHATSAPP_VERIFY_TOKEN) {
+      console.log('WEBHOOK_VERIFIED')
+      res.status(200).send(challenge)
+    } else {
+      res.sendStatus(403)
+    }
+  } else {
+    res.sendStatus(400)
+  }
+})
+
+// Webhook receiver (POST)
+// Use raw body parsing for webhook to allow signature verification
+app.post('/webhook', express.raw({ type: 'application/json' }), async (req, res) => {
+  const raw = req.body
+  const sig = req.headers['x-hub-signature-256']
+  const appSecret = process.env.WHATSAPP_APP_SECRET
+  if (appSecret && sig) {
+    const hmac = crypto.createHmac('sha256', appSecret).update(raw).digest('hex')
+    const expected = `sha256=${hmac}`
+    if (sig !== expected) {
+      console.warn('Invalid webhook signature')
+      return res.sendStatus(403)
+    }
+  }
+  let body
+  try {
+    body = JSON.parse(raw.toString())
+  } catch (err) {
+    console.error('invalid json', err)
+    return res.sendStatus(400)
+  }
+
+  if (body.object === 'whatsapp_business_account') {
+    try {
+      for (const entry of body.entry || []) {
+        for (const change of entry.changes || []) {
+          const value = change.value || {}
+          // Incoming messages
+          if (value.messages) {
+            for (const msg of value.messages) {
+              const wa_id = msg.from || (value.contacts && value.contacts[0] && value.contacts[0].wa_id)
+              const senderName = (value.contacts && value.contacts[0] && value.contacts[0].profile && value.contacts[0].profile.name) || wa_id
+              let text = ''
+              let media_url = null
+              if (msg.type === 'text') text = msg.text && msg.text.body
+              else if (['image', 'audio', 'video', 'document'].includes(msg.type)) {
+                const media = msg[msg.type]
+                // media.id is present — get downloadable url
+                if (media && media.id) {
+                  try {
+                    const url = await whatsapp.getMediaUrl(media.id)
+                    media_url = url
+                  } catch (e) {
+                    console.warn('failed to fetch media url', e?.message || e)
+                  }
+                }
+              } else if (msg.type === 'interactive') {
+                // buttons or list replies
+                if (msg.interactive && msg.interactive.type === 'button_reply') {
+                  text = msg.interactive.button_reply && msg.interactive.button_reply.title
+                } else if (msg.interactive && msg.interactive.type === 'list_reply') {
+                  text = msg.interactive.list_reply && msg.interactive.list_reply.title
+                }
+              } else if (msg.type === 'contacts') {
+                text = JSON.stringify(msg.contacts)
+              } else if (msg.type === 'location') {
+                text = JSON.stringify(msg.location)
+              }
+              const message = { id: msg.id || uuidv4(), text, sender: senderName, ts: Date.now(), wa_id, direction: 'inbound', type: msg.type, media_url }
+              await db.addMessage(message)
+              io.emit('message', message)
+            }
+          }
+          // Status updates
+          if (value.statuses) {
+            for (const st of value.statuses) {
+              const msgId = st.id
+              const status = st.status
+              if (msgId) await db.updateMessageStatus(msgId, status)
+            }
+          }
+        }
+      }
+      res.sendStatus(200)
+    } catch (err) {
+      console.error('webhook processing error', err)
+      res.sendStatus(500)
+    }
+  } else {
+    res.sendStatus(404)
+  }
+})
+
+const port = process.env.PORT || 4000
+const server = http.createServer(app)
+const io = new Server(server, { cors: { origin: '*' } })
+
+io.on('connection', (socket) => {
+  console.log('socket connected', socket.id)
+  socket.on('disconnect', () => console.log('socket disconnected', socket.id))
+})
+
+;(async () => {
+  try {
+    await db.init()
+    server.listen(port, () => console.log(`Backend listening on ${port}`))
+  } catch (err) {
+    console.error('Failed to initialize database', err)
+    process.exit(1)
+  }
+})()

package/backend/src/whatsapp.js

@@ -0,0 +1,67 @@
+const axios = require('axios')
+
+const PHONE_ID = process.env.WHATSAPP_PHONE_NUMBER_ID
+const TOKEN = process.env.WHATSAPP_TOKEN
+const API_VERSION = process.env.WHATSAPP_API_VERSION || 'v15.0'
+
+if (!PHONE_ID || !TOKEN) {
+  // Not throwing here; some envs (local dev) may not have these set.
+}
+
+async function sendText(to, text) {
+  if (!PHONE_ID || !TOKEN) throw new Error('WHATSAPP_PHONE_NUMBER_ID or WHATSAPP_TOKEN not configured')
+  const url = `https://graph.facebook.com/${API_VERSION}/${PHONE_ID}/messages`
+  const body = {
+    messaging_product: 'whatsapp',
+    to,
+    type: 'text',
+    text: { body: text }
+  }
+  const res = await axios.post(url, body, {
+    headers: { Authorization: `Bearer ${TOKEN}`, 'Content-Type': 'application/json' }
+  })
+  return res.data
+}
+
+async function sendMedia(to, mediaUrl, mediaType = 'image') {
+  if (!PHONE_ID || !TOKEN) throw new Error('WHATSAPP_PHONE_NUMBER_ID or WHATSAPP_TOKEN not configured')
+  const url = `https://graph.facebook.com/${API_VERSION}/${PHONE_ID}/messages`
+  const body = {
+    messaging_product: 'whatsapp',
+    to,
+    type: mediaType,
+    [mediaType]: { link: mediaUrl }
+  }
+  const res = await axios.post(url, body, {
+    headers: { Authorization: `Bearer ${TOKEN}`, 'Content-Type': 'application/json' }
+  })
+  return res.data
+}
+
+async function sendTemplate(to, templateName, language = 'en_US', components = []) {
+  if (!PHONE_ID || !TOKEN) throw new Error('WHATSAPP_PHONE_NUMBER_ID or WHATSAPP_TOKEN not configured')
+  const url = `https://graph.facebook.com/${API_VERSION}/${PHONE_ID}/messages`
+  const body = {
+    messaging_product: 'whatsapp',
+    to,
+    type: 'template',
+    template: {
+      name: templateName,
+      language: { code: language },
+      components
+    }
+  }
+  const res = await axios.post(url, body, {
+    headers: { Authorization: `Bearer ${TOKEN}`, 'Content-Type': 'application/json' }
+  })
+  return res.data
+}
+
+async function getMediaUrl(mediaId) {
+  if (!TOKEN) throw new Error('WHATSAPP_TOKEN not configured')
+  const url = `https://graph.facebook.com/${API_VERSION}/${mediaId}`
+  const res = await axios.get(url, { headers: { Authorization: `Bearer ${TOKEN}` } })
+  return res.data && res.data.url
+}
+
+module.exports = { sendText }

package/frontend/README.md

@@ -0,0 +1,11 @@
+# Frontend (Next.js)
+
+Run locally:
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+Open http://localhost:3000. The frontend connects to the backend at `http://localhost:4000` and listens for realtime `message` events from Socket.IO.

package/frontend/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000"
+  },
+  "dependencies": {
+    "next": "13.4.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "socket.io-client": "4.7.2"
+  }
+}

package/frontend/pages/index.js

@@ -0,0 +1,98 @@
+import { useEffect, useState, useRef } from 'react'
+import { io } from 'socket.io-client'
+
+export default function Home() {
+  const [messages, setMessages] = useState([])
+  const [text, setText] = useState('')
+  const [to, setTo] = useState('')
+  const [mediaUrl, setMediaUrl] = useState('')
+  const [templateName, setTemplateName] = useState('')
+  const [templateLang, setTemplateLang] = useState('en_US')
+  const socketRef = useRef(null)
+
+  useEffect(() => {
+    fetch('http://localhost:4000/api/messages')
+      .then((r) => r.json())
+      .then((d) => setMessages(d))
+      .catch(() => setMessages([]))
+
+    socketRef.current = io('http://localhost:4000')
+    socketRef.current.on('message', (msg) => {
+      setMessages((m) => [...m, msg])
+    })
+
+    return () => {
+      socketRef.current.disconnect()
+    }
+  }, [])
+
+  const send = async () => {
+    if (!text) return
+    // If `to` is provided, send via WhatsApp Cloud API through backend
+    if (to) {
+      await fetch('http://localhost:4000/api/send', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ to, text })
+      })
+    } else {
+      await fetch('http://localhost:4000/api/messages', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text, sender: 'web' })
+      })
+    }
+    setText('')
+  }
+
+  const sendMedia = async () => {
+    if (!to || !mediaUrl) return
+    await fetch('http://localhost:4000/api/sendMedia', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ to, mediaUrl, mediaType: 'image' })
+    })
+    setMediaUrl('')
+  }
+
+  const sendTemplate = async () => {
+    if (!to || !templateName) return
+    await fetch('http://localhost:4000/api/sendTemplate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ to, templateName, language: templateLang, components: [] })
+    })
+    setTemplateName('')
+  }
+
+  return (
+    <main style={{ fontFamily: 'system-ui, sans-serif', padding: 24 }}>
+      <h1>WhatsApp Team Inbox (Frontend)</h1>
+      <div style={{ maxWidth: 720 }}>
+        <div style={{ border: '1px solid #ddd', padding: 12, minHeight: 200 }}>
+          {messages.map((m) => (
+            <div key={m.id} style={{ padding: 8, borderBottom: '1px solid #eee' }}>
+              <div style={{ fontSize: 12, color: '#666' }}>{m.sender} • {new Date(m.ts).toLocaleTimeString()}</div>
+              <div>{m.text}</div>
+            </div>
+          ))}
+        </div>
+
+        <div style={{ display: 'flex', marginTop: 12, gap: 8 }}>
+          <input placeholder="To (WhatsApp number, optional)" value={to} onChange={(e) => setTo(e.target.value)} style={{ width: 220, padding: 8 }} />
+          <input value={text} onChange={(e) => setText(e.target.value)} style={{ flex: 1, padding: 8 }} />
+          <button onClick={send} style={{ padding: '8px 12px' }}>Send</button>
+        </div>
+        <div style={{ display: 'flex', marginTop: 8, gap: 8 }}>
+          <input placeholder="Media URL (optional)" value={mediaUrl} onChange={(e) => setMediaUrl(e.target.value)} style={{ flex: 1, padding: 8 }} />
+          <button onClick={sendMedia} style={{ padding: '8px 12px' }}>Send Media</button>
+        </div>
+        <div style={{ display: 'flex', marginTop: 8, gap: 8 }}>
+          <input placeholder="Template name" value={templateName} onChange={(e) => setTemplateName(e.target.value)} style={{ width: 240, padding: 8 }} />
+          <input placeholder="lang" value={templateLang} onChange={(e) => setTemplateLang(e.target.value)} style={{ width: 100, padding: 8 }} />
+          <button onClick={sendTemplate} style={{ padding: '8px 12px' }}>Send Template</button>
+        </div>
+      </div>
+    </main>
+  )
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "bizlin-chat",
+  "version": "0.0.1-a1",
+  "description": "zchat npm plugin (integrates backend and frontend)",
+  "main": "backend/index.js",
+  "files": [
+    "backend",
+    "frontend"
+  ],
+  "scripts": {
+    "start": "node backend/index.js",
+    "start:frontend": "node frontend/index.js",
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "keywords": [
+    "zchat",
+    "plugin",
+    "chat"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bizlinsolutions/zchat.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14"
+  }
+}