{"_id":"@aiassist-secure/vanilla","name":"@aiassist-secure/vanilla","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aiassist-secure/vanilla","version":"1.0.0","description":"Drop-in AI chat widget for any website - no framework required","main":"dist/widget.js","module":"dist/widget.esm.js","types":"dist/widget.d.ts","scripts":{"build":"node build.js","dev":"node build.js --watch"},"keywords":["ai","chat","widget","chatbot","customer-support","live-chat","llm","groq","aiassist","aiassist-secure"],"author":{"name":"AiAssist Secure"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aiassistsecure/vanilla-widget.git"},"homepage":"https://aiassist.net","bugs":{"url":"https://github.com/aiassistsecure/vanilla-widget/issues"},"_id":"@aiassist-secure/vanilla@1.0.0","gitHead":"688713b3df643bda59749f063c08a5d5461cdb07","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-HBrbHfDRsahfIvM+A/lygiMF50+8vv6JoYM9SeblALtgfb9sqElMI/oyy5fy+URCcn1+mrCEASBJy1CbgDkgfA==","shasum":"288b70537de9a585b32ae240425402836a99f328","tarball":"https://registry.npmjs.org/@aiassist-secure/vanilla/-/vanilla-1.0.0.tgz","fileCount":7,"unpackedSize":145319,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDdXGU9vZkvNSRBbC//W7mlkdJirtYDltKRFBaURABixQIhANPBCJMEjApILKIKKGShUN5Cv2RB6vM2/oGUR11GvvS7"}]},"_npmUser":{"name":"interchained","email":"interchained@gmail.com"},"directories":{},"maintainers":[{"name":"interchained","email":"interchained@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vanilla_1.0.0_1767913879225_0.9317498340353778"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-08T23:11:19.127Z","1.0.0":"2026-01-08T23:11:19.385Z","modified":"2026-01-08T23:11:19.742Z"},"maintainers":[{"name":"interchained","email":"interchained@gmail.com"}],"description":"Drop-in AI chat widget for any website - no framework required","homepage":"https://aiassist.net","keywords":["ai","chat","widget","chatbot","customer-support","live-chat","llm","groq","aiassist","aiassist-secure"],"repository":{"type":"git","url":"git+https://github.com/aiassistsecure/vanilla-widget.git"},"author":{"name":"AiAssist Secure"},"bugs":{"url":"https://github.com/aiassistsecure/vanilla-widget/issues"},"license":"MIT","readme":"# @aiassist-secure/vanilla\n\n[![npm version](https://img.shields.io/npm/v/@aiassist-secure/vanilla.svg)](https://www.npmjs.com/package/@aiassist-secure/vanilla)\n[![CDN](https://img.shields.io/badge/CDN-Available-success.svg)](https://cdn.aiassist.net/widget.js)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n[![Bundle Size](https://img.shields.io/badge/minified-35KB-blue.svg)]()\n\n**Drop-in AI chat widget for any website** - No framework required. Add enterprise AI support to any site with a single script tag.\n\nWorks with **WordPress, Shopify, Squarespace, Webflow, static HTML**, and more.\n\n---\n\n## Features\n\n- **Zero Dependencies** - Single script, no build step required\n- **Shadow DOM** - Styles isolated from your site\n- **Shadow Mode** - AI drafts require human approval\n- **Human Handoff** - Seamless AI-to-human transition\n- **Lead Capture** - Collect emails before chat starts\n- **Dark/Light Themes** - Built-in theme support\n- **TypeScript** - Full type definitions included\n- **CDN + npm** - Use via CDN or install via npm\n\n---\n\n## Quick Start (CDN)\n\nAdd two lines to your HTML:\n\n```html\n<script src=\"https://cdn.aiassist.net/widget.js\"></script>\n<script>\n  AiAssist.init({\n    apiKey: 'your-api-key'\n  });\n</script>\n```\n\n**That's it!** A chat bubble appears in the bottom-right corner.\n\n---\n\n## Installation via npm\n\n```bash\nnpm install @aiassist-secure/vanilla\n```\n\n```javascript\nimport AiAssist from '@aiassist-secure/vanilla';\n\nAiAssist.init({\n  apiKey: 'your-api-key',\n  position: 'bottom-right'\n});\n```\n\n---\n\n## Full Example\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>My Website</title>\n</head>\n<body>\n  <h1>Welcome to My Site</h1>\n  <p>We're here to help 24/7</p>\n  \n  <!-- AiAssist Chat Widget -->\n  <script src=\"https://cdn.aiassist.net/widget.js\"></script>\n  <script>\n    AiAssist.init({\n      apiKey: 'your-api-key',\n      \n      // Branding\n      title: 'Acme Support',\n      subtitle: 'We typically reply in minutes',\n      greeting: 'Hi there! How can I help you today?',\n      \n      // Behavior\n      position: 'bottom-right',\n      theme: 'dark',\n      autoOpen: false,\n      requireEmail: true,\n      \n      // AI Configuration\n      systemPrompt: 'You are a friendly support agent for Acme Inc. Be helpful, concise, and professional.',\n      \n      // Callbacks\n      onReady: () => console.log('Chat widget loaded'),\n      onMessage: (msg) => console.log('New message:', msg),\n      onLeadCapture: (lead) => {\n        // Send to your CRM\n        fetch('/api/leads', {\n          method: 'POST',\n          body: JSON.stringify(lead)\n        });\n      }\n    });\n  </script>\n</body>\n</html>\n```\n\n---\n\n## Shadow Mode (Enterprise)\n\nAI drafts are reviewed by a human before being sent:\n\n```javascript\nAiAssist.init({\n  apiKey: 'your-api-key',\n  \n  onMessage: (message) => {\n    // Check if message is pending approval\n    if (message.pending_approval) {\n      console.log('AI draft awaiting supervisor approval');\n      // The message shows a \"pending\" indicator in the UI\n    }\n  },\n  \n  onModeChange: (mode) => {\n    switch (mode) {\n      case 'ai':\n        console.log('AI is responding');\n        break;\n      case 'shadow':\n        console.log('AI drafts being supervised');\n        break;\n      case 'takeover':\n        console.log('Human agent has taken over');\n        // Widget automatically shows \"Speaking with Agent\"\n        break;\n    }\n  }\n});\n```\n\n---\n\n## Human-in-the-Loop\n\nDetect when a human agent joins the conversation:\n\n```javascript\nAiAssist.init({\n  apiKey: 'your-api-key',\n  \n  onModeChange: (mode) => {\n    if (mode === 'takeover') {\n      // Update your page to show human support is active\n      document.getElementById('support-status').textContent = \n        'You are now speaking with a human agent';\n    }\n  }\n});\n```\n\n---\n\n## Lead Capture\n\nCollect customer emails before starting the chat:\n\n```javascript\nAiAssist.init({\n  apiKey: 'your-api-key',\n  requireEmail: true,  // Show email form first\n  \n  onLeadCapture: (lead) => {\n    console.log('Captured lead:', lead.email);\n    \n    // Send to your CRM, email service, or database\n    fetch('https://your-api.com/leads', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({\n        email: lead.email,\n        source: 'chat_widget',\n        timestamp: new Date().toISOString()\n      })\n    });\n  }\n});\n```\n\n---\n\n## Programmatic Control\n\nControl the widget from your JavaScript:\n\n```javascript\n// Get widget instance\nconst widget = AiAssist.getInstance();\n\n// Open/close/toggle the chat\nwidget.open();\nwidget.close();\nwidget.toggle();\n\n// Send a message programmatically\nawait widget.send('I need help with my order #12345');\n\n// Get current conversation info\nconst workspaceId = widget.getWorkspaceId();\nconst messages = widget.getMessages();\nconst isOpen = widget.isOpen();\n\n// End the conversation\nawait widget.endConversation();\n\n// Destroy the widget completely\nAiAssist.destroy();\n```\n\n---\n\n## DOM Events\n\nListen for widget events on the document:\n\n```javascript\n// Widget fully loaded and ready\ndocument.addEventListener('aiassist:ready', () => {\n  console.log('Widget initialized');\n});\n\n// Chat window opened\ndocument.addEventListener('aiassist:open', () => {\n  console.log('User opened chat');\n  analytics.track('chat_opened');\n});\n\n// Chat window closed\ndocument.addEventListener('aiassist:close', () => {\n  console.log('User closed chat');\n});\n\n// New message received\ndocument.addEventListener('aiassist:message', (e) => {\n  const message = e.detail;\n  console.log(`${message.role}: ${message.content}`);\n  \n  if (message.pending_approval) {\n    console.log('Message pending approval');\n  }\n});\n\n// Mode changed (AI/Shadow/Human)\ndocument.addEventListener('aiassist:mode:change', (e) => {\n  console.log('Mode changed to:', e.detail.mode);\n});\n\n// Lead captured\ndocument.addEventListener('aiassist:lead:capture', (e) => {\n  console.log('Lead email:', e.detail.email);\n});\n\n// Conversation ended\ndocument.addEventListener('aiassist:conversation:end', () => {\n  console.log('Conversation ended');\n});\n```\n\n---\n\n## Configuration Reference\n\n```javascript\nAiAssist.init({\n  // Required\n  apiKey: 'your-api-key',\n  \n  // API Settings\n  endpoint: 'https://api.aiassist.net',  // Custom endpoint\n  \n  // Position & Appearance\n  position: 'bottom-right',   // bottom-right, bottom-left, top-right, top-left\n  theme: 'dark',              // 'dark' or 'light'\n  zIndex: 999999,             // CSS z-index\n  \n  // Branding\n  title: 'AI Assistant',      // Header title\n  subtitle: 'Ask me anything', // Header subtitle  \n  placeholder: 'Type your message...', // Input placeholder\n  poweredBy: true,            // Show \"Powered by AiAssist\"\n  \n  // Behavior\n  greeting: null,             // Initial greeting message\n  systemPrompt: null,         // AI system prompt\n  context: {},                // Additional context object\n  autoOpen: false,            // Auto-open on page load\n  autoOpenDelay: 3000,        // Delay before auto-open (ms)\n  requireEmail: true,         // Require email before chat\n  \n  // Callbacks\n  onReady: () => {},                      // Widget initialized\n  onOpen: () => {},                       // Chat opened\n  onClose: () => {},                      // Chat closed\n  onMessage: (message) => {},             // New message\n  onError: (error) => {},                 // Error occurred\n  onConversationStart: (workspaceId) => {}, // Conversation started\n  onConversationEnd: () => {},            // Conversation ended\n  onModeChange: (mode) => {},             // Mode changed (ai/shadow/takeover)\n  onLeadCapture: (lead) => {}             // Email captured\n});\n```\n\n---\n\n## WordPress Integration\n\nFor WordPress sites, you can add the widget via:\n\n### Option 1: Theme Footer\n\nAdd to your theme's `footer.php` or via **Appearance > Theme Editor**:\n\n```php\n<script src=\"https://cdn.aiassist.net/widget.js\"></script>\n<script>\n  AiAssist.init({\n    apiKey: '<?php echo get_option(\"aiassist_api_key\"); ?>',\n    title: '<?php bloginfo(\"name\"); ?> Support'\n  });\n</script>\n```\n\n### Option 2: Plugin\n\nUse our official WordPress plugin:\n\n1. Download from [aiassist.net/wordpress](https://aiassist.net/wordpress)\n2. Upload to `/wp-content/plugins/`\n3. Activate and configure in **Settings > AiAssist**\n\n---\n\n## TypeScript Support\n\nType definitions are included:\n\n```typescript\nimport AiAssist, { \n  AiAssistConfig, \n  Message,\n  Mode \n} from '@aiassist-secure/vanilla';\n\nconst config: AiAssistConfig = {\n  apiKey: 'your-api-key',\n  onMessage: (message: Message) => {\n    console.log(message.content);\n    if (message.pending_approval) {\n      console.log('Pending approval');\n    }\n  },\n  onModeChange: (mode: Mode) => {\n    console.log('Mode:', mode); // 'ai' | 'shadow' | 'takeover'\n  }\n};\n\nAiAssist.init(config);\n```\n\n**CDN users:** Download type definitions from `https://cdn.aiassist.net/widget.d.ts`\n\n---\n\n## Browser Support\n\n| Browser | Version |\n|---------|---------|\n| Chrome | 80+ |\n| Firefox | 75+ |\n| Safari | 14+ |\n| Edge | 80+ |\n\n---\n\n## Related Packages\n\n| Package | Description |\n|---------|-------------|\n| [@aiassist-secure/react](https://www.npmjs.com/package/@aiassist-secure/react) | React components |\n| [@aiassist-secure/core](https://www.npmjs.com/package/@aiassist-secure/core) | TypeScript API client |\n\n---\n\n## Links\n\n- [Documentation](https://aiassist.net/developer-docs/vanilla)\n- [Live Demo](https://aiassist.net/demo)\n- [CDN Setup Guide](https://aiassist.net/developer-docs/cdn)\n- [WordPress Plugin](https://aiassist.net/wordpress)\n\n---\n\n## Support\n\n- Documentation: [aiassist.net/docs](https://aiassist.net/docs)\n- Developer Docs: [aiassist.net/developer-docs](https://aiassist.net/developer-docs)\n- Email: support@aiassist.net\n\n---\n\n## License\n\nMIT License - [Interchained LLC](https://interchained.com)\n","readmeFilename":"README.md","_rev":"1-9646dc9a3f86b754e87c4a2399d35e13"}