{"_id":"@dialog-ai/dialog-bot-sdk","name":"@dialog-ai/dialog-bot-sdk","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dialog-ai/dialog-bot-sdk","version":"0.1.0","description":"Embeddable React chat widget SDK for Dialog bots","license":"MIT","type":"module","main":"./dist/dialog-bot-sdk.umd.js","module":"./dist/dialog-bot-sdk.es.js","unpkg":"./dist/dialog-bot-sdk.umd.js","jsdelivr":"./dist/dialog-bot-sdk.umd.js","style":"./dist/style.css","exports":{".":{"import":"./dist/dialog-bot-sdk.es.js","require":"./dist/dialog-bot-sdk.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"vite build","lint":"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepublishOnly":"npm run build","pack:check":"npm pack --dry-run","pack":"npm run build && npm pack"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@ant-design/icons":"^6.0.0","@ant-design/x":"^2.2.2","@ant-design/x-markdown":"^2.2.2","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.3","antd":"^6.3.0","axios":"^1.11.0","bot-analytics-sdk":"file:../dialog-bot-analytics-sdk","crypto-js":"^4.2.0","eslint":"^8.45.0","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","less":"^4.3.0","lucide-react":"^0.577.0","react":"^18.2.0","react-dom":"^18.2.0","react-markdown":"^10.1.0","socket.io-client":"^4.8.1","vite":"^4.4.5"},"keywords":["chatbot","chat-widget","react","dialog","sdk","customer-support"],"repository":{"type":"git","url":"git+https://github.com/akhilasok/dialog-bot-sdk.git"},"bugs":{"url":"https://github.com/akhilasok/dialog-bot-sdk/issues"},"homepage":"https://github.com/akhilasok/dialog-bot-sdk#readme","publishConfig":{"access":"public"},"gitHead":"c7e91a51a24c1c1abde0cf085d4963a09d9121c2","_id":"@dialog-ai/dialog-bot-sdk@0.1.0","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-zzBPy6LKZZJD8RjmjWhq6EXLaws+DQ3ScsxzJHzLMFkPp3Oq+hyCeSvKIi3i0OUnZVpQexGp6loY325W58Drdg==","shasum":"11f3231a49483640aa620c4621344545ae44a8e1","tarball":"https://registry.npmjs.org/@dialog-ai/dialog-bot-sdk/-/dialog-bot-sdk-0.1.0.tgz","fileCount":6,"unpackedSize":2791083,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCxHRMtLCOxxfqBqrvo+j2x1uW7/UhBvZHv0Z7N+J86+QIhAKP0UGzVchbIERcMsXXQvv/45jgzx6JCaB6JJzKjvqfn"}]},"_npmUser":{"name":"akhil.work207","email":"akhil.work207@gmail.com"},"directories":{},"maintainers":[{"name":"akhil.work207","email":"akhil.work207@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dialog-bot-sdk_0.1.0_1786276092727_0.49427272449609183"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-09T11:48:12.600Z","0.1.0":"2026-08-09T11:48:12.942Z","modified":"2026-08-09T11:48:13.138Z"},"maintainers":[{"name":"akhil.work207","email":"akhil.work207@gmail.com"}],"description":"Embeddable React chat widget SDK for Dialog bots","homepage":"https://github.com/akhilasok/dialog-bot-sdk#readme","keywords":["chatbot","chat-widget","react","dialog","sdk","customer-support"],"repository":{"type":"git","url":"git+https://github.com/akhilasok/dialog-bot-sdk.git"},"bugs":{"url":"https://github.com/akhilasok/dialog-bot-sdk/issues"},"license":"MIT","readme":"# Dialog Bot SDK\n\nEmbeddable React chat widget for Dialog bots. Drop it into any React app to get a branded floating chat launcher with realtime messaging, rich message types, theming, and optional analytics.\n\n**Package:** [`@dialog-ai/dialog-bot-sdk`](https://www.npmjs.com/package/@dialog-ai/dialog-bot-sdk)\n\n## Features\n\n- Floating chat launcher with open / minimize / clear session\n- Realtime messaging over Socket.IO\n- Rich messages: text (markdown), buttons, forms, cards, carousels, images\n- Full theme customization (brand, colors, size, position)\n- Optional analytics via `bot-analytics-sdk`\n- Secure local storage for session tokens\n\n## Requirements\n\n- React 18+\n- React DOM 18+\n- A Dialog bot service endpoint and bot token\n\n## Install\n\n```bash\nnpm install @dialog-ai/dialog-bot-sdk\n```\n\nor\n\n```bash\nyarn add @dialog-ai/dialog-bot-sdk\n```\n\nImport the stylesheet once in your app (e.g. root entry or layout):\n\n```js\nimport '@dialog-ai/dialog-bot-sdk/style.css';\n```\n\n## Quick start\n\n```jsx\nimport { ChatBot } from '@dialog-ai/dialog-bot-sdk';\nimport '@dialog-ai/dialog-bot-sdk/style.css';\n\nfunction App() {\n  return (\n    <ChatBot\n      apiDomain=\"https://your-bot-api.example.com\"\n      token=\"your-bot-jwt-or-api-key\"\n      encryptionKey=\"your-random-32-char-secret\"\n      position=\"right\"\n      theme={{\n        companyName: 'Acme Support',\n        logoUrl: 'https://example.com/logo.png',\n        primaryColor: '#2563eb',\n      }}\n    />\n  );\n}\n```\n\nThe widget renders a fixed launcher in the corner. Opening it starts a conversation against your bot API.\n\n## Props\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `apiDomain` | `string` | Yes | — | Bot service REST base URL (**no trailing slash**), e.g. `https://api.example.com` |\n| `token` | `string` | Yes | — | Bot JWT / API key sent as `Authorization: Bearer …` |\n| `encryptionKey` | `string` | No | built-in default | AES key used for secure `localStorage`. Set a unique value in production |\n| `position` | `'left' \\| 'right'` | No | `'right'` | Aligns the launcher and chat window to the left or right of the page |\n| `offset` | `{ x?, y? } \\| number` | No | `{ x: 20, y: 20 }` | Distance from the viewport edges in px. A number applies to both axes |\n| `theme` | `object` | No | `defaultTheme` | Partial theme overrides (see [Theming](#theming)) |\n| `analytics` | `object` | No | disabled | Analytics configuration (see [Analytics](#analytics)) |\n| `flowId` | `string` | No | — | Optional conversation flow id passed to the socket query |\n\n## Position\n\nPin the widget to either side of the viewport:\n\n```jsx\n{/* Right side (default) */}\n<ChatBot apiDomain=\"…\" token=\"…\" position=\"right\" />\n\n{/* Left side */}\n<ChatBot apiDomain=\"…\" token=\"…\" position=\"left\" />\n\n{/* Custom edge inset */}\n<ChatBot\n  apiDomain=\"…\"\n  token=\"…\"\n  position=\"left\"\n  offset={{ x: 24, y: 32 }}\n/>\n```\n\nAliases also accepted: `bottom-left`, `bottom-right`, `bl`, `br`.\n\nPriority: `position` prop → `theme.widgetPosition` → `'right'`.\n\n### Connection notes\n\n- REST calls go to `{apiDomain}/api/v1/…` (e.g. `POST /api/v1/conversation`).\n- After a conversation is created, the SDK connects via Socket.IO using the returned `connection_url` (or `apiDomain` as fallback).\n- Obtain a bot token from your Dialog bot service (e.g. `POST /api/v1/bot/token`).\n\n## Theming\n\nPass any subset of theme keys. Missing values fall back to the default light theme.\n\n```jsx\nimport { ChatBot, defaultTheme, themePresets } from '@dialog-ai/dialog-bot-sdk';\n\n<ChatBot\n  apiDomain=\"…\"\n  token=\"…\"\n  theme={{\n    ...themePresets.modern,\n    companyName: 'Acme',\n    primaryColor: '#7c3aed',\n  }}\n/>\n```\n\n### Built-in presets\n\n| Preset | Use case |\n|--------|----------|\n| `themePresets.default` | Default light blue |\n| `themePresets.corporate` | Stronger blue, serif type, tighter radius |\n| `themePresets.modern` | Violet accent, softer surfaces |\n| `themePresets.minimal` | Near-black primary, no launcher label |\n\n### Theme keys\n\n**Brand**\n\n| Key | Type | Description |\n|-----|------|-------------|\n| `companyName` | `string` | Header title |\n| `logoUrl` | `string` | Header / brand logo URL |\n| `avatarUrl` | `string` | Bot avatar URL |\n| `widgetLabel` | `string` | Text next to the launcher |\n| `showWidgetLabel` | `boolean` | Show / hide launcher label |\n| `inputPlaceholder` | `string` | Composer placeholder |\n\n**Colors**\n\n| Key | Description |\n|-----|-------------|\n| `primaryColor` | Primary accent (header, user bubble, buttons) |\n| `primaryColorHover` | Hover / gradient end |\n| `secondaryColor` | Secondary surfaces |\n| `backgroundColor` | Chat window background |\n| `surfaceColor` | Panels / secondary areas |\n| `textColor` | Primary text |\n| `textColorMuted` | Secondary text |\n| `borderColor` | Borders / dividers |\n| `headerTextColor` | Header text / icons |\n| `userBubbleColor` | User bubble fill (defaults to primary gradient) |\n| `userBubbleTextColor` | User bubble text |\n| `botBubbleColor` | Bot bubble fill |\n| `botBubbleTextColor` | Bot bubble text |\n| `botBubbleBorderColor` | Bot bubble border |\n| `buttonTextColor` | Quick-reply / action button text |\n| `buttonDisabledBackground` | Disabled button background |\n| `buttonDisabledText` | Disabled button text |\n| `buttonDisabledBorder` | Disabled button border |\n\n**Typography & layout**\n\n| Key | Type | Description |\n|-----|------|-------------|\n| `fontFamily` | `string` | CSS font stack |\n| `fontSizeBase` | `string` | Base font size (e.g. `14px`) |\n| `width` | `number` | Window width in px |\n| `height` | `number` | Window height in px |\n| `borderRadius` | `number` | Corner radius in px |\n| `widgetPosition` | `'bottom-right' \\| 'bottom-left'` | Deprecated — prefer the `position` prop |\n| `widgetOffsetX` | `number` | Deprecated — prefer the `offset` prop |\n| `widgetOffsetY` | `number` | Deprecated — prefer the `offset` prop |\n| `zIndex` | `number` | Stacking order (default `9999`) |\n\n## Analytics\n\nAnalytics are off unless `analytics.enabled` is `true`. When enabled, these fields are required:\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `enabled` | `boolean` | Turn analytics on |\n| `accountId` | `string` | Analytics account id |\n| `projectId` | `string` | Analytics project id |\n| `endpointUrl` | `string` | Analytics API base URL (`http` / `https`) |\n| `apiKey` | `string` | Analytics API key |\n| `userId` | `string` | Optional end-user id |\n\n```jsx\n<ChatBot\n  apiDomain=\"…\"\n  token=\"…\"\n  analytics={{\n    enabled: true,\n    accountId: 'acc_enterprise_01',\n    projectId: 'proj_chatbot_v2',\n    endpointUrl: 'https://analytics.example.com',\n    apiKey: 'your-analytics-api-key',\n    userId: 'user_123',\n  }}\n/>\n```\n\nTracked events include widget open / close / minimize, messages sent and received, and chat cleared.\n\n## Exports\n\n| Export | Description |\n|--------|-------------|\n| `ChatBot` | Main widget component |\n| `ThemeProvider` / `useTheme` | Theme context (advanced) |\n| `defaultTheme` | Default theme object |\n| `themePresets` | Named theme presets |\n| `POSITIONS` | Position constants (`left`, `right`, …) |\n| `normalizePosition` | Normalize position aliases |\n| `setConfig` / `getConfig` | Imperative runtime config helpers |\n\nStyles:\n\n```js\nimport '@dialog-ai/dialog-bot-sdk/style.css';\n```\n\n## CDN (UMD)\n\n```html\n<script src=\"https://unpkg.com/react@18/umd/react.production.min.js\"></script>\n<script src=\"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@dialog-ai/dialog-bot-sdk/dist/style.css\" />\n<script src=\"https://unpkg.com/@dialog-ai/dialog-bot-sdk/dist/dialog-bot-sdk.umd.js\"></script>\n```\n\n`DialogBotSDK` is available on `window` (see build `name` in the Vite config). Prefer the npm ESM build for React apps.\n\n## Local development\n\n```bash\nnpm install\nnpm run dev       # demo app at Vite default URL\nnpm run build     # emit dist/\nnpm run pack:check\n```\n\nDemo env vars (see `.env.example`):\n\n| Variable | Purpose |\n|----------|---------|\n| `VITE_API_DOMAIN` | Bot API base URL |\n| `VITE_TOKEN` | Bot token |\n| `VITE_ENCRYPTION_KEY` | Storage encryption key |\n| `VITE_ANALYTICS_*` | Optional analytics for the demo |\n\nThese env vars are only for the demo app. Library consumers must pass config through `ChatBot` props.\n\n## Publish\n\n```bash\nnpm run build\nnpm publish --access public\n```\n\n`prepublishOnly` runs the build automatically before publish.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-cc35ed1d7dfaf14d73cc1514330a7d07"}