{"_id":"@bryancheru/chat-widget","_rev":"2-e4942ef8708f40c9ec62ef3ab9a97971","name":"@bryancheru/chat-widget","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bryancheru/chat-widget","version":"1.0.0","keywords":["react","chat","widget","ai","chatbot","customer-support","lead-capture"],"author":{"name":"Imara Logic"},"license":"MIT","_id":"@bryancheru/chat-widget@1.0.0","maintainers":[{"name":"bryancheru","email":"briancheruiyot501@gmail.com"}],"homepage":"https://github.com/imaralogic/chat-widget#readme","bugs":{"url":"https://github.com/imaralogic/chat-widget/issues"},"dist":{"shasum":"7f6f0674fa4668ee312b210f8fc0a7e3366bb669","tarball":"https://registry.npmjs.org/@bryancheru/chat-widget/-/chat-widget-1.0.0.tgz","fileCount":12,"integrity":"sha512-cz2bRCesanYKWp+Sl4va/+ap5jgDVdM8nxGA+JQt48JCHwLcbP26R3uZASq8nSrvb3SEpBnHPEDU/rKUcfTK6w==","signatures":[{"sig":"MEQCIAqIP5k5g/sL35wBKbopdEN+HhdpAaBK7fyhnwvB9FJtAiAY0AlCIWNJiLtorl8ylootexm6Zf4IMudmnMHZO6xF1w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":507500},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","build:lib":"tsc && vite build --config vite.config.lib.ts"},"_npmUser":{"name":"bryancheru","email":"briancheruiyot501@gmail.com"},"repository":{"url":"git+https://github.com/imaralogic/chat-widget.git","type":"git"},"_npmVersion":"11.5.2","description":"AI-powered chat widget for customer engagement and lead capture","directories":{},"_nodeVersion":"22.17.1","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.1.4","react":"^18.2.0","terser":"^5.44.1","postcss":"^8.4.35","react-dom":"^18.2.0","typescript":"^5.2.2","tailwindcss":"^3.4.1","@types/react":"^18.2.64","autoprefixer":"^10.4.18","vite-plugin-dts":"^3.9.1","@types/react-dom":"^18.2.21","@vitejs/plugin-react":"^4.2.1","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/chat-widget_1.0.0_1767442321767_0.3775756947198947","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bryancheru/chat-widget","version":"1.0.1","description":"AI-powered chat widget for customer engagement and lead capture","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./style.css":"./dist/style.css"},"keywords":["react","chat","widget","ai","chatbot","customer-support","lead-capture"],"author":{"name":"Imara Logic"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/imaralogic/chat-widget.git"},"scripts":{"dev":"vite","build":"tsc && vite build","build:lib":"tsc && vite build --config vite.config.lib.ts","preview":"vite preview"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.2.1"},"devDependencies":{"@types/react":"^18.2.64","@types/react-dom":"^18.2.21","@vitejs/plugin-react":"^4.2.1","autoprefixer":"^10.4.18","postcss":"^8.4.35","react":"^18.2.0","react-dom":"^18.2.0","tailwindcss":"^3.4.1","terser":"^5.44.1","typescript":"^5.2.2","vite":"^5.1.4","vite-plugin-css-injected-by-js":"^3.4.0","vite-plugin-dts":"^3.9.1"},"_id":"@bryancheru/chat-widget@1.0.1","bugs":{"url":"https://github.com/imaralogic/chat-widget/issues"},"homepage":"https://github.com/imaralogic/chat-widget#readme","_nodeVersion":"22.17.1","_npmVersion":"11.5.2","dist":{"integrity":"sha512-Xnb65RsS6DmZep1cF6CxG4Kj2upB/xSGXqNYbI08HwCQ5v1r2k3AtE0f1cC0ac5bxvOl5FN0ZVUcFJaHIdrmpQ==","shasum":"cb01da5f607503cdc14cc330264eb9bd4dea0fdf","tarball":"https://registry.npmjs.org/@bryancheru/chat-widget/-/chat-widget-1.0.1.tgz","fileCount":13,"unpackedSize":527477,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDrVzPxeLA0qlKwRXClGXlnQp3lMKrUEpJoqG0dpljl9AIga7I2QaBc9gaOiC3xkbATF2QPodRsNnegCrXim90GU58="}]},"_npmUser":{"name":"bryancheru","email":"briancheruiyot501@gmail.com"},"directories":{},"maintainers":[{"name":"bryancheru","email":"briancheruiyot501@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chat-widget_1.0.1_1767443964169_0.6619548892663107"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-03T12:12:01.675Z","modified":"2026-01-03T12:39:24.582Z","1.0.0":"2026-01-03T12:12:01.940Z","1.0.1":"2026-01-03T12:39:24.395Z"},"bugs":{"url":"https://github.com/imaralogic/chat-widget/issues"},"author":{"name":"Imara Logic"},"license":"MIT","homepage":"https://github.com/imaralogic/chat-widget#readme","keywords":["react","chat","widget","ai","chatbot","customer-support","lead-capture"],"repository":{"type":"git","url":"git+https://github.com/imaralogic/chat-widget.git"},"description":"AI-powered chat widget for customer engagement and lead capture","maintainers":[{"name":"bryancheru","email":"briancheruiyot501@gmail.com"}],"readme":"# @imaralogic/chat-widget\r\n\r\nAI-powered chat widget for customer engagement and lead capture. Built with React, designed for seamless integration with Next.js, React, and other frameworks.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @imaralogic/chat-widget react react-dom\r\n```\r\n\r\n## Quick Start\r\n\r\n### Next.js (App Router)\r\n\r\n```tsx\r\n// app/components/ChatWidget.tsx\r\n'use client';\r\n\r\nimport { ChatWidget } from '@imaralogic/chat-widget';\r\nimport '@imaralogic/chat-widget/styles.css';\r\nimport { useUser } from '@auth0/nextjs-auth0/client'; // Optional\r\n\r\nexport function ImaraChat() {\r\n  const { user, isLoading } = useUser(); // Optional: for user context\r\n  \r\n  if (isLoading) return null;\r\n  \r\n  return (\r\n    <ChatWidget\r\n      config={{\r\n        apiKey: process.env.NEXT_PUBLIC_IMARA_API_KEY!,\r\n        botName: 'Support Assistant',\r\n        theme: 'dark',\r\n        primaryColor: '#06b6d4',\r\n        \r\n        // Optional: Pass user context\r\n        userContext: user ? {\r\n          userId: user.sub,\r\n          email: user.email,\r\n          name: user.name,\r\n        } : undefined,\r\n        \r\n        // Quick action buttons\r\n        quickActions: [\r\n          { label: 'Get Started', text: 'How do I get started?' },\r\n          { label: 'Pricing', text: 'Tell me about pricing' },\r\n        ],\r\n      }}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n```tsx\r\n// app/layout.tsx\r\nimport { ImaraChat } from './components/ChatWidget';\r\n\r\nexport default function RootLayout({ children }) {\r\n  return (\r\n    <html>\r\n      <body>\r\n        {children}\r\n        <ImaraChat />\r\n      </body>\r\n    </html>\r\n  );\r\n}\r\n```\r\n\r\n### React (Vite/CRA)\r\n\r\n```tsx\r\n// App.tsx\r\nimport { ChatWidget } from '@imaralogic/chat-widget';\r\nimport '@imaralogic/chat-widget/styles.css';\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <ChatWidget\r\n        config={{\r\n          apiKey: import.meta.env.VITE_IMARA_API_KEY,\r\n          botName: 'Support Bot',\r\n          theme: 'light',\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Configuration\r\n\r\n### Complete Config Example\r\n\r\n```tsx\r\n<ChatWidget\r\n  config={{\r\n    // Required\r\n    apiKey: 'your-api-key',\r\n    \r\n    // Branding\r\n    botName: 'Your Bot Name',\r\n    theme: 'dark', // 'light' | 'dark'\r\n    primaryColor: '#06b6d4',\r\n    accentColor: '#2563eb',\r\n    headerSubtitle: 'Online • Replies instantly',\r\n    \r\n    // Initial message\r\n    initialMessage: 'Welcome! How can I help you today?',\r\n    \r\n    // Quick actions (buttons above input)\r\n    quickActions: [\r\n      { label: 'Get Started', text: 'How do I get started?' },\r\n      { label: 'Pricing', text: 'What are your prices?' },\r\n      { label: 'Demo', text: 'Schedule a demo' },\r\n    ],\r\n    \r\n    // User context (for personalization)\r\n    userContext: {\r\n      userId: 'user-123',\r\n      email: 'user@example.com',\r\n      name: 'John Doe',\r\n      isSubscribed: true,\r\n      plan: 'pro',\r\n      metadata: {\r\n        company: 'Acme Inc',\r\n        role: 'admin',\r\n      },\r\n    },\r\n    \r\n    // Features\r\n    enableYouTubeEmbed: true,\r\n    \r\n    // Proactive popup\r\n    proactivePopup: {\r\n      enabled: true,\r\n      delay: 5000, // 5 seconds\r\n      message: '👋 Need help? Chat with us!',\r\n    },\r\n    \r\n    // Booking integration (Cal.com)\r\n    booking: {\r\n      enabled: true,\r\n      calLink: 'your-username/30min',\r\n      buttonText: 'Schedule a Call',\r\n      triggerKeywords: ['demo', 'call', 'meeting'],\r\n    },\r\n    \r\n    // Page rules\r\n    pageRules: {\r\n      showOnPages: ['/pricing', '/contact'],\r\n      hideOnPages: ['/admin', '/login'],\r\n    },\r\n    \r\n    // Event callback\r\n    onEvent: (event) => {\r\n      console.log('Widget event:', event);\r\n      \r\n      if (event.type === 'lead:created') {\r\n        // Track in analytics\r\n        analytics.track('Lead Captured', event.data);\r\n      }\r\n      \r\n      if (event.type === 'intent:subscribe') {\r\n        // Redirect to pricing\r\n        window.location.href = '/pricing';\r\n      }\r\n    },\r\n  }}\r\n/>\r\n```\r\n\r\n## Events\r\n\r\nListen to widget events:\r\n\r\n```tsx\r\n<ChatWidget\r\n  config={{\r\n    apiKey: 'your-key',\r\n    onEvent: (event) => {\r\n      switch (event.type) {\r\n        case 'chat:opened':\r\n          console.log('Chat opened');\r\n          break;\r\n        \r\n        case 'chat:closed':\r\n          console.log('Chat closed, messages:', event.messageCount);\r\n          break;\r\n        \r\n        case 'lead:created':\r\n          console.log('Lead captured:', event.data);\r\n          // { email, phone, name }\r\n          break;\r\n        \r\n        case 'message:sent':\r\n          console.log('User sent:', event.message);\r\n          break;\r\n        \r\n        case 'message:received':\r\n          console.log('Bot replied:', event.message);\r\n          break;\r\n        \r\n        case 'intent:subscribe':\r\n          // User expressed interest in subscribing\r\n          window.location.href = '/pricing';\r\n          break;\r\n        \r\n        case 'intent:booking':\r\n          // User wants to book a call\r\n          console.log('Cal.com link:', event.calLink);\r\n          break;\r\n        \r\n        case 'error':\r\n          console.error('Widget error:', event.message);\r\n          break;\r\n      }\r\n    },\r\n  }}\r\n/>\r\n```\r\n\r\n## Styling\r\n\r\nThe widget includes default styles via `styles.css`. For custom styling:\r\n\r\n```tsx\r\n// Import default styles\r\nimport '@imaralogic/chat-widget/styles.css';\r\n\r\n// Override with custom CSS\r\nimport './custom-widget-styles.css';\r\n```\r\n\r\n```css\r\n/* custom-widget-styles.css */\r\n#imara-chatbot-root {\r\n  /* Widget container customization */\r\n}\r\n```\r\n\r\n## TypeScript\r\n\r\nFull TypeScript support included:\r\n\r\n```tsx\r\nimport type { ChatBotConfig, ImaraEvent } from '@imaralogic/chat-widget';\r\n\r\nconst config: ChatBotConfig = {\r\n  apiKey: 'your-key',\r\n  theme: 'dark',\r\n};\r\n\r\nfunction handleEvent(event: ImaraEvent) {\r\n  // Fully typed event handling\r\n}\r\n```\r\n\r\n## TradePilot AI Example\r\n\r\n```tsx\r\n'use client';\r\n\r\nimport { useUser } from '@auth0/nextjs-auth0/client';\r\nimport { ChatWidget } from '@imaralogic/chat-widget';\r\nimport '@imaralogic/chat-widget/styles.css';\r\n\r\nexport function TradeCopilot() {\r\n  const { user, isLoading } = useUser();\r\n  \r\n  return (\r\n    <ChatWidget\r\n      config={{\r\n        apiKey: process.env.NEXT_PUBLIC_IMARA_API_KEY!,\r\n        \r\n        // Branding\r\n        botName: 'TradePilot AI Chatbot',\r\n        theme: 'dark',\r\n        primaryColor: '#06b6d4',\r\n        accentColor: '#2563eb',\r\n        headerSubtitle: 'Online • Replies instantly',\r\n        \r\n        // Trading bot specific greeting\r\n        initialMessage: `Welcome to TradePilot AI! I'm TradeCopilot...`,\r\n        \r\n        // Quick actions for traders\r\n        quickActions: [\r\n          { label: \"I'm new to this\", text: \"I'm a beginner - which bot should I start with?\" },\r\n          { label: 'Show examples', text: 'Show me performance examples' },\r\n          { label: 'Lifetime vs Monthly', text: 'Why choose lifetime over monthly?' },\r\n          { label: 'Risk protection', text: 'How do I protect against losses?' },\r\n        ],\r\n        \r\n        // User context from Auth0\r\n        userContext: user ? {\r\n          userId: user.sub,\r\n          email: user.email,\r\n          name: user.name,\r\n          isSubscribed: !!(user['https://tradepilotai.com/subscription']),\r\n          plan: user['https://tradepilotai.com/subscription']?.plan,\r\n        } : undefined,\r\n        \r\n        // Features\r\n        enableYouTubeEmbed: true,\r\n        proactivePopup: {\r\n          enabled: true,\r\n          delay: 5000,\r\n          message: '💬 Chat with TradeCopilot',\r\n        },\r\n        \r\n        // Track events\r\n        onEvent: (event) => {\r\n          if (event.type === 'intent:subscribe') {\r\n            window.location.href = '/trading-bots#pricing';\r\n          }\r\n          \r\n          if (event.type === 'lead:created') {\r\n            window.gtag?.('event', 'lead_captured', {\r\n              event_category: 'chat',\r\n              event_label: 'imara_chatbot',\r\n            });\r\n          }\r\n        },\r\n      }}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Getting Your API Key\r\n\r\n1. Sign up at [imaralogic.co.ke](https://imaralogic.co.ke)\r\n2. Navigate to Settings → API Keys\r\n3. Create a new API key for your domain\r\n4. Add to your environment variables:\r\n\r\n```bash\r\n# .env.local (Next.js)\r\nNEXT_PUBLIC_IMARA_API_KEY=your_api_key_here\r\n\r\n# .env (Vite)\r\nVITE_IMARA_API_KEY=your_api_key_here\r\n```\r\n\r\n## Browser Support\r\n\r\n- Chrome (last 2 versions)\r\n- Firefox (last 2 versions)\r\n- Safari (last 2 versions)\r\n- Edge (last 2 versions)\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Support\r\n\r\n- Documentation: [imaralogic.co.ke/docs](https://imaralogic.co.ke/docs)\r\n- Email: support@imaralogic.co.ke\r\n- GitHub Issues: [github.com/imaralogic/chat-widget](https://github.com/imaralogic/chat-widget)\r\n","readmeFilename":"README.md"}