{"_id":"@botmara/vue","_rev":"3-8d7368031441f1c32d4490674992ca5a","name":"@botmara/vue","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@botmara/vue","version":"0.0.1","_id":"@botmara/vue@0.0.1","maintainers":[{"name":"khiilara","email":"cnsituma@gmail.com"}],"dist":{"shasum":"c4f6f0656bb71ff3c8f32c5ff7a7c1cf85929dc5","tarball":"https://registry.npmjs.org/@botmara/vue/-/vue-0.0.1.tgz","fileCount":4,"integrity":"sha512-nCWiGfgGur9nxB+C3kEQErCyTlRbFDbZ6eZZG6cMqhfbxPEZM5ZDjRPlX8mi7VU9YSaZhTvDUtasQ9dTkYUSNw==","signatures":[{"sig":"MEUCIQDyg9iWQwF2TJTwzQDwa+emDisBzZba3yC8HCSvLlhvUAIgZ7L2rLw+VugzqnUIMaTUfpixMAxTCfrh2zYoxnpFsgA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8801},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./dist/*":"./dist/*","./package.json":"./package.json"},"gitHead":"e674351bb96fbaa41a7f4899f58ff9cad3e81733","scripts":{"build":"tsup src/index.ts --format=esm --dts --minify --out-dir dist","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"khiilara","email":"cnsituma@gmail.com"},"_npmVersion":"10.8.2","directories":{},"_nodeVersion":"20.18.1","dependencies":{"@botmara/core":"^0.0.1"},"_hasShrinkwrap":false,"peerDependencies":{"vue":">=3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.1_1758480606580_0.5680207171007337","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@botmara/vue","version":"0.0.2","_id":"@botmara/vue@0.0.2","maintainers":[{"name":"khiilara","email":"cnsituma@gmail.com"}],"homepage":"https://github.com/BotMara/Botmara_Packages#readme","bugs":{"url":"https://github.com/BotMara/Botmara_Packages/issues"},"dist":{"shasum":"c8ff2be6e868d5e0cce8aa8b148e78b934c63b45","tarball":"https://registry.npmjs.org/@botmara/vue/-/vue-0.0.2.tgz","fileCount":4,"integrity":"sha512-zsfXlapy/HTc7QiEeSExAi3B+5z5yKBhRz+VpE0+RqJ0gk/VaJ6lEDiLyIDQIA++XP7KBwFpc71Agr1TOxHQXw==","signatures":[{"sig":"MEYCIQDOdleJJ6hcbaKeYdbLaPFABKONNuwpmaSDr3OJYR9H0QIhAPv0gysarbGMW5eHTlvvVuubZhioM6zBYMIXZRCaGTCs","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19965},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./dist/*":"./dist/*","./package.json":"./package.json"},"gitHead":"e243a0de0243f994cca25bac289152708f99db93","scripts":{"build":"tsup src/index.ts --format=esm --dts --minify --out-dir dist","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"khiilara","email":"cnsituma@gmail.com"},"repository":{"url":"git+https://github.com/BotMara/Botmara_Packages.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"A Vue wrapper for the lightweight BotMara chat widget with section chips, theming, and optional API integration.","directories":{},"_nodeVersion":"20.18.1","dependencies":{"@botmara/core":"^0.0.2"},"_hasShrinkwrap":false,"peerDependencies":{"vue":">=3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.2_1758574182880_0.5348935473738454","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@botmara/vue","version":"0.0.4","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./package.json":"./package.json","./dist/*":"./dist/*"},"scripts":{"build":"tsup src/index.ts --format=esm --dts --minify --out-dir dist","prepublishOnly":"pnpm run build"},"dependencies":{"@botmara/core":"^0.0.4"},"peerDependencies":{"vue":">=3.3.0"},"repository":{"type":"git","url":"git+https://github.com/BotMara/Botmara_Packages.git","directory":"packages/vue"},"_id":"@botmara/vue@0.0.4","gitHead":"e243a0de0243f994cca25bac289152708f99db93","description":"A Vue wrapper for the lightweight BotMara chat widget with section chips, theming, and optional API integration.","bugs":{"url":"https://github.com/BotMara/Botmara_Packages/issues"},"homepage":"https://github.com/BotMara/Botmara_Packages#readme","_nodeVersion":"20.18.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-msAP9OoLaF5qUURijp2MKcbZulrOKLNojRzWIAMPWxuy4RzZejBzUNXq5u5q3sWCGXNJTfrpioVzIxzbxzizOA==","shasum":"5ee4a26996152ebc2fc7bbdf61597d0702264418","tarball":"https://registry.npmjs.org/@botmara/vue/-/vue-0.0.4.tgz","fileCount":4,"unpackedSize":20895,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD0gwfjnuuwapHNITHaZHeAC98urJu4Sv+XHUNO2LrmPgIgDQLajC18lG+cXpp1bRjXyv5Js4qka7cFJyKl83Czx/g="}]},"_npmUser":{"name":"khiilara","email":"cnsituma@gmail.com"},"directories":{},"maintainers":[{"name":"khiilara","email":"cnsituma@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.0.4_1758745893792_0.06163357366040101"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-21T18:50:06.498Z","modified":"2025-09-24T20:31:34.198Z","0.0.1":"2025-09-21T18:50:06.764Z","0.0.2":"2025-09-22T20:49:43.061Z","0.0.4":"2025-09-24T20:31:33.999Z"},"bugs":{"url":"https://github.com/BotMara/Botmara_Packages/issues"},"homepage":"https://github.com/BotMara/Botmara_Packages#readme","repository":{"type":"git","url":"git+https://github.com/BotMara/Botmara_Packages.git","directory":"packages/vue"},"description":"A Vue wrapper for the lightweight BotMara chat widget with section chips, theming, and optional API integration.","maintainers":[{"name":"khiilara","email":"cnsituma@gmail.com"}],"readme":"# @botmara/vue README\r\n\r\n# BotMara UI for Vue — <BotmaraChat>\r\nA Vue wrapper for the lightweight BotMara chat widget with section chips, theming, and optional API integration.\r\n\r\n✨ Features\r\n\r\n🚀 Drop-in widget: one script tag, works instantly  \r\n🧩 Section chips: prefilled FAQs, instant content, or guided prompts  \r\n🎨 Theming: customize accent color, background, radius, placeholders, sizes, notifications, and more  \r\n🧠 Fed data first: serve your own content, with optional API “refinement”  \r\n🌐 Auto endpoint: defaults to https://api.botmara.com/v1/chat with x-api-key  \r\n💻 Universal: optimized for Vue with prop and event support\r\n\r\n**Note on API Customization (v1):** In this v1 release, the widget is designed to work exclusively with BotMara's hosted API at `https://api.botmara.com/v1/chat`. The `apiKey` prop enables integration using your BotMara-provided API key (obtainable from your BotMara dashboard). Custom API keys from third-party services (e.g., OpenAI or Anthropic keys) or fully custom endpoints are not supported in v1, as backend validation is tied to BotMara's infrastructure. However, support for arbitrary API keys and fully configurable endpoints (e.g., for integrating with third-party AI providers or self-hosted models) is in active development for v2. Stay tuned via the BotMara GitHub repo for updates.\r\n\r\n📦 Installation  \r\n```bash\r\nnpm install @botmara/vue\r\n```\r\n\r\nImport:  \r\n```javascript\r\n<script setup lang=\"ts\">\r\nimport { BotmaraChat } from \"@botmara/vue\";\r\n</script>\r\n```\r\n\r\n🚀 Quick Start  \r\n```javascript\r\n<template>\r\n  <BotmaraChat bot-name=\"Acme Helper\" bot-description=\"Ask away.\" />\r\n</template>\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| `botName` | string | \"Assistant\" | Bot display name |\r\n| `botDescription` | string | \"How can I help you today?\" | Intro text and subtitle |\r\n| `sections` | array | [] | Array of chips; see schema below |\r\n| `dataSections` | array | [] | Additional sections to merge/append (useful for dynamic loading) |\r\n| `sectionsMode` | string | \"replace\" | \"replace\" (overwrite sections) or \"merge\" (combine with data-sections) |\r\n| `kb` | object | {} | Widget-level knowledge base for fallbacks |\r\n| `mode` | string | \"bubble\" | \"bubble\" (floating) or \"inline\" (embedded) |\r\n| `position` | string | \"bottom-right\" | \"bottom-right\" or \"bottom-left\" (for bubble mode) |\r\n| `color` | string | #4f46e5 | Primary accent color (e.g., \"#ff9f1c\" or \"orange\") |\r\n| `bg` | string | #ffffff | Chat window background color |\r\n| `text` | string | inherit | Primary text color |\r\n| `textLight` | string | inherit | Secondary/light text color (e.g., for timestamps) |\r\n| `radius` | number \\| string | 12 | Border radius in pixels |\r\n| `size` | string | \"md\" | Widget size: \"sm\", \"md\", \"lg\", \"xl\" (affects padding/scaling) |\r\n| `width` | number \\| string | auto | Inline mode width (pixels or \"auto\") |\r\n| `height` | number \\| string | auto | Inline mode height (pixels or \"auto\") |\r\n| `userBg` | string | inherit | User message background color |\r\n| `userText` | string | inherit | User message text color |\r\n| `assistantBg` | string | inherit | Assistant message background color |\r\n| `assistantText` | string | inherit | Assistant message text color |\r\n| `placeholder` | string | \"Type a message...\" | Input placeholder text |\r\n| `fallbackMessage` | string | \"Sorry, I don’t have that yet. Please contact support.\" | Response when no data/API available |\r\n| `apiKey` | string | — | Your BotMara API key (required for API refinement; v1-only for BotMara) |\r\n| `authType` | string | \"x-api-key\" | \"x-api-key\" or \"bearer\" (for auth headers) |\r\n| `endpoint` | url | — | Custom endpoint URL (v1: limited to BotMara paths; v2: fully configurable) |\r\n| `apiBase` | url | https://api.botmara.com | Base URL for /v1/chat endpoint |\r\n| `tenant` | string | — | Tenant ID for API calls (if required by your BotMara setup) |\r\n| `watermark` | boolean \\| string | off | Show subtle watermark (true/on, false/off, or custom text) |\r\n| `notifySound` | boolean | false | Enable sound notifications for new messages |\r\n| `notifySoundOpen` | boolean | false | Play sound even when widget is open/focused |\r\n| `notifyBrowser` | boolean | false | Use browser notifications (requires permission) |\r\n| `notifyToast` | boolean | false | Show in-app toast notifications |\r\n| `mute` | boolean | false | Silence all audio outputs |\r\n\r\n**Events:**  \r\n- `@send`: Fired on user message send (data: { message, section })  \r\n- `@response`: Fired on bot response (data: { answer, sessionId })  \r\n- `@error`: Fired on errors (data: { error, code })  \r\n- `@limitexceeded`: Fired on rate limits (data: { type: \"rate\" \\| \"daily\" })  \r\n- `@sectionchange`: Fired on section/chip selection (data: { id, title })\r\n\r\n# 🧩 Sections Schema\r\nSections control the chips under the header.\r\n\r\nInstant content\r\n```json\r\n{ \"id\": \"pricing\", \"title\": \"Pricing\", \"content\": \"Free 1k; Pro $19; Scale contact sales.\" }\r\n```\r\n\r\nPrompt guide\r\n```json\r\n{ \"id\": \"shipping\", \"title\": \"Shipping\", \"prompt\": \"What are shipping timelines and returns?\" }\r\n```\r\n\r\nAuto-send prompt\r\n```json\r\n{ \"id\": \"menu\", \"title\": \"Menu & Allergens\", \"prompt\": \"Show me today’s menu\", \"autoSend\": true }\r\n```\r\n\r\nFallback to `kb` if no `content` or `prompt`.\r\n\r\n# 📡 API Contract \r\nIf `apiKey` is set, the widget calls (v1 only):\r\n```bash\r\nPOST ${apiBase || \"https://api.botmara.com\"}/v1/chat\r\n```\r\nRequest (answer mode)\r\n```json\r\n{\r\n  \"tenantId\": \"TENANT_123\",\r\n  \"sessionId\": \"uuid\",\r\n  \"mode\": \"answer\",\r\n  \"message\": \"User text here\",\r\n  \"section\": { \"id\": \"pricing\", \"title\": \"Pricing\" }\r\n}\r\n```\r\n\r\nRequest (refine mode)\r\n```json\r\n{\r\n  \"tenantId\": \"TENANT_123\",\r\n  \"sessionId\": \"uuid\",\r\n  \"mode\": \"refine\",\r\n  \"draft\": \"Draft text from fed data\",\r\n  \"message\": \"Optional user text\"\r\n}\r\n```\r\n\r\nResponse\r\n```json\r\n{ \"answer\": \"String to display to the user\" }\r\n```\r\n\r\n# 🎨 Theming\r\n\r\n```javascript\r\n<BotmaraChat\r\n  mode=\"inline\"\r\n  position=\"bottom-left\"\r\n  color=\"#0ea5e9\"\r\n  bg=\"#ffffff\"\r\n  radius=\"16\"\r\n  placeholder=\"Ask me anything...\"\r\n/>\r\n```\r\n\r\nOr override with CSS variables:\r\n```css\r\n.botmara-chat {\r\n  --botmara-accent: #7c3aed;\r\n  --botmara-bg: #ffffff;\r\n}\r\n```\r\n\r\n🛠 Development  \r\nBuild with `npm run build` to generate lib.\r\n\r\n📜 License  \r\nMIT © 2025 BotMara\r\n\r\n## Example Usage\r\n```javascript\r\n<script setup lang=\"ts\">\r\nimport { BotmaraChat } from \"@botmara/vue\";\r\n\r\n/* Inline sections (mix of content + prompt) */\r\nconst sectionsInline = [\r\n  { id: \"delivery_areas\", title: \"Delivery Areas\", content: \"We deliver within 7km of each city center. Nairobi CBD, Westlands, Kilimani, Parklands, Kileleshwa.\" },\r\n  { id: \"fees\", title: \"Fees\", content: \"Base fee KSh 120 · +KSh 20/km after 2km · Busy-hour surge up to 1.5×.\" },\r\n  { id: \"hours\", title: \"Hours\", content: \"Mon–Thu 09:00–23:00 · Fri–Sat 09:00–01:00 · Sun 10:00–22:00.\" },\r\n  { id: \"order_status\", title: \"Order Status\", prompt: \"Track my order #GLV-83921.\" },\r\n  { id: \"promos\", title: \"Promos\", content: \"Use **glowok10** for 10% off (min KSh 800). *Ends Sunday*.\" },\r\n  { id: \"support\", title: \"Support\", content: \"Chat in-app or email help@glowokdemo.example · Phone 0700000000.\" },\r\n  \r\n];\r\n\r\n/* KB fallbacks (used if a clicked section has no content/prompt) */\r\nconst kbInline = {\r\n  location: \"Pick-up hub: 12 Riverside Dr. Map: https://goo.gl/maps/demo123\",\r\n  reservations: \"Not needed—on-demand. Large orders: book 2h in advance.\"\r\n};\r\n\r\n/* Optional extra sections array via data-sections (just to exercise the prop) */\r\nconst dataSections = [\r\n  { id: \"glowok_plus\", title: \"Glowok+ (Subscription)\", content: \"KSh 399/mo → free delivery on eligible stores over KSh 1000.\" }\r\n];\r\n\r\n/* Smaller set for bubble instance */\r\nconst sectionsBubble = [\r\n  { id: \"quick_help\", title: \"Quick Help\", content: \"- Missing item\\n- Late order\\n- Wrong address\" },\r\n  { id: \"refunds\", title: \"Refunds\", content: \"Most refunds process in 3–5 business days once approved.\" }\r\n];\r\n</script>\r\n\r\n<template>\r\n  <div style=\"padding:24px\">\r\n    <h1>BotMara – Vue Demo (Glowok Delivery)</h1>\r\n\r\n    <!-- INLINE ASSISTANT (full props) -->\r\n    <h2>Inline</h2>\r\n    <div style=\"max-width:720px\">\r\n      <BotmaraChat\r\n        botName=\"Glowok Assistant\"\r\n        botDescription=\"Ask about delivery areas, fees, hours, order status, promos, or support.\"\r\n        watermark=\"on\"\r\n\r\n        tenant=\"demo-glowok\"\r\n        apiKey=\"<YOUR-API-KEY>\"\r\n        authType=\"x-api-key\"\r\n        apiBase=\"https://api.botmara.com\"\r\n        endpoint=\"\"\r\n\r\n        mode=\"inline\"\r\n        position=\"bottom-left\"\r\n        color=\"#22c55e\"\r\n        bg=\"#0b0f19\"\r\n        text=\"#ffffff\"\r\n        textLight=\"#86efac\"\r\n        radius=\"16\"\r\n        size=\"xl\"\r\n        width=\"520\"\r\n        height=\"680\"\r\n\r\n        userBg=\"#22c55e\"\r\n        userText=\"#ffffff\"\r\n        assistantBg=\"gray\"\r\n        assistantText=\"#ffffff\"\r\n\r\n        placeholder=\"Ask about delivery, fees, order status, or promotions…\"\r\n        fallbackMessage=\"(demo) Sorry — I don’t have that yet. Please contact help@glowokdemo.example.\"\r\n\r\n        :sections=\"sectionsInline\"\r\n        :dataSections=\"dataSections\"\r\n        sectionsMode=\"merge\"\r\n        :kb=\"kbInline\"\r\n\r\n        :notifySound=\"true\"\r\n        :notifySoundOpen=\"false\"\r\n        :notifyBrowser=\"false\"\r\n        :notifyToast=\"true\"\r\n        :mute=\"false\"\r\n\r\n        @send=\"(d)=>console.log('send ▶', d)\"\r\n        @response=\"(d)=>console.log('response ✅', d)\"\r\n        @error=\"(d)=>console.log('error ❌', d)\"\r\n        @limitexceeded=\"(d)=>console.warn('limitexceeded ⚠️', d)\"\r\n        @sectionchange=\"(d)=>console.log('section change 🔖', d)\"\r\n      />\r\n    </div>\r\n\r\n    <!-- BUBBLE ASSISTANT (concise props) -->\r\n    <h2 style=\"margin-top:32px\">Bubble</h2>\r\n    <p style=\"color:#64748b; margin: 4px 0 8px\">Click the chat bubble in the corner.</p>\r\n    <BotmaraChat\r\n      botName=\"Glowok Assistant\"\r\n      botDescription=\"Quick answers for delivery & support.\"\r\n      position=\"bottom-right\"\r\n      color=\"#22c55e\"\r\n      textLight=\"#86efac\"\r\n      :sections=\"sectionsBubble\"\r\n      fallbackMessage=\"(demo) We don’t have that yet — call 0712 345 678.\"\r\n      apiKey=\"<your-api-key>\"\r\n      :notifySound=\"true\"\r\n      :notifySoundOpen=\"false\"\r\n      :notifyBrowser=\"false\"\r\n      :notifyToast=\"true\"\r\n      :mute=\"false\"\r\n\r\n      @send=\"(d)=>console.log('send ▶', d)\"\r\n      @response=\"(d)=>console.log('response ✅', d)\"\r\n      @error=\"(d)=>console.log('error ❌', d)\"\r\n      @limitexceeded=\"(d)=>console.warn('limitexceeded ⚠️', d)\"\r\n      @sectionchange=\"(d)=>console.log('section change 🔖', d)\"\r\n    />\r\n  </div>\r\n</template>\r\n```\r\n\r\n📜 License\r\nMIT © 2025 BotMara","readmeFilename":"README.md"}