npm package: @sksharma72000/ai-chat-websdk
Description: @sksharma72000/ai-chat-websdk is an embeddable, fully themeable AI chat widget for web apps. Supports JWT authentication with auto-refresh, rich content rendering (tables, code blocks, markdown), theming via CSS custom properties, and framework-agnostic m
Author: Shree Krishna Acharya
Latest version: 1.1.1

# @sksharma72000/ai-chat-websdk

An embeddable, fully themeable AI chat widget for web applications.  
Drop it into any page with a single `initialize()` call — no framework required.

## Features

- 🔐 **JWT Authentication** — pass a token on init, update it at any time, or auto-refresh on 401
- 🎨 **Fully Themeable** — colors, fonts, border-radius via CSS custom properties
- 📊 **Rich Content** — tables, code blocks, markdown, clarification flows & execution plans
- 📝 **Chat History** — loads and replays earlier conversations automatically
- ⚡ **Edit & Retry** — edit previous messages and regenerate responses inline
- 🔴 **Connection Monitor** — live online/offline indicator

## Installation

```bash
npm install @sksharma72000/ai-chat-websdk
```

> **Peer dependencies** — React 18 and ReactDOM 18 must be present in your host application (Option A only).

## Quick Start

### Option A — npm (React / Vue / Angular / any bundler)

```bash
npm install @sksharma72000/ai-chat-websdk react react-dom
```

```ts
import AIChatSDK from '@sksharma72000/ai-chat-websdk';
import '@sksharma72000/ai-chat-websdk/style.css';

// 1. Mount the widget
AIChatSDK.initialize({
  // Required
  apiUrl: 'https://api.example.com',

  // Auth — omit for public endpoints
  jwtToken: 'Bearer eyJ...',

  // Auto-refresh token on 401 — SDK retries the failed request automatically
  onTokenExpired: async () => {
    const res = await fetch('/auth/refresh', { method: 'POST' });
    const { token } = await res.json();
    return token; // 'Bearer ' prefix is optional — the SDK normalises it
  },
  onBeforeMessageSend:(data)=>{
    return data
  }
  // Branding
  title: 'Support Chat',
  logo: 'https://example.com/logo.png',
  welcomeMessage: '## 👋 Hi there!\nHow can I help you today?',

  // Pre-fill input on first open (user can edit or send immediately)
  initialMessage: 'Show me the latest reports',

  // Theme — all fields optional, defaults to indigo/violet palette
  theme: {
    primaryColor: '#6366f1',        // accent: buttons, header gradient start
    secondaryColor: '#8b5cf6',      // header gradient end
    backgroundColor: '#f8fafc',     // chat message area background
    fontFamily: "'Inter', sans-serif",
    borderRadius: '12px',           // message bubble corner radius
    userBubbleColor: '#6366f1',     // user message bubble fill
    userBubbleTextColor: '#ffffff', // user message bubble text
  },

  // Mount target — CSS selector or DOM element.
  // Omit to render as a floating FAB in the bottom-right corner.
  container: '#chat-widget-root',
});

// 2. Update token after silent refresh / login
AIChatSDK.setToken('Bearer eyJnew...');

// 3. Tear down on logout / page unload
AIChatSDK.destroy();
```

### Option B — Script Tag / CDN (No React, No npm, No bundler)

The **standalone bundle** has React baked in — drop two tags into any HTML page and you're done.

```html
<!-- Styles (shared with all bundle variants) -->
<link rel="stylesheet" href="https://unpkg.com/@sksharma72000/ai-chat-websdk/style.css" />
<!-- Standalone bundle (React included) -->
<script src="https://unpkg.com/@sksharma72000/ai-chat-websdk/ai-chat-websdk.standalone.js"></script>

<script>
  AIChatSDK.initialize({
    apiUrl: 'https://api.example.com',
    jwtToken: 'Bearer eyJ...',

    onTokenExpired: async () => {
      const res = await fetch('/auth/refresh', { method: 'POST' });
      const { token } = await res.json();
      return token;
    },

    title: 'Support Chat',
    theme: {
      primaryColor: '#6366f1',
      secondaryColor: '#8b5cf6',
    },
  });

  // Update token later
  AIChatSDK.setToken('Bearer new-token');

  // Remove widget
  AIChatSDK.destroy();
</script>
```

> The standalone bundle is larger (~2 MB unminified) because React is included.
> For production React projects use **Option A** to avoid shipping React twice.

### Build outputs

| File | Use case |
|---|---|
| `ai-chat-websdk.es.js` | ES module — React apps, bundlers (Vite, webpack, etc.) |
| `ai-chat-websdk.umd.js` | CommonJS / UMD — Node SSR, older bundlers |
| `ai-chat-websdk.standalone.js` | IIFE — plain HTML, CMS, no-framework pages |
| `style.css` | Stylesheet for all bundle variants |

## Configuration Reference
|---|---|---|---|
| `apiUrl` | `string` | **required** | Base URL of the AI server |
| `jwtToken` | `string` | — | JWT token (with or without `Bearer ` prefix) |
| `onTokenExpired` | `() => Promise<string>` | — | Called on 401; return new token; SDK retries automatically |
| `onBeforeMessageSend` | `(body: any) => Promise<any> \| any` | — | Called with the outgoing request body before it's JSON-stringified; may modify and return the body. |
| `title` | `string` | `'AI Assistant'` | Header title |
| `logo` | `string` | — | URL or base64 of logo image |
| `welcomeMessage` | `string` | — | Markdown string shown as the first AI message |
| `initialMessage` | `string` | — | Pre-fills the input when the widget first opens |
| `container` | `string \| HTMLElement` | `document.body` | Mount target; omit for floating FAB |
| `theme` | `SDKTheme` | — | See theme options below |

### Theme Options

| Option | Default | Description |
|---|---|---|
| `primaryColor` | `#6366f1` | Accent color — buttons, header gradient start |
| `secondaryColor` | `#8b5cf6` | Header gradient end |
| `backgroundColor` | `#f8fafc` | Chat message area background |
| `fontFamily` | system-ui | CSS font-family string |
| `borderRadius` | `12px` | Message bubble corner radius |
| `userBubbleColor` | `#6366f1` | User message bubble fill |
| `userBubbleTextColor` | `#ffffff` | User message bubble text |

## React Usage

```tsx
import { ChatWindow } from '@sksharma72000/ai-chat-websdk';
import '@sksharma72000/ai-chat-websdk/style.css';

function App() {
  return (
    <ChatWindow config={{
      apiUrl: 'https://api.example.com',
      jwtToken: token,
      title: 'Support Chat',
    }} />
  );
}
```

## Chat Mode

The chat mode (FAQ / client / database) is determined **server-side** via the JWT claims.  
No manual mode selector is exposed — the server routes queries automatically based on the token.

## License

MIT © Shree Krishna Acharya