ai-chat-websdk 1.1.0

package/README.md

@@ -0,0 +1,180 @@
+# @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

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ai-chat-websdk",
+  "version": "1.1.0",
+  "description": "Embeddable AI Chat WebSDK — configurable widget with JWT auth, theming, and rich content rendering",
+  "type": "module",
+  "main": "dist/ai-chat-websdk.umd.js",
+  "module": "dist/ai-chat-websdk.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/ai-chat-websdk.es.js",
+      "require": "./dist/ai-chat-websdk.umd.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:standalone": "vite build --config vite.standalone.config.ts",
+    "build:all": "npm run build && npm run build:standalone",
+    "build:watch": "vite build --watch",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "publish:prepare": "npm run build:all && node scripts/prepare-publish.js",
+    "publish:npm": "npm run publish:prepare && cd publish && npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "@tanstack/react-table": "^8.10.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.7.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}