@sksharma72000/ai-chat-websdk 1.0.0

package/README.md

@@ -0,0 +1,129 @@
+# @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.
+
+```bash
+npm install react react-dom
+```
+
+## Quick Start
+
+```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
+  },
+
+  // 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();
+```
+
+## Configuration Reference
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `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 |
+| `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