chat-pro-admin-widget

Embeddable admin chat dashboard for the chat-pro multi-tenant SaaS chat backend.

• Live conversation list + chat window
• Real-time replies via Socket.io
• Built-in Settings tab: welcome message, knowledge-base documents, keyword auto-reply rules, matching sensitivity, AI provider config
• 90-minute IndexedDB cache for conversations and message history
• Built as ESM / CJS / UMD, React 18 as a peer dep

Install

npm install chat-pro-admin-widget react react-dom

Use inside a React app

import { useEffect, useRef } from 'react';
import { initAdminChat } from 'chat-pro-admin-widget';

export default function AdminChatHost({ secretApiKey, adminToken, apiUrl }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const handle = initAdminChat({
      apiKey: secretApiKey,   // workspace secret key — keep on the client's own backend in production
      token: adminToken,      // JWT from POST /auth/generate-admin-token
      apiUrl,
      mountEl: ref.current,
    });
    return () => handle.destroy();
  }, [secretApiKey, adminToken, apiUrl]);
  return <div ref={ref} style={{ height: 600 }} />;
}

Use on a plain HTML page

<div id="admin" style="height:100vh"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/chat-pro-admin-widget/dist/index.umd.js"></script>
<script>
  AdminChatWidget.initAdminChat({
    apiKey: 'sk_your_secret_api_key',
    token:  'eyJhbGciOiJIUzI1NiIs...',
    apiUrl: 'https://your-chat-backend.example.com',
    mountEl: document.getElementById('admin'),
  });
</script>

API

initAdminChat(options)

| Option | Required | Default | Notes | |---|---|---|---| | apiKey | ✅ | — | Workspace secretApiKey. Keep server-side in production. | | token | ✅ | — | Admin JWT from POST /auth/generate-admin-token. | | apiUrl | ❌ | http://localhost:4000 | chat-pro backend base URL. | | mountEl | ❌ | document.body | DOM element to mount into. |

Returns { destroy() } — unmounts and disconnects.

Security note

The admin widget needs the workspace secret key to authenticate with the backend. For production:

• Don't hard-code secretApiKey in public JS.
• Have the host app's backend mint a JWT via POST /auth/generate-admin-token and pass both the secret key and token to the widget server-side.

License

MIT