{"_id":"@ampup/chat-widget","_rev":"2-b4bdb7d634f0bed3e2eaaafd6b04be2a","name":"@ampup/chat-widget","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@ampup/chat-widget","version":"0.1.0","keywords":["elevenlabs","chat-widget","voice-agent","ai-chat","react"],"license":"MIT","_id":"@ampup/chat-widget@0.1.0","maintainers":[{"name":"ampup","email":"saakshi@gmail.com"}],"homepage":"https://github.com/ampup-ai/ampup-widget#readme","bugs":{"url":"https://github.com/ampup-ai/ampup-widget/issues"},"dist":{"shasum":"b75d6a73db971c228525493eacbb0e7e846136ab","tarball":"https://registry.npmjs.org/@ampup/chat-widget/-/chat-widget-0.1.0.tgz","fileCount":9,"integrity":"sha512-wPMYEJqa7pUcUiE1FnAfek9L/0DjBBtLsg+3ov3BBVP8B936jBrxZZ8VlpuTC7WY+Ej9GveS2fsG+8HIsvaT9A==","signatures":[{"sig":"MEQCIEdiTI/HvBbt3rhui/ZsTk8p6R/ltjHFzT3Rtr/ksIeCAiAZm+xjVCvQMVM+VzonUz3qtdCYghuajty8jJ7E5jo8Ug==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":197604},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"gitHead":"eb7f3ca991dbd277c8f679b5331f02848b59e53b","scripts":{"dev":"tsup --watch","build":"tsup && cp src/styles.css dist/styles.css","prepublishOnly":"npm run build"},"_npmUser":{"name":"ampup","email":"saakshi@gmail.com"},"repository":{"url":"git+https://github.com/ampup-ai/ampup-widget.git","type":"git"},"_npmVersion":"11.6.2","description":"Drop-in AI voice chat widget powered by ElevenLabs with a custom overlay UI","directories":{},"_nodeVersion":"25.2.1","dependencies":{"@elevenlabs/react":"^0.14.0"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/chat-widget_0.1.0_1771703008566_0.28032311043251634","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@ampup/chat-widget","version":"0.2.0","description":"Drop-in AI voice chat widget powered by ElevenLabs with a custom overlay UI","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup && cp src/styles.css dist/styles.css","dev":"tsup --watch","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.0.0","typescript":"^5.0.0"},"keywords":["elevenlabs","chat-widget","voice-agent","ai-chat","react"],"publishConfig":{"access":"restricted"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ampup-ai/ampup-widget.git"},"dependencies":{"@elevenlabs/react":"^0.14.0"},"gitHead":"51f1c38a0a4a51f687469ee101025b4d193882a5","_id":"@ampup/chat-widget@0.2.0","bugs":{"url":"https://github.com/ampup-ai/ampup-widget/issues"},"homepage":"https://github.com/ampup-ai/ampup-widget#readme","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-ZW5BHYYUuFlIp0MNB34TZ3YwLXifOupI1t99IPYkojS3Q0sYZMP9oGFJARo6gGPFT4Qu7/CiexqbvZXnx+N5HA==","shasum":"5b8e4e3c525a24556bc5aca176bfc62e8d14e767","tarball":"https://registry.npmjs.org/@ampup/chat-widget/-/chat-widget-0.2.0.tgz","fileCount":9,"unpackedSize":204528,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCOb3zbbdBJZa4lW32L5fyeRx6C4fzXjGQcAJkm8Qcq7wIgF0twpxJ+qsDf6Js3RKtTCuaC2bbEAF2jnmvoj8+F5bc="}]},"_npmUser":{"name":"ampup","email":"saakshi@gmail.com"},"directories":{},"maintainers":[{"name":"ampup","email":"saakshi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chat-widget_0.2.0_1771825925382_0.15754539464522255"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-21T19:43:28.458Z","modified":"2026-02-23T05:52:05.697Z","0.1.0":"2026-02-21T19:43:28.720Z","0.2.0":"2026-02-23T05:52:05.529Z"},"bugs":{"url":"https://github.com/ampup-ai/ampup-widget/issues"},"license":"MIT","homepage":"https://github.com/ampup-ai/ampup-widget#readme","keywords":["elevenlabs","chat-widget","voice-agent","ai-chat","react"],"repository":{"type":"git","url":"git+https://github.com/ampup-ai/ampup-widget.git"},"description":"Drop-in AI voice chat widget powered by ElevenLabs with a custom overlay UI","maintainers":[{"name":"ampup","email":"saakshi@gmail.com"}],"readme":"# @ampup/chat-widget\n\nDrop-in AI voice chat widget powered by [ElevenLabs](https://elevenlabs.io). Ships with a custom chat overlay UI — the underlying ElevenLabs widget runs hidden in the background while your users interact with your branded interface.\n\n## Installation\n\n```bash\nnpm install @ampup/chat-widget\n# or\npnpm add @ampup/chat-widget\n# or\nyarn add @ampup/chat-widget\n```\n\n**Peer dependencies** — make sure your project has React 18+:\n\n```bash\nnpm install react react-dom\n```\n\n## Quick Start\n\n```tsx\nimport { ChatWidget } from \"@ampup/chat-widget\";\nimport \"@ampup/chat-widget/styles.css\";\n\nfunction App() {\n  return (\n    <ChatWidget agentId=\"your_elevenlabs_agent_id\" />\n  );\n}\n```\n\nThat's it. A floating chat button appears in the bottom-right corner of the page.\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `agentId` | `string` | **(required)** | Your ElevenLabs Conversational AI agent ID |\n| `position` | `\"bottom-right\" \\| \"bottom-left\"` | `\"bottom-right\"` | Widget position on the page |\n| `defaultOpen` | `boolean` | `false` | Start with the chat panel open |\n| `className` | `string` | `undefined` | Additional CSS class on the root element |\n| `onMessage` | `(msg: ChatMessage) => void` | `undefined` | Callback fired on every message (user or assistant) |\n| `onConnectionChange` | `(connected: boolean) => void` | `undefined` | Callback when WebSocket connection state changes |\n| `contextProvider` | `() => string` | `undefined` | Function returning context to send to the agent (e.g. current page info) |\n| `labels` | `object` | see below | Override default UI text |\n\n### Labels\n\n```ts\n{\n  placeholder: \"Type your message...\",\n  sendButton: \"Send\",\n  title: \"Chat\",\n  emptyState: \"Start a conversation by typing a message or using your microphone.\",\n}\n```\n\n## Examples\n\n### With page context\n\n```tsx\nimport { ChatWidget } from \"@ampup/chat-widget\";\nimport \"@ampup/chat-widget/styles.css\";\n\nfunction App() {\n  return (\n    <ChatWidget\n      agentId=\"agent_xxxxx\"\n      contextProvider={() =>\n        `User is viewing: ${window.location.pathname}`\n      }\n    />\n  );\n}\n```\n\n### With message logging\n\n```tsx\n<ChatWidget\n  agentId=\"agent_xxxxx\"\n  onMessage={(msg) => {\n    console.log(`[${msg.role}] ${msg.content}`);\n  }}\n/>\n```\n\n### Custom labels and position\n\n```tsx\n<ChatWidget\n  agentId=\"agent_xxxxx\"\n  position=\"bottom-left\"\n  defaultOpen\n  labels={{\n    title: \"Support\",\n    placeholder: \"Ask us anything...\",\n    sendButton: \"Send\",\n    emptyState: \"Hi! How can we help?\",\n  }}\n/>\n```\n\n### Sending context updates programmatically\n\n```tsx\nimport { ChatWidget, sendContextUpdate } from \"@ampup/chat-widget\";\nimport \"@ampup/chat-widget/styles.css\";\n\nfunction App() {\n  const handlePageChange = (page: string) => {\n    sendContextUpdate(`User navigated to ${page}`);\n  };\n\n  return <ChatWidget agentId=\"agent_xxxxx\" />;\n}\n```\n\n## Styling\n\nImport the default stylesheet:\n\n```tsx\nimport \"@ampup/chat-widget/styles.css\";\n```\n\nAll CSS classes are prefixed with `ampup-widget-` to avoid collisions. You can override any class in your own CSS:\n\n```css\n/* Example: change the FAB color */\n.ampup-widget-fab {\n  background: #4f46e5;\n}\n\n/* Example: change user message bubbles */\n.ampup-widget-msg[data-role=\"user\"] {\n  background: #4f46e5;\n}\n```\n\nOr skip the default styles entirely and write your own from scratch — the component uses the same class names either way.\n\n## How It Works\n\n1. The `<ChatWidget>` renders a **hidden** `<elevenlabs-convai>` custom element. It loads the ElevenLabs script from CDN, connects via WebSocket, and handles all voice AI logic.\n2. A **WebSocket proxy** intercepts the ElevenLabs connection to read transcripts and inject context updates in real time.\n3. The **chat overlay** is a plain React UI (FAB button, message list, text input, mic button) driven by events from the proxy.\n\n## Types\n\n```ts\ninterface ChatMessage {\n  role: \"user\" | \"assistant\";\n  content: string;\n  timestamp: number;\n}\n\ninterface ChatWidgetProps {\n  agentId: string;\n  position?: \"bottom-right\" | \"bottom-left\";\n  onMessage?: (message: ChatMessage) => void;\n  onConnectionChange?: (connected: boolean) => void;\n  contextProvider?: () => string;\n  className?: string;\n  labels?: {\n    placeholder?: string;\n    sendButton?: string;\n    title?: string;\n    emptyState?: string;\n  };\n  defaultOpen?: boolean;\n}\n```\n\n## Development\n\n```bash\ngit clone https://github.com/ampup-ai/ampup-widget.git\ncd ampup-widget\nnpm install\nnpm run dev     # watch mode\nnpm run build   # production build → dist/\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}